Tworzenie Rocking CSS3 Search Box
CSS3 to język nowej generacji arkuszy stylów. Wprowadza wiele nowych i ekscytujących funkcji, takich jak cienie, animacje, przejścia, promień graniczny itp. Chociaż specyfikacje nie zostały jeszcze sfinalizowane, wielu producentów przeglądarek już zaczęło wspierać wiele nowych funkcji.
W tym samouczku omówimy niektóre z tych funkcji, takich jak cień tekstu, promień graniczny, cienie skrzyniowe i przejścia, aby utworzyć pole wyszukiwania kołysania.
Wersja photoshopa tego pola wyszukiwania została stworzona przez Alvina Thonga i można ją pobrać stąd. Próbowałem odtworzyć to pole wyszukiwania przy użyciu czystego CSS3. Należy zauważyć, że nie wszystkie przeglądarki obsługują funkcje CSS3 Aby wypróbować ten samouczek, należy użyć jednej z nowoczesnych przeglądarek obsługujących funkcje CSS 3.
Gotowy? Zacznijmy!
1. HTML5 Doctype
Zaczniemy od znaczników HTML. To jest bardzo proste, po Dokumentacja HTML5 i deklaracja, mamy z podanym identyfikatorem #obwoluta wewnątrz . Robi się to po prostu, aby zdefiniować szerokość pola zawartości i wyrównać go do środka strony.
Po tym następuje Oto jak wygląda kod: Aby utworzyć duże pole wokół formularza, dodamy style do Ważnym fragmentem kodu jest tutaj Wyjaśnienie: W tym miejscu wstawka słowa kluczowego określa, czy cień będzie wewnątrz pudełka. Pierwsze dwa zera wskazują przesunięcie x, a przesunięcie y, a 3px wskazuje rozmycie. Następna jest deklaracja koloru. Użyłem tutaj wartości rgba; rgba oznacza czerwony zielony niebieski i alfa (krycie). Zatem 4 wartości w nawiasie wskazują ilość czerwieni, zieleni, błękitu i jego alfa (krycie). Zauważysz, że 5 zestawów deklaracji cienia zostało złożonych razem. Można to zrobić, oddzielając je przecinkiem. Pierwsze dwa cienie definiują biały efekt „wewnętrznego blasku”, a następne deklaracje nadają pudełku jego solidny / masywny wygląd. Pobaw się tymi wartościami, aby zrozumieć, jak to działa. Teraz, gdy pole jest kompletne, przejdźmy do stylizacji pola wejściowego. Style zadeklarowane dla pola wejściowego są bardzo podobne do stylów dla dużego pola Wyjaśnienie: Zauważysz, że tym razem rozmycie cienia zostało utrzymane na poziomie 0, aby uzyskać ostry cień i zastosowano pionowe przesunięcie 5px. W kolejnych deklaracjach rozmycie zostało utrzymane na poziomie 0px, ale kolor i przesunięcie y zostały zmienione. Ponownie baw się tymi wartościami, aby uzyskać różne wyniki. Ustawmy styl przycisku wyszukiwania. Oprócz kolorów, przycisk wyszukiwania ma głównie te same style, co w zewnętrznym pudełku. Na przycisku użyto podobnego promienia granicy i cieni pola. Nowa wprowadzona funkcja to Wyjaśnienie: w Aktywny stan przycisku ma nieco więcej zmian. W tym miejscu nadałem przyciskowi pozycję absolutną i „górną” wartość 5 pikseli. Zostało to zrobione, aby nadać mu bardziej naturalny wygląd, tak że ma wrażenie, że przycisk został przesunięty o 5 pikseli. Inne zmiany stanu aktywnego to zmiany koloru tła i cieni. Zauważ, że zmniejszyłem przesunięcie y cieni, aby nadać im wygląd „wciśniętego”. Oto kod aktywnego stanu przycisku przesyłania: To uzupełnia nasze pole wyszukiwania. Wykorzystaliśmy kilka nowych funkcji CSS3. Oto pełny CSS i HTML tego pola wyszukiwania. Mam nadzieję, że podobał ci się ten tutorial. Eksperymentuj z tymi funkcjami i nie zapomnij podzielić się swoimi przemyśleniami. Nota redaktora: Ten wpis jest napisany przez Bharani M dla Hongkiat.com. Bharani jest projektantem / deweloperem z New Delhi w Indiach.#Główny. Ten identyfikator zawiera style, które definiują duże białe pole wokół pola wejściowego i przycisku wyszukiwania. To zadeklarowano w nim. Formularz ma pole wprowadzania tekstu i sprzycisk earch. Oto jak wygląda formularz bez zastosowanych do niego stylów: 
Pole wyszukiwania CSS3
2. Tworzenie obwiedni
#Główny. Z kodu pokazanego poniżej zauważysz, że pole ma szerokość 400px i wysokość 50px. #main width: 400px; wysokość: 50px; tło: # f2f2f2; padding: 6px 10px; border: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,8), wstawka 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,8), wstawka 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,8), wstawka 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
promień graniczny deklaracja i box-shadow deklaracja. Do tworzenia zaokrąglonych narożników używaliśmy deklaracji CSS3 border-radius, prefiksy przeglądarki „-moz-” i „-webkit-” zostały użyte w celu zapewnienia, że działa to w przeglądarkach opartych na gecko i webkit. Deklaracje typu shadow box mogą wydawać się nieco mylące, ale w rzeczywistości są bardzo proste. box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,8), wstawka 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Zapowiedź
3. Stylizacja pola wprowadzania
input [type = "text"] float: left; szerokość: 230px; dopełnienie: 15px 5px 5px 5px; margines: 5px; margin-left: 3px; granica: 1px bryła # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: wstawka 0 5px 0 #ccc, wstawka 0 6px 0 # 989898, wstawka 0 13px 0 #dfdede; -webkit-box-shadow: wstawka 0 5px 0 #ccc, wstawka 0 6px 0 # 989898, wstawka 0 13px 0 #dfdede; box-shadow: wstawka 0 5px 0 #ccc, wstawka 0 6px 0 # 989898, wstawka 0 13px 0 #dfdede;
#Główny. Użyliśmy tego samego promienia granicy (5px). Ponownie zatopiono wiele cieni. box-shadow: wstawka 0 5px 0 #ccc, wstawka 0 6px 0 # 989898, wstawka 0 13px 0 #dfdede;
Zapowiedź
4. Stylizacja przycisku przesyłania
input [type = "submit"]. solid float: left; cursor: pointer; szerokość: 130px; padding: 8px 6px; margin-left: 20px; kolor tła: # f8b838; kolor: rgba (134, 79, 11, 0,8); text-transform: wielkie litery; waga czcionki: pogrubiona; obramowanie: 1px bryła # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0.6), wstawka 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0.6), wstawka 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0.6), wstawka 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: zwolnienie tła 0.2s;
cień tekstu. text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
cień tekstu deklaracja, pierwsze trzy wartości liczbowe to odpowiednio przesunięcie x, przesunięcie y i rozmycie. Wartości rgba wskazują kolor cienia. W następnym zestawie deklaracji (oddzielonym przecinkiem) przesunięcie y otrzymuje wartość -1. Ma to na celu nadanie tekstowi a “Wewnętrzny cień” efekt. Stan zatrzymania / fokusa przycisku przesyłania ma różne wartości koloru tła i cieni. Zapowiedź
Stan „Aktywny” dla przycisku
input [type = "submit"]. solid: active background: # f6a000; pozycja: względna; top: 5px; border: 1px solid # 702d00; -moz-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,6), wstawka 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0.6), wstawka 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,6), wstawka 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Kod pełny (CSS)
#main width: 400px; wysokość: 50px; tło: # f2f2f2; padding: 6px 10px; border: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,8), wstawka 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,8), wstawka 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,8), wstawka 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: left; szerokość: 230px; dopełnienie: 15px 5px 5px 5px; margines: 5px; margin-left: 3px; granica: 1px bryła # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: wstawka 0 5px 0 #ccc, wstawka 0 6px 0 # 989898, wstawka 0 13px 0 #dfdede; -webkit-box-shadow: wstawka 0 5px 0 #ccc, wstawka 0 6px 0 # 989898, wstawka 0 13px 0 #dfdede; box-shadow: wstawka 0 5px 0 #ccc, wstawka 0 6px 0 # 989898, wstawka 0 13px 0 #dfdede; input [type = "submit"]. solid float: left; cursor: pointer; szerokość: 130px; padding: 8px 6px; margin-left: 20px; kolor tła: # f8b838; kolor: rgba (134, 79, 11, 0,8); text-transform: wielkie litery; waga czcionki: pogrubiona; obramowanie: 1px bryła # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0.6), wstawka 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0.6), wstawka 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0.6), wstawka 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: zwolnienie tła 0.2s; input [type = "submit"]. solid: hover, input [type = "submit"]. solid: focus background: # ffd842; -moz-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,9), wstawka 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0.9), wstawka 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,9), wstawka 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [type = "submit"]. solid: active background: # f6a000; pozycja: względna; top: 5px; border: 1px solid # 702d00; -moz-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,6), wstawka 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0.6), wstawka 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: wstawka 0 0 3px rgba (255, 255, 255, 0,6), wstawka 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
