Pershendetje te dashur miq. Sot do t'ju tregoj për dy mënyra që do t'ju ndihmojnë të krijoni një buton të animuar për faqet tuaja. Ju ndoshta keni parë shumë nga këto butona dhe keni klikuar mbi to. Kështu që, në blogun tim, unë rekomandoj periodikisht kurse dhe trajnime partnere, vetëm ato që i kam provuar vetë. Dhe sigurisht që unë jam i interesuar për statistikat, dhe statistikat thonë se njerëzit klikojnë në butona tërheqës 48% më shpesh se lidhjet e zakonshme.
Parimi i krijimit të butonave të animuar në CSS është si më poshtë, ekzistojnë tre dispozita. 1 - Fillestar, 2 - kur rri pezull kursorin dhe 3 - kur shtyp butonin e miut. Disa shërbime kanë të tre pozicionet, ndërsa të tjerët kanë vetëm dy. Por gjëja kryesore është që ju të jeni të kënaqur me rezultatin përfundimtar.
Video tutorial për mënyrën e dytë për të krijuar butona të animuar:
Si shembull, merrni parasysh shërbimin CSS3 ButtonGenerator, i cili ka vetëm dy pozicione. Por efektet duken shumë të mira. Kush është i hutuar nga mungesa e gjuhës ruse, përdor gjeneratorin e fundit të dhënë në listë.
Pra, le të fillojmë.
Hapni faqen kryesore të shërbimit. Fillimisht, do të keni një pamje paraprake të butonit dhe mjeteve që ju lejojnë të bëni të gjitha llojet e cilësimeve.
Seksioni i parë Text&Font është përgjegjës për tekstin, madhësinë e shkronjave, ngjyrën e shkronjave, hijen e shkronjave. Këtu shkruani etiketën në buton, vendosni madhësinë, ngjyrën dhe hijen e tij.
Seksioni tjetër, Sfondi, i referohet sfondit. Këtu mund të specifikoni ngjyrën e butonit, gradientin e butonit, madhësinë e butonit dhe përzierjen e sfondit.
Seksioni Border është përgjegjës për vendosjen e hijes dhe kufijve të butonit. Mund të rregulloni lehtësisht trashësinë e kufirit, rrumbullakimin e qosheve dhe hijen e butonit.
Seksioni tjetër, Transformimi, është përgjegjës për transformimin e butonit, këto janë rrotullime, zhvendosje dhe shtrembërim.
Seksioni tjetër, Tranzicioni, është përgjegjës për butësinë e animacionit. Ju i vendosni këto cilësime sipas butonit tuaj. Veprimet mund të aplikohen në të gjithë butonin ose në shtresat individuale.
Pasi të provoni disa herë, eksperimentoni me cilësimet dhe do të kuptoni se çfarë është.
Pasi të konfigurohet pamja fillestare e butonit, mund të vazhdoni në hapin tjetër. Ky është një modifikim i butonit kur rri pezull kursorin e miut. Për ta bërë këtë, klikoni në kutinë e kontrollit të treguar në pamjen e ekranit.
Opsionet e lëvizjes së miut
Tani të gjitha ndryshimet në cilësimet që bëni janë për butonin që do të shfaqet kur rri pezull mbi miun. Dhe këto cilësime varen individualisht nga secili buton. Si shembull, kam ndryshuar cilësimet e rrotullimit, gradientit dhe ngjyrës së hijes.
Kur butoni të jetë gati, mund të vazhdoni me instalimin e butonit në artikull. Për ta bërë këtë, instaloni kodin në vendin e duhur të artikullit:
Këtu është shembulli ynë:
Epo, tani e dini se sa e lehtë dhe mjaft e shpejtë për të bërë një buton të animuar për një faqe interneti ose blog. Provoni dhe zbatoni, ia vlen. Nëse keni ndonjë pyetje, shkruani në komente, unë do të përpiqem t'ju ndihmoj.
Kaq per sot, ju uroj fat. Dhe unë jam gjithmonë i lumtur të shoh në faqet e blogut tim.
P.S. Dhe këtu është një shembull i një butoni të animuar për trajnimin e Denis Gerasimov "Konfigurimi i trafikut të ftohtë për të promovuar lidhjet e filialeve". Unë e kalova këtë trajnim dhe ua rekomandova të gjithëve - kjo është, pa shumë ekzagjerim, një mënyrë e vërtetë për të fituar para në programet e filialeve. Ajo që bëj në thelb.
Përpara se të merremi me butonat, le të shohim cilësimet që janë të zakonshme për të gjithë ata.
HTML
Butonat do të përdorin kod shumë të thjeshtë HTML:
Abonohu
css
Gjithashtu, të gjithë butonat do të kenë cilësime të përbashkëta për tekstin e mbishkrimit dhe çzgjedhjen e lidhjeve:
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 kryesor CSS
Për të filluar, ne vetëm duhet t'i japim butonit një formë dhe një ngjyrë. Përcaktoni një lartësi prej 28 px dhe një gjerësi prej 115 px, shtoni margjina dhe mbushje dhe 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 CSS3
Disa njerëzve u pëlqen kur një buton i thjeshtë shoqërohet me mjaft kod CSS. Ky seksion ofron një stil 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. Këtu është një truk i vogël i gradientit të errët që funksionon me çdo ngjyrë të sfondit.
/*Qendet e 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 CSS
Tani le të vendosim tranzicionin CSS. Animacioni do të përdoret për çdo ndryshim të pronës dhe do të zgjasë gjysmë sekonde.
Miu rri pezull
Mbetet vetëm për të shtuar një stil për të zgjeruar butonin kur rri pezull mbi të me miun. Butoni duhet të jetë 230 px i gjerë për të shfaqur të gjithë postimin.
#button1: rri pezull ( gjerësia: 230 px; )
Ndryshimi i lehtë i tonit të ngjyrave
Një efekt CSS shumë i thjeshtë dhe popullor për një buton. Kur lëvizni kursorin e miut ndryshon pa probleme tonin e ngjyrës së sfondit.
Kodi kryesor CSS
Kodi CSS është shumë i ngjashëm me shembullin e mëparshëm. Përdoret një ngjyrë e ndryshme e sfondit dhe forma është modifikuar pak. Teksti është gjithashtu i përqendruar dhe lartësia e rreshtit për butonin është vendosur në mënyrë që të jetë në qendër vertikalisht.
#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 CSS3
Vendosni rrumbullakimin e qosheve, gradientin për sfondin dhe hijen shtesë. Duke përdorur rgba e bëjmë 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 CSS
Animacioni është praktikisht i njëjtë me shembullin e 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 rri pezull
Kur 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 mund të përfundoni me një efekt mahnitës.
Kodi kryesor CSS
Pjesa kryesore e kodit është e njëjtë me shembujt e mëparshëm. Vini re se ne jemi duke përdorur një imazh të sfondit. Pozicioni fillestar i sfondit është vendosur në "0 0". Kur rri pezull mbi 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 CSS3
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-rreze: 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 CSS
Animacioni për këtë rast është më i gjatë 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 rri pezull
Tani ë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; )
Shtypja e butonit të simuluar 3D
Shembulli i fundit në tutorialin tonë fokusohet në metodën popullore 3D të simulimit të një klikimi të butonit kur rri pezull mbi të me miun. 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 kryesor CSS
Kodi CSS për butonin tonë.
#button4 ( sfond: #5c5c5c; hije teksti: 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 CSS3
Në këtë rast, CSS3 nuk është më një opsion i mirë. Për të marrë efektin kërkohen hije dhe një gradient. Hija e fortë krijon pamjen e një butoni 3D.
/*Qendet e rrumbullakosura*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; kufiri-rreze: 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 rri pezull
Në këtë rast, ne kemi seksionin më të madh të pezullimit. Gjatësia e hijes zvogëlohet dhe kufijtë krijojnë 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));)
Përpara se të merremi me butonat, le të shohim cilësimet që janë të zakonshme për të gjithë ata.
HTML
Butonat do të përdorin kod shumë të thjeshtë HTML:
Abonohu
css
Gjithashtu, të gjithë butonat do të kenë cilësime të përbashkëta për tekstin e mbishkrimit dhe çzgjedhjen e lidhjeve:
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 kryesor CSS
Për të filluar, ne vetëm duhet t'i japim butonit një formë dhe një ngjyrë. Përcaktoni një lartësi prej 28 px dhe një gjerësi prej 115 px, shtoni margjina dhe mbushje dhe 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 CSS3
Disa njerëzve u pëlqen kur një buton i thjeshtë shoqërohet me mjaft kod CSS. Ky seksion ofron një stil 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. Këtu është një truk i vogël i gradientit të errët që funksionon me çdo ngjyrë të sfondit.
/*Qendet e 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 CSS
Tani le të vendosim tranzicionin CSS. Animacioni do të përdoret për çdo ndryshim të pronës dhe do të zgjasë gjysmë sekonde.
Miu rri pezull
Mbetet vetëm për të shtuar një stil për të zgjeruar butonin kur rri pezull mbi të me miun. Butoni duhet të jetë 230 px i gjerë për të shfaqur të gjithë postimin.
#button1: rri pezull ( gjerësia: 230 px; )
Ndryshimi i lehtë i tonit të ngjyrave
Një efekt CSS shumë i thjeshtë dhe popullor për një buton. Kur lëvizni kursorin e miut ndryshon pa probleme tonin e ngjyrës së sfondit.
Kodi kryesor CSS
Kodi CSS është shumë i ngjashëm me shembullin e mëparshëm. Përdoret një ngjyrë e ndryshme e sfondit dhe forma është modifikuar pak. Teksti është gjithashtu i përqendruar dhe lartësia e rreshtit për butonin është vendosur në mënyrë që të jetë në qendër vertikalisht.
#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 CSS3
Vendosni rrumbullakimin e qosheve, gradientin për sfondin dhe hijen shtesë. Duke përdorur rgba e bëjmë 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 CSS
Animacioni është praktikisht i njëjtë me shembullin e 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 rri pezull
Kur 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 mund të përfundoni me një efekt mahnitës.
Kodi kryesor CSS
Pjesa kryesore e kodit është e njëjtë me shembujt e mëparshëm. Vini re se ne jemi duke përdorur një imazh të sfondit. Pozicioni fillestar i sfondit është vendosur në "0 0". Kur rri pezull mbi 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 CSS3
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-rreze: 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 CSS
Animacioni për këtë rast është më i gjatë 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 rri pezull
Tani ë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; )
Shtypja e butonit të simuluar 3D
Shembulli i fundit në tutorialin tonë fokusohet në metodën popullore 3D të simulimit të një klikimi të butonit kur rri pezull mbi të me miun. 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 kryesor CSS
Kodi CSS për butonin tonë.
#button4 ( sfond: #5c5c5c; hije teksti: 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 CSS3
Në këtë rast, CSS3 nuk është më një opsion i mirë. Për të marrë efektin kërkohen hije dhe një gradient. Hija e fortë krijon pamjen e një butoni 3D.
/*Qendet e rrumbullakosura*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; kufiri-rreze: 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 rri pezull
Në këtë rast, ne kemi seksionin më të madh të pezullimit. Gjatësia e hijes zvogëlohet dhe kufijtë krijojnë 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));)
Vlad Merzheviç
Butonat standardë të krijuar nëpërmjet një etikete
Oriz. 1. Butoni origjinal dhe i modifikuar
Imazhet mund të përdoren për të ndryshuar në mënyrë drastike pamjen e një butoni, por krahasuar me aftësitë e CSS 3, ky opsion tani duket i rritur në shtëpi.
Si bazë do të përdor butonin origjinal në shfletues, i cili përmban një gradient vertikal linear dhe skaje të rrumbullakosura.
Gjëja më e lehtë për të bërë është të rrumbullakosni qoshet, për të cilat përdorim veçorinë border-radius, duke e vendosur atë në rrezen e dëshiruar të rrumbullakosjes. Si zakonisht, nuk funksionon në të gjithë shfletuesit, kështu që do t'ju duhet të shtoni grupin e plotë. Rezultati është si më poshtë.
moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari 4 */ kufiri-radius: 5px; /* IE 9, Safari 5, Chrome */
Shfaqja e butonave në shfletues të ndryshëm është paraqitur në Fig. 2.
Oriz. 2. Butona me qoshe të rrumbullakosura
Në përgjithësi, gjithçka pritet. Versionet më të vjetra të IE nuk mbështesin CSS 3, pjesa tjetër i paraqet saktë qoshet që më duhen. Për disa arsye, Opera nuk e shfaq sfondin si parazgjedhje, siç bëjnë shfletuesit e tjerë, por do të ketë ende një diskutim të veçantë për Opera.
Tani për pjesën argëtuese, duke bërë një gradient linear vertikal. Për këtë, stilet individuale për çdo shfletues do të përdoren përsëri.
sfond: -moz-linear-gradient(#00BBD6, #EBFFFF);
Një gradient specifikon një pikë fillimi, kënd të gradientit, ngjyrën e fillimit dhe ngjyrën e përfundimit. Në rastin tonë, kur gradienti shkon vertikalisht nga lart poshtë, mjafton të vendosni vetëm ngjyrat, pjesa tjetër e parametrave përdoren si parazgjedhje.
Krom, Safari
sfond: -webkit-gradient(lineare, 0 0, 0 100%, nga (#00BBD6), në (#EBFFFF));
Kjo specifikon llojin e gradientit (linear), pikën e fillimit për aplikimin e gradientit (këndi i sipërm i majtë), pikën përfundimtare (këndi i poshtëm majtas) dhe ngjyrat e fillimit dhe të fundit.
Internet Explorer
filtri: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");
Shfletuesi IE shkon në mënyrën e vet dhe përdor veçorinë e filtrit për efekte të ndryshme, duke përfshirë gradientin. Këtu gjithçka është më e parëndësishme, shkruhet vetëm ngjyra fillestare dhe përfundimtare e gradientit.
Opera është duke pushuar, gradientët ende nuk janë zbatuar në të.
Kombinimi i të gjitha veçorive për shfletuesit, këndet dhe gradientët (shembulli 1).
Shembulli 1: Butonat me një gradient linear
Doli mjaft bukur (Fig. 3), por ka edhe dallime të dukshme nga butoni origjinal - duket i sheshtë, si një tabelë.
Oriz. 3. Pamja e butonit me gradient
Ju mund të bëni përsëri një buton të formës së dëshiruar me një gradient, duke "luajtur" me ngjyrat. Dy vlera gradient nuk mjaftojnë më, për fat Firefox dhe Safari ofrojnë një zgjidhje.
sfond: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);
Në vend të dy vlerave, ne futim numrin e dëshiruar të ngjyrave, gradienti do të kalojë pa probleme nga një ngjyrë në tjetrën.
Krom, Safari
sfond: -webkit-gradient(lineare, 0 0, 0 100%, nga (#D0ECF4), në (#D0ECF4), ndalesa e ngjyrave (0.5, #5BC9E1));
Parametri color-stop specifikon pikën në të cilën do të aplikohet ngjyra e re. Vlera varion nga 0 në 1.
Shembulli 2: Butonat me gradient të përmirësuar
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
Rezultati i shembullit është paraqitur në Fig. katër.
Oriz. 4. Gradient, çfarë lloj gradienti ju nevojitet
Në mënyrë të ngjashme, mund të krijoni çdo gradient tjetër në një buton ose element tjetër (Fig. 5). Por tashmë bëjeni vetë, për të cilën e shtova në punëtori.
Oriz. 5. Butona të tillë të ndryshëm
Më lejoni të përmbledh. Ju mund të bëni një buton me një gradient dhe qoshe të rrumbullakosura pa imazhe. Megjithatë, me shfletues, konfuzion dhe rrëmujë. Opera nuk di fare të punojë me gradient, në IE 9 ka një gabim të pakëndshëm kur kombinon një gradient me qoshe (Fig. 6).
Oriz. 6. Mbivendosja e sfondit të këndit në IE 9
Epo, tani për tani do të bëjmë "gjëra të bukura" për shfletuesit Firefox, Safari dhe Chrome.
Përshëndetje për të gjithë ata që e lexojnë këtë postim! Në artikullin e sotëm do t'i përgjigjem një prej pyetjeve më të shpeshta: "Si krijohet një buton i volumit me mjetet css?". Kjo temë nuk është e lehtë, ndaj ju këshilloj të studioni me kujdes materialin teorik dhe praktik të dhënë më poshtë.
Pas leximit të artikullit, jo vetëm që do të mësoni se cilat etiketa dhe veti të gjuhëve të internetit duhet të përdoren për të krijuar një buton në një faqe në internet, por gjithashtu do të zhyteni në seksione më të thella të css. Me këtë nënkuptoj pseudo-klasa dhe efekte të ndryshme dinamike. Përveç kësaj, ju mund të hartoni në mënyrë të pavarur programet tuaja, bazuar në shembujt e mi. Pra, le të fillojmë!
Mjetet bazë të krijimit të butonave
Ekzistojnë dy etiketa në gjuhën e shënjimit që mund të përdoren për të krijuar një buton në një faqe interneti. atë < butoni> dhe e njohur për ju < hyrje>.
Abonentët e mi që kanë lexuar botimet e mëparshme, si dhe ata që kanë punuar pak me elementin < hyrje>, dijeni se ky mjet ju lejon të krijoni jo vetëm butona, por edhe objekte të tjera të personalizuara. Për shembull, fushat e tekstit, listat, butonat e radios, etj. E gjithë kjo është marrë falë atributit lloji.
Etiketa e dytë është < butoni>. Në fakt, funksionon në të njëjtën mënyrë si elementi i përshkruar më sipër. si < hyrje>, < butoni> duhet të vendoset brenda enës < formë>. Një buton i krijuar jo në këtë do të shfaqet saktë, por nuk do të dërgojë informacion në server.
Sidoqoftë, kjo etiketë ka disa dallime. Kështu që, < butoni> u jep zhvilluesve më shumë opsione për formatimin dhe stilimin e butonave që ata krijojnë.
Për qartësi, më poshtë kam bashkangjitur një shembull të zbatimit të softuerit të elementeve të përshkruara:
Cilat janë këto "pseudo-klasa"
Gjatë ekzekutimit të shembullit të parë, pikërisht të njëjtët butona rozë u shfaqën në dritare me ndryshimin e vetëm prej një fjale. Hapi i parë dhe më i rëndësishëm është përfunduar. Ju keni mësuar se si të futni butona në faqet e faqes.
Megjithatë, do të pajtoheni që në këtë formë ato nuk janë interesante dhe shumë të zakonshme. Kjo është arsyeja pse ne do të fillojmë të zotërojmë pseudo-klasa.
Pseudo klasa janë përgjegjës për sjelljen dinamike të objekteve të përcaktuara në burimet e ueb-it. Unë mendoj se secili prej jush e vuri re se si kur qëndroni pezull mbi një lidhje ose ndonjë fushë, ato ndryshuan. Pra, ky është veprimi i pseudo-klasave.
Për të përcaktuar këtë lloj sjelljeje, përdorni ":" e ndjekur nga emri i gjendjes së objektit.
Kushtojini vëmendje pamjes së përgjithshme të reklamës:
Përzgjedhës (d.m.th. element): pseudo-klasë (përcaktimi i karakteristikave të stilit)
Mekanizmi i përshkruar mund të zbatohet:
- te identifikuesit standard: a: rri pezull(tekst-hije: 0 -1px 9px blu;);
- te përzgjedhësit që keni inicializuar: #aa: fokus(ngjyra: blu;).
Të gjitha pseudo-klasat ekzistuese ndahen në 3 grupe, secila prej të cilave është përgjegjëse për:
- gjendja e objekteve (të vizituara, hover, lidhje, fokus, aktiv);
- elementet e fëmijës (fëmija i parë);
- gjuha e përmbajtjes së tekstit (gjuhë).
Meqenëse botimi ka të bëjë me butonat dinamikë vëllimorë, do të flas për disa elementë të grupit përgjegjës për gjendjen e objekteve.
Shembuj të butonave të pazakontë
Unë ju thashë gjithçka që ju nevojitet në fushën e teorisë, dhe tani le të kalojmë në praktikë. Dua të tregoj 2 zgjidhje interesante për prezantimin e butonave.
Ky program krijon një buton të animuar tredimensional, kur klikohet, ky i fundit "shtypet" për shkak të vetive transformoj.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
Unë do të doja të theksoja se < butoni> gjithashtu mbështet shfaqjen e imazhit. Prandaj, shkrova shembullin e mëposhtëm bazuar në atë të mëparshëm, duke shtuar disa pika.
- Deklarata e butonit është ndryshuar në varg ;
- Më poshtë është shtuar në shënimin e stilit:
1 2 3 4 5 6 7 8 9 img ( shfaqja: bllok; gjerësia: 200 px; lartësia: 70 px; notimi: majtas; ) p (mbushje-lart: 10 px; ); img ( shfaqja: bllok; gjerësia: 200 px; lartësia: 70 px; notimi: majtas; ) p (mbushje-lart: 10 px; );
