Kā izveidot pamata un uzlabotas formas, izmantojot tīru CSS

Vai esat kādreiz redzējis tīru CSS vietni, kurā katrs elements ir pabeigts, izmantojot CSS? CSS sniedz vairāk nekā tikai stila elementus. CSS formas ļauj tīmekļa dizaineriem izveidot pielāgotus ceļus, piemēram, trīsstūri, apļus, daudzstūrus un daudz ko citu. Tādā veidā jūs vairs neesat spiesti ievietot peldošu attēlu ar caurspīdīgu fonu, lai jūs sarūgtinātu ar taisnstūrveida kastīti ap to.

Šajā rakstā mēs izmantosim CSS formas un dažas funkcionālās vērtības, lai kodētu dažādas formas.

CSS pamata formu zīmēšana

Sāksim ar pamatformām, piemēram, kvadrātu, taisnstūri, trīsstūri, apli un elipsi.

Kvadrāts un taisnstūris

Kvadrāts un taisnstūris ir visvieglāk CSS veidojamas formas. Viss, kas jums jādara, ir izveidot a un iedod a augstums un a platums.

HTML

CSS

.rec-sq {
displejs: flex;
atstarpe: 2em;
piemale: 2em;
}
.kvadrāts {
platums: 15rem;
augstums: 15 rem;
fons: rgb (255, 123, 0);
}
.taisnstūris {
platums: 24rem;
augstums: 14 rem;
fons: rgb (0, 119, 128);
}

Izvade:

Aplis un elipse

Jums vienkārši jāpiešķir a

robeža-rādiuss 50% uz kvadrātu, un jūs iegūsit apli. Dariet to pašu ar taisnstūri, lai iegūtu elipsi.

HTML

CSS

.circle {
platums: 15rem;
augstums: 15 rem;
fons: rgb (255, 123, 0);
apmales rādiuss: 50%;
}
.ellipse {
platums: 24rem;
augstums: 14 rem;
fons: rgb (0, 119, 128);
apmales rādiuss: 50%;
}

Izvade:

Trīsstūri

Mēs izmantosim apmales, lai izveidotu trīsstūrus. Interesanti, kā tas darbojas? Viss, kas jums jādara, ir iestatīt platums un augstums no trīsstūra līdz nullei. Tas nozīmē, virzoties uz priekšu, faktiskais platums no elementa būs apmales platums. Turklāt jūs, iespējams, jau zināt, ka apmales malas ir 45 grādu diagonāles viena pret otru. Katrai apmalei piešķiriet dažādas krāsas un jebkuras trīs no tām iestatiet kā caurspīdīgas. Galu galā jums būs savs trīsstūris.

HTML

CSS

//kopīgs visiem
body {
displejs: flex;
atstarpe: 5em;
piemale: 15em;
}.sample {
augstums: 8,5 em;
platums: 8.5em;
apmale-top: 1em solid #9ee780;
apmale-labā: 1 em ciets rgb (240, 241, 141);
apmale-apakšā: 1 em ciets rgb (145, 236, 252);
apmale-kreisais: 1 em solid rgb (248, 115, 106);
}.trijstūris {
augstums: 0;
platums: 0;
apmale-top: 5em ciets #9ee780;
apmale-labā: 5 em solid rgb (240, 241, 141);
apmale-apakšā: 5 em ciets rgb (145, 236, 252);
apmale-kreisais: 5 em solid rgb (248, 115, 106);
}

Izvade:

Jūs varat spēlēties ar augstums un apmales krāsa lai iegūtu dažāda veida trīsstūrus. Piemēram, jūs varat izveidot trīsstūri, kas norāda uz augšupejošu virzienu, norādot apmale-apakša vienkrāsains, bet visas pārējās apmales ir iestatītas kā caurspīdīgas. Varat arī izveidot trīsstūri, kas norāda uz pareizo virzienu, vai taisnleņķa trīsstūri, spēlējoties ar apmales platums un apmales krāsa.

HTML

CSS

.triangle-up {
augstums: 0;
platums: 0;
apmale-top: 5em ciets caurspīdīgs;
apmale pa labi: 5 em cieti caurspīdīgs;
apmale-apakšā: 5 em ciets rgb (145, 236, 252);
apmale-kreisais: 5em ciets caurspīdīgs;
}
.triangle-right {
platums: 0;
augstums: 0;
apmales stils: ciets;
apmales platums: 4em 0 4em 8em;
apmales krāsa: caurspīdīgs caurspīdīgs caurspīdīgs rgb (245, 149, 221);
}
.triangle-bottom-right {
platums: 0;
augstums: 0;
apmales stils: ciets;
apmales platums: 8em 0 0 8em;
apmales krāsa: caurspīdīgs caurspīdīgs caurspīdīgs rgb (151, 235, 158);
}

Izvade:

Uzlabotu formu izveide, izmantojot CSS

Tu vari izmantot ::pirms un ::pēcpseidoelementi lai izveidotu uzlabotas formas. Pārdomāti izmantojot pozīcijas un transformācijas rekvizītus, varat viegli izveidot sarežģītas formas, izmantojot tīru CSS.

Zvaigznes forma (5 punkti)

Jums būs jāmanipulē ar apmalēm, izmantojot transformācijas rotācijas vērtību. Ideja ir izveidot divas puses, izmantojot a klase = "zvaigzne", pārējās divas puses, izmantojot ::pēc elementu un pēdējo pusi, izmantojot ::pirms elements.

HTML

CSS

.star-five {
starpība: 3,125 em 0;
pozīcija: relatīvs;
displejs: bloks;
platums: 0em;
augstums: 0em;
apmale pa labi: 6,25 em cieti caurspīdīgs;
apmale-apakšā: 4,3 em solid rgb (255, 174, 81);
apmale-kreisais: 6,25 em cieti caurspīdīgs;
pārveidot: pagriezt (35grādi);
}
.star-five: pirms {
apmale-apakšā: 5 em ciets rgb (255, 174, 81);
apmale-kreisais: 2em cieti caurspīdīgs;
apmale-labā: 1,875 em cieti caurspīdīgs;
pozīcija: absolūta;
augstums: 0;
platums: 0;
augšpusē: -45 pikseļi;
pa kreisi: -65 pikseļi;
displejs: bloks;
saturs: '';
pārveidot: pagriezt (-35grādi);
}
.star-five: pēc {
pozīcija: absolūta;
displejs: bloks;
augšpusē: 3 pikseļi;
pa kreisi: -105 pikseļi;
platums: 0;
augstums: 0;
apmale pa labi: 6,25 em cieti caurspīdīgs;
apmale-apakšā: 4,3 em solid rgb (255, 174, 81);
apmale-kreisais: 5,95 em cieti caurspīdīgs;
pārveidot: pagriezt (-70°);
saturs: '';
}

Izvade:

Pentagons

Jūs varat izveidot piecstūri, apvienojot trapecveida un trīsstūri. Izmantot robeža un pozīcijas īpašības veidojiet un grupējiet tos.

HTML

CSS

.pentagon {
pozīcija: relatīvs;
platums: 10em;
box-sizing: content-box;
apmales platums: 10em 5em 0;
apmales stils: ciets;
apmales krāsa: rgb (7, 185, 255) caurspīdīga;
mala-augšdaļa: 20rem;
piemale-kreisais: 10rem;
}
.pentagon: pirms {
saturs: "";
pozīcija: absolūta;
augstums: 0;
platums: 0;
augšā: -18em;
pa kreisi: -5em;
apmales platums: 0 10 em 8 em;
apmales stils: ciets;
apmales krāsa: caurspīdīgs caurspīdīgs rgb (7, 185, 255);
}

Izvade:

Dimants

Grupējiet divus trīsstūrus, kas vērsti uz augšu un uz leju, izmantojot pozīciju, lai izveidotu rombveida formu. Jā, mēs izmantosim robeža īpašības, lai izveidotu šos trīsstūrus.

HTML

CSS

.diamond {
platums: 0;
augstums: 0;
pozīcija: relatīvs;
augšā: -3em;
apmale: 3em cieta caurspīdīga;
apmales-apakšējā krāsa: rgb (129, 230, 255);
}
.diamond: pēc {
saturs: '';
platums: 0;
augstums: 0;
pozīcija: absolūta;
pa kreisi: -3em;
augšā: 3em;
apmale: 3em cieta caurspīdīga;
apmales-top-color: rgb (129, 230, 255);
}

Izvade:

Jūs varat izveidot dimanta vairoga formu, mainot augšējā trīsstūra augstumu, kā parādīts zemāk:

HTML

CSS

.dimanta vairogs
{
platums: 0;
augstums: 0;
apmale: 3em cieta caurspīdīga;
apmale-apakšā: 1,25 em ciets rgb (71, 194, 231);
pozīcija: relatīvs;
augšā: -3em;
}
.diamond-cut: pēc {
saturs: '';
pozīcija: absolūta;
pa kreisi: -3em;
augšā: 1,25 em;
platums: 0;
augstums: 0;
apmale: 3em cieta caurspīdīga;
borta augšdaļa: 4,4 em cietais rgb (71, 194, 231);
}

Izvade:

Sirds

Sirds forma ir nedaudz cieta, taču to var izdarīt, izmantojot ::pirms un ::pēc pseidoelementi. Varat izmantot dažādas vērtības pārveidot pagriezt tos no dažādiem leņķiem, līdz tie perfekti veido sirds formu. Galu galā jūs varat iestatīt transformācijas izcelsme lai iestatītu punktu, ap kuru tiek piemērota transformācija.

HTML

CSS

.heart {
platums: 6,25em;
augstums: 55 em;
pozīcija: relatīvs;
}
.heart: pirms,
.heart: pēc {
saturs: "";
platums: 3em;
augstums: 5 em;
pozīcija: absolūta;
pa kreisi: 3em;
augšā: 0;
fons: sarkans;
apmales rādiuss: 3em 3em 0 0;
pārveidot: pagriezt (-45grādi);
transformācijas izcelsme: 0 100%;
}
.heart: pēc {
pa kreisi: 0;
pārveidot: pagriezt (45grādi);
transformācijas izcelsme: 100% 100%;
}

Izvade:

Eksperimentējiet ar tīrām CSS formām

Tagad jums vajadzētu iepazīties ar dažādiem tīriem CSS attēliem, kurus var izveidot, ierakstot dažas koda rindiņas. Īpaši ātras vietnes izveide vairs nav drudžains uzdevums, jo jūs zināt, kā spēlēt ar kodu. Labākā daļa ir tāda, ka jūs varat rezonēt ar zīmola balsi, manipulējot ar dažādām formām un krāsām atbilstoši savām prasībām. Tāpēc turpiniet eksperimentēt un atklājiet jaunus veidus, kā zīmēt lieliskas formas, izmantojot tikai CSS.

Kā izveidot atsaucīgu navigācijas joslu, izmantojot HTML un CSS

Zvanīšana visiem iesācējiem tīmekļa izstrādātājiem: šī apmācība sniegs jums nepieciešamās prasmes, lai izveidotu savas atsaucīgās navigācijas joslas, izmantojot tikai HTML un CSS.

Lasiet Tālāk

Par autoru