Share
În timpul acestui tutorial rapid, vom aborda conceptele Opacitate și Transparență în elemente HTML. Vom juca cu un set de efecte care, înainte de CSS3, ar putea fi obținute doar prin utilizarea mai multor imagini create în Photoshop.
Notă: Toate exemplele de mai jos au fost testate pe Mozilla Firefox, Safari și Chrome. Dacă doriți să obțineți ceva similar în IE sau în orice alt browser, lăsați un comentariu și vă voi ajuta cu plăcere.
În acest tutorial vom folosi Fundaluri Gradient, Box Shadows și Imagini Multiple Images, subiecte abordate în primele două tutoriale din această serie:
Dacă ați folosit vreodată Photoshop sau un pachet grafic similar, veți cunoaște valoarea Opacity. Această magie funcționează prin mărirea sau micșorarea transparenței oricărui element grafic într-o valoare procentuală, de la 0% (Complet invizibil) la 100% (Complet vizibil). Acest procent este valoarea "Alpha", voi explica cum funcționează mai târziu în tutorial.
CSS3 include proprietatea "opacitate", gata să fie implementată în toate browserele moderne, dar cum funcționează? Imaginați-vă că aveți trei elemente Photoshop dintr-un dosar, așa cum se arată în imaginea de mai jos: o imagine, o linie de text și o pătrată solidă pe fundalul unei imagini. Imaginea, textul și pătratul galben se află în interiorul unui dosar numit "Secțiune". Prin reducerea procentului de Opacitate din acel dosar, toate straturile din acesta vor apărea mai transparente.
În CSS3 lucrurile funcționează cam la fel. Folderul a devenit un element HTML container (un div, un paragraf, o secțiune etc.) Prin urmare, modificarea proprietății "opacității" a acelui element va (ca și în Photoshop) crește sau reduce vizibilitatea tuturor elementelor din interiorul acestuia. Luați, de exemplu, acest marcaj HTML:
Acesta este un element opac 100%, totul din interiorul acestei etichete este pe deplin vizibil
Acum, să vedem CSS pentru marcajul anterior.
/ * Imaginea completă a paginii * / body.image background-image: url (images / bg.jpg); fundal-poziție: centrul de top; background-attachment: fix; background-repeat: no-repetare; / * Test de opacitate * / .opaque opacitate: 1; translucent60 opacitate: 0,6;
După cum vedeți, schimbarea opacității este foarte ușoară, dar când o veți folosi? O tehnică foarte eficientă este creșterea opacității pe :planare pseudoclass:
.translucent_on_hover opacitate: 0,4; .translucent_on_hover: treceți opacity: 0.9;
Dar dacă vreți a într-adevăr efect impresionant, puteți să aruncați în unele tranziții?
Un efect de tranziție interpolează stările intermediare între două etape sau instanțe ale oricărui stil de element HTML.
Pentru a păstra lucrurile simple pentru moment, să analizăm codul de bază al unui efect de tranziție (într-un interval de timp de 1 secundă).
-webkit-tranziție: toate 1s ease-in-out;
-moz-tranziție: toate 1s ease-in-out;
-o-tranziție: toate 1s easy-out-out;
-ms-transition: toate 1s easy-in-out;
tranziție: toate 1s ușurință-în-out;
Aluzie: Pentru a vă garanta că nu pierdeți vreunul din prefixele diferite ale browserului, consultați instrumentul Prefxr lansat recent de Jeffrey Way. Este roci.
Trebuie doar să atașați această regulă CSS elementului pe care doriți să îl animați cu un efect de tranziție, cum ar fi:
.translucent_transition opacitate: 0,4; -webkit-transition: toate 1s ease-in-out; -moz-tranziție: toate 1s ușurință-în-out; -o-tranziție: toate 1s ușurință-în-out; -ms-transition: toate 1s ease-in-out; tranziție: toate 1s ușurință-în-out; .translucid_transition: hover opacitate: 0.9;
Stilul "ușurință în afară" înseamnă că tranziția de opacitate se va întâmpla când se va deplasa (crescând opacitatea) și va reveni (scăderea opacității) înapoi la valoarea inițială atunci când cursorul se mișcă în afara elementului.
Fiecare pixel de culoare poate fi creat prin combinarea a trei seturi de valori: Roșu, Verde și Albastru, fiecare de la 0 la 255.
De obicei, folosim valorile hexazecimale pentru culorile din foile dvs. de stil, de exemplu culorile de bază:
Puteți obține aceleași culori utilizând valorile RGB în CSS, după cum urmează: rgb (.
O modalitate ușoară de a obține valorile RGB de orice culoare este prin utilizarea Color Picker din Photoshop, așa cum se arată în imaginea de mai jos.
Când aplicați proprietatea "opacitate" în CSS, afectează întregul container și tot conținutul din el. Acest lucru este util uneori, dar este posibil să doriți doar ca fundalul să fie transparent și să lăsați textul și imaginea 100% opacă. Aici vine din nou valoarea "Alpha".
CSS3 ne permite să folosim un format de culoare RGB care include o a patra valoare numită Alpha. Acesta nu este un concept nou, imaginile PNG folosesc canalul alfa pentru a seta transparența pixelilor unei imagini la o valoare de la 0 la 1 (0% până la 100%). Acest lucru creează un efect de transparență mai bun decât gestionarea imaginilor GIF, deoarece acestea stabilesc doar o valoare vizibilă / invizibilă pentru pixeli.
Luați, de exemplu, următorul grafic:
Observați că schimb doar opacitatea pe stratul de fundal galben.
Pentru astfel de efecte, există "RGBA"(Roșu, verde, albastru, alfa) valoare de culoare:
RGBA (
.opacă fundal-culoare: rgba (255, 150, 0, 1); / * Alpha = 1 înseamnă 100% opac * /
Și dacă doriți să reduceți opacitatea fundalului pentru ao face translucidă, este la fel de ușor ca modificarea ultimei valori a parametrilor de culoare rgba.
.translucid culoare-fundal: rgba (255, 150, 0, .6); / * Alpha = .6 înseamnă 60% opac * /
Deoarece culoarea rgba se comportă ca o culoare clasică hexazecimală, puteți să o utilizați pe un fundal liniar gradient.
.translucent_gradient background-image: -moz-linear-gradient (top, rgba (255, 150, 0, .9), rgba (255, 150, 0,. (rgba (255, 150, 0, .9)), la (rgba (255, 150, 0, .1)) , stop color (1, rgba (255, 150, 0, .1));
Și, desigur, o puteți combina cu stilul de opacitate pentru a crea efecte de tranziție frumoase.
.translucent_transition opacitate: 0,4; -webkit-transition: toate 1s ease-in-out; -moz-tranziție: toate 1s ușurință-în-out; -o-tranziție: toate 1s ușurință-în-out; -ms-transition: toate 1s ușurință-out-out; tranziție: toate 1s ușurință-în-out; fundal-imagine: -moz-linear-gradient (top, rgba (255, 150, 0, .9), rgba (255, 150, 0, .1)); (rgba (255, 150, 0, .9)), la (rgba (255, 150, 0, .1)) , stop color (1, rgba (255, 150, 0, .1)); .translucționarea_întreruptă: treceți opacitate: 1;
Acum, să încercăm ceva mai complex. Vom combina mai multe fundaluri de imagini utilizând transparența, efectul de opacitate al hover-ului și colțurile rotunjite și umbrele cutiei pentru a crea un sentiment de profunzime.
Să începem cu photoshop, în materialele tutorial veți găsi PSD cu următorul grafic:
Vom încerca să obținem un rezultat exact utilizând numai stilurile CSS3. Vor exista câteva exemple de imagini pentru miniatură pe secțiuni și un fundal model (sunteți binevenit să creați propriul dvs.). De data aceasta am folosit bgpatterns.com pentru a crea o imagine repetată.
Să începem cu marcajul HTML, nimic prea complicat:
Transparență și opacitate
Un text aici
Transparență și opacitate
Un text aici
Acum, partea distractivă, CSS. Mai întâi resetați stilurile implicite, setați tipografia corporală și setați stilurile pentru secțiunea de înfășurare:
/ * Resetare * / html, corp, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, , img margine: 0; umplutura: 0; frontieră: 0px; antet, secțiune, subsol, în afară, nav, articol, cifră display: block; / * Sfarsitul Resetului * / body font-family: Arial, Helvetica, sans-serif; Culoare: # 333; html înălțime: 100%; / * Pentru a adăuga un gradient CSS3 al întregii pagini, trebuie să setați această înălțime la 100% * / .wrapper margin: 0px auto; lățime: 960 x; zăpadă: 60px 0px 60px 0px; .left text-align: left;
Apoi, setați fundalul corpului, practic o imagine repetată (puteți utiliza orice imagine doriți)
/ * Imaginea corpului fundal * / corp înălțime: 100%; fundal: url (imagini / bg.png); / * Imagine de fundal * /
Acum, vom seta stilurile unei alte div wrap numite "page", div va avea în esență aceeași lățime și înălțime ca fereastra browserului și, mai important, vom adăuga un fundal gradient liniar folosind culori RGBA.
/ * Transparent Gradient * / .page lățime: 100%; înălțime: 100%; fundal: -moz-linear-gradient (top, rgba (15,20,5,0,75) 0%, rgba (15,20,5,0) 50%, rgba (15,20,5,0,75) 100% ; / * Gradient transparent / fundal: -webkit-gradient (liniar, stânga sus, fund stânga, de la (rgba (15,20,5,0,75)), stop color (0.5, rgba )), la (rgba (15,20,5,0,75))) / * Transparent Gradient * /
Acum, setați stilul secțiunii containerului, o cutie de colț rotunjită, cu fundal translucid.
/ * RGBA fundal transparent * / .container width: 770px; padding: 15px; height: 460px; margine: 0 pixeli auto; / * Fundal Translucent * / fundal: rgba (89, 113, 29, 0.5); / * Raza frontierei * / margine: 1px solid # 71941D; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; / * Scapa de Bleed * / -moz-background-clip: padding; -webkit-background-clip: căptușeală; fundal-clip: padding-box; / * Umbra cutie * / box-shadow: 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);
Încep să se formeze. Acum, setați stilurile casetelor de conținut. Setați poziția, un efect de colț rotunjit, un fundal gradient translucid și îl vom combina cu un efect de hovering crescând opacitatea cu mouse-ul peste (pentru a permite acest lucru efectele de tranziție).
.cutie / * Poziție * / umplutură: 10px; margin-bottom: 20px; min-height: 200px; / * Gradient Translucent Background * / fundal: -moz-linear-gradient (top, rgba (26,35,8,0), rgba (26,35,8,0,85)); / * Gradient transparent * / fundal: -webkit-gradient (liniar, stânga sus, fund stânga, de la (rgba (26,35,8,0,15)), la (rgba (26,35,8,0,85)); / * Gradient transparent * / / * Colțuri rotunjite * / -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; raza de graniță: 5px; / * Fixați sângerarea * / -moz-fundal-clip: padding; -webkit-background-clip: căptușeală; fundal-clip: padding-box; / * Ascunde un pic până când mouse-ul peste * / opacitate: 0.4; / * Activați efectele de tranziție * / -webkit-transition: toate 1s ease-in-out; -moz-tranziție: toate 1s ușurință-în-out; -o-tranziție: toate 1s ușurință-în-out; -ms-transition: toate 1s ușurință-out-out; tranziție: toate 1s ușurință-în-out; .box: mutați opacity: 1;
Acum, să adăugăm ultimele atingeri, pentru elementele HTML din interiorul cutiilor. Puteți încerca să adăugați mai multe efecte la elementele în modul static și să treceți, de data aceasta voi face o umbră cutie vizibilă pe eticheta "img" atunci când mouse-ul este peste secțiunea "cutie":
.caseta img float: left; marja de-dreapta: 20px; frontieră: 1px solid # 71941D; .box: plasați 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; Culoare: # 8eb548; text-transform: majuscule; padding-bottom: 20px; .box p culoare: # c0cf9d; font-size: 11px; line-height: 150%;
Și asta este, să vedem cum arată într-un browser:
Nu există nicio limită a ceea ce se poate face utilizând transparentele și efectele de opacitate combinate cu alte stiluri CSS3. Încearcă acum!
Accentsconagua
Acesta este un element opac 100%, totul din interiorul acestei etichete este pe deplin vizibil 
