CSS3 Transitioune schafen Nice Fade Effects
Webdesigner hu scho laang Ufuerderunge méi Kontroll iwwert d'Säiten, déi se erschafft hunn wéi CSS3 op d'Bühn koum. Déi nei Stile agefouert bei CSS3 huet Web Professionnelen d'Méiglechkeet fir Photoshop-ähnlech Effekter op seng Säiten ze kréien. Dëst beinhalt d'Eegeschafte wéi d' Tropfe Schatten an d'Liichte , ronnen Ecken, a méi. CSS3 huet och Animatiounsseeffekte agefouert, déi benotzt kënne fir eng gutt Interaktivitéit op Siten ze kreéieren.
E ganz schéine visuelle Effekt, deen Dir mat Elementer an der Websäit benotzt, andeems CSS3 benotzt, ass fir datt se a Kombinatioun vun den Eegeschafte fir Opazitéit an Iwwergang verbonne sinn. Dëst ass eng einfach a gutt Ënnerstëtzung fir Äert Säiten méi interaktiv ze maachen andeems geschmuddelten Gebidder entstinn, wann ee Site Visiteur eppes mécht wéi d'Maus iwwert deem Element.
Loosst eis kucken, wéi einfach et ass dës interagéiere visuellt Effekt op verschidde Elementer op Äert Websäiten ze setzen.
Ët Ängschter Opazitéit op Hover änneren
Mir fänken un ze kucken wéi d'Opazitéit vun engem Bild geännert gëtt, wann e Client iwwer dësen Element schwëcht. Fir dëst Beispill (de HTML gëtt hei ënnendrënner genannt) benotze mir e Bild mat der Klass Attribut vu greydout.
Fir et gären ze maachen, addéiere mer déi folgend Stiler Regelen fir eis CSS Stylesheet:
.greydout {
-webkit-Opazitéit: 0,25;
-moz-Opazitéit: 0,25;
Opazitéit: 0,25;
}}
Dës Opazetoparameter iwwersetzen op 25%. Dëst bedeit datt den Image als 1/4 vun senger normaler Transparenz steet. Ganz iewescht Duerchsicht mat Transparenz wier 100%, 0% wier total transparent.
Als nächstes, fir d'Bild ganz kloer ze maachen (oder méi genee, voll opkawe gëtt) wann d'Maus iwwerhaapt gedréckt ass, addéiere mer déi: Pseudo-Klasse bewegen:
.galidout: hover {
-webkit-opacity: 1;
-moz-Opazitéit: 1;
Opazitéit: 1;
}}
Dir wësst, datt fir dës Beispiller ech den Vendor prefixe Versioune vun der Regel benotze fir d'Konkurrenz op d'Säit ze verstoe fir méi al Versioune vun dëse Browseren. Obwuel dat eng gutt Praxis ass, ass d'Realitéit datt d'Opazitéitreeg nu gutt duerch Browsers ënnerstëtzt gëtt an et ass sécher ganz sécher déi Verkafspresident ze benotzen. Et gëtt och keng Ursaach, dës Präfixe net opzeginn, wann Dir Hëllef fir méi Browser-Versionen maacht. Gitt sécher datt d'akzeptéiert Best practice vun der Erklärung mat der normaler, onbefaasster Versioun vum Stil beendert ass.
Wann Dir dës op engem Site implizéiert hutt, da géifs du gesinn, datt dës Opazittergeriicht eng ganz abrupt Ännerung ass. Éischt ass et gro an dann ass et net, ouni Zwëschenzäit tëscht deenen zwee. Et ass wéi e Lichtmodus - on oder off. Dëst kann et sinn wat Dir wëllt, awer Dir kënnt och experimentéieren mat enger Verännerung, déi méi progressiv ass.
Fir e wierklech e bëssen Effekt ze maachen a grad sou ze verfollegen, datt Dir d'Iwwergangsgeescht op d'Grëppele gitt:
.greydout {
-webkit-Opazitéit: 0,25;
-moz-Opazitéit: 0,25;
Opazitéit: 0,25;
-Webkit-Iwwergank: all 3s liicht;
-moz-Übergang: all 3s liicht;
-ms- Iwwergank: all 3s liicht;
-o-Iwwergank: all 3s liicht;
Iwwergang: all 3s liicht;
}}
Mat dësem Code ass d'Verännerung graduell ufänkt wéi just ëmgeännert.
Eng Kéier erhofft mir eng Rei vu Viraussetzer virgeschloen Regelen. Transitioun ass net esou gutt wéi Opazitéit, dofir sinn dës Präfixe Sënn.
Eppes wat se erënnert wéi Dir dës Interaktiounen plangt, ass, datt Touchscreen-Geräter keen "Schwieregkeets-State" hunn, fir dës Effekter och oft op deen, deen e Touchscreen-Gerät wéi e Mobiltelefon benotzt, verluer. Den Iwwergank geet oft a geschitt, awer et geschitt esou séier datt se wierklech net gesinn kënne ginn. Dat ass gutt, wann Dir dëst als e positiven Bonus Effekt huet, awer evoluéieren datt all Ännerungen, déi fir Inhalt ze verstoen ass verstane ginn.
Ausgezeechen ass méiglech
Dir musst net mat engem klenge Bild beginn, Dir kënnt Iwwergänzer a Opazitéit benotze fir aus engem ganz opaken Bild ze verblassen. Benotzt datselwecht Bild, nëmme mat enger Klass vun fromfadeout:
class = "withfadeout">
Just wéi virdru verännert Dir d'Opazitéit mat dem: hover selector:
.withfadeout {
-Webkit-Iwwergank: all 2s easy-in-out;
-moz-transition: all 2s easy-in-out;
-ms-Iwwergank: all 2s easy-in-out;
-o-Iwwergank: all 2s easy-in-out;
Iwwergang: all 2 s ease-in-out;
}}
.withfadeout: hover {
-webkit-Opazitéit: 0,25;
-moz-Opazitéit: 0,25;
Opazitéit: 0,25;
}}
An dësem Beispill wäerte d'Bild vu véier opmaacht bis eppes transparent maachen - d'Réck vun eisem éischte Beispill.
Gitt iwwer Biller
Et ass exzellent, datt Dir dës visuell Transitioune benotzt an Dir fällt op Biller, awer Dir sidd net limitéiert datt Dir nëmme Biller mat dësen CSS Effekter benotzt. Dir kënnt et ganz einfach CSS-styléiert Knäppchen erofhuelen, déi gefeelt wann Dir geklickt an gehal. Dir géift d'Opazitéit just mat der aktiver Pseudo-Klass setzen an den Iwwergang op der Klass setzen, déi den Knäpp definéiert. Klickt an hält dëse Knäppchen fir ze kucken wat geschitt.
Et ass méiglech datt jiddwereen visuell Element fäerdeg fillt wann een iwwer d'Gesiicht geklappt oder geklickt gëtt. An dësem Beispill ännert ech d'Opazitéit vum Div an d'Faarf vum Text, wann d'Maus iwwer dat ass. Hei ass de CSS:
#myDiv {
Breet: 280px;
Hannergrond-Faarf: # 557A47;
Faarf: #dfdfdf;
Polsterei: 10px;
-webkit-Übergang: all 4s easy-out 0s;
-moz-transitioun: all 4s easy-out 0s;
-ms- Iwwergank: all 4s easy-out 0s;
-o-Iwwergank: all 4s easy-out 0s;
Iwwergang: all 4s erstaunlech 0s;
}}
#myDiv: hover {
-webkit-Opazitéit: 0,25;
-moz-Opazitéit: 0,25;
Opazitéit: 0,25;
Faarf: # 000;
}}
Navigatiounsmenü Benefix vu Fading Background Colors
An dësem einfache Navigatiounsmenü fänkt d'Hannergrond lues a lues wéi a Maus iwwer d'Menüen. Hei ass d'HTML:
- Home
- CSS3 Tutorials
- CSS3 Properties
An hei ass de CSS:
ul # sampleNav {list style: none; }}
# Ech hunn net {
Affichage: Inline;
fléien: lénks;
Polsterei: 5px 15px;
Rand: 0 5px;
-Webkit-Iwwergank: all 2s linear;
-moz-transitioun: all 2s linear;
-ms- Iwwergank: all 2s linear;
-o-Iwwergank: all 2s linear;
Iwwergang: all 2s linear;
}}
# Ech si kee {Text-Dekor: keng; }}
# Ech hunn net: hover {
Background-Color: # DAF197;
}}
Browser Support
Wéi ech schon e puer mol ugedoen hunn, hunn dës Stiler ganz gutt Browser ënnerstëtzt, sou datt Dir se fräi fillt se ze benotzen ouni keng Trepidatioun. Déi eenzeg Ausnahm op dëst ass méi al Versioune vun Internet Explorer, awer mat der neier Entscheedung vun Microsoft fir d'Ënnerstëtzung vun all Versionen vun IE ënnert 11 ze benotzen, ginn dës al Browser net manner an e Problem - a realistesch, wann e méi e Browser net Dës Iwwersetzungssaison gesinn, dat sollt net e grousse Problem sinn. Sou laang wéi Dir dës Eegeschafte fir ze genéissen Interaktiounen beschränkt sidd an net se op si ze benotzen fir Funktionalitéit ze maachen oder Schlëssel Inhalt ze maachen, äert Browser, déi d'Effet net ënnerstëtzen, e manner erfreelege Erfahrung erreechen, awer Benotzer op dësen Browseren wäerten net kennen den Ënnerscheed, besonnesch wann se d'Site als normal benotzen an d'Informatioun benotzen, déi se brauchen.
Extra Fun; Swap Two Images
Hei ass e Beispill fir wéi ee Bild op en aneren verännert. Benotzt den HTML:
A datt de CSS en voll Transparenz maacht, wann déi aner ganz oppaken an dann den Iwwergang switt zwéi:
.swapMe img {-webkit-Iwwergank: all 1s easy-in-out; -moz-Übergang: all 1s easy-in-out; -ms-Iwwergank: all 1s easy-in-out; -o-Iwwergank: all 1s easy-in-out; Iwwergang: all 1s easy-in-out; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-Opazitéit: 1; Opazitéit: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -Moz-Opazitéit: 0; Opazitéit: 0; }}