Luo CSS-painikkeita, yksi yksityiskohta kerrallaan.
Muotoile painike visuaalisesti ja hanki HTML ja CSS sen käyttämiseksi verkkosivustollasi. Aloita esiasetuksella, säädä typografiaa, värejä, muotoa ja varjoja, ja esikatsele sitten vuorovaikutustilat ennen vientiä.
Selaa 44-esiasetuksia kokoelmista Everyday, Classic, Shaped, Expressive, Gradients ja Elite. Jokainen esiasetus on lähtökohta, jota voit muokata.
Miten esiasetukset vaikuttavat suunnitteluusi
Valitse ensin, hienosäädä sitten
Käytä tyylikokoelmaa gallerian rajaamiseen. Esiasetuksen käyttäminen korvaa sekä oletus- että leijumistyylit, mutta säilyttää painikkeen tekstin ja luokan nimen.
Kokeile yksinkertaista täyttöä, pyöristettyjä kulmia, selkeää reunaviivaa tai koristeellisempaa käsittelyä. Kun löydät suunnan, käytä muita välilehtiä sovittaaksesi yksityiskohdat sivullesi.
Tee tekstistä sopiva
Aseta painikkeen teksti, fonttiperhe, koko, lihavointi, välistys, riviväli, tasaus ja tekstin väri. Näe tekstin päivittyvän työskennellessäsi.
Hienosäädä tekstiä ja välistystä
Toimintoon sopiva typografia
Teksti sisältää fonttisäätimet ja toisen painikkeen tekstikentän. Fonttikoko vaihtelee välillä 10–80 px; luetellut perheet käyttävät vierailijan laitteella saatavilla olevia fontteja.
Käytä lyhyttä tekstiä, joka kuvaa toimintoa. Täytössä vaaka- ja pystysuuntainen täyte lisää tilaa sen ympärille muuttamatta tekstikokoa. Tarkista pidemmät tekstit sivulta, jossa painiketta käytetään.
Valitse tasainen tai liukuväritäyttö
Käytä yhtä taustaväriä tai sekoita kahta väriä lineaarisella liukuvärillä. Värivalitsimet ja heksadesimaalikentät mahdollistavat visuaalisen tai tarkan työskentelyn.
Aseta värit ja liukuvärin suunta
Kaksi väriä, yksi selkeä suunta
Muuta Täyttö-kohdassa täyttötyyliksi Lineaarinen liukuväri paljastaaksesi toisen värin ja liukuvärin kulman. Kulma vaihtelee välillä 0–360 astetta.
Heksadesimaalikentät hyväksyvät täyden kuusinumeroisen värin tai kolminumeroisen lyhenteen. Testaa valkoista tai värillistä tekstiä liukuvärin molempia päitä vasten; studio ei automaattisesti varmista tekstin kontrastia.
Hallitse reunaviivaa ja syvyyttä
Säädä linkitettyjä tai itsenäisiä kulmia, reunaviivan leveyttä ja tyyliä, laatikkovarjoja ja tekstivarjoja. Anna painikkeelle sen kontekstiin sopiva muoto.
Tutki kulmia, reunaviivoja ja varjoja
Selkeästä suorakulmiosta pehmeään pillerimuotoon
Pidä Muoto-kohdassa "Linkitä kaikki kulmat" päällä yhtä jaettua sädettä varten tai kytke se pois päältä asettaaksesi jokaisen kulman erikseen. Reunatyylejä ovat solid, dashed, dotted, double, inset, outset, ridge, groove ja none.
Aseta Varjo-kohdassa vaaka- ja pystysuuntaiset siirtymät, sumennus, väri ja peittävyys. Laatikkovarjossa on myös levitys ja sisävarjokytkin. Tekstivarjo on erillinen, joten voit lisätä syvyyttä tekstiin muuttamatta painikkeen ääriviivoja.
Suunnittele myös vuorovaikutus
Muokkaa oletus- ja leijumistyylejä erikseen. Esikatsele oletus-, leijumis- ja aktiivisia ulkoasuja, ja vertaa sitten painiketta vaaleilla ja tummilla taustoilla.
Ymmärrä muokkaus- ja esikatselutilat
Kaksi muokattavaa tyyliä, kolme esikatselutilaa
Muokkaustila valitsee, mitä tyyliä säätimesi muuttavat. Kankaan tilapainikkeet valitsevat vain esikatselun. Esikatselun leijuminen tai painaminen näyttää myös sen vuorovaikutuksen.
Leijumisarvot, jotka vastaavat oletusta, seuraavat perusmuokkauksia, kunnes ne mukautetaan. Viety CSS sisältää tarvittaessa leijumissäännön, focus-visible-ääriviivan, aktiivisen liikkeen ja vähennetyn liikkeen säännön.
Tuo CSS projektiisi
Kopioi luotu CSS ja vastaava HTML-painike tai lataa tyylitiedosto. Luokan nimi pitää nämä kaksi osaa yhdistettyinä.
Kopioi, lataa ja säilytä työsi
Selkeää koodia, jota voit käyttää suoraan
Valitse erottuva luokan nimi, kopioi CSS sen välilehdeltä ja kopioi sitten painike kohdasta HTML. Lataus tallentaa .css-tiedoston, joka on nimetty luokan mukaan; se ei lataa kokonaista verkkosivua.
Esikatselu ja koodin luonti tapahtuvat selaimessasi. Studio yrittää muistaa yhden luonnoksen selaimen paikallisessa tallennustilassa; vie kaikki, minkä haluat säilyttää. Nollaus palauttaa studion alkuperäiseen tyyliinsä.
Tekstit ja tyylit sisään. HTML ja CSS ulos.
Latausta ei tarvita. JavaScript käyttää live-editoria selaimessasi. Kopioi HTML ja CSS erikseen tai lataa CSS-tyylitiedosto. Luotu fonttipino käyttää katsojan laitteella saatavilla olevia fontteja.
