5 nagyszerű CSS3-effektus, amelyekből többet láthat

Hirdetés

A CSS3-t (a HTML5 erejével kombinálva) az összes fő böngésző gyorsan támogatja (olvasás - bármi, az Internet Explorer kivételével), így gondoltam, hogy itt az ideje, hogy megnézze azokat a hűvös CSS-effektusokat, amelyeket elérhetünk böngészőnk hatalmával és egy kis CSS-kóddal. A legfrissebb Chrome, Safari vagy Firefox böngészővel látnia kell a jelen cikkben bemutatott összes hatást.

Első - Mi a CSS?

Ha azért olvassa el ezt a cikket, mert érdekel, de fogalmam sincs, mit jelent a CSS, hadd magyarázzak meg gyorsan. A CSS a weblapok díszítésére használt kódolási nyelv. Azt jelenti Cascading Style Sheet, és alapvetően csak stílusot és hangulatot ad hozzá egy webhelyhez. A weboldalak minden bizonnyal olvashatók CSS nélkül, de rettenetesek, akárcsak az összes webhely 1995-ben volt. Míg a HTML fájlok leírják az oldal szerkezetét és szöveges tartalmát, a CSS kényszeríti, hogy azok a tervező módon jelenjenek meg és meghatározza mindent, az oldal elrendezésétől, a szöveg méretétől és a színektől kezdve, és most számos fantasztikus hatást a bevezetéssel CSS3.

A múltban, ha a cikkben leírtakhoz hasonló hatásokat érnénk el, a terjedelmes CSS vagy még nagyobb grafika letöltését jelentette volna. A CSS most már leírhatja a böngészőjét, hogyan szeretné az oldal kinézni, és a böngésző kezeli a feldolgozást. Olyan, mintha én átadtam neked a saját ház felépítésének terveit, ahelyett, hogy az egész házat eladnám - ez lényegesen olcsóbb!

Lekerekített sarok

A lekerekített sarkok kódja nagyon egyszerű:

.box_round {-moz-border-sugar: 20px; / * FF1 + * / -webkit-border-sugar: 20px; / * Saf3-4, iOS 1+, Android 1.5 vagy újabb * / szegély-sugár: 20 képpont; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}

Szöveg árnyék

Íme néhány szöveges árnyék kódja:

.box_textshadow {text-shadow: 1x 1x 3xx # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / }

színátmenetek

Íme a CSS színátmenetek kódja:

.box_gradient {háttér szín: # 3f9fe3; háttérkép: -moz-linear-gradiens (felső, # 3f9fe3, #fehér); / * FF3.6 * / háttér: -moz-lineáris-gradiens (felső, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / háttérkép: -ms-lineáris-gradiens (felső, # 3f9fe3, #fehér); / * IE10 * / háttérkép: -o-lineáris-gradiens (felső, # 3f9fe3, #fehér); / * Opera 11.10+ * / háttérkép: -webkit-gradiens (lineáris, bal felső, bal alsó, (# 3f9fe3), ((fehér)); / * Saf4 +, Chrome * / háttérkép: -webkit-linear-gradient (top, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / háttérkép: lineáris gradiens (felső, # 3f9fe3, #fehér); szűrő: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 – IE9 * / }

Forgás

Itt van valami elforgatási kód:

.box_rotate {-moz-transzformáció: forgatás (7,5 fok); / * FF3.5 + * / -o-transzformáció: forgatás (7,5 fok); / * Opera 10.5 * / -webkit-transzformáció: forgatás (7,5 fok); / * Saf3.1 +, Chrome * / -ms-átalakítás: forgatás (7,5 fok); / * IE9 * / transzformáció: forgatás (7,5 fok); szűrő: progid: DXImageTransform. Microsoft. Mátrix (/ * IE6 – IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, méretezési módszer = 'automatikus expanzió'); zoom: 1; }

Élénkség

Ilyen átmeneti kódra lesz szüksége minden elemre, amelyet meg szeretne változtatni. Használnia kell néhány ál-CSS osztályt is (például: vigye az egérmutatót az animálni kívánt tulajdonságok, például szín, méret vagy elforgatás megváltoztatásához)

.box_transition {-moz-üleminek: mind a 0.5s könnyű; / * FF4 + * / -o-átmenet: mind a 0.5s könnyű; / * Opera 10.5+ * / -webkit-átmenet: mind a 0.5s könnyű; / * Saf3.2 +, Chrome * / -ms-átmenet: mind a 0.5s könnyű; / * IE10? * / átmenet: mind a 0,5 másodperc megkönnyebbül; } 

A böngészők közötti inkompatibilitások

Noha a legtöbb modern böngésző bizonyos módon támogatja az összes CSS3-at, másoknak még valamilyen kissé eltérő kódra vagy hackre van szükségük, hogy ez a szabvány sajátos megvalósításával működjön. Például a fenti kódban számos -moz- vagy -webkit-példány jelenik meg, amelyek megelőzik a CSS tulajdonságait, amelyek mind a Mozilla, mind a Webkit alapú böngészőkre vonatkoznak. Ezeknek a további soroknak a írása fájdalmat okozhat, ezért érdemes megnézni a css3 generátor hogy megírja neked.

Következtetés

Az interneten sokkal izgalmasabb lesz az új CSS3 és HTML5 kiterjesztések. Nyilvánvaló, hogy még egy villogó szöveget fogunk látni, és a nagy zümmögés és a valódi tartalom arányát (csakúgy, mint amikor az animált GIF-eket először „fedezték fel”), de hosszú távon megtanuljuk, hogyan kell a CSS3 eszközeit használni érdekesebb web interfészek. És hé, mindig ki is kapcsolhatja!

Ha Ön is tervező vagy webfejlesztő, ne feledje, hogy a CSS3 soha nem lehet az egyetlen lehetőség. Ha webhelye CSS3 nélkül nem fog működni, akkor nem használta helyesen. A CSS-t a tapasztalatok javítására kell használni, nem pedig a program funkcionalitására.