Kalimet CSS3 krijojnë kriza të bukura
Web designers kishin dëshiruar gjatë kontrollit mbi faqet që po krijonin kur CSS3 goditi skenën. Stilet e reja të prezantuara në CSS3 u dhanë profesionistëve të internetit mundësinë për të shtuar efektet e Photoshop-it në faqet e tyre. Kjo përfshinte pronat si hijet e rënies dhe glows , qoshet e rrumbullakëta, dhe më shumë. CSS3 gjithashtu paraqiti efekte si animacion që mund të përdoren për të krijuar interaktivitet të mirë në faqet.
Një efekt shumë i bukur vizual që mund t'i shtoni elementeve në faqen e internetit duke përdorur CSS3 është t'i bëni ato të zbehet brenda dhe jashtë duke përdorur një kombinim të pronave për perde dhe tranzicion. Kjo është një mënyrë e lehtë dhe e përkrahur mirë për të bërë faqet tuaja më interaktive duke krijuar zona të zbehta të cilat vijnë në fokus kur një vizitor i faqes bën diçka, si mbivendosur mbi atë element.
Le të hedhim një vështrim sa lehtë është të shtoni këtë efekt vizual të ndërveprueshëm në elemente të ndryshme në faqet tuaja të internetit.
Le të ndryshojmë paçësinë në rri pezull
Ne do të fillojmë duke shikuar se si të ndryshojmë perde të një imazhi kur një klient po rri pezull mbi atë element. Për këtë shembull (HTML është treguar më poshtë) unë jam duke përdorur një imazh me atributin e klasës së greydout.
Për ta bërë atë të zbardhur, ne shtojmë rregullat e mëposhtme të stilit në stylesheet tonë CSS:
.greydout {
-webkit-opacity: 0.25;
-moz-perde: 0.25;
perde: 0.25;
}
Këto cilësime të errësirës përkthejnë në 25%. Kjo do të thotë se imazhi do të shfaqet si 1/4 e transparencës së saj normale. Plotësisht i errët, pa transparencë do të ishte 100% ndërsa 0% do të ishte krejtësisht transparente.
Tjetra, për ta bërë imazhin të vijë e qartë (ose më saktë, për tu bërë plotësisht i errët) kur miu të rri pezull mbi të, do të shtoni: hover pseudo-klasë:
.greydout: hover {
-webkit-opacity: 1;
-moz-perde: 1;
perde: 1;
}
Ju do të vini re se, për këta shembuj, po përdor versionet prefixed të shitësit të rregullave për të siguruar pajtueshmërinë e prapambetur për versionet e vjetra të këtyre shfletuesve. Ndërkohë që kjo është një praktikë e mirë, realiteti është se rregullat e errësimit tani mbështeten mirë nga shfletuesit dhe është mjaft e sigurt të heqësh ato linja prefixed të shitësit. Megjithatë, nuk ekziston asnjë arsye për të mos përfshirë këto prefiksa nëse doni të siguroni mbështetje për versionet e vjetra të shfletuesit. Vetëm të jetë i sigurt për të ndjekur praktikën më të mirë të pranuar të përfundimit të deklaratës me versionin normal, un-prefixed të stilit.
Nëse e vendosni këtë në një vend, do të shihni se ky rregullim i errësirës është një ndryshim shumë i papritur. Së pari është gri dhe pastaj nuk është, pa asnjë shtet të përkohshëm mes këtyre dyve. Është si një kalim i dritës - ndezur ose fikur. Kjo mund të jetë ajo që ju dëshironi, por gjithashtu mund të dëshironi të eksperimentoni me një ndryshim që është më gradual.
Për të shtuar një efekt me të vërtetë të këndshëm dhe për ta bërë këtë zbehet gradualisht, doni të shtoni pronën e tranzicionit në klasën .greydout:
.greydout {
-webkit-opacity: 0.25;
-moz-perde: 0.25;
perde: 0.25;
-webkit-transition: të gjitha 3s lehtësuar;
-moz-tranzicion: të gjitha 3s lehtësuar;
-ms-tranzicion: te gjithe 3s lehtesoj;
-o-tranzicion: të gjitha 3s lehtësuar;
tranzicion: të gjitha lehtësitë e 3s;
}
Me këtë kod, ndryshimi do të kalonte gradualisht dhe jo thjesht duke kaluar në mënyrë të papritur.
Edhe një herë, ne po përdorim një numër rregullash prefixed të shitësit këtu. Tranzicioni nuk është aq i mbështetur si perde, kështu që këto prefiksa kanë kuptim.
Një gjë për të kujtuar si planifikoni këto ndërveprime është se pajisjet me prekje nuk kanë një "rrokje" të shtetit, kështu që këto efekte shpesh humbasin nga dikush që përdor një pajisje me prekje si një telefon celular. Tranzicioni shpesh do të ndodhë, por ndodh kaq shpejt sa nuk mund të shihet. Kjo është e mirë nëse e shtoni këtë si një efekt bonus të mirë, por shmangni çdo ndryshim që duhet të shihet për përmbajtjen që duhet kuptuar.
Fading Out është gjithashtu i mundshëm
Ju nuk duhet të filloni me një imazh të zbehur, ju mund të përdorni tranzicionet dhe perde të zhduket nga një imazh plotësisht i errët. Duke përdorur të njëjtën imazh, vetëm me një klasë të pamjes së jashtme:
class = "withfadeout">
Ashtu si më parë, ju ndryshoni perde duke përdorur: përzgjedhës hover:
me mungesë {
-webkit-transition: të gjithë 2s lehtësim-në-jashtë;
-moz-tranzicion: të gjithë 2s lehtësimin-në-jashtë;
-ms-tranzicion: të gjithë 2s lehtësimin-në-jashtë;
-o-tranzicion: të gjithë 2s lehtësimin-në-jashtë;
tranzicion: të gjithë 2s lehtësimin-në-jashtë;
}
me mbërritje: rri pezull {
-webkit-opacity: 0.25;
-moz-perde: 0.25;
perde: 0.25;
}
Në këtë shembull, imazhi do të kalonte nga plotësisht i errët deri në një farë transparence - prapa kundrejt shembullit tonë të parë.
Shkuarja përtej imazheve
Është e shkëlqyer që ju mund të aplikoni këto tranzicion vizual dhe zbehet me imazhe, por nuk jeni të kufizuar vetëm në përdorimin e imazheve me këto efekte CSS. Ju lehtë mund të bëni butona të CSS-style që zbehet kur klikohen dhe mbahen. Ju vetëm do të vendosni perde duke përdorur: pseudo-klasë aktive dhe vendoseni tranzicionin në klasë që përcakton butonin. Klikoni dhe mbajeni këtë buton për të parë se çfarë ndodh.
Është e mundur të bëhen në thelb çdo element vizual zbehet kur mbizotëron ose klikohet. Në këtë shembull unë ndryshoj perde e div dhe ngjyra e tekstit kur miu është mbi të. Këtu është CSS:
#myDiv {
gjerësia: 280px;
background-color: # 557A47;
ngjyra: #dfdfdf;
mbushje: 10px;
-webkit-transition: të gjitha 4s lehtësojë-out 0s;
-moz-tranzicion: të gjithë 4s lehtësojnë-out 0s;
-ms-tranzicion: të gjithë 4s lehtësojnë-out 0s;
-o-tranzicion: të gjithë 4s lehtësojnë-out 0s;
tranzicion: të gjithë 4s lehtësojnë-out 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-perde: 0.25;
perde: 0.25;
ngjyra: # 000;
}
Menutë e navigimit mund të përfitojnë nga zbrazja e ngjyrave të sfondit
Në këtë menu navigimi të thjeshtë, ngjyra e sfondit zbehet ngadalë brenda dhe jashtë si unë miun mbi artikujt e menysë. Këtu është HTML:
- shtëpi
- CSS3 Tutorials
- CSS3 Prona të paluajtshme
Dhe këtu është CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
shfaq: inline;
noton: majtas;
mbushje: 5px 15px;
margjina: 0 5px;
-webkit-tranzicion: të gjithë 2s linear;
-moz-tranzicion: të gjithë 2s linear;
-ms-tranzicion: të gjithë 2s linear;
-o-tranzicion: të gjithë 2s linear;
tranzicion: të gjithë 2s linear;
}
ul # sampleNav li a {text-decoration: asnjë; }
ul # sampleNav li: hover {
background-color: # DAF197;
}
Mbështetja e shfletuesit
Siç e kam prekur disa herë, këto stilet kanë mbështetje shumë të mirë të shfletuesit, kështu që ju duhet të ndiheni të lirë t'i përdorni ato pa asnjë shqetësim. Përjashtimi i vetëm për këtë është versionet shumë më të vjetra të Internet Explorer, por me vendimin e fundit të Microsoft për t'i dhënë fund mbështetjes për të gjitha versionet e IE nën 11, këto shfletues të vjetër po bëhen gjithnjë e më pak çështje - dhe realisht, nëse një shfletues i vjetër nuk shih këtë tranzicion zbehet, që nuk duhet të jetë një problem i madh. Për aq kohë sa kufizoni këto lloj efektesh në ndërveprime të kënaqshme dhe mos u mbështetni tek ato për të përzënë funksionalitete ose për të zbuluar përmbajtje kyçe, atëherë shfletuesit më të vjetër që nuk i mbështesin efektet do të kenë një eksperiencë më pak të kënaqshme, por përdoruesit në ato shfletues nuk do të e di dallimin, veçanërisht nëse ata mund ta përdorin sitin si normal dhe të marrin informacionin që ata kanë nevojë.
Extra Fun, Swap dy imazhe
Këtu është një shembull se si të zbehet një imazh në një tjetër. Përdor HTML:
Dhe CSS që e bën një plotësisht transparente ndërsa tjetra është plotësisht e errët dhe pastaj kalimi i ndërpret dy:
.swapMe img {-webkit-transition: të gjithë 1s lehtësimin-në-jashtë; -moz-tranzicion: të gjithë 1s lehtësimin-në-jashtë; -ms-tranzicion: të gjithë 1s lehtësimin-në-jashtë; -o-tranzicion: të gjithë 1s lehtësimin-në-jashtë; tranzicion: të gjithë 1s lehtësim-në-jashtë; } .swap1, .swapMe: rri pezull .swap2 {-webkit-opacity: 1; -moz-perde: 1; perde: 1; }. swapMe: rri pezull .swap1, .swap2 {-webkit-opacity: 0; -moz-perde: 0; perde: 0; }