5 skvelých efektov CSS3, ktorých uvidíte viac

Reklama

CSS3 (v kombinácii s výkonom HTML5) je rýchlo podporovaný všetkými hlavnými prehliadačmi (čítané - čokoľvek okrem Internet Explorer), takže Teraz by sme si mali myslieť, že by sme mali vidieť niektoré z vynikajúcich efektov CSS, ktoré môžeme dosiahnuť pomocou výkonu prehliadača a malého kódu CSS. Ak používate najnovší prehliadač Chrome, Safari alebo Firefox, mali by ste vidieť všetky efekty uvedené v tomto článku.

Najprv - Čo je to CSS?

Ak čítate tento článok, pretože vás zaujíma, ale neviete, čo to znamená CSS, rýchlo mi vysvetlím. CSS je kódovací jazyk používaný na zdobenie webových stránok. To znamená Cascading Style Sheet, a v podstate len dodáva štýl a vkus na webe. Webové stránky sú určite čitateľné aj bez ich CSS, ale sú ohavné, rovnako ako všetky webové stránky boli späť v roku 1995. Zatiaľ čo súbory HTML popisujú štruktúru a textový obsah stránky, CSS ich robí tak, ako sa zobrazujú v dizajnéri zamýšľal a určil všetko od rozloženia stránky, veľkosti textu a farieb a od začiatku má niekoľko efektných efektov CSS3.

V minulosti by dosiahnutie rovnakých efektov ako v tomto článku znamenalo stiahnutie objemného CSS alebo dokonca väčšiu grafiku. Teraz CSS môže vášmu prehliadaču len opísať, ako si želá, aby stránka vyzerala a prehliadač spracuje spracovanie. Je to ako keby som vám podával plány na výstavbu vlastného domu namiesto predaja celého domu - je to podstatne lacnejšie!

Zaoblené rohy

Kód pre zaoblené rohy je skutočne jednoduchý:

.box_round {-moz-border-radius: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / polomer ohraničenia: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}

Textový tieň

Tu je kód pre niektoré textové tiene:

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

prechody

Tu je kód pre prechody CSS:

.box_gradient {background-color: # 3f9fe3; background-image: -moz-linear-gradient (hore, # 3f9fe3, #white); / * FF3,6 * / pozadie: -moz-lineárny gradient (hore, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-linear-gradient (hore, # 3f9fe3, #white); / * IE10 * / obrázok na pozadí: -o-lineárny gradient (hore, # 3f9fe3, #white); / * Opera 11.10+ * / obrázok na pozadí: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, od (# 3f9fe3) do (#white)); / * Saf4 +, Chrome * / obrázok na pozadí: -webkit-linear-gradient (hore, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / obrázok na pozadí: lineárny gradient (horný, # 3f9fe3, # biely); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 – IE9 * / / }

otáčania

Tu je kód, ktorý má niečo otočiť:

.box_rotate {-moz-transform: rotate (7.5deg); / * FF3,5 + * / -o-transformácia: rotácia (7,5 deg); / * Opera 10,5 * / -webkit-transformácia: rotácia (7,5deg); / * Saf3.1 +, Chrome * / -ms-transformácia: rotácia (7,5deg); / * IE9 * / transformácia: rotácia (7,5deg); filter: progid: DXImageTransform. Microsoft. Matica (/ * IE6-IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, veľkosť Method = 'auto expand'); zväčšenie: 1; }

animácie

Takýto prechodový kód budete potrebovať pri každom prvku, ktorý chcete zmeniť. Musíte tiež použiť niektoré triedy pseudo CSS (napríklad: vznášať sa, ak chcete zmeniť všetky vlastnosti, ktoré chcete animovať, napríklad farbu, veľkosť alebo rotáciu)

.box_transition {-moz-transition: zmiernenie všetkých 0,5 s; / * FF4 + * / -o-prechod: všetky 0,5s pohodlie; / * Opera 10.5+ * / -webkit-transition: všetko 0,5s pohodlie; / * Saf3.2 +, Chrome * / -ms-transition: všetko 0,5s pohodlie; / * IE10? * / prechod: uvoľnenie všetkých 0,5 s; } 

Kompatibilita viacerých prehliadačov

Aj keď väčšina moderných prehliadačov určitým spôsobom podporuje všetky CSS3, niektoré stále vyžadujú trochu odlišný kód alebo hacky, aby to fungovalo s ich konkrétnou implementáciou štandardu. Napríklad vo vyššie uvedenom kóde uvidíte veľa prípadov, keď niektoré z vlastností CSS, ktoré súvisia s prehliadačmi založenými na Mozilla alebo Webkit, predchádzali -moz- alebo -webkit-. Písanie týchto riadkov navyše môže byť bolesť, takže sa pozrite na generátor css3 napísať ich pre vás.

záver

S novými rozšíreniami CSS3 a HTML5 bude web omnoho viac vzrušujúci. Je pravda, že uvidíme ďalší výron blikajúceho textu a vysoký pomer whiz-bangu k skutočnému obsahu (rovnako ako keď Animované GIF boli prvýkrát „objavené“), ale z dlhodobého hľadiska sa naučíme, ako používať nástroje CSS3 na vytvorenie zaujímavejšieho webu. rozhranie. A hej, vždy to všetko môžete vypnúť!

Ak ste vývojár alebo webový vývojár sami, nezabudnite, že CSS3 by nikdy nemala byť jedinou možnosťou. Ak vaše stránky nebudú fungovať bez CSS3, nepoužili ste ich správne. CSS by sa mal používať na zvýšenie komfortu, nie funkčnosti programu.