) zakonisht ndryshon pamjen (bëhet në fokus). Më shpesh ky është një ndryshim i thjeshtë në ngjyrë ose duke shtuar një nënvizim. Kursori në dorë gjithashtu ndryshon. Në këtë artikull do të hedhim një vështrim më të afërt se si të zbatojmë bukur ndryshimin e stilit të një lidhjeje në hover.
Shembuj me ndryshimin e pamjes së një lidhjeje në hover Shembull 1. Si të ndryshoni ngjyrën dhe të bëni një nënvizim në hover a.class_A1 ( /* Stili i parazgjedhur i lidhjes */ ngjyra : blu ; dekorimi i tekstit : asnjë ; ) a.class_A1: hover ( /* Lidhjet e stilit në hover */ ngjyra : e kuqe ; /* Ndrysho ngjyrën në të kuqe Shto një nënvizim */ ) Kur rri pezull, lidhja do të bëhet e kuqe dhe e nënvizuar: lidhjeShembull 2. Si të ndryshoni sfondin e një lidhjeje në hover a.class_A2 (ngjyra: blu; teksti-dekorimi: asnjë; sfondi: asnjë; mbushja: 2px;) a.class_A2:hover (ngjyra: e bardhë; sfondi: blu; ) Kur rri pezull, një lidhje do të ndryshojë sfondin në blu dhe ngjyrën e lidhjes në të bardhë: lidhjeKonvertohet në sa vijon në faqe:
Shembulli 3. Si të ndryshoni kursorin kur qëndroni pezull mbi një lidhjeSi parazgjedhje, lidhjet kanë një vlerë të kursorit hover të kursorit :pointer. Në shembullin tjetër do ta ndryshojmë atë në diçka tjetër.
a.class_A3 (/* Stili i parazgjedhur i lidhjes */ ngjyra: blu; dekorimi i tekstit: asnjë; kursori: i parazgjedhur; /* Kursori i parazgjedhur */ ) a.class_A3:hover ( /* Stili i lidhjes së varur */ ngjyra: e kuqe; / * Ndryshoni ngjyrën në të kuqe */ dekorimi i tekstit: nënvizoni; /* Shtoni një nënvizim */ kursorin: ndërthurje; /* Ndryshoni kursorin */ ) Kur rri pezull, lidhja do të bëhet e kuqe dhe e nënvizuar dhe kursori do të bëhet një shenjë plus: lidhjeKonvertohet në sa vijon në faqe:
Shembulli 4: Ndryshime të buta të stilit të lidhjesDuke përdorur veçorinë e tranzicionit, ne do të zbusim shpejtësinë me të cilën ndryshon ngjyra e sfondit dhe e lidhjes.
a.class_A4 (ngjyra: blu; dekorimi i tekstit: asnjë; sfondi: #B9D3EE; mbushja: 4 px; pesha e shkronjave: bold; rrezja e kufirit: 4 px; tranzicioni: sfondi 1s lehtësi, ngjyra 0.5s për lehtësi; /* Shfletuesi i Google Chrome dhe Firefox: */ -webkit-transition : background 1s ease , color 0.5s ease ; -moz-tranzicion: lehtësia e sfondit 1s, lehtësia me ngjyra 0,5s; ) a.class_A4:hover (ngjyra: e bardhë; sfondi: blu; ) Në lëvizje, lidhja do të ndryshojë sfondin e saj në blu dhe ngjyra e lidhjes do të bëhet e bardhë, me të gjithë të zbutur: lidhjeKonvertohet në sa vijon në faqe:
Shembulli 5. Nënvizim i bukur i lidhjes a.class_A5 (ngjyra : blu ; dekorimi i tekstit : asnjë ; ) a.class_A5:hover (ngjyra : e kuqe ; kufiri-fund : 2px e ndërprerë #8A2BE2 ; /* Duke përdorur këtë veçori vendosim stilin e nënvizimit * / ) Kur qëndron pezull, lidhja do të ndryshojë ngjyrën dhe do të shfaqet një nënvizim i pazakontë: lidhjeKonverton në faqe në vijim.
Përdorimi dhe manipulimi i stileve me JavaScript ju lejon të ndryshoni pamjen e një qelize në fluturim kur plotësohen disa kushte, të tilla si qëndrimi pezull mbi një lidhje ose vetë qelizën.
Le të shqyrtojmë teknikën më të thjeshtë - ngjyra e sfondit të një qelize ndryshon kur kursori i miut rri pezull mbi të.
Lëvizja e miut mbi një zonë gjurmohet nga ngjarja onMouseOver dhe lëvizja e miut jashtë saj gjurmohet nga ngjarja onMouseOut. Meqenëse ngjyra e sfondit ndryshon për të njëjtën qelizë mbi të cilën kalojmë, ndryshimi i stilit bëhet duke përdorur metodën this.style.background.
|
Shembulli 1: Ndryshimi i ngjyrës së sfondit
|
Shembulli përdor ndryshimin gri sfondi në portokalli Në shfletuesin Netscape 4.x, metoda e mësipërme nuk funksionon.
Ju gjithashtu mund të bëni një kalim në një dokument tjetër duke klikuar jo në vetë lidhjen, por në një qelizë tabele. Atëherë e gjithë qeliza do të kthehet në një lidhje, dhe jo vetëm teksti brenda saj. Duhet të theksohet se kjo qasje nuk është më e mira; për shkak të mospërfilljes së saj, vizitorët e faqes në internet janë mësuar me faktin se kur rri pezull mbi një lidhje, kursori i miut kthehet në një dorë. Mund të anashkaloni pamjen e kursorit të miut duke përdorur CSS, por kjo veçori është e disponueshme vetëm në shfletues Internet Explorer.
|
Për të bërë ndryshimin e ngjyrës së një qelize vetëm kur kaloni pezull mbi një lidhje brenda saj, duhet të përdorni vetitë e qelizës përmes emrit të saj. Në mënyrë që programi të dijë se cilat veçori të qelizës duhet të ndryshojë, ai përdoret Parametri ID, i cili identifikon në mënyrë unike elementin.
Për lehtësi, ndryshimi i ngjyrës së qelizës paraqitet si funksione të veçanta. Për shkak të Shfletuesit e internetit Përdorimi i Explorer, Netscape dhe Opera qasje të ndryshme Për të ndryshuar në mënyrë dinamike stilin e një elementi, në funksionet e paraqitura në shembullin 3, ngjyra e sfondit ndryshon në dy mënyra. Secili shfletues do të zgjedhë linjën e duhur për vete, dhe pjesa e mbetur do të shpërfillet.
|
Shembulli 3: Ndryshimi i vetive të qelizës
|
Përshëndetje të dashur lexues të blogut webcodius! Shpesh kam pyetje: si të ndryshosh një imazh në një faqe interneti kur vendos kursorin e miut mbi të. Ky efekt gjendet në shumë sajte dhe shembulli më i thjeshtë është kur rri pezull mbi një buton dhe më pas ai ndryshon ngjyrën. Ndonjëherë JavaScript përdoret për të krijuar këtë efekt, por zakonisht mjafton vetëm CSS, veçanërisht që nga lëshimi i versionit 3 të CSS. Më vonë në artikull do t'ju tregoj se si ta ndryshoni imazhin kur rri pezull miun duke përdorur vetëm një CSS, do të shqyrtoj disa metoda dhe efekte të ndryshme.
Efektet e ndryshimit të një elementi të faqes së internetit kur miu është pezulluar shpesh quhen efekte pezullimi. Kjo për faktin se kur zbatohen efekte të tilla, përdoret, gjë që përcakton stilin e elementit kur kursori i miut rri pezull mbi të.
Së pari, le të shohim një opsion më të thjeshtë. Le të themi se keni një imazh të futur në faqen tuaj, siç tregohet më poshtë:
Dhe le të themi se duhet të ndryshoni ekranin e tij kur vendosni kursorin e miut mbi të. Kur ngjisni këtë imazh në etiketa img Le të shtojmë atributin class="animate1", atëherë kodi html i imazhit do të duket diçka si kjo:
Për të filluar, thjesht mund ta bëni imazhin transparent kur rri pezull kursorin. Transparenca në CSS kontrollohet nga vetia e opacity, e cila është specifike për CSS3. Vlera është përdorur numrat thyesorë nga 0 në 1, ku zero korrespondon me transparencën e plotë, dhe një, përkundrazi, korrespondon me patransparencën e objektit. Për të moshuarit Versionet e internetit Explorer do të duhet të përdorë veçorinë e filtrit me vlerën alfa(Opacity=X) pasi ato nuk e mbështesin vetinë e opacitetit. Në vend të X do t'ju duhet të zëvendësoni një numër nga 0 në 100, ku 0 do të thotë transparencë të plotë, dhe 100 është errësirë e plotë.
Më pas, për ta bërë fotografinë transparente kur kaloni pezull mbi skedarin e stilit, ose midis etiketave dhe skedarit html, duhet të shtoni kodin e mëposhtëm css:
img.animate1:hover (
filtri: alfa (Opacity=25);/* transparenca për IE */
opacity: 0.25;/* transparenca për shfletuesit e tjerë */
}
Në rast se nuk e kuptoni CSS, hyrja img.animate1:hover i tregon shfletuesit se për të gjithë elementët , duke patur një atribut të klasës të barabartë me animate1 kur qëndroni pezull mbi to me kursorin e miut, aplikoni stilet e specifikuara. Dhe stilet tregohen ndërmjet mbajtëse kaçurrelë(Dhe). Nëse keni bërë gjithçka siç duhet, duhet të duket diçka si kjo:
Mund të bëni një foto brenda gjendje origjinale i tejdukshëm, dhe kur rri pezull kursorin e bëjnë atë të errët. Pastaj duhet të shtoni linjat e mëposhtme në skedarin CSS:
img.animate1 (
filtri: alfa (Opacity=25);
opaciteti: 0,25;
}
img.animate1:hover (
errësirë: 1;
}
Rezultati do të jetë si ky:
Për efekt më të madh, mund të ngadalësoni ndryshimet në transparencën e figurës. Për ta bërë këtë, mund të përdorni veçorinë e tranzicionit CSS, e cila vendos efektin e tranzicionit midis dy gjendjeve të një elementi. Le të shtojmë një sekondë të ngadalësimit si shembull. Atëherë kodi ynë CSS do të duket si ky:
img.animate1 (
filtri: alfa (Opacity=25);
opaciteti: 0,25;
-moz-tranzicion: të gjitha 1-të lehtësi-në-jashtë; /* efekti i tranzicionit për Firefox deri në versionin 16.0 */
-webkit-tranzicion: të gjitha 1-të ease-in-out; /* efekti i tranzicionit për Chrome deri në versionin 26.0, Safari, Android dhe iOS */
-o-tranzicion: të gjitha 1-të lehtësi-në-jashtë; /* efekti i tranzicionit për Opera deri në versionin 12.10 */
tranzicioni: të gjitha 1-të e thjeshta në dalje; /* efekti i tranzicionit për shfletues të tjerë */
}
img.animate1:hover (
filtri: alfa (Opacity=100);
errësirë: 1;
}
Rezultati:
Duke përdorur transformojnë vetitë Imazhi mund të shkallëzohet, rrotullohet, zhvendoset, anohet. Le të përpiqemi të zmadhojmë figurën. Atëherë kodi css do të jetë si ky:
img.animate1(
— o-tranzicioni: të gjitha lehtësitë e 1-ve;
tranzicioni: lehtësia e të gjitha 1-ve;
}
img.animate1:hover(
- moz-transform: shkalla (1.5); /* efekti i transformimit për Firefox deri në versionin 16.0 */
- webkit-transform: shkalla (1.5); /* efekti i transformimit për Chrome përpara versionit 26.0, Safari, Android dhe iOS */
- o-transformimi: shkalla (1.5); /* efekti i transformimit për Opera deri në versionin 12.10 */
— ms-transformimi: shkalla (1.5); /* efekti i transformimit për IE 9.0 */
transform:shkallë(1.5); /* efekti i transformimit për shfletues të tjerë */
}
Dhe rezultati do të jetë si ky:
Mund të shtoni rrotullim për të zmadhuar figurën. Pastaj stilet css ndryshojnë pak:
img.animate1(
— moz-tranzicioni: të gjitha 1s lehtësi;
— uebkit-tranzicioni: të gjitha 1-të lehtësi;
— o-tranzicioni: të gjitha lehtësitë e 1-ve;
tranzicioni: lehtësia e të gjitha 1-ve;
}
img.animate1:hover(
- moz-transform: shkalla rrotulluese (360 gradë) (1.5);
- webkit-transform: rrotullimi (360 gradë) shkalla (1.5);
- o-transformimi: shkalla rrotulluese (360 gradë) (1.5);
- ms-transformimi: shkalla rrotulluese (360 gradë) (1.5);
transformimi: rrotullimi (360 gradë) shkalla (1.5);
}
Rezultati:
Më sipër kemi parë rastet kur një fotografi është përfshirë në animacion. Më pas, do të shqyrtojmë mënyrat për të zëvendësuar një imazh me një tjetër. Në këtë rast, zakonisht përgatiten dy imazhe me të njëjtën madhësi: një për formë origjinale, një tjetër për ta zëvendësuar.
Le të themi se kemi dy foto, një bardh e zi dhe tjetra me ngjyrë:
Le ta bëjmë atë në mënyrë që kur të vendosësh kursorin sipër imazh bardh e zi u shfaq me ngjyra. Për ta bërë këtë, bëni imazhin origjinal sfondin e elementit div duke përdorur veçorinë e sfondit. Dhe kur të vendosni kursorin mbi imazh, ne do të ndryshojmë foto sfondi duke përdorur të njëjtën veçori të pseudo-klasës së pezullimit dhe sfondit. Për të realizuar këtë efekt në faqe html shtoni element div me rrotullim të klasës 1:
Dhe shtoni përshkrimet e mëposhtme të stilit:
div.rotate1(
sfond: url (img/2.jpg); /* Rruga drejt skedarit me imazhin burim */
gjerësia: 480 px; /* Gjerësia e imazhit */
lartësia: 360 px; /* Lartësia e imazhit */
}
div.rotate1:hover (
sfond: url (img/1.jpg); /* Rruga drejt skedarit me imazhin që do të zëvendësohet */
}
Dhe rezultati:
Kjo metodë ka një pengesë domethënëse. Meqenëse fotografia e dytë ngarkohet vetëm kur kursori është pezulluar, nëse përdoruesi ka një internet të ngadaltë dhe madhësia e skedarit të figurës është madhësia e madhe, imazhi do të shfaqet me pak pauzë. Prandaj, më poshtë do të shqyrtojmë disa mënyra të tjera për të zëvendësuar imazhet kur rri pezull kursorin e miut.
Metoda tjetër do të bazohet në kombinimin e dy imazheve në një skedar. Le të themi se duhet të vendosim një buton në një faqe që, kur kursori i miut rri pezull mbi të, ndryshon pamjen e tij. Për ta bërë këtë, kombinoni dy imazhet në një skedar dhe imazhi që rezulton do të duket diçka si kjo:
Në këtë rast, ndryshimi nga një imazh në tjetrin do të bëhet duke zhvendosur imazhin e sfondit vertikalisht duke përdorur veçorinë background-position. Meqenëse klikimi mbi një buton zakonisht çon në një faqe tjetër, ne do të fusim imazhin në element< a>. Pastaj futni kodin e mëposhtëm në faqen html:
Dhe skedari css është si ky:
a.rrotulloj2 (
sfond: url (img/button.png); /* Rruga drejt skedarit me imazhin burim */
shfaqja: bllok; /* Lidhja si element blloku */
gjerësia: 50 px; /* Gjerësia e imazhit në piksel */
lartësia: 30 px; /* Lartësia e imazhit */
}
a.rotate2:hover (
pozicioni i sfondit: 0 -30 px; /* Zhvendosja e sfondit */
}
Rezultati:
Dhe metoda e fundit për sot është kur një imazh vendoset nën një tjetër me duke përdorur css rregullat pozicion: absolute . Në këtë rast, ne vendosim dy imazhe në kontejnerin div:
Dhe shtoni stilet css:
Animate 2(
pozicioni: i afërm;
marzhi: 0 automatik;/* caktuar bllok div në qendër të faqes*/
gjerësia: 480 px; /* Gjerësia */
lartësia: 360 px; /* Lartësia */
}
.animate2 img (
pozicioni:absolut; /* pozicionim absolut*/
majtas: 0; /* rreshtoni fotot majtas lart këndi i div*/
krye: 0; /* rreshtoni fotot në të majtë këndi i sipërm div */
}
Pas shtimit rregullat css, fotot do të vendosen njëra poshtë tjetrës. Tani, duke kontrolluar transparencën e fotove duke përdorur vetitë e tejdukshmërisë në gjendje normale do të tregojmë foton e dytë, dhe kur të rrini pezull kursorin, të parën. Për ta bërë këtë, në gjendje normale, ne e bëjmë fotografinë me klasën e parë plotësisht transparente, dhe kur rri pezull kursorin, anasjelltas: fotografia me klasën e dytë do të jetë plotësisht transparente, por me klasën e parë nuk do të jetë transparente. :
Animate2 img.first ( /* imazhi i parë është plotësisht transparent */
opaciteti: 0;
filtri:alfa (opacity=0);
}
.animate2:hover img.first ( /* kur rri pezull kursorin, imazhi i parë bëhet i errët */
errësirë: 1;
filtri:alfa (opacity=100);
}
/* dhe e dyta bëhet transparente kur rri pezull kursorin */
opaciteti: 0;
filtri:alfa (opacity=0);
}
Rezultati:
Mund të arrini një tranzicion të qetë duke shtuar vetinë e tranzicionit CSS në rregullin e fundit:
Animate2:hover img.second, .animate2 img.second:hover (
opaciteti: 0;
filtri:alfa (opacity=0);
-moz-tranzicioni: të gjitha 2s lehtësi;
-webkit-tranzicioni: të gjitha 2s lehtësi;
-o-tranzicioni: të gjitha 2s lehtësi;
tranzicioni: të gjitha 2s lehtësi;
}
Dhe rezultati:
Dhe nëse shtoni vetinë e transformimit:
Animate2:hover img.second, .animate2 img.second:hover (
opaciteti: 0;
filtri:alfa (opacity=0);
-moz-transform:shkallë(0, 1);
-webkit-transform:scale(0, 1);
-o-transformoj:shkallë(0, 1);
-ms-transformimi:shkalla (0, 1);
transform:shkallë(0, 1); /* zvogëloni gjerësinë e imazhit në 0 */
}
Do të dalë kështu:
Duke kombinuar të ndryshme Karakteristikat e CSS ju mund të arrini të ndryshme efektet hover kur ndryshoni fotografi ndërsa rri pezull kursorin e miut. Këto dhe shembuj të tjerë i kam vendosur në këtë faqe, ku mund të shkarkoni edhe burimet. Kjo është e gjitha, shihemi përsëri.
Ky artikull tregon, duke përdorur një shembull, se si të ndryshoni ngjyrën e një elementi arbitrar të faqes nëse kursori i miut qëndron pezull mbi të.
Kjo "gjë" bëhet duke përdorur Stilet CSS, d.m.th. Ju do të duhet të shtoni disa rreshta teksti në skedarin e stilit të shabllonit, si dhe të tregoni aftësitë tuaja të projektimit. Unë do t'ju them saktësisht se çfarë të shtoni.
Përditësuar më 17.01.2019
Kujdes! Unë kam lëshuar një temë të re Romb për shkrimtarët dhe bloget tuaja të artikujve. Më e shpejta sipas Google PageSpeed dhe optimizimi maksimal nën SEO.
Le të japim menjëherë një shembull për qartësi në mënyrë që të kuptoni se për çfarë po flasim. Lëvizni miun nëpër artikujt e menysë:
Sapo miu vendoset mbi ndonjë fushë në listë, ndodh një ndryshim sfond linjat, si dhe ngjyra e tekstit/lidhjes në titullin e kategorisë së faqes.
Ja si duket kodi për këtë bllok:
XHTML
Shkëmbimet e lidhjeve Të gjitha shtojcat e Wordpress Hacks Wordpress
Në shembullin tim, ne shohim se efekti funksionon lidhje e rregullt. Në vend të kësaj mund të ketë një enë,
Për t'i thënë shfletuesit se efekti duhet të kryhet në lidhje specifike, i kam futur ato në një lidhje të veçantë këtu. Për ju, ky mund të jetë gjithashtu një kontejner që keni krijuar ose një i gatshëm (për shembull, një miniaplikacion në shiritin anësor).
PraktikoniTani duhet të vendosni veprimin e lëvizjes së miut. Siç u përmend më lart, ne bëjmë gjithçka duke përdorur stilet CSS (skedari i shabllonit mund të quhet style.css, css.css, core.css ose diçka tjetër).
Catside a:hover (sfondi: #0078BF; ngjyra: #fff;)
Catside a:hover (sfondi: #0078BF; ngjyra: #fff; ) |
Me këtë rresht, ne i thamë shfletuesit të ndryshonte ngjyrën e sfondit kur miu vendoset mbi blu (#0078BF) dhe thamë që ngjyra e shkronjave duhet të bëhet e bardhë (#fff). Vetë "gjëja" që lejon shfletuesin të kuptojë se kjo duhet bërë duke lëvizur miun është pseudo-klasa e pezullimit (mund të lexoni për të
Përpara se të shohim butonat, le të shohim cilësimet e zakonshme për të gjithë ata.
HTMLPër butonat do të përdoren shumë HTML e thjeshtë kodi:
Abonohu
CSSGjithashtu të gjithë butonat do të kenë cilësimet e përgjithshme për tekstin e titrave dhe çaktivizoni lidhjet:
ButtonText ( fonti: 18px/1.5 Helvetica, Arial, sans-serif; ngjyra: #fff; ) a (ngjyra: #fff; dekorimi i tekstit: asnjë; )
Në mënyrë tipike, përdoruesi pret një efekt mjaft të butë kur lëviz miun mbi një lidhje ose buton. Dhe në rastin tonë, butoni ndryshon madhësinë - rritet, duke treguar një mesazh shtesë.
Kodi bazë CSSPër të filluar, ne vetëm duhet t'i japim butonit një formë dhe ngjyrë. Përcaktoni një lartësi prej 28 px dhe një gjerësi prej 115 px, shtoni margjina dhe mbushje, dhe gjithashtu jepini butonit një kufi të lehtë.
#button1 ( sfondi: #6292c2; kufiri: 2 px solid #eee; lartësia: 28 px; gjerësia: 115 px; diferenca: 50 px 0 0 50 px; mbushja: 0 0 0 7 px; tejmbushja: e fshehur; shfaqja: bllok; )
Efektet CSS3Disa njerëzve u pëlqen kur një buton i thjeshtë shoqërohet me mjaftueshëm kod i madh CSS. NË këtë seksion Këtu janë stile shtesë CSS3 për butonin tonë. Mund të bëni pa to, por ato i japin butonit një pamje më moderne.
Rrumbullakosni qoshet e kornizës dhe shtoni një gradient. Kjo përdor një mashtrim të vogël me një gradient të errët që ndërvepron me çdo ngjyrë të sfondit.
/*Qoshe të rrumbullakosura*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; kufiri-radius: 15px; /*Gradient*/ sfond-imazh: -webkit-linear-gradient(lart, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); sfond-imazh: -moz-linear-gradient(lart, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.2)); sfond-imazh: -o-linear-gradient(lart, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.2)); sfond-imazh: -ms-linear-gradient(lart, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.2)); sfond-imazh: linear-gradient (lart, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));
Animacion CSSTani le të konfigurojmë tranzicionin CSS. Animacioni do të përdoret për çdo ndryshim të pronës dhe do të zgjasë gjysmë sekonde.
Miu mbiGjithçka që mbetet është të shtoni një stil për të zgjeruar butonin kur vendosni miun mbi të. Butoni duhet të jetë 230 px i gjerë për të shfaqur të gjithë mesazhin.
#button1: rri pezull ( gjerësia: 230 px; )
Ndryshimi i thjeshtë i tonit të ngjyrës
Shumë e thjeshtë dhe popullore Efekti CSS për butonin. Kur rri pezull kursorin e miut, toni ndryshon pa probleme ngjyrë e sfondit.
Kodi bazë CSSKodi CSS është shumë i ngjashëm me shembullin e mëparshëm. Përdoret një ngjyrë e ndryshme e sfondit dhe forma është ndryshuar paksa. Ai gjithashtu përqendron tekstin dhe vendos lartësinë e rreshtit për butonin në mënyrë që të ndodhë përqendrimi vertikal.
#button2 ( sfondi: #d11717; kufiri: 2 px solid #eee; lartësia: 38 px; gjerësia: 125 px; diferenca: 50 px 0 0 50 px; tejmbushja: e fshehur; shfaqja: bllok; rreshtimi i tekstit: në qendër; lartësia e rreshtit: 38 px; )
Efektet CSS3Vendosni rrumbullakimin e qosheve, një gradient për sfondin dhe një hije shtesë. ME duke përdorur rgba bëje hijen të zezë dhe transparente.
/*Qendet e rrumbullakosura*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; kufiri-radius: 10px; /*Gradient*/ sfond-imazh: -webkit-linear-gradient(lart, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); sfond-imazh: -moz-linear-gradient(lart, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.2)); sfond-imazh: -o-linear-gradient(lart, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.2)); sfond-imazh: -ms-linear-gradient(lart, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.2)); sfond-imazh: linear-gradient (lart, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-hije: 0px 3px 1px rgba(0, 0, 0, 0.2); kuti-hije: 0px 3px 1px rgba(0, 0, 0, 0.2);
Animacion CSSAnimacioni praktikisht nuk është i ndryshëm nga shembulli i mëparshëm.
/*Transition*/ -webkit-transition: Të gjitha 0.5s lehtësi; -moz-tranzicioni: Të gjitha lehtësitë 0,5s; -o-tranzicioni: Të gjitha lehtësitë 0,5s; -ms-tranzicioni: Të gjitha lehtësitë 0,5s; tranzicioni: Të gjitha lehtësitë 0,5s;
Miu mbiKur rri pezull kursorin e miut, do të vendoset një ngjyrë tjetër e sfondit. Provoni të zgjidhni një opsion me ngjyra më të çelura në Photoshop për një efekt të shkëlqyeshëm.
#button2:hover (ngjyra e sfondit: #ff3434; )
Ky efekt mund të jetë mjaft mbresëlënës në varësi të zgjedhjes së imazhit të sfondit. Demoja përdor një sfond të papërshkrueshëm dhe efekti duket i papërshkrueshëm. Provoni të përdorni një foto tjetër dhe efekti mund të jetë mahnitës.
Kodi bazë CSSPjesa kryesore e kodit është e njëjtë me shembujt e mëparshëm. Ju lutemi vini re se çfarë përdorim imazhi i sfondit. Pozicioni fillestar sfondi është vendosur në "0 0". Kur rri pezull kursorin, pozicioni zhvendoset vertikalisht.
#button3 ( sfondi: #d11717 url ("bkg-1.jpg"); pozicioni i sfondit: 0 0; hija e tekstit: 0px 2px 0px rgba(0, 0, 0, 0.3); madhësia e shkronjave: 22px; lartësia : 58 px; gjerësia: 155 px; diferenca: 50 px 0 0 50 px; tejmbushja: e fshehur; shfaqja: bllok; rreshtimi i tekstit: në qendër; lartësia e rreshtit: 58 px; )
Efektet CSS3NË në këtë shembull nuk ka asgjë të veçantë - qoshe dhe hije të rrumbullakosura.
/*Qendet e rrumbullakosura*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; kufiri-radius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-hije: 0px 3px 1px rgba(0, 0, 0, 0.2); kuti-hije: 0px 3px 1px rgba(0, 0, 0, 0.2);
Animacion CSSAnimacioni për këtë rast zgjat më shumë për të krijuar një efekt të qetë dhe interesant.
/*Transition*/ -webkit-transition: Të gjitha 0.8s ease; -moz-tranzicioni: Të gjitha lehtësitë 0.8s; -o-tranzicioni: Të gjitha lehtësitë 0.8s; -ms-tranzicioni: Të gjitha lehtësitë 0.8s; tranzicioni: Të gjitha lehtësitë 0.8s;
Miu mbiTani është koha për të zhvendosur imazhin e sfondit. Pozicioni fillestar ishte "0 0". Vendosni parametrin e dytë në 150px. Për të zhvendosur horizontalisht, duhet të ndryshoni parametrin e parë.
#button3: rri pezull ( pozicioni i sfondit: 0px 150px; )
Simulimi i shtypjes së butonit 3D
Shembulli i fundit në mësimin tonë ka të bëjë me metodën popullore 3D të simulimit të shtypjes së butonit kur rri pezull kursorin e miut mbi të. Animacioni për këtë rast është aq i thjeshtë sa nuk kërkon as një tranzicion CSS. Por rezultati përfundimtar është mjaft mbresëlënës.
Kodi bazë CSSKodi CSS për butonin tonë.
#button4 ( sfondi: #5c5c5c; hija e tekstit: 0px 2px 0px rgba(0, 0, 0, 0.3); madhësia e shkronjave: 22px; lartësia: 58px; gjerësia: 155px; margjina: 50px 0 0 mbi 50px; ; ekrani: bllok; rreshtimi i tekstit: në qendër; lartësia e rreshtit: 58 px;)
Efektet CSS3NË në këtë rast CSS3 nuk është më një opsion i mirë. Për të arritur efektin, nevojiten hije dhe një gradient. Një hije e mprehtë krijon pamjen e një butoni 3D.
/*Qendet e rrumbullakosura*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; kufiri-radius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-hije: 0px 6px 0px rgba(0, 0, 0, 0.8); kuti-hije: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ sfond-imazh: -webkit-linear-gradient(lart, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); sfond-imazh: -moz-linear-gradient(lart, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.2)); sfond-imazh: -o-linear-gradient(lart, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.2)); sfond-imazh: -ms-linear-gradient(lart, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.2)); sfond-imazh: linear-gradient (lart, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));
Miu mbiNë këtë rast kemi seksionin më të madh hover. Gjatësia e hijes zvogëlohet dhe kufijtë përdoren për të krijuar një përzierje të zonës së errët. Të gjitha së bashku krijojnë iluzionin e shtypjes së një butoni. Kthimi i gradientit rrit efektin.
#button4:hover ( margin-lart: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); hije-kuti: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ imazh i sfondit: -webkit-linear-gradient(poshtë, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.4)); imazhi i sfondit: -moz-linear-gradient (poshtë, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4 )); imazhi i sfondit: -o-gradient linear(poshtë, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.4)); imazhi i sfondit: -ms-gradient linear( fundi, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.4)); imazhi i sfondit: gradient linear (poshtë, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4));)
