haber

Uçak bileti

- Avtor: -primož- 25.01.10

S pomočjo preprostega CSS trika lahko ustvarite občutek, da besedilo ob scrolanju izginja v ozadje. S tem boste popestrili svojo stran in pokazali obiskovalcem, da znate nekaj drugačnega.

PRIKAZ izginjajočega besedila

HTML in CSS koda:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{text-align: center;}

.spodnji_rob{width:100%;
    height:200px;
    position:fixed;
    bottom: 0;
    background: url(spodnji_rob.png) bottom repeat-x fixed;
}

.sredina{
    margin: auto;
    width: 350px;
    padding-bottom: 80px;
}

</style>
</head>
<body>

<div class="sredina">

   Kilometri besedila!

</div>
<div class="spodnji_rob"></div>

</body>
</html>

PRIKAZ izginjajočega besedila

RAZLAGA kode:

text-aligen: center (body) in margin:auto (sredina) sta tukaj zato, da je besedilo poravnano na sredino spletne strani.

.spodnji_rob določa obliko diva v katerem smo, kot ozadje določili sliko preliva. Slika je široka 1px in visoka 200px (kakor div). Preliv boste morali izdelati samo. Jaz sem svojega s pomočjo Photoshopa.

bel preliv

Position: fixed določa, da bo div stalno na zaslonu, bottom: 0 pa določa pozicijo diva, ki je v našem primeru čisto na dnu.

Kako s CSSjem manipulirati z ozadjem si lahko preberete v vodiču CSS ozadje.

.sredina določa stil diva v katerem je besedilo. Padding-bottom mora nujno biti, drugače se spodnjega dela besedila ne vidi, ker ga zakriva preliv.

Upam, da boste uporabili vodič in z njim popestrili svojo spletno stran.

Komentiraj:

Sorodni vodiči
Urejanje obrazcev s CSSjem CSS Osnove CSS ozadje Zamenjava slike s pomočjo CSS HOVER 6 CSS namigov	Z miško označeno besedilo na spletni strani first-child DIV z drsniki Izginjajoče besedilo Tabele in CSS

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé, Čokolada

haber

Uçak bileti

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

Moje-Mesto.com

Oglasi

Naključni CSS vodiči