Hur man skapar hjärtform med CSS
CSS3 höjer möjligheten av vad vi kan bygga på webbplatser med bara HTML och CSS. Du kan hitta fantastiska exempel som vi tidigare har presenterat. Men låt oss inte komma för långt framför oss själva, en komplicerad design behöver koder som kan ge dig huvudvärk.
I stället ska vi skapa något enkelt för att hjälpa dig förstå former och positionering med CSS först, innan man vågar till mer avancerade mönster. Sedan Valentinsdag ligger precis runt hörnet, låt oss skapa en hjärtform med hjälp av HTML och CSS.
Det grundläggande
I grund och botten kan vi skapa en ny form genom att gå med i en eller flera grundläggande former, som rektanglar och cirklar. Om vi undersöker en hjärtform kan vi upptäcka att den består av två cirklar och en rektangel kombineras. HTML-element är i huvudsak en kvadrat eller rektangel. Tack vare CSS3-radieen kan vi enkelt omforma en rektangel till en cirkel.
Börja med att lägga till en Sedan gör vi det till en kvadrat genom att specificera bredden och höjden lika. Välj en bakgrundsfärg du gillar. Därefter kommer vi att göra cirklarna. Istället för att lägga till nya element kommer vi att använda pseudoelementen, Tillsammans med torget kommer vi att få ett resultat så här: Därefter skapar vi den andra cirkeln med pseudo-elementet Resultaten är följande: Vi kan kombinera dessa två samma stilar genom att gruppera pseudoelementselektorerna enligt följande: Ta-da! Vi har en hjärtform, men det är inte i rätt riktning än. För att räta upp det ska vi använda CSS3 Transformation. Transformation kan ges till huvudelementen i form; här betyder det torget. När den transformeras, kommer pseudoelementet automatiskt att ändra sin position efter huvudelementet. Här kommer vi att rotera hjärtat så det ses “stående”. Och så ser vårt hjärta ut nu. Den fullständiga koden för hjärtformen ovan är som följer, i HTML: Och på vår CSS blir det så här: Observera att vi nu ställer in alfakanalen för Nu när vi har en perfekt hjärtform, kan vi ersätt bakgrunden till en annan färg (t ex rosa eller rött) med lätthet. Den enda nackdelen här är det vi kunde inte lägga till en gräns till formen på grund av de staplade elementen. Lägga till en gränslinje gör hjärtat ser konstigt ut. Med CSS3 skapa en form som en hjärtform är nu lätt genomförbar. Gränsradieegenskapen tillåter oss att göra element eller till och med ett pseudoelement i en cirkel. Med CSS3-omvandling kan vi rotera eller flytta objektets koordinater lätt. Du är begränsad endast av din kreativitet och fantasi!
.hjärtformat position: relativ; bredd: 200px; höjd: 200px; bakgrundsfärg: rgba (250,184,66, 0,8);
:innan och :efter. Vi ställde in första gången :innan pseudo-element som vår första cirkel. Vi gör det till en kvadrat med lika stor storlek på bredd och höjd som vi gjorde med div. Vi omvandlar sedan den till en cirkel genom att ge den gränsen på 50% och sätta den på vänster sida av torget. .hjärtform: före position: absolut; botten: 0px; vänster: -100px; bredd: 200px; höjd: 200px; innehåll: "; -webkit-gränsen-radien: 50%; -moz-gränsen-radien: 50%; -gränsradien: 50%; gränseradius: 50%; bakgrundsfärg: rgba (250.184,66 , 0,8);
:efter med samma stilar som den första cirkeln vi skapade. Sedan placerar vi det också på toppen av torget. .hjärtform: efter position: absolut; topp: -100px; höger: 0px; bredd: 200px; höjd: 200px; innehåll: "; -webkit-gränsen-radien: 50%; -moz-gränsen-radien: 50%; -gränsradien: 50%; gränseradius: 50%; bakgrundsfärg: rgba (250.184,66 , 0,8);
.hjärtform: före,. hjärtformad: efter position: absolut; bredd: 200px; höjd: 200px; innehåll: "; -webkit-gränsen-radien: 50%; -moz-gränsen-radien: 50%; -gränsradien: 50%; gränseradius: 50%; bakgrundsfärg: rgba (250.184,66 , 0.8); .artform: före botten: 0px; vänster: -100px; .artform: efter topp: -100px; höger: 0px;
.hjärtformat -webkit-transform: rotera (45deg); -moz-transform: rotera (45deg); -ms-transform: rotera (45deg); -o-transform: rotera (45deg); transformera: rotera (45deg);
Resultatet:
.hjärtformat position: relativ; bredd: 200px; höjd: 200px; -webkit-transform: rotera (45deg); -moz-transform: rotera (45deg); -ms-transform: rotera (45deg); -o-transform: rotera (45deg); transformera: rotera (45deg); bakgrundsfärg: rgba (250,184,66, 1); .artform: före, .hjärtform: efter position: absolut; bredd: 200px; höjd: 200px; innehåll: "; -webkit-gränsen-radien: 50%; -moz-gränsen-radien: 50%; -gränsradien: 50%; gränseradius: 50%; bakgrundsfärg: rgba (250.184,66 , 1); .artform: före botten: 0px; vänster: -100px; .artform: efter topp: -100px; höger: 0px;
rgba (250, 184,66, 1) i bakgrunden till 1 för att avlägsna insynen. Nu är det här vad vår hjärta ser ut.
Slutsats
