6 Cool Image Captions s CSS3
CSS3 je opravdu mocný. Kdysi to, že potřebujeme obrazy nebo svazek JavaScript codelines udělat jednoduchý přechodový efekt. V současné době můžeme dělat totéž s CSS3.
V tomto tutoriálu vám ukážeme, jak vytvořit obrazové titulky s různými přechody jednoduše pomocí CSS3.
- Demo
- Stáhněte si zdroj
Podpora prohlížeče
Tento popis bude záviset na transformačních a přechodových vlastnostech, které jsou relativně novými funkcemi, takže by bylo moudré vzít v úvahu podporu prohlížeče potřebnou pro plynulé spuštění titulku..
Níže jsou uvedeny prohlížeče, které již podporují transformaci a přechod:
- Internet Explorer 10+ (dosud není vydán)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Začněme výukový program.
Struktura HTML
Máme 6 obrázků; každý obrázek s jiným stylem titulků.
Jednoduchý popis
Plný popis
Poslat zprávu, ame, consectetuer adipiscing elit, an diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Fade Caption
Poslat zprávu, ame, consectetuer adipiscing elit, an diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Titulek snímku
Poslat zprávu, ame, consectetuer adipiscing elit, an diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Toto je otočení titulek
Poslat zprávu, ame, consectetuer adipiscing elit, an diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Titulek volného stylu
Poslat zprávu, ame, consectetuer adipiscing elit, an diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Základní CSS
Před úpravou jakéhokoliv prvku je vždy dobré obnovit všechny vlastnosti pomocí tohoto resetu CSS a dát jim výchozí hodnoty stylu, takže všechny prohlížeče budou zobrazovat stejný výsledek (s výjimkou snad IE6).
Styly budou odděleny v souboru style.css, takže náš soubor HTML bude vypadat elegantně. Nezapomeňte však přidat tag stylu do tagu head, abyste v souboru použili pravidla pro styling.
OK, začněme styling elementu, počínaje tagem html a hlavním ID obalu:
html background-color: #eaeaea; #mainwrapper font: 10pt normální Arial, sans-serif; výška: auto; okraj: 80px auto 0 auto; zarovnání textu: střed; šířka: 660px;
Image Box Style
V polích obsahujících obrázky aplikujeme některé běžné styly. Pole se zobrazí vedle sebe pomocí plováku vlevo. Všimněte si, že jsme také přidali přetečení: skrytá vlastnost; Tím se skryjí všechny objekty, které procházejí divem.
Také deklarujeme vlastnost přechodu na každém obrázku uvnitř krabice, v případě, že potřebujeme přechod obrazu později.
#mainwrapper .box border: 5px pevná #fff; kurzor: ukazatel; výška: 182px; plavat vlevo; marže: 5px; poloha: relativní; přetečení: skryté; šířka: 200px; -webk-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 pozice: absolutní; vlevo: 0; -webkit-přechod: všechny 300ms-out; -moz-přechod: všech 300 ms lehkost-out; -o-přechod: všech 300 ms lehkost-out; -ms-přechod: všech 300 ms snadnost-out; přechod: všech 300 ms lehkostí;
Titulek Společný styl
Titulek bude mít některé běžné styly a také vlastnost přechodu. Namísto použití vlastnosti opacity používáme barevný režim RGBA s hodnotou 0,8 pro alfa kanál, aby titulek vypadal trochu průhledně bez ovlivnění textu uvnitř..
#mainwrapper .box .caption background-color: rgba (0,0,0,0,8); pozice: absolutní; barva: #ff; z-index: 100; -webkit-přechod: všechny 300ms-out; -moz-přechod: všech 300 ms lehkost-out; -o-přechod: všech 300 ms lehkost-out; -ms-přechod: všech 300 ms snadnost-out; přechod: všech 300 ms lehkostí; vlevo: 0;
Titulek 1
První titulek bude mít jednoduchý přechodový efekt, který se běžně používá pro titulek. Titulek se objeví, když přejdeme na obrázek. Chcete-li jej oslovit, titulek bude mít pevnou výšku 30px a jeho spodní poloha -30px se použije pro skrytí pod obrázkem.
#mainwrapper .box .simple-caption výška: 30px; šířka: 200px; zobrazení: blok; dole: -30px; výška řádku: 25pt; zarovnání textu: střed;
Titulek 2
Druhý typ má plnou šířku a výšku kóty obrazu / krabice (200x200px) a přechod by byl jako efekt posuvných dvířek pouze v tom, že se posouvá shora dolů.
#mainwrapper .box .full-caption width: 170px; výška: 170px; nahoru: -200px; zarovnání textu: vlevo; polstrování: 15px;
Titulek 3
Třetí titulek bude mít efekt blednutí. Přidali jsme opacity: 0 pro jeho počáteční stav.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; šířka: 170px; výška: 170px; zarovnání textu: vlevo; polstrování: 15px;
Titulek 4
Čtvrtý titulek se posune zleva doprava, takže jsme jeho počáteční pozici 200px vlevo (vlevo: 200px).
** Titulek 4: Slide ** / #mainwrapper .box .slide-caption width: 170px; výška: 170px; zarovnání textu: vlevo; polstrování: 15px; vlevo: 200x;
Titulek 5
Pátý nadpis bude mít rotační efekt. Není to jen titulek, který se bude otáčet, ale také obraz. Je to spíš změna polohy otočením.
Přidáme tedy transformační vlastnost s rotací -180 stupňů, pokud si nepřejete, aby se váš monitor přečetl.
#mainwrapper # box-5.box .rotate-caption width: 170px; výška: 170px; zarovnání textu: vlevo; polstrování: 15px; top: 200px; -moz-transformace: rotace (-180deg); -o-transformace: rotace (-180deg); -webk-transformace: rotace (-180deg); transformace: rotace (-180deg); #mainwrapper .box .rotate width: 200px; výška: 400px; -webkit-přechod: všechny 300ms-out; -moz-přechod: všech 300 ms lehkost-out; -o-přechod: všech 300 ms lehkost-out; -ms-přechod: všech 300 ms snadnost-out; přechod: všech 300 ms lehkostí;
Titulek 6
Poslední titulek bude mít transformaci měřítka. V předchozích kapitolách se však text uvnitř bude zobrazovat společně s přechodem .caption. V této sekci to uděláme trochu jinak.
Text se zobrazí po provedení přechodu. Takže přidáme zpoždění přechodu na text, v tomto případě tag h3 a p.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relativní; vlevo: -200px; šířka: 170px; -webkit-přechod: všechny 300ms-out; -moz-přechod: všech 300 ms lehkost-out; -o-přechod: všech 300 ms lehkost-out; -ms-přechod: všech 300 ms snadnost-out; přechod: všech 300 ms lehkostí; #mainwrapper .box .scale-caption h3 -webkit-transition-delay: 300ms; -moz-přechod-zpoždění: 300ms; -o-přechodové zpoždění: 300ms; -ms-přechod-zpoždění: 300ms; zpoždění přechodu: 300ms; #mainwrapper .box .scale-caption p -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-přechodové zpoždění: 500ms; -ms-transition-delay: 500ms; přechodové zpoždění: 500ms;
Udělejme jim pohyb
V následující části definujeme chování titulku, když přejdeme přes obrázky nebo rámečky.
Chování 1: Zobrazit.
Pro první titulek bychom chtěli, aby se zobrazoval (zdola), když přejdeme přes pole. K řešení tohoto pohybu používáme transformační vlastnost a níže uvedený kód CSS říká, že titulek má přesunout 100% své váhy na vrchol.
#mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transformace: translateY (-100%); -webk-transform: translateY (-100%); transformace: translateY (-100%);
Pokud nechcete dostat bod s negativní hodnotou pro translateY, možná budete chtít přečíst tento návod nejprve získat více vhled.
Chování 2: Přesuňte jej dolů.
Naopak druhý titulek se bude pohybovat směrem dolů z vrcholu. Takže budeme mít kladnou hodnotu pro translateY.
#mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transformace: translateY (100%); -webkit-transform: translateY (100%); transformace: translateY (100%);
Chování 3: Fade in.
Třetí titulek je vlastně nejjednodušší. Když je rámeček na vznášející se, krytí titulku se změní na 1, což ho zviditelní, a protože jsme do třídy titulek přidali vlastnost přechodu, měl by přechod probíhat hladce.
#mainwrapper .box: hover .fade-caption opacity: 1;
Chování titulků 4: Posuňte jej doleva.
Jak jsme se zmínili dříve, tento titulek se posouvá vlevo, ale snímek se také vysune doprava. Tady máme 2 CSS prohlášení.
Níže uvedený kód CSS ukazuje, že když přejdeme nad rámečkem, titulek se posune o 100% jeho šířky doleva. Všimněte si, že nyní používáme translateX, protože chceme, aby se snímek pohyboval vodorovně zprava doleva.
#mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1)! důležité; -moz-transformace: translateX (-100%); -o-transformace: translateX (-100%); -webkit-transform: translateX (-100%); opacity: 1; transformace: translateX (-100%);
Když přejdeme přes pole, snímek se vysune doleva.
#mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transformace: translateX (-100%); -webkit-transform: translateX (-100%); transformace: translateX (-100%);
Chování titulku 5: Otočení.
Tento titulek se liší od ostatních, protože se nebude pohybovat zprava nebo doleva, ale bude se otáčet. Když je rámeček na přechodu, div obsahující obrázek a titulek se otočí o -180 proti směru hodinových ručiček a skryje obrázek a zobrazí titulek.
/ ** Otočit titulek: hover Chování ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! Important; -moz-transformace: rotace (-180deg); -o-transformace: rotace (-180deg); -webk-transformace: rotace (-180deg); transformace: rotace (-180deg);
Chování titulků 6: Zvětšete jej.
Tento popis bude kombinovat několik transformačních efektů. Když je rámeček na vznášejícím se obrázku, zvětší se obraz o 140% (1,4) od výchozího rozměru.
#mainwrapper .box: hover # image-6 -moz-transform: scale (1.4); -o-transformace: měřítko (1,4); -webk-transform: měřítko (1.4); transformace: měřítko (1.4);
A pokud jste viděli CSS výše Titulek 6 nadpisu jsme skryli text vlevo o 200px. Tento kód CSS níže informuje text, aby se přesunul do výchozí polohy. Text se současně posouvá zleva doprava.
#mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transformace: translateX (200px); -webkit-transform: translateX (200px); transformace: translateX (200px);
- Demo
- Stáhněte si zdroj
souhrn
I když jsou tyto funkce CSS v pohodě, ale zatím nejsou široce použitelné, vzhledem k omezením podpory prohlížeče, které jsme již zmínili dříve. S těmito novými funkcemi však stále experimentujte, protože takto budeme v budoucnu formovat webovou stránku.
Kredity
Miniatury obrázků v tutoriálu jsou převzaty z následujících webových stránek (snímek obrazovky):
- Kniha Apart
- Archiduchesse
- Vlog
- Hongkiat
- Pozdrav Farma
- Mark Ecko
