CSS3-transysjes meitsje in noflike fage-effekten
Webûntwerpers hiene langer mear kontrôle oer de siden dy't se kreëarje wiene doe't CSS3 it sintrum rekke. De nije stilen ynfierd yn CSS3 joegen web-professionals de mooglikheid om Photoshop-like effekten oan har siden te foegjen. Dit omfetsje eigenskippen lykas drippen skaden en glêzen , rûnte hoeken, en mear. CSS3 hat ek animaasje-like effekten ynsteld dy't brûkt wurde om leuke ynteraktiviteit op websiden te meitsjen.
Ien tige moai fisueel effekt kinst tafoegje oan eleminten op jo webside mei CSS3 is om har yn en út te meitsjen mei gebrûk fan in kombinaasje fan de eigenskippen foar ûnevenheid en oergong. Dit is in maklike en goed stipe manier om jo siden mear ynterakt te meitsjen troch kreëarre gebieten te meitsjen dy't yn fokus komme, as in side besykje wat te meitsjen, lykas oer itselde elemint.
Litte wy sjen hoe it maklik it is om dizze ynteraktive fisuele effekt oan ferskillende eleminten te meitsjen op jo websiden.
Lit 'Opsjenning' op Hover feroarsaakje
Wy sille begjinne by it besjen fan hoe't jo de opsetsje fan in byld feroarje as in klant oer dat elemint floeiber is. Foar dit foarbyld (it HTML is hjirûnder werjûn) brûke ik in ôfbylding mei it klassifikaat fan greidout.
Om it út te graven meitsje, add the following style rules to our CSS stylesheet:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
ûnevenheid: 0,25;
}
Dizze opasetyske ynstellings fertaalje op 25%. Dit betsjut dat it byld werjûn sil wurde as 1/4 fan har normale transparânsje. Fully opak mei gjin transparânsje soe 100% wêze, wylst 0% folslein transparant wêze.
Hjirnei moatte jo de ôfbylding dúdlik meitsje (of mear genôch, folslein lekker wurde) as de mûs oerhinne oerhinne is, jo soene de: hover pseudo-klasse taheakje:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
Opaziditeit: 1;
}
Jo sjogge dat, foar dizze foarbylden, gebrûk meitsje fan de ferfangerfoarmige ferzjes fan 'e regel om dermei efterkompatibiliteit foar âldere ferzjes fan dy browsers te garandearjen. Wyls dit in goeie praktyk is, is de realiteit sa dat de opsetsjebeljocht no goed stipe wurdt troch browsers en it is frij feil om dizze ferfiersfoarsjennings te ferdielen. Noch altyd is der ek gjin reden om dizze prefixes net te ynfoljen as jo stipe foar âldere browserferzjes soargje wolle. Soargje derfoar dat jo de akseptearre bewearing folge troch de deklaraasje te meitsjen mei de normale, net-befêstige ferzje fan 'e styl.
As jo dit op in webside ynstallearre hawwe, sille jo sjogge dat dizze opsetsinpassing in tige ôfbrekke feroaring is. Earst it is griis en dan is it net, sûnder tuskenstannen tusken dizze twa. It is as in ljochtkeamer - op of út. Dit kin wêze dat jo wolle, mar jo kinne ek eksperimintearje mei in wiziging dy't mear stadich is.
Om in echt leuk effekt te foegjen en dizze fide gradulearje te meitsjen, wolle jo it transysje-Eigenskip taheakje oan 'e .greydout-klasse:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
ûnevenheid: 0,25;
-webkit-transysje: alle 3's maklik;
-moz-transysje: alle 3's maklik;
-ms-oergong: alle 3's maklik;
-o-oergong: alle 3's maklik;
oergong: alle 3's maklik;
}
Mei dizze koade sil de wizigje stadichoan effisjint as net allinne skeakelje.
Op 'e nij brûke wy hjir in oantal oanbieder foar foarsjennings foar regele. Feroaring is net sa stipe as ûnevenheid, sadat dizze prefiksje sin betsjutte.
Ien ding om te herinnerjen as jo dizze ynteraksjes planne, is dat touchscreen-apparaten gjin "hover"-state hawwe, sadat dizze effekten faak ferlern binne op elkenien mei in touchscreen-apparaat as in mobyl tillefoan. De oergong sil faak passe, mar it is sa fluch dat it echt net sjoen wurde kin. Dat is goed as jo dit tafoegje as in leuke bonusseffekt, mar misse gjin feroarings dy't nedich binne foar ynhâld te begripen.
Fading út is mooglik
Jo moatte net mei in fergese ôfbylding begjinne, jo kinne transysjes en opslach brûke om út in folsleine ûneven ôfbylding te ferbliuwen. Mei deselde ôfbylding brûke allinne mei in klasse fan fideout:
class = "withfadeout">
Krekt as foarich, feroarje jo de opsetsje mei de: hover selector:
.withfadeout {
-webkit-transition: all 2s easy-in-out;
-moz-transysje: alle 2-i-in-out-out;
-ms-transysje: alle 2-sjogge-yn-out;
-o-transysje: alle 2-i-in-out-out;
oergong: alle 2-sjogge-yn-out;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
ûnevenheid: 0,25;
}
Yn dit foarbyld sil it byld fanút folslein lekkere nei in bytsje transparant - de omke fan ús earste foarbyld.
Going Over Images
It is geweldich dat jo dizze fisuele transysjes opnimme kinne en ferpleatse nei ôfbyldings, mar jo binne net beheind ta gewoane foto's mei dizze CSS-effekten. Jo kinne maklik CSS-stylele knoppen meitsje dy't falt as jo klikke en hâlden wurde. Jo soenen de opsetsje ynstelle troch de aktive pseudo-klasse en set de oergong op 'e klasse dy't de knop befettet. Klikje en hold dizze knop om te sjen wat der bart.
It is mooglik om yn essinsje elk fisueel elemint te ferbliuwjen as se oerdreaun wurde of klikke. Yn dit foarbyld feroarje ik de opacity fan de div en de kleur fan 'e tekst as de mûs oer is. Hjir is it CSS:
#myDiv {
width: 280px;
eftergrûnkleur: # 557A47;
kleur: #dfdfdf;
padding: 10px;
-webkit-transysje: alle 4s ease-out 0s;
-moz-transysje: alle 4s fermogen 0s;
-ms-transysje: alle 4s fermogen 0s;
-o-transysje: alle 4s ferfetsje 0s;
transysje: alle 4s fermogen 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
ûnevenheid: 0,25;
kleur: # 000;
}
Navigaasje Menus kin biede fan Fading Background Colors
Yn dit ienfâldige navigaasjemenu ferdert de eftergrûn langer yn en út as ik mûs oer de menu items. Hjir is it HTML:
- Thús
- CSS3 Tutorials
- CSS3-eigenskippen
En hjir is it CSS:
ul # sampleNav {list-styl: gjin; }
ul # sampleNav li {
display: inline;
float: lofts;
padding: 5px 15px;
margje: 0 5px;
-webkit-transition: all 2s linear;
-moz-transysje: alle 2 linear;
-ms-transysje: alle 2s linear;
-o-transysje: alle 2 linear;
oergong: alle 2 linear;
}
ul # sampleNav li a {tekst-dekoraasje: none; }
ul # sampleNav li: hover {
eftergrûnkleur: # DAF197;
}
Browser Support
Sa't ik al in pear kear oanrekke hat, hawwe dizze stilen tige goede blêderstipe, dus moatte jo frij fiele om se sûnder gefoelens te brûken. De iennige útsûndering foar dit is folle âldere ferzjes fan Internet Explorer, mar mei Microsoft's resinte besluten om stipe foar alle ferzjes fan IE ûnder 11 te einigjen, binne dizze âldere browsers minder en minder fan in probleem - en realistysk, as in âldere blêder net Sjoch dizze fide transysje, dat soe net in grut probleem wêze. Sels as jo dizze soarten effekten beheine om genietsje ynteraksjes te beheinen en net op har te funksjonearjen om funksjonaliteit te te foegjen of de ynhâld fan de kaai te meitsjen, âldere browsers dy't de effekten net stypje sille in minder genôch erfarren krije, mar brûkers op dy browsers sille net even Kennis it ferskil, benammen as se it webstee brûke kinne as normaal en krije de ynformaasje dy't se nedich binne.
Extra Fun; Swap twa ôfbyldings
Hjir is in foarbyld fan hoe't men ien ôfbylding yn in oare ferbliuwt. Brûk it HTML:
En de CSS, dy't ien folslein transparant makket, wylst de oare folslein lekkere is en de oergong swak de twa:
.swapMe img {-webkit-transition: all 1s easy-in-out; -moz-transysje: alle 1-er-yn-out-out; -ms-transysje: alle 1-er-yn-out-out; -o-transysje: alle 1-er-yn-out-out; oergong: alle 1-sjogge-yn-out; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; Opaziditeit: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; Opaziditeit: 0; }