6 Koele beeldschriftopnamen met CSS3

CSS3 is echt krachtig. Vroeger moesten we afbeeldingen of een aantal JavaScript-codelines hebben om een eenvoudig overgangseffect te maken. Tegenwoordig kunnen we hetzelfde doen met alleen CSS3.

In deze zelfstudie laten we u zien hoe u afbeeldingsbijschriften met verschillende overgangen kunt maken door eenvoudig CSS3 te gebruiken.

demonstratie
Download de bron

Browserondersteuning

Dit bijschrift zal veel afhankelijk zijn van transformatie- en overgangseigenschappen, die relatief nieuwe kenmerken zijn. Het zou dus verstandig zijn om kennis te nemen van de browserondersteuning die nodig is om het bijschrift soepel uit te voeren.

Het volgende zijn browsers die transformatie en transitie al ondersteunen:

Internet Explorer 10+ (nog niet uitgebracht)
Firefox 6+
Chrome 13+
Safari 3.2+
Opera 11+

Laten we nu beginnen met de zelfstudie.

HTML-structuur

We hebben 6 afbeeldingen; elke afbeelding met een andere bijschriftstijl.

     Eenvoudige onderschrift
  
     Volledige bijschrift
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
     Fade-onderschrift
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
     Slide Caption
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
      Dit is het bijschrift roteren
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
 
     Gratis stijlbijschrift
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Basic CSS

Voordat een element wordt gestileerd, is het altijd een goed begin om alle eigenschappen opnieuw in te stellen met behulp van deze CSS-reset en hun standaardstijlwaarden te geven, zodat alle browsers hetzelfde resultaat opleveren (behalve misschien IE6).

De stijlen worden gescheiden in style.css-bestand, dus ons HTML-bestand ziet er netjes uit. Vergeet echter niet om een linkstijl toe te voegen binnen de head-tag om de stylingregels in het bestand toe te passen.

OK, laten we beginnen met het in model brengen van het element, te beginnen met de html-tag en de belangrijkste wrapper-id:

 html background-colour: #eaeaea;  #mainwrapper font: 10pt normaal Arial, sans-serif; hoogte: auto; marge: 80 px automatisch 0 auto; text-align: center; breedte: 660 px;

Stijl beeldstijl

We passen enkele algemene stijlen toe in de vakken met de afbeeldingen. De vakken worden naast elkaar weergegeven met zwevend links. Merk op dat we ook overflow hebben toegevoegd: verborgen eigenschap; dit zorgt ervoor dat alle objecten binnenin die door de div gaan om verborgen te zijn.

We verklaren ook de overgangseigenschap op elke afbeelding in de doos, voor het geval we later de afbeeldingsovergang nodig hebben.

 #mainwrapper .box border: 5px solid #fff; cursor: pointer; hoogte: 182 px; zweven: links; marge: 5px; positie: relatief; overloop verborgen; breedte: 200 px; -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; links: 0; -webkit-overgang: alle 300ms gemak; -moz-overgang: alle 300ms gemak; -o-overgang: alle 300ms gemak; -ms-overgang: alle 300ms gemak; overgang: alle 300ms gemak;

Gemeenschappelijke stijl onderschrift

Het bijschrift heeft een aantal veelvoorkomende stijlen en ook een overgangseigenschap. In plaats van de opaciteitseigenschap te gebruiken, gebruiken we de RGBA-kleurmodus met 0,8 voor het alfakanaal om het bijschrift er een beetje transparant uit te laten zien zonder de tekst binnenin te beïnvloeden.

 #mainwrapper .box .caption background-color: rgba (0,0,0,0.8); positie: absoluut; kleur: #fff; z-index: 100; -webkit-overgang: alle 300ms gemak; -moz-overgang: alle 300ms gemak; -o-overgang: alle 300ms gemak; -ms-overgang: alle 300ms gemak; overgang: alle 300ms gemak; links: 0;

Bijschrift 1

Het eerste bijschrift heeft een eenvoudig overgangseffect dat gewoonlijk wordt gebruikt voor een bijschrift. Het bijschrift komt vanaf de onderkant omhoog als we over de afbeelding zweven. Om het aan te pakken, heeft het bijschrift een vaste hoogte van 30px en passen we de onderste positie -30px toe om het onder de afbeelding te verbergen.

 #mainwrapper .box .simple bijschrift height: 30px; breedte: 200 px; weergave: blok; onder: -30px; regelhoogte: 25pt; text-align: center;

Bijschrift 2

Het tweede type heeft de volledige breedte en hoogte van de afbeeldings / doosdimensie (200x200 px) en de overgang zou als een schuifdeureffect zijn dat alleen van boven naar beneden verschuift.

 #mainwrapper .box .full-caption width: 170px; hoogte: 170 px; top: -200px; text-align: left; opvulling: 15px;

Bijschrift 3

Het derde bijschrift heeft een vervagend effect. Dus we hebben dekking toegevoegd: 0 voor de oorspronkelijke staat.

 #mainwrapper .box. fade-caption, #mainwrapper .box .scale-caption opacity: 0; breedte: 170 px; hoogte: 170 px; text-align: left; opvulling: 15px;

Onderschrift 4

Het vierde bijschrift verschuift van links naar rechts, dus hebben we 200 px naar links (links: 200 px) als beginpositie gefixeerd.

 ** Bijschrift 4: Dia ** / #mainwrapper .box .slide-caption width: 170px; hoogte: 170 px; text-align: left; opvulling: 15px; links: 200 px;

Onderschrift 5

Het vijfde bijschrift heeft een roterend effect. Het is niet alleen het bijschrift dat zal roteren, maar ook het beeld. Het lijkt meer op het veranderen van positie door te roteren.

We voegen daarom de transform-eigenschap toe met een rotatie van -180 graden, tenzij u liever uw monitor roteert om het bijschrift te lezen.

 #mainwrapper # box-5.box .rotate-caption width: 170px; hoogte: 170 px; text-align: left; opvulling: 15px; top: 200px; -moz-transform: roteer (-180 graden); -o-transform: roteer (-180deg); -webkit-transform: roteer (-180deg); transformeren: roteren (-180 graden);  #mainwrapper .box .rotate width: 200px; hoogte: 400 px; -webkit-overgang: alle 300ms gemak; -moz-overgang: alle 300ms gemak; -o-overgang: alle 300ms gemak; -ms-overgang: alle 300ms gemak; overgang: alle 300ms gemak;

Bijschrift 6

Het laatste bijschrift heeft een schaaltransformatie. In de vorige bijschriften wordt de tekst daarbinnen echter ook weergegeven samen met de overgangsverschuiving .caption. In deze sectie zullen we het een beetje anders maken.

De tekst verschijnt nadat de overgangsverschuiving is voltooid. Dus voegen we overgangsvertraging toe aan de tekst, in dit geval de h3- en p-tag.

 #mainwrapper .box .scale ondertiteling h3, #mainwrapper .box .scale ondertiteling p position: relative; links: -200 px; breedte: 170 px; -webkit-overgang: alle 300ms gemak; -moz-overgang: alle 300ms gemak; -o-overgang: alle 300ms gemak; -ms-overgang: alle 300ms gemak; overgang: alle 300ms gemak;  #mainwrapper .box .scale ondertiteling h3 -webkit-transition-delay: 300ms; -moz-overgangsvertraging: 300ms; -o-overgangsvertraging: 300ms; -ms-overgangsvertraging: 300ms; overgangsvertraging: 300ms;  #mainwrapper .box .scale ondertiteling p -webkit-overgangsvertraging: 500 ms; -moz-overgangsvertraging: 500ms; -o-overgangsvertraging: 500ms; -ms-overgangsvertraging: 500ms; overgangsvertraging: 500ms;

Laten we ze laten bewegen

In het volgende gedeelte zullen we het gedrag van het bijschrift definiëren wanneer we de muisaanwijzer over de afbeeldingen of vakken bewegen.

Caption Behavior 1: Show up.

Voor het eerste bijschrift willen we dat het wordt weergegeven (vanaf de onderkant) wanneer we over de doos zweven. Om deze zet aan te pakken gebruiken we de eigenschap transform en de onderstaande CSS-code vertelt het bijschrift om 100% van het gewicht naar de top te verplaatsen.

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

Als je niet het punt krijgt van negatieve waarde te hebben voor de vertaling, wil je deze tutorial wellicht eerst lezen om meer inzicht te krijgen.

Caption Behavior 2: Verplaats het naar beneden.

Omgekeerd zal het tweede bijschrift van bovenaf naar beneden gaan. We zullen dus een positieve waarde hebben voor vertaalwerk.

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

Caption Behavior 3: Fade in.

Het derde bijschrift is eigenlijk het gemakkelijkst. Als het vakje zweeft, verandert de dekking van het bijschrift in 1 zodat het zichtbaar wordt en omdat we de overgangseigenschap hebben toegevoegd in de bijschriftklasse, moet de overgang soepel verlopen.

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

Caption Behavior 4: Schuif het naar links.

Zoals we al eerder hebben vermeld, schuift dit bijschrift van links, maar de afbeelding wordt ook naar rechts geschoven. Dus, hier hebben we 2 CSS-verklaringen.

De CSS-code hieronder geeft aan dat wanneer we de muisaanwijzer over de doos bewegen, het bijschrift 100% van de breedte naar links schuift. Merk op dat we nu translateX gebruiken, omdat we willen dat de dia horizontaal van rechts naar links beweegt.

 #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%); dekking: 1; transformatie: translateX (-100%);

Wanneer we over de box zweven, schuift het beeld naar links.

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

Caption Behavior 5: Rotate it.

Dit bijschrift verschilt van de rest omdat het niet van rechts of links zal bewegen, maar zal roteren. Als het vak zweeft, roteert de div met de afbeelding en het bijschrift -180 tegen de klok in, waardoor de afbeelding wordt verborgen en het bijschrift wordt weergegeven.

 / ** Roteren Onderschrift: zweven Gedrag ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! Important; -moz-transform: roteer (-180 graden); -o-transform: roteer (-180deg); -webkit-transform: roteer (-180deg); transformeren: roteren (-180 graden);

Caption Behavior 6: Scale it up.

Dit bijschrift zal verschillende transformatie-effecten combineren. Als het vak zweeft, wordt de afbeelding 140% (1,4) groter dan de oorspronkelijke dimensie.

 #mainwrapper .box: hover # image-6 -moz-transform: scale (1.4); -o-transform: schaal (1.4); -webkit-transform: schaal (1.4); transformatie: schaal (1.4);

En als je de CSS hierboven hebt gezien Bijschrift 6 kop, hebben we de tekst links door 200px verborgen. Deze CSS-code hieronder vertelt de tekst om naar hun oorspronkelijke positie te gaan. Dus de tekst zal tegelijkertijd van links naar rechts verschuiven.

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

demonstratie
Download de bron

Samenvatting

Hoewel deze CSS-functies cool zijn, maar nog niet breed toepasbaar zijn vanwege de beperkingen van de browserondersteuning die we eerder hebben genoemd. Blijf echter experimenteren met deze nieuwe functies, want dit is de manier waarop we in de toekomst een webpagina gaan vormgeven.

credits

Miniaturen van afbeeldingen in de zelfstudie zijn afkomstig van de volgende websites (screenshot):

Een boek apart
Archiduchesse
vlog
Hongkiat
The Greeting Farm
Mark Ecko