Kako stvoriti oblik srca s CSS

CSS3 povećava izvedivost onoga što možemo graditi na web stranicama koristeći samo HTML i CSS. Možete pronaći nevjerojatne primjere koje smo prethodno istaknuli. Ali nemojmo se previše udaljiti od sebe, kompliciranom dizajnu će biti potrebni kodovi koji vam mogu dati glavobolju.

Umjesto toga, stvorit ćemo nešto jednostavno kako bismo vam pomogli prvo razumjeti oblike i pozicioniranje pomoću CSS-a, prije ulaska u naprednije modele. Budući da je Valentinovo upravo iza ugla, stvorimo oblik srca koristeći HTML i CSS.

Osnove

U osnovi, možemo stvoriti novi oblik spajanjem jednog ili više osnovnih oblika, poput pravokutnika i krugova. Ako ispitamo oblik srca, možemo otkriti da je on sastavljen dva kruga i pravokutnik zajedno. HTML elementi su u biti kvadrat ili pravokutnik. Zahvaljujući radijusu CSS3 granice možemo jednostavno pretvoriti pravokutnik u krug.

Počnite dodavanjem

element kao temelj našeg oblika srca.

Zatim ćemo napraviti kvadrat tako što ćemo jednako odrediti širinu i visinu. Odaberite željenu boju pozadine.

 .oblik srca položaj: relativan; širina: 200px; visina: 200px; pozadinska boja: rgba (250,184,66, 0,8);

Sljedeći ćemo napraviti krugove.

Umjesto dodavanja novih elemenata, koristit ćemo pseudo-elemente, :prije i :nakon. Najprije smo postavili :prije pseudoelementi kao naš prvi krug. Učinimo ga kvadratom jednake veličine na širini i visini kao što smo učinili s div. Zatim je pretvaramo u krug tako da mu damo granični polumjer od 50% i stavimo ga na lijevu stranu trga.

 .oblik srca: prije položaj: apsolutni; dno: 0px; lijevo: -100px; širina: 200px; visina: 200px; sadržaj: "; -blok-radijus granice: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; granični radijus: 50%; pozadinska boja: rgba (250,184,66 , 0,8);

Zajedno s trgom imat ćemo takav rezultat:

Nakon toga kreiramo drugi krug s pseudo-elementom :nakon s istim stilovima kao i prvi krug koji smo stvorili. Zatim je postavimo i na vrh trga.

 .oblik srca: nakon položaja: apsolutni; vrh: -100px; desno: 0px; širina: 200px; visina: 200px; sadržaj: "; -blok-radijus granice: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; granični radijus: 50%; pozadinska boja: rgba (250,184,66 , 0,8);

Rezultati su sljedeći:

Ove dvije iste stilove možemo kombinirati grupiranjem selektora pseudo-elemenata na sljedeći način:

 .oblik srca: prije, oblik srca: poslije položaj: apsolutni; širina: 200px; visina: 200px; sadržaj: "; -blok-radijus granice: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; granični radijus: 50%; pozadinska boja: rgba (250,184,66 , 0.8);. Srce-oblik: prije dolje: 0px; lijevo: -100px;. Srce-oblik: nakon top: -100px; desno: 0px;

Evo ga! Imamo oblik srca, iako još nije u pravom smjeru. Da bismo ga ispravili, koristit ćemo CSS3 Transformation.

Transformacija se može dati glavnim elementima oblika; ovdje, to znači trg. Kada se transformira, pseudo-element će automatski promijeniti svoj položaj nakon glavnog elementa.

Ovdje ćemo rotirati srce tako da se vidi “stajati”.

 .oblik srca -webkit-transform: rotirati (45deg); -moz-transform: rotirati (45deg); -ms-transform: rotiranje (45deg); -o-transform: rotirati (45deg); transformacija: rotiranje (45deg);

I upravo tako izgleda naše srce.

Rezultat:

Cjelokupni kôd oblika srca iznad je u HTML-u:

A na našem CSS-u će biti ovako:

 .oblik srca položaj: relativan; širina: 200px; visina: 200px; -webkit-transform: rotirati (45deg); -moz-transform: rotirati (45deg); -ms-transform: rotiranje (45deg); -o-transform: rotirati (45deg); transformacija: rotiranje (45deg); pozadinska boja: rgba (250,184,66,1);  oblik srca: prije, oblik srca: nakon položaj: apsolutni; širina: 200px; visina: 200px; sadržaj: "; -blok-radijus granice: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; granični radijus: 50%; pozadinska boja: rgba (250,184,66 , 1);. Srce-oblik: prije dolje: 0px; lijevo: -100px;. Srce-oblik: nakon top: -100px; desno: 0px;

Primijetite da smo sada postavili alfa kanal rgba (250,184,66, 1) u pozadini 1 za uklanjanje prozirnosti. Ovo je ono što naše srce izgleda.

Sada kada imamo savršen oblik srca, možemo zamijenite pozadinu drugom bojom (npr. ružičasta ili crvena) s lakoćom. Jedini nedostatak ovdje je da mi nije moguće dodati granicu na oblik zbog složenih elemenata. Dodavanjem granične crte srce će izgledati čudno.

Zaključak

S CSS3 koji stvara oblik poput oblika srca sada je lako izvodljiv. Svojstvo graničnog radijusa omogućuje nam napravite elemente ili čak pseudo-element u krug. S CSS3 transformacijom možemo rotirati ili pomicati koordinate objekta s lakoćom.

Ograničeni ste samo svojom kreativnošću i maštom!