Share
Tijdens deze korte zelfstudie begrijpen we de concepten Dekking en transparantie in HTML-elementen. We spelen met een reeks effecten die vóór CSS3 alleen konden worden bereikt door verschillende afbeeldingen te gebruiken die in Photoshop zijn gemaakt.
Notitie: Alle onderstaande voorbeelden zijn getest op Mozilla Firefox, Safari en Chrome. Als je iets vergelijkbaars wilt in IE of een andere browser, laat dan een reactie achter en ik help je graag verder.
In deze zelfstudie gebruiken we Verloopachtergronden, Doosschaduwen en Meerdere Afbeeldingen Achtergronden, onderwerpen behandeld in de eerste twee handleidingen van deze serie:
Als u ooit een Photoshop-pakket of een vergelijkbaar grafisch pakket hebt gebruikt, bent u bekend met de waarde van de dekking. Deze magie werkt door het vergroten of verkleinen van de transparantie van elk grafisch element in een procentuele waarde, van 0% (volledig onzichtbaar) tot 100% (volledig zichtbaar). Dit percentage is de "Alpha" -waarde, ik zal uitleggen hoe het later in de tutorial werkt.
CSS3 bevat de eigenschap "opacity", klaar om te worden geïmplementeerd in alle moderne browsers, maar hoe werkt het? Stel je voor dat je drie Photoshop-elementen in een map hebt, zoals te zien in de onderstaande schermafbeelding: een afbeelding, een regel tekst en een vierkant over een afbeelding. De afbeelding, tekst en het gele vierkant bevinden zich in een map met de naam "Sectie". Door het dekkingspercentage van die map te verkleinen, worden alle lagen transparanter weergegeven.
In CSS3 werkt alles ongeveer hetzelfde. De map is een HTML-containerelement (een div, een alinea, een sectie, enzovoort) geworden. Daarom zal het veranderen van de "opaciteit" -eigenschap van dat element (net als in Photoshop) de zichtbaarheid van alle elementen erin vergroten of verkleinen. Neem deze HTML-markup bijvoorbeeld:
Dit is een 100% dekkend element, alles binnen deze tag is volledig zichtbaar
Laten we nu eens kijken naar de CSS voor de vorige markup.
/ * Volledige pagina afbeelding achtergrond * / body.image background-image: url (images / bg.jpg); achtergrond-positie: midden bovenaan; background-attachment: fixed; background-repeat: no-repeat; / * Dekkingscontrole * / .opname dekking: 1; .translucent60 dekking: 0,6;
Zoals je ziet, is het veranderen van de dekking heel eenvoudig, maar wanneer zou je het gebruiken? Een zeer effectieve techniek is het vergroten van de dekking op de : hover pseudoclass:
.translucent_on_hover opaciteit: 0,4; .translucent_on_hover: hover opacity: 0.9;
Maar als je een wilt werkelijk indrukwekkend effect, je kunt sommige overgangen erin gooien?
Een overgangseffect interpoleert de tussentoestanden tussen twee fasen of instances van elke HTML-elementstijl.
Laten we de basiscode van een overgangseffect bekijken (in een tijdsverloop van 1 seconde) om dingen eenvoudig te houden voor nu.
-webkit-overgang: alle 1s gemak in-uit;
-moz-overgang: alle 1s gemak in-uit;
-o-overgang: alle 1s gemak in-uit;
-ms-transitie: alle 1s gemak in-uit;
overgang: alle 1s gemak-in-uit;
hint: Om te garanderen dat je geen van de verschillende browser-voorvoegsels mist, bekijk Jeffrey Way's recent uitgebrachte Prefxr-tool. Het rockt.
U hoeft deze CSS-regel alleen toe te voegen aan het element dat u wilt animeren met een overgangseffect, zoals dit:
.translucent_transition opacity: 0,4; -webkit-overgang: alle 1s gemak-in-uit; -moz-overgang: alle 1s gemak-in-uit; -o-overgang: alle 1s gemak in-uit; -ms-overgang: alle 1s gemak in-uit; overgang: alle 1s gemak-in-uit; .translucent_transition: hover opacity: 0.9;
De 'gemak-in-out'-stijl betekent dat de transparantieoverdracht plaatsvindt bij zweven (de dekking vergroten) en teruggaat naar de originele waarde wanneer de cursor zich buiten het element verplaatst.
Elke kleurpixel kan worden gemaakt door drie sets waarden te combineren: rood, groen en blauw, elk van 0 tot 255.
Meestal gebruiken we hexadecimale waarden voor kleuren in uw stylesheets, bijvoorbeeld de basiskleuren:
U kunt als volgt dezelfde kleuren krijgen met behulp van de RGB-waarden in CSS: rgb (.
Een eenvoudige manier om de RGB-waarden van elke kleur te krijgen, is door de Kleurkiezer van Photoshop te gebruiken, zoals in de onderstaande afbeelding.
Wanneer u de eigenschap "Opacity" in CSS toepast, heeft dit invloed op de gehele container en alle inhoud daarin. Dit is soms handig, maar misschien wilt u de achtergrond alleen transparant laten zijn en de tekst en de afbeelding 100% dekkend laten. Hier komt de "Alpha" -waarde opnieuw.
Met CSS3 kunnen we een RGB-kleurindeling gebruiken, waaronder een vierde waarde met de naam Alpha. Dit is geen nieuw concept, PNG-afbeeldingen gebruiken het alfakanaal om de transparantie van pixels op een afbeelding in te stellen op een waarde van 0 tot 1 (0% tot 100%). Dit zorgt voor een beter transparantie-effect dan GIF-afbeeldingen beheren, omdat ze alleen een zichtbare / onzichtbare waarde voor de pixels instellen.
Neem bijvoorbeeld de volgende afbeelding:
Merk op dat ik alleen de dekking op de gele achtergrondlaag verander.
Voor dit soort effecten is er de "RGBA"(Rood, Groen, Blauw, Alfa) kleurwaarde:
RGBA (
.ondoorzichtig achtergrondkleur: rgba (255, 150, 0, 1); / * Alfa = 1 betekent 100% ondoorzichtig * /
En als u de transparantie van de achtergrond wilt verminderen om deze doorschijnend te maken, is het net zo eenvoudig als het wijzigen van de laatste waarde op de rgba-kleurparameters.
.doorschijnend achtergrondkleur: rgba (255, 150, 0, .6); / * Alfa = .6 betekent 60% dekkend * /
Aangezien de rgba-kleur zich gedraagt als een klassieke hexadecimale kleur, kunt u deze gebruiken op een achtergrond met lineair verloop.
.translucent_gradient background-image: -moz-linear-gradient (top, rgba (255, 150, 0, .9), rgba (255, 150, 0, .1)); achtergrondafbeelding: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (rgba (255, 150, 0, .9)), tot (rgba (255, 150, 0, .1)) , kleur-stop (1, rgba (255, 150, 0, .1)));
En natuurlijk kun je het combineren met de dekkingsstijl om mooie overgangseffecten te creëren.
.translucent_transition opacity: 0,4; -webkit-overgang: alle 1s gemak-in-uit; -moz-overgang: alle 1s gemak-in-uit; -o-overgang: alle 1s gemak in-uit; -ms-overgang: alle 1s gemak in-uit; overgang: alle 1s gemak-in-uit; achtergrondafbeelding: -moz-lineaire gradiënt (boven, rgba (255, 150, 0, .9), rgba (255, 150, 0, .1)); achtergrondafbeelding: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (rgba (255, 150, 0, .9)), tot (rgba (255, 150, 0, .1)) , kleur-stop (1, rgba (255, 150, 0, .1))); .translucent_transition: hover opacity: 1;
Laten we nu iets complexers proberen. We combineren meerdere afbeeldingsachtergronden met behulp van transparantie, een zwevende dekkingseffect en afgeronde hoeken en doosschaduwen om een gevoel van diepte te creëren.
Laten we beginnen met photoshop. In de tutorials vindt u de PSD van de volgende afbeelding:
We proberen een exact resultaat te krijgen met alleen CSS3-stijlen. Er zijn een aantal voorbeeldafbeeldingen voor de miniatuur op de secties en een patroonachtergrond (u kunt deze zelf maken). Deze keer heb ik bgpatterns.com gebruikt om een herhalende afbeelding te maken.
Laten we beginnen met de HTML-opmaak, niets te gecompliceerd:
Transparantie en dekking
Een beetje tekst hier
Transparantie en dekking
Een beetje tekst hier
Nu het leuke gedeelte, de CSS. Stel eerst de standaardstijlen opnieuw in, stel de bodypatografie in en stel de stijlen voor de wrapper-sectie in:
/ * Reset * / html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td , img margin: 0; opvulling: 0; border: 0px; header, section, footer, aside, nav, article, figure display: block; / * Einde van Reset * / body font-family: Arial, Helvetica, sans-serif; color: # 333; html height: 100%; / * Om een volledige CSS3-verloop toe te voegen, moet je deze hoogte instellen op 100% * / .wrapper margin: 0px auto; Breedte: 960; opvulling: 60px 0px 60px 0px; .left text-align: left;
Stel vervolgens de hoofdachtergrond in, in feite een herhalende afbeelding (u kunt elke gewenste afbeelding gebruiken)
/ * Lichaamsbeeldachtergrond * / lichaam hoogte: 100%; achtergrond: url (images / bg.png); / * Afbeelding achtergrond * /
Nu zullen we de stijlen instellen van een andere wrapper div genaamd "page", deze div zal in principe dezelfde breedte en hoogte hebben als het browservenster, en wat nog belangrijker is, we zullen een lineaire gradient achtergrond toevoegen met RGBA kleuren.
/ * Transparant verloop * / .pagina width: 100%; height: 100%; achtergrond: -moz-linear-gradient (boven, rgba (15,20,5,0.75) 0%, rgba (15,20,5,0) 50%, rgba (15,20,5,0.75) 100%) ; / * Transparant Verloop * / achtergrond: -webkit-gradiënt (lineair, links boven, links onder, van (rgba (15,20,5,0.75)), kleurstop (0,5, rgba (15,20,5,0 )), to (rgba (15,20,5,0.75))) / * Transparent Gradient * /
Stel nu de stijl van de containersectie in, een afgeronde hoekdoos met een doorschijnende achtergrond.
/ * RGBA transparante achtergrond * / .container width: 770px; padding: 15px; Hoogte: 460px; marge: 0px auto; / * Translucent Background * / background: rgba (89, 113, 29, 0.5); / * Randstraal * / rand: 1px vast # 71941D; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; grensradius: 20px; / * Weg met Bleed * / -moz-background-clip: padding; -webkit-achtergrond-clip: padding-box; achtergrond-clip: padding-box; / * Boxschaduw * / doosschaduw: 0px 0px 25px rgba (0,0,0,0.75); -moz-box-shadow: 0px 0px 25px rgba (0,0,0,0.75); -webkit-box-shadow: 0px 0px 25px rgba (0,0,0,0.75);
Het begint vorm te krijgen. Stel nu de stijlen van de inhoudsvakken in. Stel de positie in, een afgerond hoekeffect, een verlopende, doorschijnende achtergrond en we combineren het met een zweefeffect waardoor de dekking van de muis toeneemt (hiervoor zijn de overgangseffecten ingeschakeld).
.vak / * Positie * / opvulling: 10px; margin-bottom: 20px; min-height: 200px; / * Translucent Gradient Background * / background: -moz-linear-gradient (top, rgba (26,35,8,0), rgba (26,35,8,0,85)); / * Transparante gradiënt * / achtergrond: -webkit-gradiënt (lineair, links bovenaan, links onderaan, vanaf (rgba (26,35,80,15)), naar (rgba (26,35,8,0,85))); / * Transparant verloop * / / * Afgeronde hoeken * / -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; grensradius: 5px; / * Fixeer de bleed * / -moz-background-clip: padding; -webkit-achtergrond-clip: padding-box; achtergrond-clip: padding-box; / * Verberg het een beetje tot de muis over * / dekking: 0,4; / * Overgangseffecten * / -webkit-overgang inschakelen: alle 1s gemak in-uit; -moz-overgang: alle 1s gemak-in-uit; -o-overgang: alle 1s gemak in-uit; -ms-overgang: alle 1s gemak in-uit; overgang: alle 1s gemak-in-uit; .box: hover opacity: 1;
Laten we nu de laatste hand leggen aan de HTML-elementen in de vakken. Je kunt proberen meer elementen aan de elementen toe te voegen in de statische modus en te zweven, maar deze keer zal ik een vakschaduw zichtbaar maken op de "img" -tag wanneer de muis boven de "box" -sectie staat:
.box img float: left; margin-right: 20px; rand: 1px vast # 71941D; .box: hover img box-shadow: 5px 5px 5px rgba (0,0,0,0.50); -moz-box-shadow: 5px 5px 5px rgba (0,0,0,0,30); -webkit-box-shadow: 5px 5px 5px rgba (0,0,0,0.30); .box h3 font-size: 14px; font-weight: bold; color: # 8eb548; text-transform: in hoofdletters; padding-bottom: 20px; .box p color: # c0cf9d; font-size: 11px; line-height: 150%;
En dat is het, laten we eens kijken hoe het eruit ziet in een browser:
Er is geen limiet aan wat kan worden gemaakt met behulp van transparanten en transparantie-effecten in combinatie met andere CSS3-stijlen. Probeer het nu!
Accentsconagua
Dit is een 100% dekkend element, alles binnen deze tag is volledig zichtbaar 
