spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Ernest Sawyer 6.10.2011, článok je súčasťou seriálu CSS triky
Hodnoť článok:
2 0

CSS triky 3: Box shadow (tieň bloku)

Každý sa už stretol s tým, že chcel urobiť tieň nejakého bloku. Dlho jedinou možnosťou bolo riešenie cez obrázky. Časy sa však zmenili, spanilí princ na bielom koni zobudil bozkom šípkovú ruženu v Microsofte a tá integrovala podporu pre CSS3 aj do IE. Ako to teda funguje?

Box shadow

  • Firefox 3.5+
  • Chrome 4+
  • Safari 3.1+
  • IE9+
  • Opera 10.5+

Box shadow je css3 vlastnosť, ktorá nám šikovne rieši vrhanie tieňov blokmi. To nám dáva veľa voľnosti v dizajne, uberá z veľkosti webovej prezentácie, automaticky sa vykresľuje podľa šírky-výšky objektu atď. Prejdime teda k praxi.

CSS definícia (pre vonkajší tieň):

.blok_s_tienom {
-webkit-box-shadow: 1px 2px 10px 0px #444444;/* definícia pre webkit jadro Safari a Chrome*/
-moz-box-shadow: 1px 2px 10px 0px #444444;/* definícia pre gecko jadro Firefoxu*/
box-shadow: 1px 2px 10px 0px #444444;/* CSS3 definícia pre všetky prehliadače */
}

Ukážka č. 1:

Pochopenie box-shadow bude najľahšie pre tých ľudí, ktorí už mali dočinenia s photoshopom. Prvá hodnota určuje horizontálne posunutie, druhá hodnota je vertikálne posunutie tieňa, tretia hodnota je veľkosť rozmazania tieňa do prostredia (Blur radius), štvrtá hodnota je sila rozmazaného tieňa (Spread) a čím je hodnota vyššia, tým je tieň silnejší. Posledná hodnota je farba tieňa.

Dôležitá informácia: pri zadávaní horizontálneho/vertikálneho posunutia tieňa to funguje nasledovne- keď zadávate kladné hodnoty tak vám to posúva tieň doprava a dolu. Keď zadávate záporné hodnoty tak vám to tieň posúva doľava a nahor.

CSS definícia (pre vnútorný tieň):

.blok_s_vnutornym_tienom{
-webkit-box-shadow: inset 3px 3px 10px 0px #222222;
-moz-box-shadow: inset 3px 3px 10px 0px #222222;
box-shadow: inset 3px 3px 10px 0px #222222;
}

Ukážka č. 2:

Jediný rozdiel medzi vonkajším tieňom je tu to, že tu doplníme k definícii ešte atribút inset. U ostatných atribútov ide o to isté ako pri vonkajšom tieni.

Použitie na obrázky

CSS definícia:
.nejakyblok img {
-webkit-box-shadow: 1px 2px 10px 0px #444444;
-moz-box-shadow: 1px 2px 10px 0px #444444;
box-shadow: 1px 2px 10px 0px #444444;
}

Ukážka č. 3:

Zaklínač

Zhrnutie

V tejto časti seriálu ste sa teda mali možnosť dočítať o box-shadow a vidieť nejaké ukážky ako funguje. Z praxe treba podotknúť že ide o veľmi efektívnu CSS3 záležitosť s veľmi širokou možnosťou využitia (po vysvetlení text-shadow a gradientov vám ukážem aj nejaké pekné buttony tvorené len pomocou CSS kde box-shadow využijeme).

Páčil sa ti článok? Ukáž mi svoju lásku a FOLLOWNI ma na https://twitter.com/sawyerernest

Ernest Sawyer Ernest Sawyer

Venujem sa propagačnej grafike, internetovému marketingu, UI designu, vývoju internetových aplikácií, gitare, písaniu a som css3 mág level 7 s palicou fire damage +20 pts =)


Hodnoť článok:
2 0

1 komentár k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Zoltán Mitlík 11.10.2011 16:42:19
a toto sa tiez hodi...nakolko ignorujem uz taketo detaily v IEcku (zalezi mi iba na tom aby weba nebola rozpadnuta) tak pre ostatne prehliadace som vyriesil napriklad takto aj menu v ul li.... :) ak sa mi prisposobuju polozky podla dlzky pisma, uz nemusim riesit cez span v acku, v li a podobne, proste border radius a box shadow a hotove :)
Zajtra.sk > Programovanie > CSS/HTML > CSS triky 3: Box shadow (tieň bloku)


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama