6 Fajne podpisy obrazów z CSS3
CSS3 jest naprawdę potężny. Kiedyś potrzebowaliśmy obrazów lub wiązek kodu JavaScript, aby uzyskać prosty efekt przejścia. Obecnie możemy zrobić to samo tylko z CSS3.
W tym samouczku pokażemy, jak tworzyć podpisy obrazów z różnymi przejściami za pomocą CSS3.
- Próbny
- Pobierz źródło
Obsługa przeglądarki
Ten podpis będzie w znacznym stopniu zależny od właściwości transformacji i przejścia, które są stosunkowo nowymi funkcjami, dlatego rozsądnie byłoby zwrócić uwagę na obsługę przeglądarki potrzebną do płynnego uruchomienia podpisu.
Poniżej znajdują się przeglądarki, które już obsługują transformację i przejście:
- Internet Explorer 10+ (jeszcze nie wydany)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Zacznijmy teraz od samouczka.
Struktura HTML
Mamy 6 obrazów; każdy obraz w innym stylu podpisu.
Prosty podpis
Pełny napis
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Fade Caption
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Podpis slajdów
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
To jest obrót podpisu
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Podpis w stylu wolnym
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Podstawowe CSS
Przed stylizowaniem dowolnego elementu, zawsze dobrym początkiem jest zresetowanie wszystkich właściwości przy użyciu tego resetowania CSS i nadanie im domyślnych wartości stylów, więc wszystkie przeglądarki będą wyświetlać ten sam wynik (może z wyjątkiem IE6).
Style zostaną rozdzielone w pliku style.css, więc nasz plik HTML będzie wyglądał ładnie. Jednak nie zapomnij dodać stylu łącza wewnątrz tagu head, aby zastosować reguły stylizacji w pliku.
OK, zacznijmy stylizować element, zaczynając od tagu HTML i głównego identyfikatora opakowania:
html background-color: #eaeaea; #mainwrapper font: 10pt normal Arial, sans-serif; height: auto; margin: 80px auto 0 auto; wyrównywanie tekstu: środek; szerokość: 660px;
Styl pola obrazu
Stosujemy niektóre popularne style w polach zawierających obrazy. Pola będą wyświetlane obok siebie za pomocą pływaka w lewo. Zauważ, że dodaliśmy także przepełnienie: właściwość ukryta; spowoduje to ukrycie wszystkich obiektów wewnątrz tego obiektu.
Deklarujemy również właściwość przejścia na każdym obrazie wewnątrz pola, na wypadek, gdybyśmy potrzebowali przejścia obrazu później.
#mainwrapper .box border: 5px solid #fff; cursor: pointer; wysokość: 182px; float: left; margin: 5px; pozycja: względna; przepełnienie: ukryte; szerokość: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc; #mainwrapper .box img position: absolute; po lewej: 0; -webkit-transition: wszystkie 300 ms ułatwienia; -moz-przejście: wszystkie 300 ms ułatwienia; -o-przejście: zwolnienie wszystkich 300ms; -ms-przejście: zwolnienie wszystkich 300ms; przejście: zwolnienie wszystkich 300ms;
Wspólny styl podpisu
Podpis ma kilka wspólnych stylów i właściwości przejścia. Zamiast używać właściwości krycia, używamy trybu koloru RGBA z 0.8 dla kanału alfa, aby napis wyglądał na nieco przezroczysty bez wpływu na tekst wewnątrz.
#mainwrapper .box .caption background-color: rgba (0,0,0,0,8); pozycja: absolutna; kolor: #fff; indeks Z: 100; -webkit-transition: wszystkie 300 ms ułatwienia; -moz-przejście: wszystkie 300 ms ułatwienia; -o-przejście: zwolnienie wszystkich 300ms; -ms-przejście: zwolnienie wszystkich 300ms; przejście: zwolnienie wszystkich 300ms; po lewej: 0;
Podpis 1
Pierwszy podpis będzie miał prosty efekt przejścia, który jest powszechnie używany dla podpisu. Podpis pojawi się od dołu, gdy najedziemy myszką na obraz. Aby go zaadresować, podpis będzie miał stałą wysokość 30px i zastosujemy jego dolną pozycję -30px, aby ukryć go pod obrazem.
#mainwrapper .box .simple-caption height: 30px; szerokość: 200px; Blok wyświetlacza; bottom: -30px; line-height: 25pt; wyrównywanie tekstu: środek;
Podpis 2
Drugi typ ma pełną szerokość i wysokość wymiaru obrazu / pudełka (200x200px), a przejście byłoby jak efekt drzwi przesuwnych tylko, że przesunie się od góry do dołu.
#mainwrapper .box .full-caption width: 170px; wysokość: 170px; top: -200px; wyrównanie tekstu: lewo; dopełnienie: 15px;
Podpis 3
Trzeci podpis będzie miał efekt zanikania. Dodaliśmy więc krycie: 0 dla stanu początkowego.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; szerokość: 170px; wysokość: 170px; wyrównanie tekstu: lewo; dopełnienie: 15px;
Podpis 4
Czwarty podpis będzie przesuwał się od lewej do prawej, więc ustaliliśmy 200px w lewo (po lewej: 200px) jako pozycję początkową.
** Podpis 4: Slajd ** / #mainwrapper .box .slide-caption szerokość: 170px; wysokość: 170px; wyrównanie tekstu: lewo; dopełnienie: 15px; left: 200px;
Podpis 5
Piąty podpis będzie miał efekt obrotowy. Obraca się nie tylko podpis, ale także obraz. To bardziej jak zmiana pozycji przez obracanie.
Dodajemy więc właściwość transformacji do obrotu o 180 stopni, chyba że wolisz obrócić monitor, aby przeczytać napis.
#mainwrapper # box-5.box .rotate-caption width: 170px; wysokość: 170px; wyrównanie tekstu: lewo; dopełnienie: 15px; top: 200px; -moz-transform: rotate (-180deg); -o-transform: rotate (-180deg); -webkit-transform: rotate (-180deg); transform: rotate (-180deg); #mainwrapper .box .rotate width: 200px; wysokość: 400px; -webkit-transition: wszystkie 300 ms ułatwienia; -moz-przejście: wszystkie 300 ms ułatwienia; -o-przejście: zwolnienie wszystkich 300ms; -ms-przejście: zwolnienie wszystkich 300ms; przejście: zwolnienie wszystkich 300ms;
Podpis 6
Ostatni podpis będzie miał transformację skali. Jednak w poprzednich podpisach tekst w środku będzie się wyświetlał wraz z przesunięciem przejścia. W tej sekcji zrobimy to trochę inaczej.
Tekst pojawi się po zakończeniu przejścia. Dodajemy opóźnienie przejścia do tekstu, w tym przypadku znacznika h3 i p.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relative; left: -200px; szerokość: 170px; -webkit-transition: wszystkie 300 ms ułatwienia; -moz-przejście: wszystkie 300 ms ułatwienia; -o-przejście: zwolnienie wszystkich 300ms; -ms-przejście: zwolnienie wszystkich 300ms; przejście: zwolnienie wszystkich 300ms; #mainwrapper .box .scale-caption h3 -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -o-przejście-opóźnienie: 300ms; -ms-przejście-opóźnienie: 300ms; opóźnienie przejścia: 300ms; #mainwrapper .box .scale-caption p -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-przejście-opóźnienie: 500ms; -ms-przejście-opóźnienie: 500ms; opóźnienie przejścia: 500 ms;
Niech się ruszają
W następnej sekcji określimy zachowanie podpisu po najechaniu kursorem na obrazy lub ramki.
Zachowanie podpisu 1: Pokaż.
W przypadku pierwszego podpisu chcielibyśmy, aby pojawił się (od dołu) po najechaniu kursorem na pole. Aby zaadresować ten ruch, używamy właściwości transform, a poniższy kod CSS mówi podpisowi, aby przesunął 100% swojej wagi na górę.
#mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); transform: translateY (-100%);
Jeśli nie rozumiesz sensu posiadania ujemnej wartości tłumaczenia, możesz najpierw przeczytać ten samouczek, aby uzyskać więcej wglądu.
Zachowanie podpisu 2: przesuń w dół.
I odwrotnie, drugi napis przesunie się w dół od góry. Więc będziemy mieli dodatnią wartość dla tłumaczeń.
#mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transform: translateY (100%);
Zachowanie napisów 3: Zanikanie.
Trzeci podpis jest w rzeczywistości najłatwiejszy. Gdy pole jest włączone, krycie napisów zmieni się na 1, dzięki czemu będzie widoczne, a ponieważ dodaliśmy właściwość przejścia w klasie podpisu, przejście powinno przebiegać płynnie.
#mainwrapper .box: hover .fade-caption opacity: 1;
Zachowanie podpisu 4: Przesuń go w lewo.
Jak wspomnieliśmy wcześniej, ten podpis będzie się przesuwał z lewej strony, jednak obraz również przesunie się w prawo. Mamy więc 2 deklaracje CSS.
Poniższy kod CSS wskazuje, że po najechaniu myszką na pole podpis będzie przesuwał się o 100% swojej szerokości w lewo. Zauważ, że teraz używamy translateX, ponieważ chcemy, aby slajd przesuwał się poziomo od prawej do lewej.
#mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1)! important; -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); krycie: 1; transform: translateX (-100%);
Po najechaniu na pole obraz przesunie się w lewo.
#mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); transform: translateX (-100%);
Zachowanie napisów 5: Obróć je.
Ten podpis różni się od pozostałych, ponieważ nie będzie się poruszał z prawej lub lewej strony, ale będzie się obracał. Gdy pole jest w dymku, div zawierający obraz i podpis będą obracać się o -180 w kierunku przeciwnym do ruchu wskazówek zegara, ukrywając obraz i pokazując podpis.
/ ** Rotate Caption: hover Zachowanie ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! Important; -moz-transform: rotate (-180deg); -o-transform: rotate (-180deg); -webkit-transform: rotate (-180deg); transform: rotate (-180deg);
Zachowanie podpisu 6: Skaluj go.
Ten podpis będzie łączyć kilka efektów transformacji. Gdy pole jest włączone, obraz zostanie powiększony o 140% (1,4) od początkowego wymiaru.
#mainwrapper .box: hover # image-6 -moz-transform: scale (1.4); -o-transform: skala (1.4); -webkit-transform: skala (1.4); transformacja: skala (1.4);
A jeśli zobaczyłeś powyższy CSS pod Podpis 6 nagłówek, ukryliśmy tekst po lewej stronie o 200px. Poniższy kod CSS mówi tekstowi, aby przeszedł do ich początkowej pozycji. Tekst przesunie się jednocześnie z lewej strony na prawą.
#mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); transform: translateX (200px);
- Próbny
- Pobierz źródło
streszczenie
Chociaż te funkcje CSS są fajne, ale nie są jeszcze powszechnie stosowane, ze względu na ograniczenia obsługi przeglądarki, o których wspominaliśmy wcześniej. Jednak eksperymentuj z tymi nowymi funkcjami, ponieważ w ten sposób będziemy kształtować stronę internetową w przyszłości.
Kredyty
Miniatury zdjęć w samouczku pochodzą z następujących stron internetowych (zrzut ekranu):
- A Book Apart
- Archidiecezja
- Vlog
- Hongkiat
- The Greeting Farm
- Mark Ecko
