Hogyan készítsünk szívformát a CSS segítségével
A CSS3 megnöveli azt a megvalósíthatóságot, amit csak HTML és CSS használatával építhetünk. Csodálatos példákat találhat, amelyeket korábban bemutattunk. De ne menjünk túl messzire magunk előtt, egy bonyolult tervezéshez olyan kódokra lesz szükség, amelyek fejfájást okozhatnak.
Ehelyett valami egyszerűt hozunk létre, hogy segítsen Először megértsük a CSS formátumokat és pozíciókat, Mielőtt a fejlettebb tervezetekre szánna. Mivel a Valentin-nap a sarkon van, hozzon létre egy szívformát a HTML és CSS használatával.
Az alapok
Alapvetően új alakot hozhatunk létre egy vagy több alapforma, például téglalapok és körök összekapcsolásával. Ha megvizsgáljuk a szívformát, akkor azt találjuk, hogy a szívből áll két kör és egy téglalap kombinálva. A HTML elemek alapvetően négyzet vagy téglalap. A CSS3 szegélysugárzásnak köszönhetően könnyedén alakíthatunk át egy téglalapot körbe.
Kezdje hozzá a Ezután egy négyzetet állítunk be úgy, hogy a szélességet és a magasságot egyformán megadjuk. Válassza ki a kívánt háttérszínt. Következő lépésként elkészítjük a köröket. Új elemek hozzáadása helyett a pszeudo-elemeket használjuk fel, A négyzettel együtt egy ilyen eredményt kapunk: Ezután létrehozzuk a második kört a pszeudo-elemgel Az eredmények a következők: Ezeket a két stílust kombinálhatjuk úgy, hogy a pszeudo-elem szelektorokat a következőképpen csoportosítjuk: Ta-da! Szív alakúak vagyunk, bár mégsem a megfelelő irányba. A kiegyenesítéshez CSS3 átalakítást használunk. Átalakítható az alakzat fő elemeire; itt a négyzet. A transzformálás során a pszeudoelem automatikusan megváltoztatja pozícióját a fő elem után. Itt forgatjuk a szívet, így látjuk “álló”. És így néz ki most a szívünk. A fenti szívforma teljes kódja a következő: HTML: És a CSS-ben ez így lesz: Figyeljük meg, hogy most beállítjuk a Most, hogy tökéletes szív alakúak vagyunk cserélje ki a hátteret egy másik színre (például rózsaszín vagy piros) könnyedén. Az egyetlen hátránya az, hogy mi nem tudott határot adni a halmozott elemek miatt. A határvonal hozzáadásával a szív furcsa lesz. A CSS3-val olyan alakot hoz létre, mint a Szívforma könnyen kivitelezhető. A határ-sugár tulajdonság lehetővé teszi számunkra alkotóelemeket vagy akár egy ál-elemet egy körbe. CSS3 átalakítással tudjuk forgassa vagy mozgassa az objektum koordinátáit könnyedén. Csak a kreativitásod és a képzeleted korlátozza!
.szív alakú pozíció: relatív; szélesség: 200px; magasság: 200px; háttérszín: rgba (250,184,66, 0,8);
:előtt és :után. Először beállítottuk a :előtt pszeudo-elemek mint első körünk. Olyan négyzetnek számítunk, amely azonos méretű a szélességen és magasságon, mint a div. Ezután egy körbe alakítjuk át, 50% -os határtávolságot adva, és tegyük a tér bal oldalán. .szív alakú: előtte pozíció: abszolút; alsó: 0px; balra: -100px; szélesség: 200px; magasság: 200px; tartalom: "; -webkit-határ-sugár: 50%; -moz-határ-sugár: 50%; -o-határ-sugár: 50%; határ-sugár: 50%; háttérszín: rgba (250,184,66 , 0,8);
:után ugyanazokkal a stílusokkal, mint a létrehozott első kör. Ezután a négyzet tetejére is helyezzük. .szív alakú: után pozíció: abszolút; top: -100px; jobb: 0px; szélesség: 200px; magasság: 200px; tartalom: "; -webkit-határ-sugár: 50%; -moz-határ-sugár: 50%; -o-határ-sugár: 50%; határ-sugár: 50%; háttérszín: rgba (250,184,66 , 0,8);
.szív alakú: előtte, .heart-alakú: után pozíció: abszolút; szélesség: 200px; magasság: 200px; tartalom: "; -webkit-határ-sugár: 50%; -moz-határ-sugár: 50%; -o-határ-sugár: 50%; határ-sugár: 50%; háttérszín: rgba (250,184,66 , 0,8); .heart-alak: alsó: 0px; bal: -100px; .heart-alak: után top: -100px; jobb: 0px;
.szív alakú -webkit-transform: forgatás (45deg); -moz-transform: forgatás (45deg); -ms-transform: forgatás (45deg); -o-transzformáció: forgatás (45deg); transzformálás: forgatás (45deg);
Az eredmény:
.szív alakú pozíció: relatív; szélesség: 200px; magasság: 200px; -webkit-transform: forgatás (45deg); -moz-transform: forgatás (45deg); -ms-transform: forgatás (45deg); -o-transzformáció: forgatás (45deg); transzformálás: forgatás (45deg); háttérszín: rgba (250,184,66, 1); .heart-forma: korábban, .heart-alakú: után pozíció: abszolút; szélesség: 200px; magasság: 200px; tartalom: "; -webkit-határ-sugár: 50%; -moz-határ-sugár: 50%; -o-határ-sugár: 50%; határ-sugár: 50%; háttérszín: rgba (250,184,66 , 1); .heart-forma: alsó: 0px; bal: -100px; .heart-alak: után top: -100px; jobb: 0px;
rgba (250,184,66, 1) a háttérben 1 az átláthatóság megszüntetése. Most ez a szíve.
Következtetés
