Transicions CSS3 Crea agradables efectes de desaparició
Els dissenyadors web havien desitjat més control sobre les pàgines que estaven creant quan CSS3 va tocar l'escena. Els nous estils introduïts en CSS3 van donar als professionals del web la possibilitat d'afegir efectes similars a Photoshop a les seves pàgines. Això incloïa propietats com ombres i glows , cantonades arrodonides i molt més. CSS3 també va introduir efectes semblants a l'animació que es poden utilitzar per crear una bona interactivitat als llocs.
Un efecte visual molt bonic que podeu afegir als elements del vostre lloc web mitjançant CSS3 és fer-los desaparèixer amb una combinació de propietats per opacitat i transició. Aquesta és una manera senzilla i ben compatible de fer que les vostres pàgines siguin més interactives creant àrees desaparegudes que es posin en focus quan un visitant del lloc faci alguna cosa, com ara passar-se per sobre d'aquest element.
Anem a veure el fàcil que és afegir aquest efecte visual interactiu a diversos elements de les seves pàgines web.
Permet canviar l'opacitat al desplaçar-vos
Anem a començar a veure com canviar l'opacitat d'una imatge quan un client flota sobre aquest element. Per a aquest exemple (l'HTML es mostra a continuació) estic fent servir una imatge amb l'atribut class de greydout.
Per fer-ho, afegim les següents regles d'estil al nostre full d'estils CSS:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacitat: 0,25;
}
Aquesta configuració d'opacitat es tradueix al 25%. Això significa que la imatge es mostrarà com 1/4 de la seva transparència normal. Tot opac i sense transparència seria del 100% i el 0% seria totalment transparent.
A continuació, per fer que la imatge quedi clara (o amb més precisió, per tornar-se completament opac) quan el ratolí es trobi sobre el mateix, afegiu el següent: pseudoclasione:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacitat: 1;
}
Notaràs que, per a aquests exemples, estic utilitzant les versions prefixades del venedor de la regla per garantir la compatibilitat amb versions anteriors d'aquests navegadors. Si bé aquesta és una bona pràctica, la realitat és que la norma d'opacitat ara és compatible amb els navegadors i és bastant segur deixar aquestes línies prefixades. Tot i així, no hi ha cap motiu per no incloure aquests prefixos si voleu assegurar el suport per a versions anteriors del navegador. Només assegureu-vos de seguir la millor pràctica acceptada de finalitzar la declaració amb la versió normal sense prefixar l'estil.
Si heu implementat això en un lloc, veuríeu que aquest ajust d'opacitat és un canvi molt abrupte. Primer és gris i no ho és, sense estats provisionals entre aquests dos. És com un interruptor de llum: activat o desactivat. Això pot ser el que vulgueu, però és possible que també vulgueu experimentar amb un canvi més gradual.
Per afegir un efecte realment bo i fer que s'esvaeixi gradualment, voleu afegir la propietat de transició a la classe .greydout:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacitat: 0,25;
-webkit-transition: all 3s easiness;
-moz-transition: all 3s easiness;
-ms-transition: all 3s easiness;
-o-transition: all 3s easiness;
transició: totes 3s facilitat;
}
Amb aquest codi, el canvi passaria gradualment més que no només canviant bruscament.
Una vegada més, estem utilitzant aquí diverses regles prefixades per a proveïdors. La transició no està tan bé recolzada com l'opacitat, de manera que aquests prefixos tenen sentit.
Una cosa que cal recordar a mesura que planifiqueu aquestes interaccions és que els dispositius de pantalla tàctil no tenen un estat de "desplaçament", de manera que aquests efectes sovint es perden en qualsevol persona que utilitzi un dispositiu de pantalla tàctil com un telèfon mòbil. Sovint passa la transició, però passa tan ràpid que realment no es pot veure. Està bé si afegiu això com a bon efecte addicional, però eviteu els canvis necessaris per veure'n el contingut.
L'esvaïment és possible també
No heu de començar amb una imatge esbiaixada, podeu utilitzar les transicions i l'opacitat per desaparèixer d'una imatge totalment opaca. Utilitzant la mateixa imatge, només amb una classe de deficiència:
class = "withfadeout">
Igual que abans, canvieu l'opacitat mitjançant el següent: selector de desplaçament:
.withfadeout {
-webkit-transition: all-us-out-2;
-moz-transition: all-2s facilitat-in-out;
-ms-transition: all-2s facilitat-in-out;
-o-transition: all-easy-in-out;
transició: totes dues facilitats-in-out;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacitat: 0,25;
}
En aquest exemple, la imatge passaria de forma totalment opaca a una mica transparent: al revés del nostre primer exemple.
Anant més enllà de les imatges
És excel·lent que podeu aplicar aquestes transicions visuals i es desfà a les imatges, però no es limita a utilitzar imatges amb aquests efectes CSS. Podeu fer que els botons d'estil CSS es desfan quan es fa clic i es mantingui. Només hauríeu d'establir l'opacitat mitjançant: pseudoclasi activa i posar la transició a la classe que defineix el botó. Feu clic i manteniu premut aquest botó per veure què passa.
És possible fer que, essencialment, qualsevol element visual es desaparegui quan es mantingui o s'hagi activat. En aquest exemple, canvi l'opacitat de la div i el color del text quan el ratolí està sobre ell. Aquí teniu el CSS:
#myDiv {
ample: 280 px;
color de fons: # 557A47;
color: #dfdfdf;
farcit: 10px;
-webkit-transition: tots els 4s ease-out 0s;
-moz-transition: tots els 4s ease-out 0s;
-ms-transition: tots els 4s facilitats de sortida 0s;
-o-transition: tots els 4s facilitats de sortida 0s;
transició: all-out 4s 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacitat: 0,25;
color: # 000;
}
Els menús de navegació poden beneficiar-se dels colors de fons descolorits
En aquest senzill menú de navegació, el color de fons s'esvaeix lentament a mesura que fa clic sobre els elements del menú. Aquí teniu l'HTML:
- Inici
- Tutorials CSS3
- Propietats CSS3
I aquí teniu el CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
visualització: en línia;
flota: esquerra;
farcit: 5px 15px;
marge: 0 5px;
-webkit-transition: tots els 2s lineals;
-moz-transition: all 2s lineals;
-ms-transition: all 2s lineals;
-o-transition: tots els 2s lineals;
transició: tots els 2 lineals;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
color de fons: # DAF197;
}
Suport del navegador
Com ja he tingut algunes vegades, aquests estils tenen un bon suport per al navegador, així que hauries de sentir-te lliure d'usar sense cap temor. L'única excepció a això és versions molt més antigues d'Internet Explorer, però amb la recent decisió de Microsoft d'acabar amb el suport de totes les versions d'IE per sota de 11, aquests navegadors més antics són cada cop menys un problema i, realment, si un navegador antic no ho fa vegeu aquesta transició fade, que no hauria de ser un problema important. Sempre que confineu aquest tipus d'efectes a les interaccions agradables i no confiï en ells per manejar la funcionalitat o revelar el contingut clau, els navegadors antics que no admetin els efectes obtindran una experiència menys agradable, però els usuaris d'aquests navegadors ni tan sols Coneix la diferència, especialment si poden utilitzar el lloc com a normal i obtenir la informació que necessiten.
Extra Fun; Intercanvi de dues imatges
Aquí teniu un exemple de com es desfà una imatge en una altra. Utilitzeu l'HTML:
I el CSS que fa que sigui totalment transparent mentre que l'altre sigui completament opac i després la transició canvia els dos:
.swapMe img (-webkit-transition: all-easy-in-out; -moz-transition: all-easy-in-out; -ms-transition: all-easy-in-out; -o-transition: all-easy-in-out; transició: totes 1s facilitat-in-out; } .swap1, .swapMe: hover .swap2 (-webkit-opacity: 1; -moz-opacity: 1; opacitat: 1; } .swapMe: hover .swap1, .swap2 (-webkit-opacity: 0; -moz-opacity: 0; opacitat: 0; }