CSS-painikkeet: oppaat ja esimerkit
Painikkeiden luominen CSS: llä on yksi kokeiltuista web-suunnittelustekniikoilla. Esimerkkejä ja opetusohjelmia on runsaasti.
Suurin viimeinen trendi CSS-painikkeen suunnittelussa näyttää poistavan kuvia, varsinkin taustakuvia, painikkeista. Mutta on paljon muita asioita, joita suunnittelijat tekevät painikkeilla, joista osaan kuuluu kuvia.
Alla on kerätty yli kaksikymmentä oppituntia, esimerkkejä ja työkaluja CSS-painikkeiden luomiseen, joista suurin osa käyttää CSS3: ta.
Mukana on painikkeita, jotka sopivat lähes jokaiseen tyyliin. Olemme yrittäneet keskittyä uudempiin tekniikoihin, jättämällä pois pitkät tekniikat (kuten liukuovi luoda pyöristettyjä kulmia), että useimmat suunnittelijat ovat jo tunne.
Jos sinulla on muita tutoriaaleja tai esimerkkejä, jotka haluat jakaa, tee se kommentteihin!
Oppaat ja artikkelit
Painikeelementin löytäminen uudelleen
Todella hyödyllinen artikkeli, josta keskustelemme button elementti CSS: ssä, jota suunnittelijat usein jättävät huomiotta. Se on hieman vanhempi, mutta silti on paljon hyödyllistä tietoa CSS: n tyylikkäimpien painikkeiden luomisesta.
Kauniit CSS-painikkeet, joissa kuvakkeet
Tässä on toinen artikkeli, joka kertoo, kuinka voit luoda painikkeita kuvakkeilla, vaikka käytätkin span luokat kuin button elementti.
Rakenna kick-ass käytännöllisiä CSS3-painikkeita
Nettuts +: n videotyökalu näyttää, kuinka luoda käytännöllisiä CSS3-painikkeita, jotka sisältävät jopa sellaisen, joka näyttää olevan Twitter-lintikuvakuvaksi, mutta joka on itse asiassa luotu kokonaan CSS3: lla.
Kauniit Photoshopin kaltaiset painikkeet CSS3: lla
Vaikka painikkeet tässä eivät ole erityisen näkökulmasta näkökulmasta, on hämmästyttävää, että ne on luotu kokonaan käyttämällä CSS3: ta, ilman kuvia, ja ne perustuvat vain Photoshopissa luotuihin painikkeisiin.
Parempi painike ja navigointiyhteydet
Tämä on hieno, yksinkertainen opetusohjelma Darren Hoytilta, joka luo parempia käyttäytymiä painikkeillesi, jotka kannustavat vieraita vuorovaikutukseen sivustosi kanssa.
Super mahtavia painikkeita CSS3 ja RGBA
Tämä Zurbin opetusohjelma kattaa CSS3: n ja alfa-sekoittamisen käyttämällä RGBA: ta luomaan skaalautuvia painikkeita, joissa on vain yksi PNG-kuva.
Rakentaa kauniita painikkeita CSS-kaltevuuksilla
Tutorial, jolla voit luoda painikkeen käyttäen CSS-kaltevuuksia, jotka ovat samankaltaisia kuin Mozilla Firefox -hahmot.
Miten suunnitella seksikäs painike käyttäen CSS
Tämä opetusohjelma näyttää kuinka luoda suuri, eloisa painike ilman kuvia.
Realistiset CSS3-painikkeet
Nämä ovat yksinkertaisia painikkeita, jotka on luotu kokonaan CSS3: lla, mukaan lukien joitain pseudo-elementtejä.
Pretty CSS3-painikkeet
Tämä opetusohjelma näyttää, kuinka luoda yksinkertainen, hieman kiiltävä-tyylinen painike, joka on skaalautuva ja joka voidaan luoda missä tahansa värissä ilman kuvia.
CSS3-painikkeet ilman kuvia
Yksinkertainen opetusohjelma dynaamisten painikkeiden luomiseen, jotka käyttävät vain CSS3: ta ja kuvia. Jokaiselle painikkeelle on neljä tilaa, mukaan lukien estetyt, leijuneet ja napsautetut tilat.
5 erilaista dynaamisten CSS-pyöristettyjen kulmien linkkipainikkeita
Tämä on kokoelma viittä eri opetusohjelmaa CSS-painikkeiden luomiseen pyöristetyt kulmat. Kaksi sisältää kuvien käytön, mutta muut kolme eivät.
Luo CSS3-painike, joka hajoittaa hienosti
Siihen saakka, kunnes kaikki selaimet tukevat CSS3: ta, aiomme käsitellä ongelmia käyttäessäsi niitä luomalla painikkeita. Tämä opetusohjelma näyttää, kuinka luoda upeita CSS3-painikkeita, jotka näyttävät hyvin vanhilta selaimilta, kuten IE6 ja 7.
Applen navigointipalkki vain CSS: n avulla
Tässä opetusohjelmassa näytetään, miten Apple-sivuston painike-tyyppinen navigointivalikko luodaan uudelleen. Se toimii parhaiten Safari 3+: ssa, mutta silti näyttää hyvältä muilta selaimilta.
Luo CSS3-puhelu toimintapainikkeelle
Tämä opetusohjelma näyttää, miten luodaan soittopyynnön painike kokonaan CSS: llä, joka sisältää erilaiset oletusasetukset ja hover-tilat.
Sexy painikkeet CSS3: lla
Tämä yksinkertainen opetusohjelma näyttää, kuinka luoda tyylikkäät painikkeet, joilla on ainutlaatuinen vuoro ja aktiiviset tilat. Painikkeita voidaan skaalata ja niiden väriä voidaan helposti muuttaa.
Glossy-painikkeet ilman kuvia vain CSS3: n avulla
Näiden painikkeiden tarkasteleminen on vaikea uskoa, että ne on tehty ilman kuvia, ellei näytä tarkkaan. Koodi on monimutkainen, mutta lopputulos näyttää hyvältä, ja siinä on liukuva vaikutus.
CSS3-painikkeet kuvakkeineen
Tämä opetusohjelma näyttää, miten luodaan CSS3-painikkeita, joilla on kaltevuudet, jotka sisältävät myös kuvakuvakuvia ja jotka ovat selainten välisiä yhteensopivia.
Avaa omat Google-painikkeet
Tämä opetusohjelma näyttää, miten skaalautuvia Google-tyylisiä painikkeita, joilla on värillinen raja. Lopputulokset ovat minimalistisia ja puhtaita.
Esimerkkejä ja työkaluja
10 upeaa CSS3-painiketta, joita voit käyttää sivustossasi
Tässä on kymmenen painikkeen kokoelma, jota voit käyttää verkkosivustollasi. Ne ovat kaikki melko yksinkertaisia, mutta ne on luotu vain CSS3: lla ilman kuvia.
CSS3-gradienttipainikkeet
Tämä on valtava kokoelma CSS3-painikkeita Web Designer Wallista. Mukana on erilaisia muotoja, kokoja ja värejä, joilla kaikilla on kaltevuudet. Yksi niistä parhaimmista osista on kuitenkin se, miten hellävaraisesti nämä painikkeet hajoavat selaimissa, joilla ei ole täydellistä CSS3-tukea.
Button maker
CSS-Tricks tarjoaa tämän ilmaisen CSS3-painikkeen luoja. Määritä vain kunkin painikkeen tilan värit, koon ja tekstin attribuutit, ja se luo CSS-koodin sinulle.
Radioaktiiviset painikkeet
Nämä painikkeet käyttävät CSS-animaatioita Safariin luodakseen sykkivän, hehkuvaa vaikutusta. Muissa selaimissa, jotka tukevat CSS3: ta, ne ovat edelleen täysin toimivia ja näyttävät hienolta.
Tunnetko muita tekniikoita upeiden CSS-painikkeiden luomiseen, joita ei mainita tässä? Vai onko suosikki esimerkki? Jaa ne kommentteihin!