Cum se creează formă de inimă cu CSS
CSS3 ridică fezabilitatea a ceea ce putem construi pe site-uri web folosind doar cod HTML și CSS. Puteți găsi exemple uimitoare pe care le-am prezentat anterior. Dar să nu ajungem prea mult înaintea noastră, un design complicat va necesita coduri care vă pot da o durere de cap.
În schimb, vom crea ceva simplu pentru a vă ajuta înțelegeți mai întâi formele și poziționarea cu CSS, înainte de a se aventureze la modele mai avansate. Din moment ce Valentine's Day este chiar la colț, să creăm o formă de inimă folosind HTML și CSS.
Cele elementare
Practic, putem crea o nouă formă prin aderarea la una sau mai multe forme de bază, cum ar fi dreptunghiurile și cercurile. Dacă examinăm o formă de inimă, putem constata că este alcătuită din două cercuri și un dreptunghi combinate. Elementele HTML sunt în esență un dreptunghi sau dreptunghi. Datorită razei de graniță CSS3 putem transforma cu ușurință un dreptunghi într-un cerc.
Începeți prin adăugarea unui Apoi, facem un pătrat specificând lățimea și înălțimea în mod egal. Alegeți o culoare de fundal care vă place. În continuare, vom face cercurile. Mai degrabă decât să adăugăm elemente noi, vom folosi pseudoelementele, Împreună cu pătratul vom avea un rezultat ca acesta: După aceea, vom crea cel de-al doilea cerc cu elementul pseudo-element Rezultatele sunt următoarele: Putem combina aceste două stiluri prin gruparea selectorilor de pseudo-elemente după cum urmează: Ta-da! Avem o formă de inimă, deși nu este încă în direcția cea bună. Pentru ao îndrepta, vom folosi Transformarea CSS3. Transformarea poate fi dată principalelor elemente de formă; aici, adică pătratul. Când este transformat, pseudo-elementul își va schimba automat poziția după elementul principal. Aici vom roti inima astfel încât să fie văzută “permanent”. Iată cum arată inima noastră acum. Codul complet al formei inimii de mai sus este după cum urmează: Și pe CSS-ul nostru, va fi așa: Rețineți că am setat acum canalul alfa al Acum că avem o formă perfectă a inimii, putem înlocuiți fundalul cu o altă culoare (de exemplu, roz sau roșu) cu ușurință. Singurul dezavantaj aici este că noi nu a putut adăuga o margine la forma datorată elementelor stivuite. Adăugarea unei linii de graniță va face inima să arate ciudat. Cu CSS3 creând o formă ca o formă de inimă este acum ușor de realizat. Proprietatea cu raza de frontieră ne permite face elemente sau chiar un pseudo-element într-un cerc. Cu transformarea CSS3, putem rotiți sau mutați coordonatele obiectului cu ușurință. Sunteți limitat doar de creativitatea și imaginația voastră!
.forma inimii poziție: relativă; lățime: 200px; înălțime: 200px; fundal-culoare: rgba (250,184,66, 0,8);
:inainte de și :după. Am setat mai întâi :inainte de pseudo-elemente ca primul nostru cerc. Îi facem un pătrat de dimensiuni egale pe lățime și înălțime, la fel ca și cu div. Apoi îl transformăm într-un cerc, dându-i o rază de graniță de 50% și o pune pe partea stângă a pieței. .forma inimii: înainte de poziție: absolută; fund: 0px; stânga: -100px; lățime: 200px; înălțime: 200px; conținutul: "; -webkit-raza de graniță: 50%; -moz-raza de graniță: 50%; -raga de graniță: 50%; raza de graniță: 50%; culoarea de fond: rgba (250.184,66 , 0,8);
:după cu aceleași stiluri ca primul cerc creat. Apoi, îl poziționăm și pe partea superioară a pătratului. .forma inimii: dupa pozitia: absolut; top: -100px; dreapta: 0px; lățime: 200px; înălțime: 200px; conținutul: "; -webkit-raza de graniță: 50%; -moz-raza de graniță: 50%; -raga de graniță: 50%; raza de graniță: 50%; culoarea de fond: rgba (250.184,66 , 0,8);
.forma inimii: înainte, în formă de inimă: după poziție: absolută; lățime: 200px; înălțime: 200px; conținutul: "; -webkit-raza de graniță: 50%; -moz-raza de graniță: 50%; -raga de graniță: 50%; raza de graniță: 50%; culoarea de fond: rgba (250.184,66 , 0.8); forma de inima: inainte de (bottom: 0px; left: -100px;. Forma de inima: dupa top: -100px; right: 0px
.în formă de inimă -webkit-transform: rotire (45deg); -moz-transform: rotiți (45deg); -ms-transform: rotire (45deg); -o-transform: roti (45deg); transforma: roti (45deg);
Rezultatul:
.forma inimii poziție: relativă; lățime: 200px; înălțime: 200px; -webkit-transform: rotiți (45deg); -moz-transform: rotiți (45deg); -ms-transform: rotire (45deg); -o-transform: roti (45deg); transforma: roti (45deg); fundal-culoare: rgba (250,184,66,1); . Forma de inima: inainte, in forma de inima: dupa pozitia: absoluta; lățime: 200px; înălțime: 200px; conținutul: "; -webkit-raza de graniță: 50%; -moz-raza de graniță: 50%; -raga de graniță: 50%; raza de graniță: 50%; culoarea de fond: rgba (250.184,66 , 1); forma de inima: înainte de partea de jos: 0px; stanga: -100px;. Forma de inima: dupa top: -100px; right: 0px;;
rgba (250,184,66, 1) în fundal la 1 pentru a elimina transparența. Acum, asta arată inima noastră.
Concluzie
