Izginjajoče besedilo

izginjajoce_besedilo_css_thumb
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 prelivspodnji_rob

 

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.

Vsi vodiči so na voljo BREZPLAČNO!
Pišite mi

Želite mnenje ali pomoč pri vašem projektu?

Pišite mi in bom pomagal, kakor bom v tistem trenutku lahko.