Kako narediti osnovne in napredne oblike s čistim CSS

Ste že kdaj videli čisto spletno mesto CSS, kjer je vsak element končan s CSS? CSS naredi več kot le elemente za oblikovanje. Oblike CSS omogočajo spletnim oblikovalcem, da ustvarijo poti po meri, kot so trikotnik, krogi, poligoni in drugo. Na ta način niste več prisiljeni vstaviti plavajočo sliko s prozornim ozadjem, razočaran pa vas bo pravokotno polje okoli nje.

V tem članku bomo za kodiranje različnih oblik uporabili oblike CSS in nekaj funkcionalnih vrednosti.

Risanje osnovnih oblik CSS

Začnimo z osnovnimi oblikami, kot so kvadrat, pravokotnik, trikotnik, krog in elipsa.

Kvadrat in pravokotnik

Kvadrat in pravokotnik sta najlažji obliki za izdelavo v CSS. Vse kar morate storiti je ustvariti a in daj a višina in a premer.

HTML

CSS

.rec-sq {
zaslon: flex;
vrzel: 2em;
marža: 2em;
}
.square {
širina: 15rem;
višina: 15rem;
ozadje: rgb (255, 123, 0);
}
.recangle {
širina: 24rem;
višina: 14rem;
ozadje: rgb (0, 119, 128);
}

Izhod:

Krog in elipsa

Samo dodeliti morate a obrobni polmer 50% na kvadrat in dobili boste krog. Enako storite s pravokotnikom, da dobite elipso.

HTML

CSS

.krog {
širina: 15rem;
višina: 15rem;
ozadje: rgb (255, 123, 0);
obrobni polmer: 50 %;
}
.ellipse {
širina: 24rem;
višina: 14rem;
ozadje: rgb (0, 119, 128);
obrobni polmer: 50 %;
}

Izhod:

Trikotniki

Za ustvarjanje trikotnikov bomo uporabili obrobe. Vas zanima, kako deluje? Vse kar morate storiti je, da nastavite premer in višina trikotnika na nič. Pomeni, da gremo naprej, dejanska širina elementa bo širina meje. Prav tako morda že veste, da so robovi meje med seboj diagonali 45 stopinj. Vsaki obrobi dajte različne barve in katere koli tri nastavite na prosojne. Na koncu boste imeli svoj trikotnik.

HTML

CSS

// skupno vsem
telo {
zaslon: flex;
vrzel: 5em;
marža: 15em;
}.sample {
višina: 8,5 em;
širina: 8,5em;
robni vrh: 1em masiv #9ee780;
obroba desno: 1em trdni rgb (240, 241, 141);
obroba-spodaj: 1em trdni rgb (145, 236, 252);
obroba levo: 1em trdni rgb (248, 115, 106);
}.trikotnik {
višina: 0;
širina: 0;
robni vrh: 5em masiv #9ee780;
obroba desno: 5em trdni rgb (240, 241, 141);
obroba-dno: 5em trdni rgb (145, 236, 252);
obroba levo: 5em trdni rgb (248, 115, 106);
}

Izhod:

Lahko se igraš z višina in barva obrobe da dobimo različne vrste trikotnikov. Na primer, lahko ustvarite trikotnik, ki kaže v smeri navzgor, tako da daste obroba spodaj enobarvno, medtem ko so vse druge obrobe nastavljene na prozorne. Prav tako lahko ustvarite trikotnik, ki kaže v pravo smer, ali pravokoten trikotnik, tako da se igrate z širina obrobe in barva obrobe.

HTML

CSS

.triangle-up {
višina: 0;
širina: 0;
obroba-vrh: 5em trdna prozorna;
obroba desno: 5em trdna prozorna;
obroba-dno: 5em trdni rgb (145, 236, 252);
obroba levo: 5em trdna prozorna;
}
.triangle-right {
širina: 0;
višina: 0;
obrobni slog: trdna;
širina obrobe: 4em 0 4em 8em;
barva obrobe: prozoren prozoren prozoren rgb (245, 149, 221);
}
.triangle-bottom-right {
širina: 0;
višina: 0;
obrobni slog: trdna;
širina obrobe: 8em 0 0 8em;
barva obrobe: prozoren prozoren prozoren rgb (151, 235, 158);
}

Izhod:

Ustvarjanje naprednih oblik z uporabo CSS

Lahko uporabiš :: prej in :: potempsevdoelementi za ustvarjanje naprednih oblik. Z inteligentno uporabo lastnosti položaja in preoblikovanja lahko preprosto zgradite kompleksne oblike s čistim CSS.

Oblika zvezde (5 točk)

Obrobe boste morali manipulirati z uporabo vrednosti zasukanja transformacije. Ideja je ustvariti dve strani z uporabo a razred = "zvezda", drugi dve strani pa uporabljata :: potem element, zadnja stran pa z uporabo :: prej element.

HTML

CSS

.zvezd-pet {
marža: 3,125em 0;
položaj: relativni;
zaslon: blok;
širina: 0em;
višina: 0em;
obroba desno: 6,25 em trdno prozorno;
obroba-dno: 4,3em trdni rgb (255, 174, 81);
obroba levo: 6,25 em trdno prozorno;
transformacija: zavrti (35 stopinj);
}
.star-pet: pred {
obroba-dno: 5em trdni rgb (255, 174, 81);
obroba levo: 2em trdna prozorna;
obroba desno: 1,875em trdna prozorna;
položaj: absolutni;
višina: 0;
širina: 0;
zgoraj: -45px;
levo: -65px;
zaslon: blok;
vsebina: '';
transformiraj: zavrti (-35 stopinj);
}
.zvezd-pet: po {
položaj: absolutni;
zaslon: blok;
zgoraj: 3px;
levo: -105px;
širina: 0;
višina: 0;
obroba desno: 6,25 em trdno prozorno;
obroba-dno: 4,3em trdni rgb (255, 174, 81);
obroba levo: 5,95 em trdno prozorno;
transformiraj: zavrti (-70 stopinj);
vsebina: '';
}

Izhod:

Pentagon

Petkotnik lahko ustvarite tako, da združite trapez in trikotnik. Uporaba meja in lastnosti položaja oblikovati in združiti jih.

HTML

CSS

.pentagon {
položaj: relativni;
širina: 10em;
box-sizing: vsebina-box;
širina obrobe: 10em 5em 0;
obrobni slog: trdna;
barva obrobe: rgb (7, 185, 255) prozorna;
margin-top: 20rem;
rob-levo: 10rem;
}
.pentagon: pred {
vsebina: "";
položaj: absolutni;
višina: 0;
širina: 0;
vrh: -18em;
levo: -5em;
širina obrobe: 0 10em 8em;
obrobni slog: trdna;
barva obrobe: prozoren prozoren rgb (7, 185, 255);
}

Izhod:

Diamant

Združite dva trikotnika, usmerjena navzgor in navzdol, s položajem, da ustvarite obliko diamanta. Da, uporabili bomo meja lastnosti za ustvarjanje teh trikotnikov.

HTML

CSS

.diamond {
širina: 0;
višina: 0;
položaj: relativni;
vrh: -3em;
obroba: 3em trdna prozorna;
barva obrobe spodaj: rgb (129, 230, 255);
}
.diamant: po {
vsebina: '';
širina: 0;
višina: 0;
položaj: absolutni;
levo: -3em;
vrh: 3em;
obroba: 3em trdna prozorna;
barva obrobe vrha: rgb (129, 230, 255);
}

Izhod:

Obliko diamantnega ščita lahko ustvarite tako, da spremenite višino zgornjega trikotnika, kot je prikazano spodaj:

HTML

CSS

.diamantni ščit
{
širina: 0;
višina: 0;
obroba: 3em trdna prozorna;
obroba-spodaj: 1,25em trdni rgb (71, 194, 231);
položaj: relativni;
vrh: -3em;
}
.diamond-cut: po {
vsebina: '';
položaj: absolutni;
levo: -3em;
vrh: 1,25em;
širina: 0;
višina: 0;
obroba: 3em trdna prozorna;
obrobni vrh: 4,4em trdni rgb (71, 194, 231);
}

Izhod:

Srce

Oblika srca je nekoliko trda, vendar lahko to storite z uporabo :: prej in :: potem psevdoelementi. Uporabite lahko različne vrednosti preoblikovati da jih zavrtite iz različnih zornih kotov, dokler ne tvorijo popolne oblike srca. Navsezadnje lahko nastavite transform-izvor da nastavite točko, okoli katere se uporabi transformacija.

HTML

CSS

.heart {
širina: 6,25em;
višina: 55em;
položaj: relativni;
}
.srce: prej,
.heart: po {
vsebina: "";
širina: 3em;
višina: 5em;
položaj: absolutni;
levo: 3em;
vrh: 0;
ozadje: rdeče;
obrobni polmer: 3em 3em 0 0;
transformiraj: zavrti (-45 stopinj);
izvor transformacije: 0 100 %;
}
.heart: po {
levo: 0;
transformacija: zavrti (45 stopinj);
izvor transformacije: 100 % 100 %;
}

Izhod:

Eksperimentirajte s čistimi oblikami CSS

Zdaj bi morali biti seznanjeni z različnimi čistimi slikami CSS, ki jih je mogoče zgraditi s pisanjem nekaj vrstic kode. Izdelava super hitrega spletnega mesta ni več naporna naloga, saj se znate igrati s kodo. Najboljši del je, da lahko odmevate z glasom blagovne znamke z manipuliranjem različnih oblik in barv glede na vaše zahteve. Zato nadaljujte z eksperimentiranjem in odkrijte nove načine za risanje čudovitih oblik izključno s CSS.

Kako zgraditi odzivno navigacijsko vrstico z uporabo HTML in CSS

Klicanje vseh spletnih razvijalcev začetnikov: ta vadnica vam bo dala veščine, ki jih potrebujete za ustvarjanje lastnih odzivnih navigacijskih vrstic z uporabo samo HTML in CSS!

Preberite Naprej

O avtorju