5 fajnych efektów CSS3, których zobaczysz więcej

Reklama

CSS3 (w połączeniu z mocą HTML5) jest szybko obsługiwany przez wszystkie główne przeglądarki (czytaj - wszystko oprócz Internet Explorera), więc ja pomyślałem, że teraz będzie dobry moment, aby zobaczyć niektóre fajne efekty CSS, które możemy osiągnąć, wykorzystując moc przeglądarki i mały kod CSS. Jeśli używasz najnowszej przeglądarki Chrome, Safari lub Firefox, powinieneś zobaczyć wszystkie efekty przedstawione w tym artykule.

Po pierwsze - Co to jest CSS?

Jeśli czytasz ten artykuł, ponieważ jesteś zaintrygowany, ale nie masz pojęcia, co oznacza CSS, wyjaśnię to szybko. CSS to język kodowania używany do ozdabiania stron internetowych. To znaczy dowstępujący S.tyle S.heet, i po prostu dodaje stylu i stylu stronie. Strony internetowe z pewnością są czytelne bez CSS, ale są ohydne, tak jak wszystkie strony internetowe były w 1995 roku. Podczas gdy pliki HTML opisują strukturę i treść tekstową strony, CSS sprawia, że ​​są one wyświetlane w sposób projektanta zamierzone i określ wszystko, od układu strony, rozmiaru tekstu i kolorów, a teraz wiele fantazyjnych efektów z wprowadzeniem CSS3.

W przeszłości osiągnięcie tego samego rodzaju efektów, jakie opisano w tym artykule, oznaczałoby pobranie nieporęcznego CSS lub nawet większej grafiki. Teraz CSS może po prostu opisać przeglądarce, jak powinna wyglądać strona, a przeglądarka zajmie się przetwarzaniem. To tak, jakbym przekazał ci plany budowy własnego domu zamiast sprzedawać ci cały dom - jest znacznie tańszy!

Zaokrąglone rogi

Kod zaokrąglonych rogów jest naprawdę łatwy:

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

Cień tekstu

Oto kod niektórych cieni tekstu:

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

Gradienty

Oto kod gradientów CSS:

.box_gradient {kolor-tła: # 3f9fe3; background-image: -moz-linear-gradient (góra, # 3f9fe3, #white); / * FF3.6 * / background: -moz-linear-gradient (góra, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-linear-gradient (góra, # 3f9fe3, #white); / * IE10 * / background-image: -o-linear-gradient (góra, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-gradient (liniowy, lewy górny, lewy dolny, od (# 3f9fe3), do (#white)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (góra, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / background-image: liniowy gradient (góra, # 3f9fe3, #white); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# biały'); / * IE6 – IE9 * / }

Obrót

Oto kod, aby coś obrócić:

.box_rotate {-moz-transform: rotate (7.5deg); / * FF3,5 + * / -o-transform: obrót (7,5 stopnia); / * Opera 10.5 * / -webkit-transform: rotate (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotate (7.5deg); / * IE9 * / transform: rotate (7.5deg); filter: progid: DXImageTransform. Microsoft. Matryca (/ * IE6 – IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, zmiana rozmiaru = „automatyczne rozwijanie”); zoom: 1; }

Animacja

Będziesz potrzebować takiego kodu przejścia do dowolnego elementu, który chcesz zmienić. Musisz także użyć niektórych pseudo klas CSS (takich jak: najedź, aby zmienić dowolne właściwości, które chcesz animować, takie jak kolor, rozmiar lub obrót)

.box_transition {-moz-przejście: wszystkie 0,5s łatwości; / * FF4 + * / -o-przejście: wszystkie 0,5 s łatwości; / * Opera 10.5+ * / -webkit-przejście: wszystkie 0.5s easy-out; / * Saf3.2 +, Chrome * / -ms-przejście: wszystkie 0.5s easy-out; / * IE10? * / przejście: wszystkie 0,5s łatwości; } 

Niezgodności między przeglądarkami

Chociaż większość współczesnych przeglądarek obsługuje w pewnym stopniu wszystkie CSS3, niektóre nadal wymagają nieco innego kodu lub hacków, aby działały z ich konkretną implementacją standardu. Na przykład w powyższym kodzie zobaczysz wiele wystąpień -moz- lub -webkit- poprzedzających niektóre właściwości CSS, które dotyczą przeglądarek opartych na Mozilli lub Webkit. Pisanie tych dodatkowych wierszy może być jednak uciążliwe, więc sprawdź generator css3 napisać je dla ciebie.

Wniosek

Dzięki nowym rozszerzeniom CSS3 i HTML5 Internet stanie się o wiele bardziej ekscytujący. To prawda, że ​​zobaczymy kolejny błysk flashowania tekstu i wysoki stosunek Whiz-Bang do rzeczywistej treści (tak jak wtedy, gdy animowane pliki GIF zostały po raz pierwszy „odkryte”), ale na dłuższą metę nauczymy się korzystać z narzędzi CSS3 do tworzenia ciekawszych stron internetowych interfejsy. I hej, zawsze możesz to wszystko wyłączyć!

Jeśli sam jesteś projektantem lub programistą, pamiętaj, że CSS3 nigdy nie powinien być jedyną opcją. Jeśli Twoja witryna nie będzie działać bez CSS3, nie korzystałeś z niej poprawnie. CSS powinien być używany w celu zwiększenia wygody, a nie funkcjonalności programu.