10 najfajniejszych efektów CSS3 i CSS
Wszyscy to wiemy i wszyscy to kochamy, i oczywiście już pewnie już wiesz, że mówię o CSS i CSS3.
Właściwie powinniśmy poświęcić chwilę, aby podziękować CSS3, zanim pójdziemy dalej, aby przyspieszyć czas ładowania wszystkich ulubionych witryn. Oni, jeśli wiedzą, co robią, najprawdopodobniej używają CSS3 zamiast mnóstwa zdjęć, aby zwiększyć czas ładowania użytkownika, co jest całkiem niesamowite.
Jest to całkiem uznany fakt, że po prostu nie potrzebujemy obrazów, aby zrobić wszystko, czego potrzebowaliśmy. Z gradientami CSS3, przejściami i wszystkimi efektami, wydawało się, że naprawdę stracił na wadze z naszych stron internetowych, bo bądźmy szczerzy - obrazy z pewnością je obciążały.
Nie mylcie się jednak, CSS3 i CSS nie mogą zrobić wszystkiego, ale, jak na ironię, wątpię, czy większość z nas zdaje sobie sprawę ze swoich ograniczeń lub co popycha krawędzie swoich możliwości.
Cóż, dzisiaj jesteśmy tutaj, aby to odkryć. Zanurzmy się więc w tym, co z pewnością będzie ciekawą i fascynującą podróżą odkrycia dla nas wszystkich, którzy są fanami CSS3 i CSS.
Uwaga: robię to wszystko z założeniem, że użytkownik jest w Google Chrome, więc proszę, z miłości do wszystkiego, co święte, zanim zaczniesz je implementować w swojej witrynie, użyj odpowiednich prefiksów dla innych przeglądarek. Nie kopiuj i nie wklej tutaj, i myśl, że wszystko będzie działać idealnie, ponieważ może - ale nie musi.
Efekty tekstowe
Anaglify
Mówią, że Anaglyphy, nawet jeśli są zrobione w CSS3, mogą być wyświetlane w 3D, jeśli masz w domu trochę głupich gogli. Nie jestem tego pewien, ale wiem, że może on wyglądać niesamowicie w przypadku niektórych tematów dla różnych projektów (takich jak motyw retro do gier wideo i podobne).
Efekt ten powstaje przez przesunięcie dwóch czerwonych, zielonych i niebieskich kolorów (rgb). Aby zacząć działać w tym celu, potrzebujemy dwóch takich samych słów, a my potrzebujemy ich obu, aby móc być celem ataków CSS, abyśmy mogli pracować na naszych powtórzeniach i magii kolorów. W tym przypadku, zamiast dodawać niepotrzebny kod HTML do naszego znacznika, którego używamy dla tych słów, możemy po prostu użyć pseudo klasy ": after", aby dodać drugie słowo. Aby to zrobić, użyjemy tego przykładu: wyobraźmy sobie, że używamy H1, aby wyświetlić nasze pierwsze słowo, takie jak:
Anaglyph
Zrobimy wtedy:
h1:after {content: “Anaglyph”;}To da nam to miłe powtórzenie i wyświetli: "Anaglyph Anaglyph" na stronie. A więc, teraz zacznijmy stylizować to, abyśmy mogli rzucić się na niektóre z tych fantazyjnych 3D urody.
h1 {display: inline;position: relative;letter-spacing: -5px; /* This will push it together giving us a nice 3D vibe */color: rgba(0,0,255,0.5); /* This will give us a blue at 50% opacity */}h1:after {content: “Anaglyph”;position: absolute;left: 8px; top: 6px; /* These are aligning it to be where we’d like relative to the last word */color: rgba (255,0,0,0.5); /* This gives us a red at 50% opacity */}Używanie RGBA jest tutaj bardzo ważne, ponieważ pozwala ustawić przezroczystość alfa, tak aby nałożony tekst nie blokował całkowicie tekstu pod nim i zapewnia nam dobrą przejrzystość. Tekst w pozornym pseudo elemencie jest więc absolutnie umiejscowiony tak, aby był nieznacznie przesunięty względem tekstu bazowego, jak mogłeś zobaczyć, i to jest bardzo ważne.
Pamiętaj, aby bawić się tymi pozycjami nieco, jak chcesz i przetestować różne kolory, ponieważ jest tu dużo zabawy. Ale aby zakończyć ten efekt, rzucamy czerwoną nakładkę, a voila mamy efekt anaglificzny.
Gradienty tekstu
Gradienty CSS3 zdają się w tych dniach wściekłość i słusznie. Jak już wcześniej wspominaliśmy, były one czymś, co wcześniej było dostępne tylko dzięki programowi Photoshop i osadzaniu obrazów w Twojej witrynie. Teraz możesz zrobić to wszystko poprzez odrobinę czarów CSS3.
I, rzecz jasna, z zaklęciami, które nie są zbyt skomplikowane. Zobaczmy więc, co mamy do zaoferowania w kategorii gradientów czcionek i jak wywołać w niej magię.
Liniowy, od góry do dołu:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#00000), to(#FFFFFF));Liniowy, od lewej do prawej:
-webkit-linear-gradient(left, #000000, #FFFFFF);Linearny gradient (z równomiernymi kolorami):
-webkit-gradient(linear, left top, right top, from(#000000), color-stop(0.25, #FFFFFF), color-stop(0.5, #000000), color-stop(0.75, #1a82f7), to(#FFFFFF));Gradient radialny:
-webkit-radial-gradient(circle, #000000, #FFFFFF);Gradient radialny (pozycjonowany):
-webkit-radial-gradient(80% 20%, closest-corner, #000000, #FFFFFF);Przygotujmy tutaj przykład i zacznijmy od h1.
CSS3 Gradient
Następnie zacznijmy stylizować go przy użyciu odrobiny magii CSS3:
h1 {font-size: 100px;font-family: somethingfancy_or_not, arial; /* These two can be anything you like *//* Here’s where the fun starts */-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to (rgba(0,0,0,1)));}h1:after {content: “CSS3 Gradient”;color: #d6d6d6;text-shadow: 1px 2px 5px #000;Teraz nie należy mylić liczby nawiasów użytych w ustawieniach RGBA, ponieważ często mogą one mylić nawet najbardziej doświadczonych programistów, a my wszyscy będziemy je czasami zapominać i zgubiać, więc pamiętaj, że wszyscy jesteśmy ludźmi .
Ale pozwól mi rozbić to, co się tutaj dzieje. Tutaj używamy obrazu maski jako sposobu na przycięcie widocznej części elementu zgodnie z przezroczystością obrazu maski. Następnie używamy pseudoelementu after, aby renderować ładny tekst-shadow na naszym elemencie.
Nie jest to oczywiście wymagane w przypadku gradientu, ale jest to dobry sposób na to, aby świergotować, co się dzieje i na pewno pozwala zobaczyć, jak daleko możemy rozciągnąć prosty gradient. A teraz przejdź się i baw się ze wszystkimi stylami gradientów i upewnij się, że wymyśliłeś coś dla swojego następnego projektu.
Kapiący tekst
Jedną z niewielu rzeczy, których bardzo rzadko potrzebujemy, ale które mogą faktycznie wydawać się interesujące, jest kroplowanie tekstu, aby wyglądało na to, że rozpada się z nienaruszonymi literami. Czasami może tak być, ponieważ mamy obsesję na punkcie wampirów i chcemy, aby tekst krwawił czerwoną krwią zemsty, LUB może to być po prostu dlatego, że chcemy, aby kapiąc w czasie, gdy czytaliśmy, był błękitny kolor. Czasami widziałem nawet, jak ludzie używają tego z elementami div, gdy strona przewija się od powierzchni do podwodnej stylizacji, gdzie podwodne obszary są znacznie bardziej rozmyte i dlatego wydają się kapać trochę (lub wydają się być pod wodą).
Składnia tego jest dość prosta, więc zostawię to skomplikowane wyjaśnienie - ale dam ci wstęp do tego, jak to zrobić w jednym zdaniu. Wszystko opiera się na powtórzeniach. Powiedzmy, że chcesz dość mocno spłynąć, dobrze byśmy użyli około 15 lub więcej cieni tekstu w różnych odstępach czasu, aby uzyskać ten efekt. Jeśli chcemy tylko kilku, użyjemy tylko kilku z mniejszymi przesunięciami. Przykład użycia czerwonego efektu wampirycznego będzie:
.drip {color: #EEE;text-shadow: 4px 4px 1px #300000;4px 6px 1px #400000; 4px 8px 1px #500000; /*......and so on, until*/ 4px 60px 5px #FF0000;}Zasadniczo możesz zachować to aż do osiągnięcia pożądanego limitu (przesunięcie osi Y) lub pracować wstecz, jeśli chcesz przeciwnego i mniejszego przesunięcia. Pamiętaj jednak, aby nie nadużywać tego - ponieważ, jak powiedziałem, jest to bardzo niezwykły efekt i jestem pewien, że nie ma tu zbyt wielu przypadków użycia. Ale spróbujcie tego na pewno, ponieważ powtarzające się cieniowanie tekstu jest naprawdę interesujące.
Stylowe funkcje
Zszyty wygląd
Jeśli nie chcesz używać Photoshopa lub jQuery, aby uzyskać szaleńcze efekty szyte, to CSS3 jest prawdopodobnie twoim następnym najlepszym wyborem. Teraz, oczywiście, każdy może rzucić przerywaną ramkę na kawałek lub div i powiedzieć, że jest zszyta, ale prawdziwym kluczem jest użycie go w stycznej z kilkoma innymi funkcjami CSS3, które naprawdę wyróżniają się jako stylowe dodatki. na.
To, co naprawdę chcesz zrobić, to rzuć na ładny cień z dużym promieniem rozsunięcia. Powodem jest to, że chcesz uzyskać kolor tła, aby wykrwawił się na granicy, i aby to zrobić, ustaw promień rozproszenia (czwarty element) naprawdę wysoki. Na przykład chciałbym zrobić coś takiego:
.stitched_element {border: 2px dashed #ffffff;box-shadow: 0 0 0 8px #ff0030;}Da ci to dobry efekt, że inni ludzie wydają wydawać linie i linie niepotrzebnego CSS do tworzenia. W rzeczywistości jest to efekt, w którym możesz chcieć zagrać w tworzenie go najpierw w Photoshopie, żeby zrozumieć teorię stojącą za tym, co tu robisz.
Prawdopodobnie spędziłem 6 godzin w Photoshopie w zeszłym miesiącu bawiąc się szytymi efektami, ponieważ szczerze mówiąc, są naprawdę zabawni i pomagają zrozumieć, do czego dokładnie dążysz, aby zrobić CSS.
Ten fantazyjny ampersand
Możesz zadać sobie pytanie: "Skąd w świecie ludzie zdobędą niesamowite znaki, które widzę w kółko przez cały czas". Możesz nawet wyszukiwać wysokie i niskie za jednym ze wszystkich standardowych czcionek, których używasz, i dobrze, ty jak ja, prawdopodobnie nie znalazłem go, dopóki nie zobaczysz, że ktoś o tym pisze. Powodem jest to, że jest to czcionka, którą musisz licencjonować, aby móc z niej korzystać, a przez to wielu z nas woli czcionkę internetową lub standardowe alternatywy.
Jedną z doskonałych alternatyw dla systemu operacyjnego Mac OSX (domyślnie jest) jest kursywą "Cochin". Jeśli alternatywnie wolisz Czcionkę Google Web, sprawdź Josefin Sans .
Wiem, że to nie jest całkiem CSS3, ale jest to miła mała akcja @ font-face iw tym przypadku ustawię cię z linkiem do pobierania czcionki i wszystkiego. Teraz jest to czcionka internetowa Google, więc pokazują, jak to zrobić na ich stronie, ale dobrze jest pamiętać, że możesz łączyć dwa atrybuty do pracy z czcionkami. Aby ułatwić ten czas, umieściłem go w kodzie tutaj, a to bezpośrednio do czcionki, która daje nam wymyślny znak ampersand. Ale pamiętaj, aby grać za pomocą kursywy tych czcionek, ponieważ zazwyczaj otrzymasz naprawdę interesujące informacje na temat amperów i zastosowań.
@font-face {font-family: ‘Josefin Sans’;src: url(https://fonts.googleapis.com/css?family=Josefin+Sans);}I proszę. Kilka uwag na temat użytkowania. Jak można zauważyć na powyższym obrazku, jest to bardzo "fantazyjny" znak ampersand i najlepiej go stosować, gdy kontrastujemy dwie twarze czcionek, zaproszenia ślubne lub inne "fantazyjne" wydarzenia. Używałem go również w bardzo nowoczesnych projektach, więc nie myśl, że nie możesz go użyć, ponieważ robisz coś nowoczesnego. Po prostu mówię, że to nie może być idealne rozwiązanie "grunge", jeśli o to właśnie chodzi. Muszę jednak powiedzieć, że pomiędzy odważnym a cienkim krojem pisma ten wygląd jest piękny.
Jednostronny pudło-cień
Wszyscy znamy i kochamy cienie, ale czasami typowy cień może nie być dokładnie tym, czego chcemy. Na przykład czasami możemy wykonać realistyczne cieniowanie pewnego elementu na naszej stronie i chcieć, aby cień pojawiał się tylko po jednej określonej stronie. Lub możemy być zainteresowani robieniem elementu hover lub elementem odbijającym i spójrzmy prawdzie w oczy - nic nie wzmacnia piękna w tym jak jednostronny cień pudełka.
To, co tutaj robimy, jest całkiem proste, użyjemy ujemnego promienia rozproszenia, aby wycisnąć cień z jednej krawędzi. Wyobraźmy sobie na przykład, że mamy szary element box i ustawiamy go na szerokość i wysokość 40 pikseli na 40 pikseli. Nasz CSS wyglądałby następująco:
.one-sided-shadow {-webkit-box-shadow: 0 8px 6px -6px black}To da nam dokładnie to, czego potrzebujemy, i to w jednym uproszczonym wierszu kodu. Tak jak powiedziałem, jeśli używasz elementu oświetleniowego (lub motywu) do cieniowania witryny w jednym określonym kierunku, jak gdyby był obrazem, jest to idealne rozwiązanie dla Ciebie.
Podobnie, podskakiwanie lub najechanie: elementy odskoku są po prostu idealne do tego. W tym drugim przypadku aktywuj cień po rozpoczęciu odbicia i wyłącz go po wylądowaniu, a następnie wow wydaje się, że zamieniasz się już w projektanta.
Przechodzenie do CSS Sprite
Sprites CSS są zabawną techniką i większość z nas jest bardziej niż prawdopodobna. Ale na wszelki wypadek nie, podsumujmy, czym one są. Sprite CSS to jeden duży obraz, który zawiera co najmniej dwa obszary wyświetlania, jeden w widoku i taki, który pojawia się po interakcji użytkownika (zwykle po najechaniu myszą).
Teraz, gdy już wiesz, czym one są, skonfigurujemy nasz pierwszy i prawdopodobnie najbardziej podstawowy obraz ikonki CSS. W takim przypadku użyjemy wskaźnika myszy, a dwa obrazy mogą być dowolne, ale my nazwiemy to "sprite.png". Będziemy również używać elementu do umieszczenia naszego łącza i naszego obrazu, dlatego użyjemy składni CSS w tle. Nasz kod będzie wyglądał następująco:
a {display: block;background: url(sprite.png) no-repeat;height: 50px /*Example that is needed for the hover explanation*/width: /*the appropriate width here*/}a:hover {background-position: 0 -50px;}Jak widać, prawdziwym sekretem jest tutaj to, co dzieje się, gdy użytkownik najedzie na element obrazu, a obraz przejdzie na osi Y na długości 50 pikseli. Dzieje się tak dlatego, ponieważ jest to dokładna wysokość obrazu, więc nie będzie żadnych przestojów ani nakładania się podczas przesuwania przejścia, a będzie wyglądać tak czysto i gładko, jak to tylko możliwe.
To jest prawdziwa tajemnica obrazów sprite'ów i unoszą się nad działaniami. Bez względu na to, że możesz mieć bardzo dziwny lub podłużny obraz, musisz mieć przesunięcie y (lub x), w zależności od tego, do czego zmierzasz, dokładnie na szerokość (x) lub wysokość (y) twojego elementu . Czysta i prosta - i całkiem zabawna w tym Teraz chodź i twórz własne duszki!
Warstwy
Możesz być zainteresowany układaniem warstw na swojej stronie. Czy to papier, liście, drzewa, czy bardziej niedorzeczne rzeczy, jak twarze ludzi, możesz użyć tej samej składni, aby uciec od tego, co chcesz. Zasadniczo jest to wybór cienia pudła z pierwszego elementu, aby uzyskać "efekt", którego szukasz.
W tym przypadku użyjemy prostego elementu div z szarym tłem, aby można było zebrać to, co mamy na myśli. Jak zwykle zanurkujemy, a potem wyjaśniamy.
.layering {background: #EEE;box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 10px 0 -4px #EEE, 0 10px 2px -5px rgba(0,0,0,0.15), 0 20px 0 -11px #EEE, 0 20px 1px -8px rgba(0,0,0,0.15);}To, na co patrzymy, może wydawać się nieco skomplikowane, ale w rzeczywistości jest raczej proste. To, co się dzieje, to cień, warstwa, cień, warstwa i cień. Tak więc najwyższą warstwą w tym przypadku jest div z kolorem tła #EEE. Następnie mamy pierwszy cień naszego cienia działający jak cień na górnej warstwie, następnie wyświetlana jest druga warstwa (uwaga #EEE), a następnie cień drugiej warstwy, a następnie trzecia warstwa (zauważmy ponownie #EEE) a następnie jego cień.
Całkiem proste, a dzięki dokonanym przez nas wyborom daje miły efekt złożony lub warstwowy. Znowu, można to wykorzystać z czymkolwiek naprawdę, po prostu trzeba majstrować przy wyrównaniu, aby to naprawić. Pamiętaj jednak, że podczas układania warstw najlepiej będzie pracować od lewej górnej do prawej dolnej strony za pomocą obrazów lub elementów div, ponieważ przepływają one bardziej naturalnie.
Funkcjonalność
Responsywny design: styl iPada
Spójrzmy prawdzie w oczy, responsywny design jest niezwykle ważny. I nie obchodzi mnie to, że nie znosisz zapytań o media i płynnych sieci, będziesz ich używać za kilka lat, niezależnie od tego, czy je lubisz. Oczekuj, że będzie to standard w projektowaniu stron internetowych, zwłaszcza biorąc pod uwagę liczbę różnych rozmiarów ekranu i rozdzielczości urządzeń, które trafiają na rynek i są przyjmowane w alarmująco wysokim tempie - od 27-calowych komputerów iMac do iPoda touch i wszystko pomiędzy i wszyscy przeglądają internet.
Wszyscy potrzebują miłego doświadczenia i, szczerze, nikt nie chce tworzyć innej wersji swojej strony dla każdego urządzenia, ponieważ to po prostu za dużo pracy. Jesteśmy zajęci ludźmi, więc potrzebujemy rozwiązania dla zapracowanych ludzi. Właśnie tam pojawiają się zapytania o media. To, na czym się tutaj skupię, to zapytania specyficzne dla iPada, ale z tego możesz zebrać to, czego potrzebujesz, aby wypchnąć twoje zapytania do innych rozmiarów ekranu. Potem następuje zmiana układu witryny w celu odzwierciedlenia zmienionych rozmiarów ekranu. Zrzućmy więc trochę kodu i porozmawiajmy o tym później.
@media only screen and (device-width: 768px) { /*General layouts*/ }@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {/*Portrait*/ }@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { /*Landscape*/ }To nie powinno być zbyt trudne, aby zobaczyć, co się tutaj dzieje, ale to, co robimy, to korzystanie z zapytań o media " specyficzna składnia załamanie i umożliwienie oglądania naszej strony internetowej, która najlepiej pasuje do określonych rozmiarów ekranu. Załóżmy, że mamy H1 z tekstem o rozmiarze 60px ... cóż, prawdopodobnie jest to dobre dla iMaków i innych dużych komputerów stacjonarnych, ale to więcej niż prawdopodobnie nie będzie pasowało do reszty Twojej witryny w bardziej konserwatywnym widoku iPada . Więc co zrobimy, to wewnątrz naszego kodu piszemy:
@media only screen and (device-width: 768px) { h1: font-size 60px }A to odpowiednio obniży rozmiar ekranu iPada. Oczywiście te rozmiary były tylko przykładami, które najlepiej byłoby przetestować witrynę pod kątem konkretnych rozmiarów i takich, zanim przejdziesz do finalizacji zapytań, ale jest to metoda, która pozwoli Ci zaoszczędzić mnóstwo pracy na dłuższą metę (i oburzenie użytkownika ).
UWAGA: Jeśli znasz programowanie obiektowe, to jest to coś, co będzie miało drugą naturę. To, na co patrzymy, jest w zasadzie rodzajem stwierdzeń "jeśli tak" dla renderowania naszej witryny przez naszą przeglądarkę. Moim zdaniem jest to jedna z najlepszych rzeczy, które wyjdą z CSS, cóż ... nigdy.
Pomocna nawigacja (rozwijanie)
Nawigacja nie zawsze jest idealna na naszych stronach, dlatego czasami musimy wrócić do deski kreślarskiej, aby przemyśleć, jak to robimy i czy możemy użyć CSS3, aby nam pomóc.
Wyobraźmy sobie, że mamy pasek nawigacyjny na górze naszej strony internetowej, ale chcielibyśmy dodać więcej popu, gdy użytkownicy najechali na niego myszką, dając do zrozumienia, że mogą z niej korzystać i że jest to dla nich atrakcyjna atrakcja. Kliknij. Najlepszym sposobem na to byłoby rzucenie prostej transformacji za pomocą metody łatwości. To, co zrobimy, to podać przykład dotyczący elementu "nav".
Oczywiście w tym przykładzie będziesz musiał wykonać całą konfigurację samodzielnie, właśnie patrzymy na dokładny element przejściowy, który pomoże ci w tym przypadku.
nav a {-webkit-transition: width 0.15s ease;}lub
nav a {-webkit-transition: all .2 ease-in-out; } /* based on your preference for anims obviously */nav a:hover {-webkit-transform: scale(1.1);}Kilka uwag o właściwościach przejściowych w webkitach, aby można było z nich korzystać w witrynie. Jest to magiczna różdżka i przyjmuje trzy wartości. Właściwość, która jest animowana, czas trwania animacji i "funkcja pomiaru czasu" (wpływa to na przyspieszenie animacji w celu uzyskania bardziej płynnego efektu).
Istnieje wiele sposobów pracy z nimi i wiele innych zasobów, takich jak tutaj i tutaj i tutaj . Miałem jednak nadzieję, że dasz ci wstęp do tego, co jest z nimi możliwe, i naprawdę dojrzewa twoje pragnienie zrozumienia, dzięki czemu możesz wyjść i eksperymentować całkiem sporo. Dużo zabawy, którą można tu mieć.
I tak dochodzimy do końca naszej podróży. Trzeba zaznaczyć, że nie była to wyczerpująca ani kompletna lista w żaden sposób, ale mam nadzieję, że wzbudziło to twoje zainteresowanie niektórymi z ciekawszych rzeczy, które możesz zrobić przy pomocy CSS i CSS3. To szalony i zabawny świat, a czasem frustrujący.
W końcu wszyscy wiemy, jak to jest, gdy projektant nie może uzyskać elementu div, aby poprawnie wyświetlić element podrzędny, lub gdy element tekstowy nie wykonuje dokładnie tego, co chcemy.
Bądź więc w kontakcie ze swoimi ulubionymi projektantami i stwórz krąg przyjaciół w tej przestrzeni, z którymi możesz się komunikować i dzielić tymi sztuczkami, ponieważ wiem, że nauczyłem się większości z tego, co dziś podzieliłem i mam powiedzieć, że uważam, że to najlepsza rzecz, jaką możesz zrobić jako projektant stron internetowych. Twitter jest świetnym źródłem do tego, i szukaj [kropka] twitter jeszcze lepiej. W międzyczasie zostawiam cię do eksperymentu, ale nie przed ostatnim zdaniem.
Pójdźcie młodzi Padawan i bawcie się zabawą, która czeka na was jako projektant stron internetowych w dzikim świecie stylu i wzornictwa w CSS (3).
Jakie są twoje ulubione nowe techniki CSS3? Lub mało używane / mało znane techniki CSS? Daj nam znać w komentarzach!