Kako napraviti osnovne i napredne oblike s čistim CSS-om

Jeste li ikada vidjeli čistu CSS web stranicu na kojoj je svaki element završen kroz CSS? CSS radi više od samo stiliziranih elemenata. CSS oblici omogućuju web dizajnerima stvaranje prilagođenih staza kao što su trokut, krugovi, poligoni i još mnogo toga. Na ovaj način više niste prisiljeni umetati plutajuću sliku s prozirnom pozadinom, samo da bi vas razočarao pravokutni okvir oko nje.

U ovom članku ćemo koristiti CSS oblike i nekoliko funkcionalnih vrijednosti za kodiranje različitih oblika.

Crtanje osnovnih CSS oblika

Počnimo s osnovnim oblicima kao što su kvadrat, pravokutnik, trokut, krug i elipsa.

Kvadrat i pravokutnik

Kvadrat i pravokutnik su oblici koje je najlakše napraviti u CSS-u. Sve što trebate učiniti je stvoriti a i daj mu a visina i a širina.

HTML

CSS

.rec-sq {
zaslon: flex;
razmak: 2em;
margina: 2em;
}
.kvadrat {
širina: 15rem;
visina: 15rem;
pozadina: rgb (255, 123, 0);
}
.pravokutnik {
širina: 24rem;
visina: 14rem;
pozadina: rgb (0, 119, 128);
}

Izlaz:

Krug i elipsa

Vi samo trebate dodijeliti a

granica-radijus od 50% na kvadrat i dobit ćete krug. Učinite isto s pravokutnikom da dobijete elipsu.

HTML

CSS

.krug {
širina: 15rem;
visina: 15rem;
pozadina: rgb (255, 123, 0);
radijus granice: 50%;
}
.elipsa {
širina: 24rem;
visina: 14rem;
pozadina: rgb (0, 119, 128);
radijus granice: 50%;
}

Izlaz:

Trokuti

Koristit ćemo obrube za stvaranje trokuta. Pitate se kako funkcionira? Sve što trebate učiniti je postaviti širina i visina trokuta na nulu. To znači, ići naprijed, stvarna širina elementa će biti širina granice. Također, možda već znate da su rubovi rubova međusobno dijagonali od 45 stupnjeva. Dajte različite boje svakom obrubu i postavite bilo koje tri na prozirne. U konačnici, imat ćete svoj trokut.

HTML

CSS

//zajednička svima
tijelo {
zaslon: flex;
razmak: 5em;
margina: 15em;
}.uzorak {
visina: 8,5em;
širina: 8,5em;
border-top: 1em solid #9ee780;
obrub desno: 1em čvrsti rgb (240, 241, 141);
obrub-dno: 1em čvrsti rgb (145, 236, 252);
obrub lijevo: 1em solid rgb (248, 115, 106);
}.trokut {
visina: 0;
širina: 0;
border-top: 5em solid #9ee780;
obrub desno: 5em solid rgb (240, 241, 141);
obrub-dno: 5em čvrsti rgb (145, 236, 252);
obrub lijevo: 5em solid rgb (248, 115, 106);
}

Izlaz:

Možete se poigrati visina i obrub-boja kako bi dobili različite vrste trokuta. Na primjer, možete stvoriti trokut koji pokazuje prema gore dajući granica-dno jednobojnu, dok su sve ostale granice postavljene na prozirne. Također, možete stvoriti trokut koji pokazuje u pravom smjeru ili pravokutni trokut igrajući se s granica-širina i obrub-boja.

HTML

CSS

.trokut gore {
visina: 0;
širina: 0;
obrub-vrh: 5em čvrsta prozirna;
rub-desno: 5em čvrsta prozirna;
obrub-dno: 5em čvrsti rgb (145, 236, 252);
obrub-lijevo: 5em čvrsta prozirna;
}
.triangle-right {
širina: 0;
visina: 0;
obrubni stil: čvrst;
širina obruba: 4em 0 4em 8em;
boja obruba: prozirna prozirna prozirna rgb (245, 149, 221);
}
.triangle-bottom-right {
širina: 0;
visina: 0;
obrubni stil: čvrst;
širina obruba: 8em 0 0 8em;
boja obruba: prozirna prozirna prozirna rgb (151, 235, 158);
}

Izlaz:

Izrada naprednih oblika pomoću CSS-a

Možeš koristiti ::prije i ::nakonpseudoelementi za stvaranje naprednih oblika. Uz inteligentnu upotrebu svojstava položaja i transformacije, možete jednostavno graditi složene oblike koristeći čisti CSS.

Zvjezdasti oblik (5 točaka)

Morat ćete manipulirati granicama koristeći vrijednost rotiranja transformacije. Ideja je stvoriti dvije strane pomoću a klasa=”zvjezdica”, druge dvije strane koriste ::nakon element, a posljednja strana pomoću ::prije element.

HTML

CSS

.star-pet {
margina: 3,125em 0;
položaj: relativan;
zaslon: blok;
širina: 0em;
visina: 0em;
obrub-desno: 6,25em čvrsta prozirna;
obrub-dno: 4.3em solid rgb (255, 174, 81);
obrub-lijevo: 6,25em čvrsta prozirna;
transformirati: rotirati (35 stupnjeva);
}
.star-five: prije {
obrub-dno: 5em čvrsti rgb (255, 174, 81);
obrub-lijevo: 2em čvrsta prozirna;
granica-desno: 1.875em čvrsta prozirna;
pozicija: apsolutna;
visina: 0;
širina: 0;
vrh: -45px;
lijevo: -65px;
zaslon: blok;
sadržaj: '';
transformirati: rotirati (-35 stupnjeva);
}
.star-five: nakon {
pozicija: apsolutna;
zaslon: blok;
vrh: 3px;
lijevo: -105px;
širina: 0;
visina: 0;
obrub-desno: 6,25em čvrsta prozirna;
obrub-dno: 4.3em solid rgb (255, 174, 81);
obrub-lijevo: 5,95em čvrsta prozirna;
transformirati: rotirati (-70 stupnjeva);
sadržaj: '';
}

Izlaz:

Peterokut

Možete stvoriti peterokut kombiniranjem trapeza i trokuta. Koristiti granica i svojstva položaja oblikuju i grupiraju ih.

HTML

CSS

.pentagon {
položaj: relativan;
širina: 10em;
box-sizing: content-box;
širina obruba: 10em 5em 0;
obrubni stil: čvrst;
boja obruba: rgb (7, 185, 255) prozirna;
margin-top: 20rem;
margin-lijevo: 10rem;
}
.pentagon: prije {
sadržaj: "";
pozicija: apsolutna;
visina: 0;
širina: 0;
vrh: -18em;
lijevo: -5em;
granica-širina: 0 10em 8em;
obrubni stil: čvrst;
boja obruba: prozirna prozirna rgb (7, 185, 255);
}

Izlaz:

Dijamant

Grupirajte dva trokuta usmjerena prema gore i prema dolje koristeći položaj da biste stvorili oblik dijamanta. Da, koristit ćemo granica svojstva za stvaranje ovih trokuta.

HTML

CSS

.dijamant {
širina: 0;
visina: 0;
položaj: relativan;
vrh: -3em;
obrub: 3em čvrsta prozirna;
boja obruba dna: rgb (129, 230, 255);
}
.dijamant: nakon {
sadržaj: '';
širina: 0;
visina: 0;
pozicija: apsolutna;
lijevo: -3em;
vrh: 3em;
obrub: 3em čvrsta prozirna;
border-top-color: rgb (129, 230, 255);
}

Izlaz:

Možete stvoriti oblik dijamantnog štita promjenom visine gornjeg trokuta kao što je prikazano u nastavku:

HTML

CSS

.dijamantni štit
{
širina: 0;
visina: 0;
obrub: 3em čvrsta prozirna;
obrub-dno: 1,25em čvrsti rgb (71, 194, 231);
položaj: relativan;
vrh: -3em;
}
.diamond-cut: nakon {
sadržaj: '';
pozicija: apsolutna;
lijevo: -3em;
vrh: 1,25em;
širina: 0;
visina: 0;
obrub: 3em čvrsta prozirna;
obrub-vrh: 4,4em čvrsti rgb (71, 194, 231);
}

Izlaz:

Srce

Oblik srca je malo tvrd, ali to možete učiniti korištenjem ::prije i ::nakon pseudoelementi. Možete koristiti različite vrijednosti transformirati da ih rotirate iz različitih kutova dok savršeno ne formiraju oblik srca. U konačnici, možete postaviti transform-podrijetlo za postavljanje točke oko koje se transformacija primjenjuje.

HTML

CSS

.srce {
širina: 6,25em;
visina: 55em;
položaj: relativan;
}
.srce: prije,
.srce: nakon {
sadržaj: "";
širina: 3em;
visina: 5em;
pozicija: apsolutna;
lijevo: 3em;
vrh: 0;
pozadina: crvena;
granica-radijus: 3em 3em 0 0;
transformirati: rotirati (-45 stupnjeva);
transform-podrijetlo: 0 100%;
}
.srce: nakon {
lijevo: 0;
transformirati: rotirati (45 stupnjeva);
transformacija podrijetla: 100% 100%;
}

Izlaz:

Eksperimentirajte s čistim CSS oblicima

Sada biste trebali biti upoznati s različitim čistim CSS slikama koje se mogu izraditi pisanjem nekoliko redaka koda. Izrada superbrze web stranice više nije naporan zadatak jer se znate igrati s kodom. Najbolji dio je što možete rezonirati s glasom marke manipulirajući različitim oblicima i bojama prema vašim zahtjevima. Stoga nastavite eksperimentirati i otkrijte nove načine crtanja sjajnih oblika isključivo pomoću CSS-a.

Kako izgraditi responzivnu navigacijsku traku koristeći HTML i CSS

Pozivanje svih web developera početnika: ovaj vodič će vam dati vještine koje su vam potrebne za izradu vlastitih respsonive navigacijskih traka koristeći samo HTML i CSS!

Pročitajte dalje

O autoru