Miten luoda sydämen muoto CSS llä
CSS3 nostaa toteutettavuutta siihen, mitä voimme rakentaa sivustoille, joissa on vain HTML ja CSS. Löydät uskomattomia esimerkkejä, joita olemme aiemmin esittäneet. Mutta älkäämme tule liian pitkälle itsellemme, monimutkainen muotoilu vaatii koodeja, jotka voivat antaa sinulle päänsärkyä.
Sen sijaan aiomme luoda jotain yksinkertaista auttaa sinua ymmärrä ensin muodot ja paikannus CSS: llä, ennen kuin teet enemmän kehittyneitä malleja. Koska Ystävänpäivä on aivan nurkan takana, luo sydämen muoto HTML ja CSS: n avulla.
Perusteet
Periaatteessa voimme luoda uuden muodon liittämällä yhden tai useamman perusmuodon, kuten suorakulmion ja ympyrän. Jos tarkastelemme sydämen muotoa, voimme todeta, että se koostuu kaksi ympyrää ja suorakulmio yhdistettynä. HTML-elementit ovat olennaisesti neliö tai suorakulmio. CSS3-rajan ansiosta voimme muuttaa suorakulmion helposti ympyräksi.
Aloita lisäämällä a Sitten teemme sen neliöksi määrittämällä leveys ja korkeus yhtä hyvin. Valitse haluamasi taustaväri. Seuraavaksi teemme ympyrät. Uusien elementtien lisäämisen sijasta käytämme pseudoelementtejä, Yhdessä neliön kanssa meillä on tällainen tulos: Tämän jälkeen luomme toisen ympyrän pseudoelementillä Tulokset ovat seuraavat: Voimme yhdistää nämä kaksi samaa tyyliä ryhmittelemällä pseudoelementtivalitsimet seuraavasti: Ta-da! Meillä on sydämen muoto, vaikka se ei ole vielä oikeaan suuntaan. Sen suoristamiseksi käytämme CSS3-muunnosta. Transformaatio voidaan antaa muodon pääelementeille; täällä, se tarkoittaa neliötä. Transformoituna pseudoelementti muuttaa automaattisesti sijaintiaan pääelementin jälkeen. Täällä pyöritämme sydäntä niin, että se näkyy “pysyvä”. Ja tämä on meidän sydämemme nyt. Yllä olevan sydämen muodon täydellinen koodi on seuraava: Ja CSS: ssä, se on näin: Huomaa, että olemme nyt asettaneet Nyt kun meillä on täydellinen sydämen muoto, voimme korvaa tausta toiseen väriin (esim. vaaleanpunainen tai punainen) helposti. Ainoa haittapuoli tässä on se, että me ei voinut lisätä rajaa kuormitettujen elementtien vuoksi. Rajaviivan lisääminen saa sydämen näyttämään outolta. CSS3: lla luodaan sellainen muoto, kuten sydämen muoto on nyt helposti toteutettavissa. Rajan säteen ominaisuus antaa meille mahdollisuuden tehdä elementtejä tai jopa pseudoelementtiä ympyräksi. CSS3-muunnoksella voimme Käännä tai siirrä objektin koordinaatteja helposti. Teitä rajoittavat vain luovuus ja mielikuvitus!
.sydämen muotoinen asema: suhteellinen; leveys: 200px; korkeus: 200px; taustaväri: rgba (250,184,66, 0,8);
:ennen ja :jälkeen. Asennimme ensin :ennen pseudoelementit kuin ensimmäinen ympyrä. Teemme sen neliön, jonka koko on yhtä suuri kuin leveys ja korkeus, kuten teimme div. Sitten muutamme sen ympyräksi antamalla sille 50-prosenttisen säteen ja asettamalla sen neliön vasemmalle puolelle. .sydämen muoto: ennen asema: absoluuttinen; pohja: 0px; vasen: -100px; leveys: 200px; korkeus: 200px; sisältö: "; -webkit-raja-säde: 50%; -moz-border-säde: 50%; -o-raja-säde: 50%; raja-säde: 50%; taustaväri: rgba (250,184,66 , 0,8);
:jälkeen samoja tyylejä kuin ensimmäinen luomamme ympyrä. Sitten sijoitamme sen myös neliön yläosaan. .sydämen muoto: sen jälkeen, kun asema: absoluuttinen; alkuun: -100px; oikea: 0px; leveys: 200px; korkeus: 200px; sisältö: "; -webkit-raja-säde: 50%; -moz-border-säde: 50%; -o-raja-säde: 50%; raja-säde: 50%; taustaväri: rgba (250,184,66 , 0,8);
.sydämen muoto: ennen, .heart-muoto: jälkeen sijainti: absoluuttinen; leveys: 200px; korkeus: 200px; sisältö: "; -webkit-raja-säde: 50%; -moz-border-säde: 50%; -o-raja-säde: 50%; raja-säde: 50%; taustaväri: rgba (250,184,66 , 0.8); .heart-muoto: ennen pohja: 0px; vasen: -100px; .heart-muoto: jälkeen top: -100px; oikea: 0px;
.sydämen muotoinen -webkit-transform: rotate (45deg); -moz-transform: kiertää (45deg); -ms-transform: kiertää (45deg); -o-transform: kiertää (45deg); muunnos: kiertää (45deg);
Lopputulos:
.sydämen muotoinen asema: suhteellinen; leveys: 200px; korkeus: 200px; -webkit-transform: kiertää (45deg); -moz-transform: kiertää (45deg); -ms-transform: kiertää (45deg); -o-transform: kiertää (45deg); muunnos: kiertää (45deg); taustaväri: rgba (250,184,66, 1); .heart-muoto: ennen, .heart-muoto: jälkeen asema: absoluuttinen; leveys: 200px; korkeus: 200px; sisältö: "; -webkit-raja-säde: 50%; -moz-border-säde: 50%; -o-raja-säde: 50%; raja-säde: 50%; taustaväri: rgba (250,184,66 , 1); .heart-muoto: ennen pohja: 0px; vasen: -100px; .heart-muoto: jälkeen top: -100px; oikea: 0px;
rgba (250,184,66, 1) taustalla 1 avoimuuden poistamiseksi. Nyt tämä on mitä sydämemme näyttää.
johtopäätös
