5 fajnych efektów CSS3 Zobaczysz więcej

CSS3 (w połączeniu z mocą HTML5) jest szybko obsługiwany przez wszystkie główne przeglądarki (czytaj - cokolwiek poza Internet Explorerem), więc pomyślałem, że teraz będzie dobry moment, aby zobaczyć niektóre fajne efekty CSS, które możemy osiągnąć za pomocą tej mocy przeglądarki i trochę kodu 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 dorosnąco S.tyle S.heet, i po prostu dodaje stylu i stylu stronie. Strony internetowe są z pewnością 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ą wyświetlane w sposób zgodny z zamierzeniami projektanta i określają wszystko na podstawie układ strony, rozmiar i kolory tekstu, a teraz szereg fantazyjnych efektów dzięki wprowadzeniu 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 to znacznie tańsze!

Zaokrąglone rogi

Internet stopniowo staje się coraz bardziej „okrągły”, ale teraz jest on zestalony w CSS3. Spójrz na ramkę otaczającą ten akapit. To nie jest obraz - spróbuj go kliknąć prawym przyciskiem myszy. Czysty CSS!

Kod zaokrąglonych narożnikó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

Czasami sam tekst może wyglądać naprawdę ostro, ale prosty mały cień naprawdę pomaga. Sprawdź cień, który zastosowałem do tego akapitu.

Oto kod niektórych cieni tekstu:

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

Gradienty

Nigdy więcej płaskich kolorów lub gradientowych obrazów tła, teraz możesz stworzyć fajny gradient używając tylko CSS. Niestety, potrzebujesz kilku linii z powodu bieżących problemów niekompatybilności między przeglądarkami, ale możesz użyć narzędzia, które opiszę później, aby wygenerować je automatycznie.

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: gradient liniowy (góra, # 3f9fe3, #white); filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = "# white"); / * IE6-IE9 * /

Obrót

Trudno wyobrazić sobie zastosowanie tego tekstu, ale może on na przykład dodawać ładne elementy projektu, np. Przy użyciu zdjęć. Ponownie zauważ, że nawet jeśli ten akapit został obrócony, nadal możesz go zaznaczać i wchodzić w interakcje, ponieważ pozostaje on zwykłym tekstem.

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.Matrix (/ * IE6-IE9 * / M11 = 0,9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0,9914448613738104, zmiana rozmiaru) "auto;" zoom: 1;  

Animacja

Och tak, zachowałem najlepsze do końca. CSS3 wprowadza różne formy animacji dla dowolnej liczby opisanych fajnych efektów CSS. W tym akapicie zdefiniowałem właściwość przejścia, jak pokazano poniżej, a także prosty kolor tła i obrót po najechaniu na niego kursorem. Jeśli jeszcze tego nie zrobiłeś, najedź kursorem na ten akapit tekstu, aby zobaczyć efekt w akcji. Możesz animować prawie wszystko!

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ź kursorem, 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 luzowanie; / * FF4 + * / -o-przejście: wszystkie 0.5s easy-out; / * 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, aby je dla Ciebie napisać.

Wniosek

Dzięki nowym rozszerzeniom CSS3 i HTML5 Internet stanie się o wiele bardziej ekscytujący. To prawda, że ​​zobaczymy kolejny strumień migającego tekstu i wysoki stosunek Whiz-Bang do rzeczywistej treści (tak samo jak wtedy, gdy animowane GIF-y były pierwsze “odkryty”), ale na dłuższą metę nauczymy się korzystać z narzędzi CSS3 do tworzenia ciekawszych interfejsów internetowych. 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.