10+ hasznos css trükk 2. rész

Szerző: Gergő | CSS | 2010 August 12. 01:20

Szinte mindannyian használunk CSS-t az oldalaink formázásához, így egy idő után akaratlanul is egyre jobbak leszünk benne. Vannak azonban trükkök és módszerek, amelyekkel nem feltétlenül találkozunk, de nagy hasznát vehetnénk. Ezekből írtam le néhányat.

1. text-indent

Ezt a módszert használom a blog logójánál, segítségével a linkben lévő szöveget -9999px-el balra csúsztatom, és a link háttereként a logót adom meg. Így megoldom a kereső optimalizálást is az elemre, bár még h1 tagbe is tehetném, de én abban hiszek, hogy a forgalom a jó tartalom után jön.

1.
2.
3.
4.
5.
6.
7.
8.

#menu .logo{
    background:transparent url(../images/header_logo.png) no-repeat;
    display:block;
    float:left;
    height:84px;
    text-indent:-9999px;
    width:220px;
}

2. Link formázás fájlformátumtól függően

Sokszor mikor látunk egy linket, nem tudjuk kapásból hova fog vinni, sokkal egyszerűbb lenne, ha egy kis ikon mutatná a típusát: külső hivatkozás, email, dokumentum, stb… Ez a kódrészlet pontosan így próbálja javítani a felhasználói élményt.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

/* külső linkek */
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
 
/* emailek */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
 
/* pdf */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

3. IE textarea görgetősáv eltüntetése

Internet Explorerben elég idegesítő dolog szerintem a textareaban lévő görgetősáv, mert akkor is megjelenik, ha a szöveg nem folyik túl az aktuális mezőn. Ezt egyszerűen orvosolhatjuk a következő kóddal:

1.
2.
3.

textarea{
    overflow:auto;
}

4. Áttetszőség

Sajnos ahány böngésző, annyi féle módon kell az áttetszőséget megadni.

1.
2.
3.
4.
5.
6.

.transparent {
    filter:alpha(opacity=67);
    -moz-opacity:0.67;
    -khtml-opacity: 0.67;
    opacity: 0.67;
}

5. Képek előre betöltése

Bár van erre külön javascript módszer, amit talán majd egyszer én is alkalmazok az oldalamon és cikket is írok róla, de ez is jobb mint a semmi. A képek betöltődnek valahol távol a képernyőnktől, a szomszéd szobában, és amikor szükségünk lesz rájuk, a böngésző már a cachből olvassa be őket.

1.
2.
3.
4.
5.
6.

div.loader{
    background:url(images/hover.gif) no-repeat;
    background:url(images/hover2.gif) no-repeat;
    background:url(images/hover3.gif) no-repeat;
    margin-left:-10000px;
}

6. CSS sprite

Valószínűleg már hallottad ezt a kifejezést, most megtudhatod mi is pontosan. A blogban is használom jobb oldalt a képem alatti facebook, rss és twitter ikonnál. Ha föléjük viszed az egeret, színesek lesznek, és ez mind egyetlen képben van benne. Előnye, hogy így kevesebb kéréssel fordul az oldal a szerverhez, és gyorsabban töltődik be. Megnézheted a kódot Firebuggal, de le is írom:

Először minden linknek megadom azt a képet háttérként, amibe beletettem a 6 ikont, az összetartozókat egymás alá. Itt is láthatod, hogy használom a fent leírt text-indent trükköt, nem csak a szám jár. Ezután az egyes linkekre konkrétan megadom, hogy a hátteret hogy igazítsa alaból, és hogyan ha fölé viszem az egeret. Mivel előzőleg beállítottam a linkre, hogy blokként jelenítse meg, és 64*64 pixeles legyen, úgy kell ezt elképzelni, mintha ott egy ablakot nyitottam volna a falon, és mindig azt a részét látom a háttérnek, ami az ablak keretés belül esik.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

.about .contact a{
	background:transparent url(images/follow.jpg) no-repeat left top;
	display:block;
	height:64px;
	text-indent:-9999px;
	width:64px;
}
.about .contact a.facebook{background-position: 0px 0px;}
.about .contact a.facebook:hover{background-position: 0px -64px;}
.about .contact a.rss{background-position: -64px 0px;}
.about .contact a.rss:hover{background-position: -64px -64px;}
.about .contact a.twitter{background-position: -128px 0px;}
.about .contact a.twitter:hover{background-position: -128px -64px;}

7. Fix Footer

Azt gondolhatnánk, hogy egy olyan footer készítése ami görgetés során folyamatosan az oldal alján látható komoly css és javascript tudást igényel, fellélegezhetünk mert nem. Igaz kell hozzá alkalmazni egy kis IE6 hacket, de én biztosan nem teszem bele az oldalamba, IE6 alatt essen szét úgy ahogy van, a célközönségem nem az egész világ, hanem aki a fejlődéssel tart.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

#footer {
	position:fixed;
	left:0px;
	bottom:0px;
	height:30px;
	width:100%;
	background:#999;
}
 
/* IE 6 */
* html #footer {
	position:absolute;
	top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight
        ? document.documentElement.clientHeight
        : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop
            ? document.documentElement.scrollTop
            : document.body.scrollTop))+'px');
}

8. Függőleges igazítás

Sokszor csak azért hoznánk létre táblázatokat, mert a cellákban lehetőség van függőlegesen középre igazítani a tartalmat. Most azonban láthatunk egy módszert, aminek segítségével más elemeket is cellaként jeleníthetünk meg, elérhetővé téve a függőleges igazítást.

1.
2.
3.
4.
5.

.container {
	min-height: 10em;
	display: table-cell;
	vertical-align: middle;
}

9. Kép töltés

Biztosan láttál már olyan képeket, amiket AJAX segítségével töltöttek be, ezeknél általában egy kis kör pörög jelezve, hogy ott bizony valami készül. Nem egészen ugyanez, de valami egészen hasonló effekt elérhető CSS segítségével is. A trükk, hogy a még be nem töltött képnek háttérként megadjuk a töltő ikonunkat, így amíg a nagyobb képek töltődnek, a hátterük látható a kis töltővel együtt.

1.
2.
3.

img {
	background: url(loader.gif) no−repeat 50% 50%;
}

10. Tartalom középre igazítása

Nem tudom mennyire evidens dolog, de talán van aki még nem találkozott vele. A lényeg, hogy ehhez a bloghoz hasonlóan az oldal tartalma középen jelenjen meg, és ne balra igazítva.

1.
2.
3.
4.

#container{
    margni:0 auto;
    width:940px;
}

+ Egy kis extra

Mivel a text-indentet és a különböző kiterjesztésű fájlokhoz különböző képek rendelését valamennyire az előző részben is leírtam, ezért 11-nek egy kis plusszt adok. Nem tudom hányan használtok Safarit vagy Chrome-ot, de amíg nem jön ki a Firefox 4, csak ezekben látható a következő effekt.

Facebook

Szerintem gyilkos, eddig mindig javascriptet használtam hasonlókhoz, de ha már CSS-be beletették, akkor ezzel díjazom azokat a látogatókat, akik a legfrissebb böngészőt használják, és nyitottak az újdonságokra.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

a{
    background:transparent url(images/follow.jpg) no-repeat left top;
    display:block;
    height:64px;
    text-indent:-9999px;
    width:64px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
 
}
a.facebook:hover{background-position: 0px -64px;}

Összegzés

Érdemes más oldalak kódjaiban turkálni, lehet sok jó dolgot tanulni. Hamarosan elkezdem részletesen átvenni az új CSS3 módszereket, vannak nagyon zsivány effektek, érdemes lesz követni.

Kapcsolódó cikkek

Hozzászólások