6 Hűvös képfeliratok CSS3-mal

A CSS3 nagyon erős. Korábban olyan képekre vagy JavaScript kódvonalakra volt szükségünk, amelyekkel egyszerű átmenetet érhetünk el. Napjainkban csak a CSS3-val tehetünk ugyanezt.

Ebben a bemutatóban megmutatjuk, hogyan hozhatunk létre különböző átmenetekkel rendelkező képfeliratokat egyszerűen a CSS3 használatával.

Demó
Letöltés forrása

Böngésző támogatás

Ez a felirat nagyban függ a transzformációs és átmeneti tulajdonságoktól, amelyek viszonylag új funkciók, ezért bölcs dolog lenne tudni, hogy a böngésző támogatása szükséges a felirat simán történő futtatásához.

Az alábbi böngészők támogatják az átalakítást és az átmenetet:

Internet Explorer 10+ (még nincs kiadva)
Firefox 6+
Chrome 13+
Safari 3.2+
Opera 11+

Most kezdjük el a bemutatót.

HTML struktúra

6 képünk van; minden kép más felirattal.

     Egyszerű felirat
  
     Teljes felirat
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, eldobható, nem bonyolult, vagyis a dolore magna aliquam erat volutpat.
  
     Fade Caption
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, eldobható, nem bonyolult, vagyis a dolore magna aliquam erat volutpat.
  
     Diafelirat
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, eldobható, nem bonyolult, vagyis a dolore magna aliquam erat volutpat.
  
      Ez a forgatás felirat
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, eldobható, nem bonyolult, vagyis a dolore magna aliquam erat volutpat.
  
 
     Ingyenes stílus felirat
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, eldobható, nem bonyolult, vagyis a dolore magna aliquam erat volutpat.

Alap CSS

Mielőtt bármilyen elemet formázna, mindig jó kezdeni az összes tulajdonság visszaállítását a CSS alaphelyzetbe állításával, és megadni nekik az alapértelmezett stílusértékeket, így minden böngésző ugyanezt eredményezi (kivéve talán, IE6).

A stílusok a style.css fájlban lesznek elválasztva, így a HTML-fájlunk rendben lesz. Azonban ne felejtsük el hozzáadni egy linkstílust a fejcímkén belül, hogy a stílusban szereplő szabályokat alkalmazza a fájlban.

OK, kezdjük el az elemet a html címkével és a fő csomagoló azonosítóval kezdődően:

 html background-color: #eaeaea;  #mainwrapper font: 10pt normális Arial, sans-serif; magasság: auto; margó: 80px auto 0 auto; szöveg-igazítás: központ; szélesség: 660px;

Képdoboz stílus

Néhány gyakori stílust alkalmazunk a képeket tartalmazó dobozokban. A dobozok egymás mellett jelennek meg, lebegve balra. Figyeljük meg, hogy túlcsordulást is adtunk: rejtett tulajdonságot; ez el fogja rejteni az összes tárgyat, amely áthalad a divon.

A dobozon belüli minden képre is átállási tulajdonságot adunk ki, ha később a képátmenetre van szükség.

 #mainwrapper .box border: 5px szilárd #fff; kurzor: mutató; magasság: 182px; balra lebeg; margin: 5px; pozíció: relatív; túlcsordulás: rejtett; szélesség: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1x 1px 1px 1px #ccc; doboz-árnyék: 1px 1px 1px 1px #ccc;  #mainwrapper .box img pozíció: abszolút; balra: 0; -webkit-átmenet: mind a 300 ms-os könnyedség; -moz-átmenet: mind a 300 ms-os könnyedség; -o-átmenet: mind a 300 ms-os könnyedség; -ms-átmenet: mind a 300 ms-os leegyszerűsítés; átmenet: mind a 300 ms-os könnyedség;

A felirat közös stílusa

A feliratnak van néhány közös stílusa és átmeneti tulajdonsága is. Ahelyett, hogy opacitás tulajdonságot használnánk, az RGBA színmódot 0,8-al használjuk az alfa-csatornához, hogy a felirat kicsit átláthatóvá váljon anélkül, hogy befolyásolná a szöveget..

 #mainwrapper .box .caption háttérszín: rgba (0,0,0,0,8); pozíció: abszolút; szín: #fff; z-index: 100; -webkit-átmenet: mind a 300 ms-os könnyedség; -moz-átmenet: mind a 300 ms-os könnyedség; -o-átmenet: mind a 300 ms-os könnyedség; -ms-átmenet: mind a 300 ms-os leegyszerűsítés; átmenet: mind a 300 ms-os könnyedség; balra: 0;

1. felirat

Az első felirat egyszerű átmeneti hatással rendelkezik, amelyet általában egy feliratra használnak. A felirat alulról fog jönni, ha a kép fölé húzzuk. Ennek megoldásához a felirat rögzített magassága 30px lesz, és az alsó pozícióját -30px a kép elrejtéséhez alkalmazzuk..

 #mainwrapper .box .simple-caption height: 30px; szélesség: 200px; kijelző: blokk; alul: -30px; vonalmagasság: 25pt; szöveg-igazítás: központ;

2. felirat

A második típus a kép / doboz dimenzió teljes szélességével és magasságával rendelkezik (200x200px), és az átmenet olyan lenne, mintha csak csúszóajtóhatás lenne, hogy felülről lefelé csúszik.

 #mainwrapper .box .full-caption szélesség: 170px; magasság: 170px; top: -200px; szöveg-igazítás: balra; párnázás: 15px;

3. felirat

A harmadik felirat elhalványul. Szóval, hozzáadunk opacitást: 0 a kezdeti állapotához.

 #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacitás: 0; szélesség: 170px; magasság: 170px; szöveg-igazítás: balra; párnázás: 15px;

4. felirat

A negyedik felirat balról jobbra csúszik, így 200px-ot rögzítettünk balra (balra: 200px) kezdeti pozíciójaként.

 ** 4. felirat: dia ** / #mainwrapper .box .slide-caption szélesség: 170px; magasság: 170px; szöveg-igazítás: balra; párnázás: 15px; balra: 200px;

5. felirat

Az ötödik felirat forgó hatással bír. Nem csak a felirat fordul el, hanem a kép is. Ez inkább a forgatással történő pozícióváltás.

Tehát -180 fokos forgatással egészítjük ki a transzformációs tulajdonságot, hacsak nem szeretné elforgatni a monitort a felirat olvasásához.

 #mainwrapper # box-5.box .rotate-caption szélesség: 170px; magasság: 170px; szöveg-igazítás: balra; párnázás: 15px; top: 200px; -moz-transform: forgatás (-180deg); -o-transzformáció: forgatás (-180deg); -webkit-transform: forgatás (-180deg); transzformálás: forgatás (-180deg);  #mainwrapper .box .rotate szélesség: 200px; magasság: 400px; -webkit-átmenet: mind a 300 ms-os könnyedség; -moz-átmenet: mind a 300 ms-os könnyedség; -o-átmenet: mind a 300 ms-os könnyedség; -ms-átmenet: mind a 300 ms-os leegyszerűsítés; átmenet: mind a 300 ms-os könnyedség;

6. felirat

Az utolsó felirat lesz átméretezett. Az előző feliratokban azonban a benne lévő szöveg valóban megjelenik a .caption átmenet eltolásával együtt. Ebben a részben egy kicsit más lesz.

A szöveg az átmeneti eltolás után jelenik meg. Szóval, átmeneti késleltetést adunk a szöveghez, ebben az esetben a h3 és p címkéhez.

 #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p pozíció: relatív; balra: -200px; szélesség: 170px; -webkit-átmenet: mind a 300 ms-os könnyedség; -moz-átmenet: mind a 300 ms-os könnyedség; -o-átmenet: mind a 300 ms-os könnyedség; -ms-átmenet: mindegyik 300 ms-os kioldás; átmenet: mind a 300 ms-os könnyedség;  #mainwrapper .box .scale-caption h3 -webkit-átmenet-késleltetés: 300ms; -moz-átmenet-késleltetés: 300 ms; -o-átmenet-késleltetés: 300 ms; -ms-átmenet-késleltetés: 300 ms; átmeneti késleltetés: 300 ms;  #mainwrapper .box .scale-caption p -webkit-átmenet-késleltetés: 500 ms; -moz-átmenet-késleltetés: 500 ms; -o-átmenet-késleltetés: 500 ms; -ms-átmenet-késleltetés: 500 ms; átmeneti késleltetés: 500 ms;

Készítsük őket!

A következő részben meghatározzuk a felirat viselkedését, ha a képek vagy dobozok fölé húzzuk.

Feliratok viselkedése 1: Megjelenítés.

Az első felirathoz szeretnénk, ha az alsó részről megjelenik a doboz felett. Ennek a lépésnek a megváltoztatásához transzformációs tulajdonságot használunk, és az alábbi CSS-kód azt jelzi, hogy a felirat 100% -át mozgatja a csúcsra.

 #mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transzformáció: translateY (-100%); -webkit-transform: translateY (-100%); transzformáció: translateY (-100%);

Ha nem kapja meg azt a pontot, hogy negatív értéket kapjon a lefordított szöveghez, előfordulhat, hogy először olvassa el ezt a bemutatót, hogy jobban megismerje.

Felirat viselkedés 2: Mozgassa le.

Ezzel szemben a második felirat lefelé halad. Tehát pozitív értéket kapunk a fordításra.

 #mainwrapper .box: hover .full-caption -moz-transform: transzlateY (100%); -o-transzformáció: translateY (100%); -webkit-transform: translateY (100%); transzformáció: translateY (100%);

Felirat viselkedés 3: Fade in.

A harmadik felirat valójában a legegyszerűbb. Ha a doboz be van kapcsolva, a felirat opacitása 1-re változik, így láthatóvá válik, és mivel a feliratosztályban átmeneti tulajdonságot adtunk, az átmenetnek zökkenőmentesen kell futnia.

 #mainwrapper .box: hover .fade-caption opacitás: 1;

Felirat viselkedés 4: Csúsztassa balra.

Amint azt korábban említettük, ez a felirat a bal oldali formát fogja képezni, de a kép is jobbra csúszik. Tehát itt van 2 CSS-nyilatkozatunk.

Az alábbi CSS kód azt jelzi, hogy amikor a doboz fölé hover, a felirat a szélességének 100% -át balra csúsztatja. Figyeljük meg, hogy most használjuk a translateX-et, mert azt szeretnénk, hogy a csúszka vízszintesen mozogjon jobbról balra.

 #mainwrapper .box: hover .slide-caption háttérszín: rgba (0,0,0,1)! fontos; -moz-transform: translateX (-100%); -o-transzformáció: translateX (-100%); -webkit-transform: translateX (-100%); opacitás: 1; transzformált: translateX (-100%);

Amikor a doboz fölé hover, a kép balra csúszik.

 #mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transzformáció: translateX (-100%); -webkit-transform: translateX (-100%); transzformált: translateX (-100%);

Felirat viselkedés 5: Forgassa el.

Ez a felirat különbözik a többitől, mivel nem mozog jobbról vagy balról, hanem elfordul. Amikor a doboz lebeg, a kép és a felirat a div-t az óramutató járásával ellentétes irányban elforgatja, és elrejti a feliratot.

 / ** Felirat forgatása: hover viselkedés ** / #mainwrapper .box: hover .rotate háttérszín: rgba (0,0,0,1)! Fontos; -moz-transform: forgatás (-180deg); -o-transzformáció: forgatás (-180deg); -webkit-transform: forgatás (-180deg); transzformálás: forgatás (-180deg);

Felirat viselkedés 6: Mérje fel.

Ez a felirat több transzformációs hatást egyesít. Ha a doboz be van kapcsolva, a kép 140% -kal (1,4) emelkedik a kezdeti méretétől.

 #mainwrapper .box: hover # image-6 -moz-transform: skála (1.4); -o-transzformáció: skála (1.4); -webkit-transform: skála (1.4); transzformáció: skála (1.4);

És ha láttad a fenti CSS-t 6. felirat 200px-el elrejtettük a bal oldali szöveget. Ez az alábbi CSS-kód azt mondja a szövegnek, hogy a kezdeti pozícióba lépjen. Tehát a szöveg egyidejűleg balról jobbra csúszik.

 #mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transzformáció: translateX (200px); -webkit-transform: translateX (200px); transzformáció: translateX (200px);

Demó
Letöltés forrása

összefoglalás

Bár ezek a CSS-szolgáltatások hűvösek, de még nem széles körben alkalmazhatók, a korábban említett böngésző-támogatási korlátok miatt. Mindazonáltal folytassa a kísérletezést az új funkciókkal, mert így alakítjuk ki a weblapot a jövőben.

Credits

A bemutatóban található képek bélyegképei a következő webhelyekről (képernyőképből) származnak:

Egy könyv külön
Archiduchesse
Videóblog
Hongkiat
A köszöntő gazdaság
Mark Ecko