Pozdrav, dragi prijatelji. Danas ću vam reći o dva načina koji će vam pomoći da napravite animirani gumb za svoje web stranice. Vjerojatno ste vidjeli puno ovih gumba i kliknuli na njih. Dakle, na svom blogu povremeno preporučujem affiliate tečajeve i treninge, samo one koje sam sam isprobao. I naravno da me zanima statistika, a statistika kaže da ljudi 48% češće klikaju na atraktivne gumbe nego na obične linkove.
Načelo stvaranja animiranih gumba pomoću CSS-a je sljedeće; postoje tri odredbe. 1 - Inicijal, 2 - kada lebdite kursorom i 3 - kada pritisnete tipku miša. Neke usluge imaju sve tri odredbe, dok druge samo dvije. Ali najvažnije je da ste zadovoljni krajnjim rezultatom.
Video upute o drugoj metodi stvaranja animiranih gumba:
Kao primjer, pogledajmo uslugu CSS3 ButtonGenerator; ona ima samo dvije odredbe. Ali efekti izgledaju jako dobro. Tko je zbunjen nedostatkom ruskog jezika, upotrijebite zadnji generator dat na popisu.
Pa počnimo.
Otvorite glavnu stranicu usluge. U početku ćete vidjeti preliminarni prikaz gumba i alata koji vam omogućuju da napravite sve vrste postavki.
Prva sekcija, Text&Font, odgovorna je za tekst, veličinu fonta, boju fonta, sjenu fonta. Ovdje pišete oznaku na gumb, postavljate njegovu veličinu, boju i sjenu.
Sljedeći odjeljak, Pozadina, odnosi se na pozadinu. Ovdje možete odrediti boju gumba, gradijent gumba, veličinu gumba i stapanje pozadine.
Odjeljak Border odgovoran je za postavljanje sjene i obruba gumba. Možete jednostavno prilagoditi debljinu obruba, zaokruživanje kutova i sjenu gumba.
Sljedeći odjeljak, Transformacija, odgovoran je za transformaciju gumba - rotacija, pomak, distorzija.
Sljedeći odjeljak, Transition, odgovoran je za glatkoću animacije. Ove postavke postavljate u skladu s vašim gumbom. Akcije se mogu primijeniti na cijeli gumb ili na pojedinačne slojeve.
Nakon nekoliko pokušaja, eksperimentiranja s postavkama i shvatit ćete što je što.
Nakon što je početni izgled gumba konfiguriran, možete prijeći na sljedeću fazu. Ovo je modifikacija gumba kada lebdite kursorom miša. Da biste to učinili, kliknite na potvrdni okvir naveden na snimci zaslona.
Opcije prelaska mišem
Sada su sve promjene postavki koje napravite za gumb koji će se prikazati kada prijeđete mišem iznad njega. A ove postavke ovise pojedinačno o svakom gumbu. Kao primjer, promijenio sam postavke boje rotacije, gradijenta i sjene.
Kada je gumb spreman, možete nastaviti s instaliranjem gumba u članku. Da biste to učinili, instalirajte kod na traženo mjesto u članku:
Evo našeg primjera:
Pa, sada znate kako jednostavno i brzo napraviti animirani gumb za web stranicu ili blog. Pokušajte i implementirajte, isplati se. Ako imate pitanja, napišite u komentarima, pokušat ću vam pomoći.
To je sve za danas, želim vam puno sreće. I uvijek mi je drago vidjeti vas na stranicama mog bloga.
p.s. A ovdje je primjer animiranog gumba za obuku Denisa Gerasimova "Postavljanje hladnog prometa za promicanje affiliate veza." Završio sam ovu obuku i preporučujem je svima - bez nepotrebnog pretjerivanja, ovo je pravi način zarade na affiliate programima. Što je zapravo ono što ja radim.
Prije nego što pogledamo gumbe, pogledajmo zajedničke postavke za sve njih.
HTML
Gumbi će koristiti vrlo jednostavan HTML kod:
Pretplatite se
CSS
Također, svi će gumbi imati zajedničke postavke za tekst naslova i veze za poništavanje odabira:
ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; boja: #fff; ) a (boja: #fff; tekstualni ukras: ništa; )
Tipično, korisnik očekuje prilično mekan učinak kada mišem lebdi iznad veze ili gumba. A u našem slučaju, gumb mijenja veličinu - povećava se, prikazujući dodatnu poruku.
Osnovni CSS kod
Za početak gumbu trebamo dati samo oblik i boju. Definirajte visinu od 28 px i širinu od 115 px, dodajte margine i ispunu, a također dajte gumbu svijetli obrub.
#button1 ( pozadina: #6292c2; obrub: 2px puni #eee; visina: 28px; širina: 115px; margina: 50px 0 0 50px; padding: 0 0 0 7px; overflow: skriveno; display: block; )
CSS3 efekti
Neki ljudi vole kada jednostavan gumb prati dosta CSS koda. Ovaj odjeljak pruža dodatne CSS3 stilove za naš gumb. Možete i bez njih, ali gumbu daju moderniji izgled.
Zaokružite kutove okvira i dodajte gradijent. Ovdje se koristi mali trik s tamnim gradijentom koji je u interakciji s bilo kojom bojom pozadine.
/*Zaobljeni kutovi*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; radijus granice: 15px; /*Gradijent*/ pozadinska slika: -webkit-linearni-gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -moz-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -o-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -ms-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS animacija
Sada postavimo CSS prijelaz. Animacija će se koristiti za sve promjene svojstava i trajat će pola sekunde.
Prijeđite mišem
Sve što preostaje je dodati stil za proširenje gumba kada prijeđete mišem iznad njega. Gumb mora biti širok 230 px za prikaz cijele poruke.
#button1:hover (širina: 230px;)
Jednostavna promjena tona boje
Vrlo jednostavan i popularan CSS efekt za gumb. Kada zadržite kursor miša, ton boje pozadine se glatko mijenja.
Osnovni CSS kod
CSS kod je vrlo sličan prethodnom primjeru. Koristi se drugačija boja pozadine i oblik je malo promijenjen. Također centrira tekst i postavlja visinu retka za gumb tako da dolazi do vertikalnog centriranja.
#button2 ( pozadina: #d11717; granica: 2px puna #eee; visina: 38px; širina: 125px; margina: 50px 0 0 50px; preljev: skriven; prikaz: blok; poravnanje teksta: središte; visina linije: 38px; )
CSS3 efekti
Postavite zaokruživanje uglova, gradijent za pozadinu i dodatnu sjenu. Pomoću rgba sjenu činimo crnom i prozirnom.
/*Zaobljeni kutovi*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; rubni radijus: 10px; /*Gradijent*/ pozadinska slika: -webkit-linearni-gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -moz-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -o-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -ms-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Sjena*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); okvir-sjena: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS animacija
Animacija se praktički ne razlikuje od prethodnog primjera.
/*Transition*/ -webkit-transition: Svih 0,5s jednostavnost; -moz-prijelaz: Svih 0,5s lakoća; -o-prijelaz: Svih 0,5s lakoća; -ms-transition: Svih 0,5 s jednostavnost; prijelaz: sve 0,5s lakoća;
Prijeđite mišem
Kada lebdite kursorom miša, bit će postavljena druga boja pozadine. Pokušajte odabrati opciju svjetlije boje u Photoshopu za izvrstan učinak.
#button2:hover (boja pozadine: #ff3434;)
Ovaj efekt može biti prilično impresivan ovisno o izboru pozadinske slike. Demo koristi neupadljivu pozadinu i efekt izgleda neupadljivo. Pokušajte upotrijebiti drugu sliku i učinak bi mogao biti zapanjujući.
Osnovni CSS kod
Glavni dio koda je isti kao i prethodni primjeri. Imajte na umu da koristimo pozadinsku sliku. Početni položaj pozadine postavljen je na "0 0". Kada zadržite kursor, položaj se pomiče okomito.
#button3 ( pozadina: #d11717 url("bkg-1.jpg"); položaj pozadine: 0 0; sjena teksta: 0px 2px 0px rgba(0, 0, 0, 0.3); veličina fonta: 22px; visina : 58px; širina: 155px; margina: 50px 0 0 50px; overflow: skriveno; display: block; text-align: center; line-height: 58px; )
CSS3 efekti
Nema ništa posebno u ovom primjeru - zaobljeni kutovi i sjene.
/*Zaobljeni kutovi*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; rubni radijus: 5px; /*Sjena*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); okvir-sjena: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS animacija
Animacija u ovom slučaju traje dulje kako bi stvorila gladak i zanimljiv učinak.
/*Transition*/ -webkit-transition: Svih 0,8s jednostavnost; -moz-prijelaz: Svih 0,8s lakoća; -o-prijelaz: Svih 0,8s lakoća; -ms-transition: Svih 0,8s lakoća; prijelaz: sve 0,8s lakoća;
Prijeđite mišem
Sada je vrijeme da premjestite pozadinsku sliku. Početna pozicija bila je "0 0". Postavite drugi parametar na 150px. Za vodoravni pomak morate promijeniti prvi parametar.
#button3:hover (background-position: 0px 150px; )
3D simulacija pritiska gumba
Posljednji primjer u našoj lekciji govori o popularnoj 3D metodi simulacije pritiska na tipku kada iznad nje lebdi pokazivač miša. Animacija za ovaj slučaj je toliko jednostavna da čak ne zahtijeva CSS prijelaz. Ali krajnji rezultat je prilično impresivan.
Osnovni CSS kod
CSS kod za naš gumb.
#button4 ( pozadina: #5c5c5c; sjena teksta: 0px 2px 0px rgba(0, 0, 0, 0.3); veličina fonta: 22px; visina: 58px; širina: 155px; margina: 50px 0 0 50px; preljev: skriveno ; prikaz: blok; poravnanje teksta: središte; visina linije: 58 px; )
CSS3 efekti
U ovom slučaju, CSS3 prestaje biti dobra opcija. Da bi se postigao učinak, potrebne su sjene i gradijent. Oštra sjena stvara izgled 3D gumba.
/*Zaobljeni kutovi*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; rubni radijus: 5px; /*Sjena*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); okvir-sjena: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradijent*/ pozadinska slika: -webkit-linearni-gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -moz-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -o-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -ms-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Prijeđite mišem
U ovom slučaju imamo najveći dio lebdenja. Duljina sjene je smanjena, a rubovi se koriste za stvaranje spoja tamnog područja. Sve zajedno stvara iluziju pritiskanja gumba. Okretanje gradijenta pojačava učinak.
#button4:hover ( margin-top: 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); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ pozadinska slika: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); pozadinska slika: -moz-linearni gradijent(dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) )); pozadinska slika: -o-linearni-gradijent(dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); pozadinska slika: -ms-linearni-gradijent( dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); pozadinska slika: linearni gradijent(dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )
Prije nego što pogledamo gumbe, pogledajmo zajedničke postavke za sve njih.
HTML
Gumbi će koristiti vrlo jednostavan HTML kod:
Pretplatite se
CSS
Također, svi će gumbi imati zajedničke postavke za tekst naslova i veze za poništavanje odabira:
ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; boja: #fff; ) a (boja: #fff; tekstualni ukras: ništa; )
Tipično, korisnik očekuje prilično mekan učinak kada mišem lebdi iznad veze ili gumba. A u našem slučaju, gumb mijenja veličinu - povećava se, prikazujući dodatnu poruku.
Osnovni CSS kod
Za početak gumbu trebamo dati samo oblik i boju. Definirajte visinu od 28 px i širinu od 115 px, dodajte margine i ispunu, a također dajte gumbu svijetli obrub.
#button1 ( pozadina: #6292c2; obrub: 2px puni #eee; visina: 28px; širina: 115px; margina: 50px 0 0 50px; padding: 0 0 0 7px; overflow: skriveno; display: block; )
CSS3 efekti
Neki ljudi vole kada jednostavan gumb prati dosta CSS koda. Ovaj odjeljak pruža dodatne CSS3 stilove za naš gumb. Možete i bez njih, ali gumbu daju moderniji izgled.
Zaokružite kutove okvira i dodajte gradijent. Ovdje se koristi mali trik s tamnim gradijentom koji je u interakciji s bilo kojom bojom pozadine.
/*Zaobljeni kutovi*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; radijus granice: 15px; /*Gradijent*/ pozadinska slika: -webkit-linearni-gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -moz-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -o-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -ms-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS animacija
Sada postavimo CSS prijelaz. Animacija će se koristiti za sve promjene svojstava i trajat će pola sekunde.
Prijeđite mišem
Sve što preostaje je dodati stil za proširenje gumba kada prijeđete mišem iznad njega. Gumb mora biti širok 230 px za prikaz cijele poruke.
#button1:hover (širina: 230px;)
Jednostavna promjena tona boje
Vrlo jednostavan i popularan CSS efekt za gumb. Kada zadržite kursor miša, ton boje pozadine se glatko mijenja.
Osnovni CSS kod
CSS kod je vrlo sličan prethodnom primjeru. Koristi se drugačija boja pozadine i oblik je malo promijenjen. Također centrira tekst i postavlja visinu retka za gumb tako da dolazi do vertikalnog centriranja.
#button2 ( pozadina: #d11717; granica: 2px puna #eee; visina: 38px; širina: 125px; margina: 50px 0 0 50px; preljev: skriven; prikaz: blok; poravnanje teksta: središte; visina linije: 38px; )
CSS3 efekti
Postavite zaokruživanje uglova, gradijent za pozadinu i dodatnu sjenu. Pomoću rgba sjenu činimo crnom i prozirnom.
/*Zaobljeni kutovi*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; rubni radijus: 10px; /*Gradijent*/ pozadinska slika: -webkit-linearni-gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -moz-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -o-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -ms-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Sjena*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); okvir-sjena: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS animacija
Animacija se praktički ne razlikuje od prethodnog primjera.
/*Transition*/ -webkit-transition: Svih 0,5s jednostavnost; -moz-prijelaz: Svih 0,5s lakoća; -o-prijelaz: Svih 0,5s lakoća; -ms-transition: Svih 0,5 s jednostavnost; prijelaz: sve 0,5s lakoća;
Prijeđite mišem
Kada lebdite kursorom miša, bit će postavljena druga boja pozadine. Pokušajte odabrati opciju svjetlije boje u Photoshopu za izvrstan učinak.
#button2:hover (boja pozadine: #ff3434;)
Ovaj efekt može biti prilično impresivan ovisno o izboru pozadinske slike. Demo koristi neupadljivu pozadinu i efekt izgleda neupadljivo. Pokušajte upotrijebiti drugu sliku i učinak bi mogao biti zapanjujući.
Osnovni CSS kod
Glavni dio koda je isti kao i prethodni primjeri. Imajte na umu da koristimo pozadinsku sliku. Početni položaj pozadine postavljen je na "0 0". Kada zadržite kursor, položaj se pomiče okomito.
#button3 ( pozadina: #d11717 url("bkg-1.jpg"); položaj pozadine: 0 0; sjena teksta: 0px 2px 0px rgba(0, 0, 0, 0.3); veličina fonta: 22px; visina : 58px; širina: 155px; margina: 50px 0 0 50px; overflow: skriveno; display: block; text-align: center; line-height: 58px; )
CSS3 efekti
Nema ništa posebno u ovom primjeru - zaobljeni kutovi i sjene.
/*Zaobljeni kutovi*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; rubni radijus: 5px; /*Sjena*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); okvir-sjena: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS animacija
Animacija u ovom slučaju traje dulje kako bi stvorila gladak i zanimljiv učinak.
/*Transition*/ -webkit-transition: Svih 0,8s jednostavnost; -moz-prijelaz: Svih 0,8s lakoća; -o-prijelaz: Svih 0,8s lakoća; -ms-transition: Svih 0,8s lakoća; prijelaz: sve 0,8s lakoća;
Prijeđite mišem
Sada je vrijeme da premjestite pozadinsku sliku. Početna pozicija bila je "0 0". Postavite drugi parametar na 150px. Za vodoravni pomak morate promijeniti prvi parametar.
#button3:hover (background-position: 0px 150px; )
3D simulacija pritiska gumba
Posljednji primjer u našoj lekciji govori o popularnoj 3D metodi simulacije pritiska na tipku kada iznad nje lebdi pokazivač miša. Animacija za ovaj slučaj je toliko jednostavna da čak ne zahtijeva CSS prijelaz. Ali krajnji rezultat je prilično impresivan.
Osnovni CSS kod
CSS kod za naš gumb.
#button4 ( pozadina: #5c5c5c; sjena teksta: 0px 2px 0px rgba(0, 0, 0, 0.3); veličina fonta: 22px; visina: 58px; širina: 155px; margina: 50px 0 0 50px; preljev: skriveno ; prikaz: blok; poravnanje teksta: središte; visina linije: 58 px; )
CSS3 efekti
U ovom slučaju, CSS3 prestaje biti dobra opcija. Da bi se postigao učinak, potrebne su sjene i gradijent. Oštra sjena stvara izgled 3D gumba.
/*Zaobljeni kutovi*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; rubni radijus: 5px; /*Sjena*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); okvir-sjena: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradijent*/ pozadinska slika: -webkit-linearni-gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -moz-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -o-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -ms-linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Prijeđite mišem
U ovom slučaju imamo najveći dio lebdenja. Duljina sjene je smanjena, a rubovi se koriste za stvaranje spoja tamnog područja. Sve zajedno stvara iluziju pritiskanja gumba. Okretanje gradijenta pojačava učinak.
#button4:hover ( margin-top: 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); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ pozadinska slika: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); pozadinska slika: -moz-linearni gradijent(dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) )); pozadinska slika: -o-linearni-gradijent(dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); pozadinska slika: -ms-linearni-gradijent( dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); pozadinska slika: linearni gradijent(dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )
Vlad Merzhevich
Standardni gumbi stvoreni putem oznake
Riža. 1. Izvorni i modificirani gumb
Možete koristiti slike da radikalno promijenite izgled gumba, ali u usporedbi s mogućnostima CSS-a 3, ova se opcija sada čini domaćom.
Kao osnovu uzet ću izvorni gumb u pregledniku koji sadrži linearni okomiti gradijent i zaobljene rubove.
Najlakši način zaokruživanja kutova je korištenje svojstva border-radius, dajući mu željeni radijus zaokruživanja. Kao i obično, ne radi u svim preglednicima, pa ćete morati dodati cijeli set. Rezultat je sljedeći.
Moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari 4 */ border-radius: 5px; /* IE 9, Safari 5, Chrome */
Izgled gumba u različitim preglednicima prikazan je na sl. 2.
Riža. 2. Gumbi sa zaobljenim kutovima
Uglavnom, sve je očekivano. Stare verzije IE-a ne podržavaju CSS 3, ostale ispravno stvaraju kutove koje trebam. Iz nekog razloga, Opera ne prikazuje pozadinu prema zadanim postavkama, kao što to čine drugi preglednici, ali o Operi će se raspravljati zasebno.
Sada je zabavni dio izrada vertikalnog linearnog gradijenta. Da biste to učinili, ponovno će se koristiti pojedinačni stilovi za svaki preglednik.
pozadina: -moz-linearni-gradijent(#00BBD6, #EBFFFF);
Gradijent određuje početnu točku, kut gradijenta, početnu boju i krajnju boju. U našem slučaju, kada gradijent ide okomito odozgo prema dolje, dovoljno je postaviti samo boje; preostali parametri se koriste prema zadanim postavkama.
Chrome, Safari
pozadina: -webkit-gradient(linearno, 0 0, 0 100%, od (#00BBD6), do (#EBFFFF));
Ovdje određujete vrstu gradijenta (linearni), početnu točku primjene gradijenta (gornji lijevi kut), završnu točku (donji lijevi kut), kao i početnu i završnu boju.
Internet Explorer
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");
IE preglednik ide svojim putem i koristi svojstvo filtera za razne efekte, uključujući gradijent. Ovdje je sve trivijalnije, samo su početne i završne boje gradijenta napisane.
Opera se odmara; gradijenti još nisu implementirani.
Objedinjujemo sva svojstva za preglednike, kutove i gradijente (primjer 1).
Primjer 1: Gumbi linearnog gradijenta
Ispalo je prilično lijepo (slika 3), ali postoje i očite razlike u odnosu na originalni gumb - izgleda ravno, poput daske.
Riža. 3. Prikaz gumba s gradijentom
Ponovno možete napraviti gumb željenog oblika pomoću gradijenta, "igrajući se" bojama. Dvije vrijednosti gradijenta više nisu dovoljne; srećom Firefox i Safari nude rješenje.
pozadina: -moz-linearni-gradijent(#D0ECF4, #5BC9E1, #D0ECF4);
Umjesto dvije vrijednosti, umetnite željeni broj boja, gradijent će glatko prijeći iz jedne boje u drugu.
Chrome, Safari
pozadina: -webkit-gradijent(linearno, 0 0, 0 100%, od (#D0ECF4), do (#D0ECF4), boja-stop (0.5, #5BC9E1));
Parametar za zaustavljanje boje određuje točku na kojoj će se primijeniti nova boja. Vrijednost se kreće od 0 do 1.
Primjer 2: Gumbi s poboljšanim gradijentom
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
Rezultat primjera prikazan je na sl. 4.
Riža. 4. Gradijent, kakav je gradijent potreban
Slično, možete stvoriti bilo koji drugi gradijent na gumbu ili drugom elementu (slika 5). Ali ovo učinite sami, zato sam ga dodao u radionicu.
Riža. 5. Takvi različiti gumbi
Da rezimiram. Možete napraviti gumb s gradijentom i zaobljenim kutovima bez slika. Međutim, postoji zabuna i kolebanje s preglednicima. Opera uopće ne može raditi s gradijentima; u IE 9 postoji neugodna greška pri kombiniranju gradijenta s uglovima (slika 6).
Riža. 6. Prekrivanje pozadine na kutovima u IE 9
Pa, za sada ćemo napraviti “ljepotice” za Firefox, Safari i Chrome preglednike.
Pozdrav svima koji čitaju ovu publikaciju! U današnjem ću članku odgovoriti na jedno od najčešće postavljanih pitanja: "Kako se 3D gumb kreira pomoću CSS alata?" Ova tema nije laka, pa vam savjetujem da pažljivo proučite teorijski i praktični materijal koji se nalazi u nastavku.
Nakon čitanja članka naučit ćete ne samo koje se oznake i svojstva web jezika trebaju koristiti za stvaranje gumba na mrežnoj stranici, već ćete također zaroniti u dublje dijelove CSS-a. Tu mislim na pseudoklase i razne dinamičke efekte. Osim toga, možete sami izraditi vlastite programe na temelju mojih primjera. Pa počnimo!
Osnovni alati za izradu gumba
Postoje dvije oznake u označnom jeziku koje se mogu koristiti za stvaranje gumba na web stranici. Ovaj < gumb> i vama poznato < unos>.
Moji pretplatnici koji su čitali prethodne publikacije, kao i oni koji su malo radili s elementom < unos>, znaju da vam ovaj alat omogućuje stvaranje ne samo gumba, već i drugih prilagođenih objekata. Na primjer, tekstualna polja, popisi, radio gumbi itd. Sve se to događa zahvaljujući atributu tip.
Druga oznaka je < gumb>. U biti radi na isti način kao i gore opisani element. Kao < unos>, < gumb> treba staviti unutar spremnika < obrazac>. Gumb koji nije kreiran u ovom će se ispravno prikazati, ali neće prenijeti informacije na poslužitelj.
Međutim, ova oznaka ima neke razlike. Tako, < gumb> pruža programerima više opcija za oblikovanje i stiliziranje gumba koje stvaraju.
Radi jasnoće, u nastavku sam priložio primjer softverske implementacije opisanih elemenata:
Koje su to "pseudo-klase"?
Prilikom pokretanja prvog primjera, u prozoru su bili prikazani potpuno identični ružičasti gumbi s jedinom razlikom u jednoj riječi. Prva i važna faza je završena. Naučili ste kako umetnuti gumbe na web stranice.
No, morate priznati da u ovakvom obliku nisu zanimljivi i previše su obični. Zato ćemo početi svladavati pseudo-klase.
Pseudo-klase odgovorni su za dinamičko ponašanje objekata definiranih na web resursima. Mislim da je svatko od vas primijetio kako se oni mijenjaju kada kursorom prijeđete iznad poveznice ili nekog polja. Dakle, ovo je djelovanje pseudo-klasa.
Za definiranje ove vrste ponašanja upotrijebite ":" nakon čega slijedi naziv stanja objekta.
Obratite pozornost na opći izgled oglasa:
Selektor (tj. element): pseudo-klasa (definiranje karakteristika stila)
Opisani mehanizam može se primijeniti:
- na standardne identifikatore: a: lebdjeti(tekst-sjena: 0 -1px 9px plava;);
- selektorima koje ste inicijalizirali: #aa: fokus(boja: plava;).
Sve postojeće pseudo-klase su podijeljene u 3 grupe, od kojih je svaka odgovorna za:
- stanje objekata (posjećeno, lebdjeti, veza, fokus, aktivno);
- elementi djeteta (prvo dijete);
- jezik tekstualnog sadržaja (lang).
Budući da se publikacija odnosi na volumetrijske dinamičke gumbe, govorit ću o nekim elementima grupe odgovornih za stanje objekata.
Primjeri neobičnih gumba
Sve sam vam rekao u teoriji, a sada prijeđimo na praksu. Želim pokazati 2 zanimljiva rješenja za predstavljanje gumba.
Ovaj program stvara trodimenzionalni animirani gumb, kada kliknete na njega, potonji se "pritisne" zbog svojstva transformirati.
| 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 |
|
Htio bih to primijetiti < gumb> također podržava prikaz slike. Stoga sam sljedeći primjer napisao na temelju prethodnog, dodajući neke točke.
- Deklaracija gumba je promijenjena u niz ;
- Sljedeće je dodano oznaci stila:
1 2 3 4 5 6 7 8 9 img ( display: block; width: 200px; height: 70px; float: left; ) p (padding-top:10px; ); img ( display: block; width: 200px; height: 70px; float: left; ) p (padding-top:10px; );
