Početna » šifriranje » 6 Cool slike s CSS3

    6 Cool slike s CSS3

    CSS3 je stvarno moćan. Nekada su nam bile potrebne slike ili hrpa JavaScript kodova kako bi napravili jednostavan učinak prijelaza. Danas to možemo učiniti samo s CSS3.

    U ovom vodiču pokazat ćemo vam kako stvoriti opise slika s različitim prijelazima jednostavno koristeći CSS3.

    • Demo
    • Izvor preuzimanja

    Podrška za preglednik

    Ovaj naslov bit će mnogo ovisan o transformacijskim i prijelaznim svojstvima koja su relativno nove značajke, pa bi bilo pametno uzeti u obzir podršku preglednika potrebnu za glatko pokretanje opisa..

    Ovo su preglednici koji već podržavaju transformaciju i prijelaz:

    • Internet Explorer 10+ (još nije objavljen)
    • Firefox 6+
    • Chrome 13+
    • Safari 3.2+
    • Opera 11+

    Sada, započnimo tutorial.

    Struktura HTML-a

    Imamo 6 slika; svaku sliku s drugačijim stilom opisa.

     
     
       
    Jednostavni opis
          
      
       
    Puni natpis
     
    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.
          
      
       
    Naslov slajda
     
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
          
      
     
       
    Ovo je rotacijski opis
     
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
          
     
      
       
    Opis slobodnog stila
     
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    Osnovni CSS

    Prije oblikovanja bilo kojeg elementa, uvijek je dobro početi resetirati sva svojstva pomoću ovog resetiranja CSS-a i dati im zadane vrijednosti stila, tako da će svi preglednici prikazati isti rezultat (osim možda, IE6).

    Stilovi će biti odvojeni u style.css datoteci, tako da će naša HTML datoteka izgledati uredno. Međutim, ne zaboravite dodati stil veze unutar oznake glave kako biste primijenili pravila stila u datoteci.

    U redu, počnimo stiliziranje elementa, počevši od html oznake i glavnog omotača:

     html pozadinska boja: #eaeaea;  #mainwrapper font: 10pt normalan Arial, sans-serif; visina: auto; margina: 80px auto 0 auto; poravnavanje teksta: centar; širina: 660px;

    Stil okvira slike

    Primjenjujemo neke uobičajene stilove u okvire koji sadrže slike. Okviri će biti prikazani rame uz rame upotrebom plovka lijevo. Primijetite da smo također dodali preljev: skriveno vlasništvo; to će učiniti da svi objekti koji prođu kroz div da budu skriveni.

    Također proglašavamo prijelazno svojstvo na svaku sliku unutar okvira, u slučaju da trebamo prijelaz slike kasnije.

     #mainwrapper .box border: 5px solid #fff; pokazivač: pokazivač; visina: 182px; plutajući: lijevo; margina: 5px; pozicija: relativna; preljev: skriven; širina: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; kutija-sjena: 1px 1px 1px 1px #ccc;  #mainwrapper .box img position: absolute; lijevo: 0; -webkit-prelazak: svi 300ms se olakšavaju; -moz-prelazak: svi 300ms se olakšavaju; -o-prijelaz: sve 300 ms jednostavnosti; -ms-tranzicija: svi 300ms se olakšavaju; prijelaz: svi 300 ms jednostavnosti;

    Opis uobičajenog stila

    Naslov će imati neke uobičajene stilove i također svojstvo prijelaza. Umjesto da upotrebljavamo svojstvo neprozirnosti, koristimo RGBA način boja s 0,8 za alfa kanal kako bi naslov izgledao malo transparentno bez utjecaja na tekst unutar.

     #mainwrapper .box .caption pozadinska boja: rgba (0,0,0,0,8); položaj: apsolutni; boja: #fff; z-indeks: 100; -webkit-prelazak: svi 300ms se olakšavaju; -moz-prelazak: svi 300ms se olakšavaju; -o-prijelaz: sve 300 ms jednostavnosti; -ms-tranzicija: svi 300ms se olakšavaju; prijelaz: svi 300 ms jednostavnosti; lijevo: 0;

    Naslov 1

    Prvi opis imat će jednostavan učinak prijelaza koji se obično koristi za opis. Naslov će se pojaviti pri dnu kada prelazimo preko slike. Kako bi ga riješio, naslov će imati fiksnu visinu od 30 px i primijenit ćemo donju poziciju -30px da bismo je sakrili ispod slike.

     #mainwrapper .box .simple-caption visina: 30px; širina: 200px; prikaz: blok; dno: -30px; line-height: 25pt; poravnavanje teksta: centar;

    Naslov 2

    Drugi tip ima punu širinu i visinu dimenzija slike / kutije (200x200px), a prijelaz bi bio poput efekta kliznih vrata samo da će kliziti od vrha prema dnu.

     #mainwrapper .box .full-caption width: 170px; visina: 170px; vrh: -200px; poravnavanje teksta: lijevo; padding: 15px;

    Naslov 3

    Treći naslov će imati učinak blijedljenja. Dakle, dodali smo neprozirnost: 0 za početno stanje.

     #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; širina: 170px; visina: 170px; poravnavanje teksta: lijevo; padding: 15px;

    Naslov 4

    Četvrti naslov će se pomicati slijeva udesno, pa smo fiksirali 200 px lijevo (lijevo: 200px) kao početnu poziciju.

     ** Naslov 4: Slide ** / #mainwrapper .box .slide-caption width: 170px; visina: 170px; poravnavanje teksta: lijevo; padding: 15px; lijevo: 200px;

    Opis 5

    Peti naslov će imati rotirajući efekt. Neće se rotirati samo opis, nego i slika. To je više kao mijenjanje položaja rotiranjem.

    Dakle, dodajemo svojstvo transformacije s rotacijom od -180 stupnjeva, osim ako ne želite rotirati monitor da biste pročitali naslov.

     #mainwrapper # box-5.box .rotate-caption width: 170px; visina: 170px; poravnavanje teksta: lijevo; padding: 15px; vrh: 200px; -moz-transform: rotiranje (-180deg); -o-transformacija: rotiranje (-180deg); -webkit-transform: rotiranje (-180deg); transformacija: rotiranje (-180deg);  #mainwrapper .box .rotate širina: 200px; visina: 400px; -webkit-prelazak: svi 300ms se olakšavaju; -moz-prelazak: svi 300ms se olakšavaju; -o-prijelaz: sve 300 ms jednostavnosti; -ms-tranzicija: svi 300ms se olakšavaju; prijelaz: svi 300 ms jednostavnosti;

    Naslov 6

    Posljednji će naslov imati transformacijsku skalu. Međutim, u prethodnim opisima, tekst unutar njega zapravo će se prikazivati ​​zajedno s prijelazom u prijelazu .caption. U ovom ćemo odjeljku učiniti nešto drugačije.

    Tekst će se pojaviti nakon što se izvrši prijelazna promjena. Dakle, dodamo kašnjenje prijelaza na tekst, u ovom slučaju h3 i p tag.

     #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relative; lijevo: -200px; širina: 170px; -webkit-prelazak: svi 300ms se olakšavaju; -moz-prelazak: svi 300ms se olakšavaju; -o-prijelaz: sve 300 ms jednostavnosti; -ms-tranzicija: svi 300ms se olakšavaju; prijelaz: svi 300 ms jednostavnosti;  #mainwrapper .box .scale-caption h3 -webkit-prekid prijelaza: 300ms; -moz-prijelazna kašnjenje: 300ms; -o-prijelazno kašnjenje: 300ms; -ms-kašnjenje prijelaza: 300ms; kašnjenje prijelaza: 300ms;  #mainwrapper .box .scale-caption p -webkit-prekid prijelaza: 500ms; -moz-prijelazna kašnjenje: 500ms; -o-prijelazno kašnjenje: 500ms; -ms-prijelazna odgoda: 500ms; odgoda prijelaza: 500ms;

    Pokrenimo ih

    U sljedećem odjeljku definirat ćemo ponašanje natpisa kada prelazimo preko slika ili okvira.

    Ponašanje opisa 1: pojavljuje se.

    Za prvi naslov želimo da se prikaže (odozdo) kada lebdimo iznad okvira. Da bismo riješili ovaj potez, koristimo svojstvo transformacije, a CSS kod u nastavku navodi naslov da pomakne 100% svoje težine na vrh.

     #mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); transformacija: translateY (-100%);

    Ako ne dobijete smisao za negativnu vrijednost za prijevod, možda ćete htjeti najprije pročitati ovaj vodič kako biste dobili bolji uvid.

    Natpis Ponašanje 2: Pomakni ga dolje.

    Isto tako, drugi naslov će se pomaknuti s vrha. Dakle, mi ćemo imati pozitivnu vrijednost za translateY.

     #mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transformacija: translateY (100%);

    Ponašanje ponašanja 3: Fade in.

    Treći je naslov zapravo najlakši. Kada se okvir nalazi na lebdenju, neprozirnost naslova će se pretvoriti u 1, što će ga učiniti vidljivim, a budući da smo dodali svojstvo prijelaza u klasi opisa, prijelaz bi trebao biti glatko.

     #mainwrapper .box: hover .fade-caption opacity: 1;

    Ponašanje ponašanja 4: Gurnite ga ulijevo.

    Kao što smo već spomenuli, ovaj naslov će skliznuti s lijeve strane, međutim, slika će se također pomaknuti udesno. Dakle, ovdje imamo 2 CSS deklaracije.

    Donji CSS kôd označava da kada prelazimo preko okvira, naslov će skliznuti 100% širine na lijevo. Primijetite da sada koristimo translateX jer želimo da se slajd pomakne vodoravno s desna na lijevo.

     #mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1)! -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); neprozirnost: 1; transformacija: translateX (-100%);

    Kada prelazimo iznad okvira, slika će se pomaknuti ulijevo.

     #mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); transformacija: translateX (-100%);

    Ponašanje Ponašanje 5: Rotirajte ga.

    Ovaj se naslov razlikuje od ostalih, jer se neće pomicati s desne ili lijeve strane, ali će se rotirati. Kada se okvir nalazi na lebdenju, oznaka div koja sadrži sliku i naslov rotira se -180 u suprotnom smjeru skrivajući sliku i prikazuje naslov.

     / ** Rotate Caption: hover Behavior ** / #mainwrapper .box: lebdite .rotate background-color: rgba (0,0,0,1)! Important; -moz-transform: rotiranje (-180deg); -o-transformacija: rotiranje (-180deg); -webkit-transform: rotiranje (-180deg); transformacija: rotiranje (-180deg);

    Ponašanje 6: Prilagodite ga.

    Ovaj opis će kombinirati nekoliko učinaka transformacije. Kada je okvir na lebdeći, slika će se povećati za 140% (1.4) od početne dimenzije.

     #mainwrapper .box: hover # image-6 -moz-transform: skala (1.4); -o-transformacija: mjerilo (1.4); -webkit-transformacija: ljestvica (1.4); transformacija: mjerilo (1.4);

    A ako ste vidjeli CSS iznad Naslov 6 zaglavlje, sakrili smo tekst lijevo za 200px. Ovaj dolje navedeni CSS kod govori tekstu da se premjesti na početnu poziciju. Dakle, tekst će se pomicati s lijeve na desno istovremeno.

     #mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); transformacija: translateX (200px);
    • Demo
    • Izvor preuzimanja

    Sažetak

    Iako su ove značajke CSS-a cool, ali još nisu široko primjenjive, zbog ograničenja podrške preglednika koje smo ranije spomenuli. Međutim, nastavite eksperimentirati s tim novim značajkama, jer ćemo tako ubuduće oblikovati web-stranicu.

    krediti

    Sličice slika u vodiču preuzete su sa sljedećih web-lokacija (snimak zaslona):

    • Knjiga osim
    • Archiduchesse
    • Vlog
    • Hongkiat
    • Farma za pozdravljanje
    • Mark Ecko
    6 Osnovni (ali dosadni) zadaci Slobodnjaci počinju mržnju
    6 Uzbudljive ponude za crtani petak za dizajnere
    6 najboljih dva faktora autentifikacije WordPress dodataka [pregledano]
    Sljedeći članak
    6 CSS trikovi za vertikalno usklađivanje sadržaja
    Prethodni članak
    6 najboljih načina za slanje velikih datoteka na mreži