Variációk egy témára sorozat
Úgy döntöttem írok egy cikk sorozatot amiben a css különböző elemei lesznek kiterítve. Olyan elemek amiket nem használunk gyakran, vagy elsíklunk afelett, hogy hányféleképpen lehet alkalmazni őket. :) A mai napon a text-shadowról írok nektek.
A text shadow egy hasznos css tulajdonság amit a szövegedhez adhatsz. Használhatod bárhol, bármilyen böngészőben. Mutatok pár variációt, hányféleképpen mutat jól. Az alapkód:
text-shadow: 0px 0px 0px #fff;
Az első két px érték a helyére utal az árnyéknak, ha - akkor fel és balra mozdul ha + akkor pedig jobbra és le. A harmadik px érték a sűrűségre/kiterjedésre utal.
<offset-x> <offset-y> <blur-radius> <color>
Hányféleképpen használhatjuk ezt az egyszerű tulajdonságot?
001. Blogbejegyzéseknek, tartalomnak adni egy szép, éles, de halvány effektet. Szerintem ettől kifejezetten profibbnak tűnik néha egy-egy oldal.
text-shadow: 1px 1px 0px #000
|
Lorem ipsum dolor sit amet, noluisse constituam eam et, ius ei epicurei delectus persecuti. Ut lucilius praesent duo, mel ut platonem persecuti dissentiunt, cu eligendi euripidis vituperatoribus sea. At sit postea reprimique, doming malorum scripserit usu ei. In eum dicat pericula accusamus, eos ei probo epicurei iudicabit. Doming ornatus atomorum eu vix, id eos mucius fierent molestie, est elit oporteat volutpat ne. Zril timeam invenire pro at, fastidii conceptam ea vis, per utamur dolorem et.
|
002. Erős kiterjesztés, kiemelkedő szövegeknek.
text-shadow: 0px 0px 6px #fff
Lorem ipsum dolor
003. Színkavalkád címsoroknak. Itt is van legalább 3-4 árnyék.
text-shadow: 3px 3px 3px #ffe826, -2px -2px 3px #ffe826, 5px 5px 3px #ffe826, -4px -4px 3px #ffe826
Lorem ipsum dolor
004. Tényleg az árnyékot adja vissza. Fekete/fehér/szürke és távolabb áll. A példában kicsit homályosabb, de lehet éles is.
text-shadow: 3px 3px 2px #333232,3px 3px 2px #333232
Lorum ipsum dolor.
005. Futurisztikus 3d hatás, két féle árnyékkal.
text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902)
Lorum ipsum dolor.
006. Többféle színes éles háttér.
text-shadow: 2px 0px 0 #ffd217, 0px 2px 0 #5ac7ff, 0px 3px 0 #ffd217, 3px 0px 0 #5ac7ff
Lorum ipsum dolor.
007. Nagy szívárványos háttér, ha sűrűbb úgy is kinézhet, mint a tűz nyelvek mögötte :)
text-shadow: 0 0 10px #fefcc9, 4px -4px 10px #feec85, -2px -2px 10px #ffae34, 2px -4px 30px #ec760c, -2px -6px 10px #cd4606, 0 -8px 40px #973716, 10px -9px 10px #451b0e
Lorum ipsum dolor.
|
AJÁNLOM AZ OLDALT
"So bring your passport girl, I'm trying to show you the world"
