Perus- ja edistyksellisten muotojen tekeminen puhtaalla CSS: llä

Oletko koskaan nähnyt puhdasta CSS-verkkosivustoa, jossa jokainen elementti on viimeistelty CSS: n kautta? CSS tekee muutakin kuin vain tyylielementtejä. CSS-muotojen avulla web-suunnittelijat voivat luoda mukautettuja polkuja, kuten kolmio, ympyrät, polygonit ja paljon muuta. Tällä tavalla sinun ei enää tarvitse lisätä kelluvaa kuvaa läpinäkyvällä taustalla, vaan sen ympärillä oleva suorakaiteen muotoinen laatikko pettyy.

Tässä artikkelissa käytämme CSS-muotoja ja muutamia toiminnallisia arvoja eri muotojen koodaamiseen.

CSS-perusmuotojen piirtäminen

Aloitetaan perusmuodoista, kuten neliö, suorakulmio, kolmio, ympyrä ja ellipsi.

Neliö ja suorakulmio

Neliö ja suorakulmio ovat helpoimpia muotoja tehdä CSS: ssä. Sinun tarvitsee vain luoda a ja anna sille a korkeus ja a leveys.

HTML

CSS

.rec-sq {
näyttö: flex;
rako: 2em;
marginaali: 2em;
}
.square {
leveys: 15 rem;
korkeus: 15 rem;
tausta: rgb (255, 123, 0);
}
.reectangle {
leveys: 24rem;
korkeus: 14 rem;
tausta: rgb (0, 119, 128);
}

Lähtö:

Ympyrä ja ellipsi

Sinun tarvitsee vain määrittää a raja-säde 50 % neliöön ja saat ympyrän. Tee sama suorakulmion kanssa saadaksesi ellipsin.

HTML

CSS

.circle {
leveys: 15 rem;
korkeus: 15 rem;
tausta: rgb (255, 123, 0);
rajan säde: 50 %;
}
.ellipsi {
leveys: 24rem;
korkeus: 14 rem;
tausta: rgb (0, 119, 128);
rajan säde: 50 %;
}

Lähtö:

Kolmiot

Käytämme reunuksia kolmioiden luomiseen. Mietitkö kuinka se toimii? Sinun tarvitsee vain asettaa leveys ja korkeus kolmiosta nollaan. Se tarkoittaa eteenpäin siirtymistä todellinen leveys elementistä tulee olemaan reunan leveys. Saatat myös jo tietää, että reunuksen reunat ovat 45 asteen lävistäjät toisiinsa nähden. Anna jokaiselle reunukselle eri värit ja aseta mitkä tahansa kolme niistä läpinäkyviksi. Lopulta sinulla on kolmiosi.

HTML

CSS

//yhteistä kaikille
body {
näyttö: flex;
rako: 5em;
marginaali: 15 em;
}.sample {
korkeus: 8,5 em;
leveys: 8,5 em;
border-top: 1em solid #9ee780;
reuna-oikea: 1em solid rgb (240, 241, 141);
border-bottom: 1em solid rgb (145, 236, 252);
reuna-vasen: 1 em solid rgb (248, 115, 106);
}.kolmio {
korkeus: 0;
leveys: 0;
border-top: 5em solid #9ee780;
reuna-oikea: 5em solid rgb (240, 241, 141);
border-bottom: 5em solid rgb (145, 236, 252);
reuna-vasen: 5 em solid rgb (248, 115, 106);
}

Lähtö:

Sen kanssa voi leikkiä korkeus ja reunuksen väri saada erityyppisiä kolmioita. Voit esimerkiksi luoda kolmion, joka osoittaa kohti ylöspäin antamalla raja-ala yksivärinen, kun taas kaikki muut reunat on asetettu läpinäkyviksi. Voit myös luoda oikeaan suuntaan osoittavan kolmion tai suorakulmaisen kolmion leikkimällä reunan leveys ja reunuksen väri.

HTML

CSS

.triangle-up {
korkeus: 0;
leveys: 0;
reunus yläosa: 5em kiinteä läpinäkyvä;
reuna-oikea: 5em kiinteä läpinäkyvä;
border-bottom: 5em solid rgb (145, 236, 252);
reunus vasen: 5em kiinteä läpinäkyvä;
}
.triangle-right {
leveys: 0;
korkeus: 0;
reunatyylinen: kiinteä;
reunan leveys: 4em 0 4em 8em;
reunaväri: läpinäkyvä läpinäkyvä läpinäkyvä rgb (245, 149, 221);
}
.triangle-bottom-right {
leveys: 0;
korkeus: 0;
reunatyylinen: kiinteä;
reunan leveys: 8em 0 0 8em;
reunaväri: läpinäkyvä läpinäkyvä läpinäkyvä rgb (151, 235, 158);
}

Lähtö:

Kehittyneiden muotojen luominen CSS: n avulla

Voit käyttää ::ennen ja ::jälkeenpseudoelementtejä kehittyneiden muotojen luomiseen. Älykkään sijainti- ja muunnosominaisuuksien käytön ansiosta voit helposti rakentaa monimutkaisia ​​muotoja puhtaan CSS: n avulla.

Tähtimuoto (5 pistettä)

Sinun on manipuloitava reunoja käyttämällä muunnoksen kiertoarvoa. Ajatuksena on luoda kaksi puolta käyttämällä a luokka = "tähti", kaksi muuta puolta käyttämällä ::jälkeen elementti ja viimeinen puoli käyttämällä ::ennen elementti.

HTML

CSS

.star-five {
marginaali: 3,125em 0;
asema: suhteellinen;
näyttö: lohko;
leveys: 0em;
korkeus: 0 em;
reuna-oikea: 6,25em kiinteä läpinäkyvä;
border-bottom: 4,3 em solid rgb (255, 174, 81);
reunus vasen: 6,25em kiinteä läpinäkyvä;
muunnos: käännä (35 astetta);
}
.star-five: ennen {
border-bottom: 5em solid rgb (255, 174, 81);
reunus vasen: 2em kiinteä läpinäkyvä;
reuna-oikea: 1.875em kiinteä läpinäkyvä;
sijainti: absoluuttinen;
korkeus: 0;
leveys: 0;
yläosa: -45px;
vasen: -65px;
näyttö: lohko;
sisältö: '';
muunnos: käännä (-35 astetta);
}
.star-five: jälkeen {
sijainti: absoluuttinen;
näyttö: lohko;
yläosa: 3px;
vasen: -105px;
leveys: 0;
korkeus: 0;
reuna-oikea: 6,25em kiinteä läpinäkyvä;
border-bottom: 4,3 em solid rgb (255, 174, 81);
reunus vasen: 5,95em kiinteä läpinäkyvä;
muunnos: käännä (-70 astetta);
sisältö: '';
}

Lähtö:

Pentagon

Voit luoda viisikulmion yhdistämällä puolisuunnikkaan ja kolmion. Käyttää rajaa ja sijainnin ominaisuudet muotoile ja ryhmittele ne.

HTML

CSS

.pentagon {
asema: suhteellinen;
leveys: 10 em;
laatikon koko: content-box;
reunan leveys: 10em 5em 0;
reunatyylinen: kiinteä;
reunan väri: rgb (7, 185, 255) läpinäkyvä;
marginaali yläosa: 20rem;
marginaali vasen: 10rem;
}
.pentagon: ennen {
sisältö: "";
sijainti: absoluuttinen;
korkeus: 0;
leveys: 0;
yläosa: -18em;
vasen: -5em;
reunan leveys: 0 10 em 8 em;
reunatyylinen: kiinteä;
reunaväri: läpinäkyvä läpinäkyvä rgb (7, 185, 255);
}

Lähtö:

Timantti

Ryhmittele kaksi ylös- ja alaspäin osoittavaa kolmiota käyttämällä asentoa luodaksesi vinoneliön. Kyllä, käytämme rajaa ominaisuuksia näiden kolmioiden luomiseksi.

HTML

CSS

.timantti {
leveys: 0;
korkeus: 0;
asema: suhteellinen;
yläosa: -3em;
reuna: 3em kiinteä läpinäkyvä;
reuna-ala-väri: rgb (129, 230, 255);
}
.timantti: jälkeen {
sisältö: '';
leveys: 0;
korkeus: 0;
sijainti: absoluuttinen;
vasen: -3em;
alkuun: 3em;
reuna: 3em kiinteä läpinäkyvä;
reuna-yläväri: rgb (129, 230, 255);
}

Lähtö:

Voit luoda timanttikilven muodon muuttamalla yläkolmion korkeutta alla olevan kuvan mukaisesti:

HTML

CSS

.timanttikilpi
{
leveys: 0;
korkeus: 0;
reuna: 3em kiinteä läpinäkyvä;
border-bottom: 1,25 em solid rgb (71, 194, 231);
asema: suhteellinen;
yläosa: -3em;
}
.diamond-cut: jälkeen {
sisältö: '';
sijainti: absoluuttinen;
vasen: -3em;
yläosa: 1,25 em;
leveys: 0;
korkeus: 0;
reuna: 3em kiinteä läpinäkyvä;
border-top: 4,4 em solid rgb (71, 194, 231);
}

Lähtö:

Sydän

Sydämen muoto on hieman kova, mutta voit tehdä sen käyttämällä ::ennen ja ::jälkeen pseudoelementtejä. Voit käyttää erilaisia ​​arvoja muuttaa pyörittää niitä eri kulmista, kunnes ne muodostavat täydellisesti sydämen muodon. Lopulta voit asettaa muunnos-alkuperä asettaaksesi pisteen, jonka ympärillä muunnos tehdään.

HTML

CSS

.heart {
leveys: 6,25 em;
korkeus: 55 em;
asema: suhteellinen;
}
.heart: ennen,
.heart: jälkeen {
sisältö: "";
leveys: 3em;
korkeus: 5em;
sijainti: absoluuttinen;
vasen: 3em;
alkuun: 0;
tausta: punainen;
raja-säde: 3em 3em 0 0;
muunnos: käännä (-45 astetta);
muunnos-alkuperä: 0 100 %;
}
.heart: jälkeen {
vasen: 0;
muunnos: käännä (45 astetta);
muunnos-alkuperä: 100 % 100 %;
}

Lähtö:

Kokeile puhtaita CSS-muotoja

Sinun pitäisi nyt tuntea erilaiset puhtaat CSS-kuvat, jotka voidaan rakentaa kirjoittamalla muutama rivi koodia. Erittäin nopean verkkosivuston rakentaminen ei ole enää kiireinen tehtävä, koska osaat leikkiä koodilla. Parasta on, että voit resonoida brändin äänellä manipuloimalla erilaisia ​​muotoja ja värejä tarpeidesi mukaan. Siksi jatka kokeilua ja löydä uusia tapoja piirtää mahtavia muotoja puhtaasti CSS: n avulla.

Responsiivisen navigointipalkin rakentaminen HTML: n ja CSS: n avulla

Soittaminen kaikille aloittelijoille web-kehittäjille: tämä opetusohjelma antaa sinulle taidot, joita tarvitset omien responsiivisten navigointipalkkien luomiseen käyttämällä vain HTML: ää ja CSS: ää!

Lue Seuraava

Kirjailijasta