Share
Under denne korte opplæringen får vi tak i konseptene Opacity og Transparency i HTML-elementer. Vi skal spille med et sett med effekter som, før CSS3, bare kunne oppnås ved å bruke flere bilder opprettet i Photoshop.
Merk: Alle følgende eksempler ble testet på Mozilla Firefox, Safari og Chrome. Hvis du vil få noe lignende i IE eller en annen nettleser, legg igjen en kommentar, og jeg vil gjerne hjelpe deg.
I denne opplæringen vil vi bruke Gradient Backgrounds, Box Shadows og Multiple Images Backgrounds, temaer dekket i de to første opplæringene i denne serien:
Hvis du noen gang har brukt Photoshop eller lignende grafikkpakke, vil du være kjent med Opacity Value. Denne magien virker ved å øke eller redusere gjennomsiktigheten av et grafisk element i en prosentverdi, fra 0% (helt usynlig) til 100% (fullt synlig). Denne prosentdelen er "Alpha" -verdien, jeg skal forklare hvordan det virker senere i opplæringen.
CSS3 inneholder egenskapen "opacity", klar til å bli implementert i alle moderne nettlesere, men hvordan fungerer det? Tenk deg at du har tre Photoshop-elementer i en mappe, som vist på skjermbildet under: et bilde, en tekstlinje og et solidt firkant over en bildebakgrunn. Bildet, teksten og det gule firkanten er inne i en mappe som heter "Seksjon". Ved å redusere Opacity-prosentdelen av den mappen vil alle lagene i den vises mer gjennomsiktig.
I CSS3 fungerer det ganske mye det samme. Mappen er blitt et HTML-containerelement (en div, et avsnitt, en seksjon etc.) Derfor vil (slik som i Photoshop) endre egenskapen "opasitet" av elementet, øke eller redusere synligheten til alle elementene i den. Ta for eksempel denne HTML-oppslaget:
Dette er et 100% ugjennomsiktig element, alt i denne taggen er fullt synlig
Nå, la oss se CSS for den forrige merkingen.
/ * Full side bilde bakgrunn * / body.image bakgrunnsbilde: url (images / bg.jpg); bakgrunnsposisjon: toppsenter; Bakgrunnen-vedlegg: fast; background-repeat: no-repeat; / * Opacity Test * / .opaque opacity: 1; .translucent60 opacity: 0.6;
Som du ser, er skiftende opacity veldig enkelt, men når vil du bruke den? En svært effektiv teknikk er å øke opaciteten på :sveve pseudoclass:
.translucent_on_hover opacity: 0.4; .translucent_on_hover: svever opacity: 0.9;
Men hvis du vil ha en egentlig Imponerende effekt, du kan kaste i noen overganger?
En overgangseffekt interpolerer mellomstilstandene mellom to trinn eller forekomster av hvilken som helst HTML-elementstil.
For å holde ting enkelt for nå, la oss se på den grunnleggende koden for en overgangseffekt (i løpet av 1 sekund).
-Webkit-overgang: alle 1s lett-i-ut;
-moz-overgang: alle 1s lett-i-ut;
-o-overgang: alle 1s lett-i-ut;
-ms-overgang: alle 1s lett-i-ut;
overgang: alle 1s lett-i-ut;
Hint: For å garantere at du ikke går glipp av noen av de forskjellige nettleserverfiksene, sjekk ut Jeffrey Way's nylig utgitte Prefxr-verktøy. Det klipper.
Du trenger bare å legge ved denne CSS-regelen til elementet du vil animere med en overgangseffekt, slik:
.translucent_transition opacity: 0.4; -webkit-overgang: alle 1s lett-i-ut; -moz-overgang: alle 1s lett-i-ut; -o-overgang: alle 1s lett-i-ut; -ms-overgang: alle 1s lett-i-ut; overgang: alle 1s lett-i-ut; .translucent_transition: svever opacity: 0.9;
Den "brukervennlige" stilen betyr at overføringsovergangen vil skje på svingeren (øker opaciteten) og vil returnere (redusere opaciteten) tilbake til den opprinnelige verdien når markøren beveger seg utenfor elementet.
Hver piksel med farge kan opprettes ved å kombinere tre sett med verdier: Rød, Grønn og Blå, hver fra 0 til 255.
Vi bruker vanligvis Hexadecimal-verdier for farger i stilarkene dine, for eksempel de grunnleggende fargene:
Du kan få de samme fargene ved hjelp av RGB-verdiene i CSS, som følger: rgb (.
En enkel måte å få RGB-verdiene av en hvilken som helst farge på er å bruke fargeplukeren fra Photoshop, som vist på bildet nedenfor.
Når du søker på «opacity» -egenskapen i CSS, påvirker du hele beholderen og alt innholdet i det. Dette er nyttig noen ganger, men du vil kanskje bare ha bakgrunnen gjennomsiktig og la teksten og bildet være 100% ugjennomsiktig. Her kommer "Alpha" verdien igjen.
CSS3 lar oss bruke et RGB-fargest format, inkludert en fjerde verdi ved navn Alpha. Dette er ikke et nytt konsept, PNG-bilder bruker alfakanalen til å angi gjennomsiktigheten av piksler på et bilde til en verdi fra 0 til 1 (0% til 100%). Dette skaper en bedre gjennomsiktighetseffekt enn GIF-bilder, fordi de bare angir en synlig / usynlig verdi for pikslene.
Ta for eksempel følgende grafikk:
Legg merke til at jeg bare endrer opaciteten på det gule bakgrunnslaget.
For denne typen effekter er det "RGBA"(Rød, grønn, blå, alfa) fargeverdi:
RGBA (
.ugjennomsiktig bakgrunnsfarge: rgba (255, 150, 0, 1); / * Alpha = 1 betyr 100% ugjennomsiktig * /
Og hvis du vil redusere uklarheten til bakgrunnen for å gjøre den gjennomskinnelig, er det like enkelt som å endre den siste verdien på rgba-fargeparametrene.
.gjennomsiktig bakgrunnsfarge: rgba (255, 150, 0, .6); / * Alpha = .6 betyr 60% ugjennomsiktig * /
Som rgba farge oppfører seg som en klassisk heksadesimale farge kan du bruke den på en lineær gradient bakgrunn.
.translucentgradient bakgrunnsbilde: -moz-lineær gradient (topp, rgba (255, 150, 0, 9), rgba (255, 150, 0, 1)); bakgrunnsbilde: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (rgba (255, 150, 0, 9)) til (rgba (255, 150, 0, 1)) , fargestopp (1, rgba (255, 150, 0, .1)));
Og selvfølgelig kan du kombinere den med opacity-stilen for å skape gode overgangseffekter.
.translucent_transition opacity: 0.4; -webkit-overgang: alle 1s lett-i-ut; -moz-overgang: alle 1s lett-i-ut; -o-overgang: alle 1s lett-i-ut; -ms-overgang: alle 1s lett-i-ut; overgang: alle 1s lett-i-ut; bakgrunnsbilde: -moz-lineær gradient (topp, rgba (255, 150, 0, .9), rgba (255, 150, 0, .1)); bakgrunnsbilde: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (rgba (255, 150, 0, 9)) til (rgba (255, 150, 0, 1)) , fargestopp (1, rgba (255, 150, 0, .1))); .translucent_transition: svever opacity: 1;
La oss nå prøve noe mer komplekst. Vi kombinerer flere bilder bakgrunner ved hjelp av gjennomsiktighet, en hover opacity effekt og avrundede hjørner og boks skygger for å skape en følelse av dybde.
La oss starte med photoshop, i opplæringsobjektene finner du PSD med følgende grafikk:
Vi vil prøve å få et eksakt resultat ved hjelp av bare CSS3-stiler. Det vil være et par eksempler på bilder for miniatyrbildet på seksjonene, og en mønsterbakgrunn (du er velkommen til å lage din egen). Denne gangen brukte jeg bgpatterns.com til å lage et gjentatt bilde.
La oss starte med HTML-oppslaget, ingenting for komplisert:
Transparens og Opacity
Noen tekst her
Transparens og Opacity
Noen tekst her
Nå den morsomme delen, CSS. Først tilbakestille standardstilene, angi kroppstypografi og angi stilene for wrapper-delen:
/ * Tilbakestill * / html, kropp, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, skjema, feltsett, tabell, th, td , img margin: 0; polstring: 0; border: 0px; overskrift, seksjon, bunntekst, til side, nav, artikkel, figur display: block; / * End of Reset * / body font-familie: Arial, Helvetica, sans-serif; color: # 333; html høyde: 100%; / * Hvis du vil legge til en CSS3-gradient på hele siden, må du sette denne høyden til 100% * / .wrapper margin: 0px auto; bredde: 960 x; polstring: 60px 0px 60px 0px; .left text-align: left;
Sett deretter kroppens bakgrunn, i utgangspunktet et gjentatt bilde (du kan bruke hvilket som helst bilde du vil ha)
/ * Body image background * / body height: 100%; bakgrunn: url (bilder / bg.png); / * Bildebakgrunn * /
Nå vil vi sette stilene til en annen wrapper div kalt "side", denne diven vil ha stort sett samme bredde og høyde som nettleservinduet, og enda viktigere vil vi legge til en lineær gradientbakgrunn ved hjelp av RGBA-farger.
/ * Transparent Gradient * / .side bredde: 100%; høyde: 100%; bakgrunn: -moz-lineær gradient (topp, rgba (15,20,5,0,75) 0%, rgba (15,20,5,0) 50%, rgba (15,20,5,0,75) 100%) ; / * Transparent Gradient * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (rgba (15,20,5,0,75)), fargestopp (0,5, rgba (15,20,5,0 )), til (rgba (15,20,5,0,75)); / * Transparent gradient * /
Nå sett stilen på containerseksjonen, en avrundet hjørneboks med gjennomsiktig bakgrunn.
/ * RGBA gjennomsiktig bakgrunn * / .container width: 770px; padding: 15px; høyde: 460px; margin: 0px auto; / * Gjennomsiktig bakgrunn * / bakgrunn: rgba (89, 113, 29, 0,5); / * Border Radius * / border: 1px solid # 71941D; -moz-grense-radius: 20px; -webkit-grense-radius: 20px; -khtml-grense-radius: 20px; border-radius: 20px; / * Bli kvitt Bleed * / -moz-background-clip: padding; -webkit-bakgrunnsbilder: polstring-boks; bakgrunnsbilder: polstring / * Box Shadow * / box-shadow: 0px 0px 25px rgba (0,0,0,0,75); -moz-boks-skygge: 0px 0px 25px rgba (0,0,0,0,75); -webkit-boks-skygge: 0px 0px 25px rgba (0,0,0,0,75);
Det begynner å ta form. Sett nå stilene på innholdsruten. Still inn posisjonen, en avrundet hjørneeffekt, en gradient gjennomsiktig bakgrunn, og vi kombinerer den med en sveveffekt som øker opaciteten på musen over (for dette muliggjør overgangseffektene).
.boks / * Posisjon * / polstring: 10px; margin-bottom: 20 piksler; min-høyde: 200px; / * Gjennomsiktig Gradient Bakgrunn * / Bakgrunn: -moz-lineær-gradient (topp, rgba (26,35,8,0), rgba (26,35,8,0,85)); / * Transparent Gradient * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (rgba (26,35,8,0,15)), til (rgba (26,35,8,0,85))); / * Gjennomsiktig Gradient * / / * Avrundet hjørner * / -moz-grense-radius: 5px; -webkit-grense-radius: 5px; -khtml-grense-radius: 5px; border-radius: 5px; / * Fest blødet * / -moz-bakgrunnsblekk: polstring; -webkit-bakgrunnsbilder: polstring-boks; bakgrunnsbilder: polstring / * Skjul det litt til musen over * / opacity: 0.4; / * Aktiver overgangseffekter * / -webkit-overgang: alle 1s brukervennlighet; -moz-overgang: alle 1s lett-i-ut; -o-overgang: alle 1s lett-i-ut; -ms-overgang: alle 1s lett-i-ut; overgang: alle 1s lett-i-ut; .box: svever opacity: 1;
La oss nå legge til de siste detaljene, for HTML-elementene i boksene. Du kan prøve å legge til flere effekter på elementene på statisk modus og svinger, denne gangen vil jeg gjøre en bokseskygge synlig på "img" -taggen når musen er over "boks" -delen:
.boks img float: left; margin-right: 20px; grense: 1px solid # 71941D; .box: hover img box-shadow: 5px 5px 5px rgba (0,0,0,0,50); -moz-boks-skygge: 5px 5px 5px rgba (0,0,0,0,30); -webkit-boks-skygge: 5px 5px 5px rgba (0,0,0,0,30); .box h3 font-size: 14px; font-vekt: bold; color: # 8eb548; text-transform: store bokstaver; padding-bottom: 20 piksler; .box p color: # c0cf9d; font-size: 11px; linje-høyde: 150%;
Og det er det, la oss se hvordan det ser ut i en nettleser:
Det er ingen grense for hva som kan gjøres ved hjelp av transparenter og opasitetseffekter kombinert med andre CSS3-stiler. Prøv det nå!
Accentsconagua
Dette er et 100% ugjennomsiktig element, alt i denne taggen er fullt synlig 
