Hogyan tervezzük a CSS formákkal: Bevezetés

Minden webhely alapja az, hogy az oldalt olyan kisebb elemekre kell osztani, amelyeknek tartalmuk vannak. A tervezők számára ez a nagy probléma az, hogy a tartalom mindig téglalap. A képernyők téglalap alakúak, és bármilyen felosztása téglalap lesz. Ebben a bemutatóban meg fogjuk vizsgálni, hogyan kell túllépni a téglalap alakú formákon, ha a CSS-klip-útvonal tulajdonságot és forgást használva érdekesebbé tétele. Más módon, hogy a terveket érdekesebbé tegye, nézze meg példáinkat CSS animáció . Ha mindez túl sok munka, próbálja ki a tetejét weboldal építője helyette. De bármi is legyen a webhelyed igényei, meg kell kapnod a jogot web hosting neked.

A legegyszerűbb forma, hogy kezdődik egy kör vagy ovális. Ha van egy téglalap, és az összes határ sugara több mint 50 százalékra van beállítva, akkor ovális, és ha egy négyzetméterrel kezdődik, mert az összes oldal ugyanaz a hosszúság, akkor kap egy kört. Ez az, amit valószínűleg korábban tettél, de ez egy olyan technika, amelyet gyakran az oldalak tervezésén alapítottak.

• A 20 legjobb huzalframe eszköz

A bonyolultabb megoldás, hogy hozzon létre egy háromszög segítségével a CSS klip-út csökkenti a látható része a div. A háromszög elég egyszerű formája, hogy hozzon létre, mert csak három pont van, de ha összetettebb formákat szeretne létrehozni, akkor egy vizuális klip-útvonal-szerkesztőre lesz szükség.

Ez a bemutató megmutatja, hogyan adhat hozzá mindezeket az elemeket, beleértve a gradienseket és a forgó téglalapokat, hogy egy egyedülálló designt hozzanak létre. Add CSS színátmenetek és a bonyolult geometriai kialakítása lehet létrehozni CSS.

• Töltse le a fájlokat a fileilo bemutatóról

01. Kezdje el

Nyissa meg a Rajt Mappa az IDE kódszerkesztőben és elkezdheti szerkeszteni a index.html oldal. A bemutató elindításához a Google Betűtípusok betűtípusának egyszerű linkje szükséges ahhoz, hogy ha néhány szöveg később szerepel, akkor a megfelelő típusú típusok hozzáadhatók az oldalhoz.

 & link rel = "stylesheet" href = "CSS / formák.css" & gt;
& link href = "https://fonts.googleapis.com/
CSS? Család = arvo: 700 | Lato: 700 "rel =" stíluslap "& gt; 

02. Horgonyozza meg az alakzatokat

Ban,-ben test A címke az oldalon adja hozzá a következő tartalmat. A A forma tartalmazza div tag fogják használni, hogy tartsa az összes különböző alakzatokat, amelyek előállítása, és ez lesz, hogy kitöltse a böngésző ablakon. Az első létrehozandó forma egyszerű kör lesz, amely együtt fog rögzíteni a többi képet.

 & lt; div id = "shape_contain" & gt;
& lt; div id = "kör" & gt; & lt; / div & gt;
& lt; / div & gt; 

03. Tegye az oldalt

Most menj át a Css Mappa és nyissa meg a formák.css fájl. A test és a HTML csak úgy van beállítva, hogy kitöltse a böngészőt a megfelelő betűtípuscsaláddal, amely a szöveg többségét hozza létre, amelyet a bemutató végéhez adunk hozzá, mint a befejező érintések.

 test,
html {
Margó: 0;
Padding: 0;
Szélesség: 100%;
Magasság: 100VH;
Overflow-X: Rejtett;
Font-Család: "Lato", Sans-Serif;
Szöveges transzformáció: nagybetűk;
} 

04. Tartalmazza az alakzatokat

A következő CSS-szabály az, hogy a div a Shape_Contain . Ez úgy van beállítva, hogy kitöltse a böngészőt bármely túlcsordulással. A Fordítás3D annak biztosítása, hogy a tartalom hardvergyorsult. Egy nagy határ két háttérkép előtt kerül hozzáadásra. Az egyik egy rendszeres kép, míg a fentiek egy aqua színű, félig átlátszó gradiens.

 #shape_contain {
Box-méretezés: Border-Box;
Szélesség: 100%;
Magasság: 100VH;
túlcsordulás: rejtett;
Átalakítás: Fordítás3D (0, 0, 0);
Border: 20px Solid RGB (255, 254, 244);
Háttér: lineáris gradiens (0deg, RGBA (7,
47, 46, 0,8) 0%, RGBA (255, 252, 226, 0,5)
100%), URL (../ képek / mountain.jpg)
Nem ismétlődő központi központ;
Háttér méret: fedél;
} 

05. Kezdje a kört

Az első geometriai alak, amelyet létrehozni fog, az egyik legegyszerűbb formájú. Egy kört bármely négyzet alakú div egy határ sugara hozzáadásával 50% . A kör félig átlátszó, puha árnyékkal, hozzáadva a széléhez.

 #circle {
Szélesség: 80vh;
Magasság: 80vh;
Border-sugara: 50%;
Háttér: RGBA (136, 239, 231, 0,3);
Pozíció: abszolút;
Top: 7vh;
Bal: 50%;
Átalakítás: Fordítás3D (-50%, 0, 0);
Box-Shadow: 0px 5px 40px RGBA (0, 0, 0, 0.3);
} 

06. Próbáljon ki egy háromszöget

A következő alakzat valamivel összetettebb lesz, mert ez egy háromszög. Viszonylag egyszerű létrehozása a CSS-klip-útvonal használatával, amely lehetővé teszi a sokszög alakú létrehozását. Adja hozzá ezt a div-t a Shape_Contain div.

 & lt; div id = "tri1" & gt; & lt; / div & gt; 

07. Alkalmazza a háromszöget

Itt a klip-pálya a CSS-nek létrejön a háromszög létrehozásához. Az alak egyszerűen három pont. A háttérkép adunk hozzá, és a szűrőt adunk itt, hogy színárnyalata kissé eltolódnak, ami a kép vesz enyhén rózsaszín árnyalat, amely előtérbe helyezi az a kontraszt.

 # tri1 {
Clip-Path: Poligon (0 0, 100% 0, 50%
100%);
Szélesség: 100VH;
Magasság: 88VH;
Háttér: URL (../ képek / girl3.jpg)
Nem ismétlődő központi központ;
Háttér méret: fedél;
Pozíció: abszolút;
Top: 10vh;
Bal: 50%;
Átalakítás: Fordítás3D (-50%, 0, 0);
Szűrő: színárnyalat (310DEG) kontraszt (140%);
Opacity: 0,8;
} 

08. Menjen még összetettebb

A következő alakzat egy háromszög lesz a közepén lévő lyukkal. Ez viszonylag egyszerűen hangzik, de a poligonnak egy folyamatos vonalnak kell lennie, így összetettebb létrehozni. Ha hasonló formát kell létrehoznia, használja Bennett feely klip-path készítője az alak létrehozása.

 & lt; div id = "tri2" & gt; & lt; / div & gt; 

09. Stack az alakzatok

Az alak itt összetettebb, mert vizuálisan jött létre a korábban említett linkben. A felhők képét az alakba helyezzük, majd a színárnyalatot úgy állítjuk be, hogy ez egy kicsit sárga legyen. Minden forma teljesen helyezkedik el, a környező div közepén, és az egyiket a másik tetejére halmozta.

 # tri2 {
Clip-Path: Poligon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Szélesség: 80vh;
Magasság: 70VH;
Háttér: URL (../ képek / clouds.jpg)
Nem ismétlődő központi központ;
Háttér méret: fedél;
Pozíció: abszolút;
Top: 1vh;
Bal: 50%;
Átalakítás: Fordítás3D (-50%, 0, 0);
Szűrő: hue-forog (90DEG) kontraszt (140%);
Opacity: 0,7;} 

10. Próbálja meg átméretezni a böngészőt

A következő háromszöget hozzá kell adni a Shape_Contain div. Ha megnézed a böngészőt, látni fogja, hogy átméretezheti a böngészőt, és az alakzatok tökéletesen átméretezik, mivel azok százalékban alapulnak. A tartály a nézetablak magasságával van beállítva, így mindig illeszkedik a képernyőn.

 & lt; div id = "tri3" & gt; & lt; / div & gt; 

11. Stílus is

A végső háromszög ugyanolyan alakú, mint az előző, mint az előző, a nyílás a központban. Ezúttal csak egy egyszerű türkiz árnyalatú, mint egy kép. Az átlátszóság alacsony ahhoz, hogy ezt a háromszöget az alábbi egyéb tartalomra tudja látni.

 # tri3 {
Clip-Path: Poligon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Szélesség: 80vh;
Magasság: 70VH;
Háttér: RGBA (0, 113, 110, 0,2);
Pozíció: abszolút;
Top: 20VH;
Bal: 50%;
Átalakítás: Fordítás3D (-50%, 0, 0);
} 

12. Hozzon létre egy szögletes szalagot

A következő forma egy szögletes div alakú. Ezt az egyik és kettő háromszög között kell elhelyezni Shape_Contain div címke. Keverje össze az oldalt egy félig átlátszó gradiens segítségével a képernyőn. Ezek a különböző méretű képernyőkig is felfelé és lefelé kerülnek.

& lt; div id = "Strip1" osztály = "szalag" & gt; & lt; / div & gt; 

13. Készítsük a szögeket

A szalag Az osztály beállítja a háttér gradiensét. Ez az online gradiens szerkesztő segítségével történik CSS gradiens . Az ID Ezután beállítja az adott szögletes gradiens alak pozícióját. A központba kerül, majd kissé eltolódik, hogy megtartja a különböző monitorok következetes elhelyezését.

 .Strip {
Pozíció: abszolút;
Háttér: Lineáris-gradiens (0deg, RGBA (164,
0, 217, 0) 0%, RGBA (164, 0, 217, 0,3) 35%,
RGBA (255, 67, 134, 0,3) 65%, RGBA (255, 67,
134, 0) 100%);
}
# csík1 {
Szélesség: 20VH;
Magasság: 120VH;
Bal: 50%;
Átalakítás: Fordítás3D (-175%, -15%, 0)
Rotatez (30deg);
} 

14. Próbáljon ki több gradiens szöget

Még két további DIV-címkét adnak hozzá, hogy tartsa az osztályt szalag . Az azonosító lehetővé teszi számukra, hogy különböző pozíciókba kerüljenek a képernyőn. Ezeket olyan ismétlődő formákként használják fel, amelyek felépítik a jelenet általános esztétikáját, miközben egy színcseppet is hozzáadnak.

 & lt; div id = "Strip2" osztály = "szalag" & gt; & lt; / div & gt;
& lt; div id = "Strip3" osztály = "szalag" & gt; & lt; / div & gt; 

15. Helyezze el a szöget

A két szalagszögű gradiens alakzat a képernyő fő tartalmának mindkét oldalára helyezkedik el. Az egyik a bal alsó és a másik felé a jobb felső sarokban van elhelyezve, hogy kiegyenlítse a képernyőt. Átméretezze a böngészőt, hogy lássa ezeket az elemeket a képernyőn és a skálán illeszkedjen.

 # Strip2 {
Szélesség: 5vh;
Magasság: 90VH;
Bal: 50%;
Átalakítás: Fordítás3D (60VH, -15%, 0)
Rotatez (30deg);
}
# csík3 {
Szélesség: 5vh;
Magasság: 90VH;
Bal: 50%;
Átalakítás: Fordítás3D (-70VH, 25%, 0)
Rotatez (30deg);
} 

16. Adjon hozzá szöveges tartalmat

Ez az oldal nem rendelkezik hatalmas mennyiségű szöveges tartalommal, de a DIRS itt van az összes többi oldal tartalma a képernyőn. A DIRS-t hozzá kell adni a záró div-címke előtt Shape_Contain panel. Ezek a szövegelemek különböző sarkokba kerülnek.

 & lt; div id = "bal oldali" & gt; menjen túl a téglalapon
& lt; / div & gt;
& lt; div id = "jobb oldali" és gt; érzékeny alak
Elrendezések & lt; / div & gt;
& lt; div id = "Toppt" & gt; webes tervezők
& lt; br & gt; span & gt; CSS eszközkit & lt; / span & gt; & lt; / div & gt;
& lt; div id = "topright" & gt; 2019 & lt; / div & gt;
& lt; div id = "címsor" & gt; CSS formák & lt; / div & gt; 

17. Forgassa el a szöveget

A bal oldali div a képernyő bal oldalán helyezkedik el, és 90 fokkal az óramutató járásával ellentétes irányban forgatható, így az oldalra illeszkedik. A transzformációs eredet kissé mozog, hogy a szöveg közelebb kerüljön a képernyő széléhez.

 #leftside {
Pozíció: abszolút;
Bal: 20px;
Top: 70%;
Átalakítás eredet: 10% 0%;
Átalakítás: forgatás (-90DEG);
} 

18. Helyezze el a jobb oldali szöveget

A jobb oldali szöveg nagyon hasonlít a bal szöveghez, kivéve, hogy a képernyő jobb oldalán helyezkedik el. A forgatást az óramutató járásával megegyező irányba kell nyomni, hogy a szöveg jobban üljön, és könnyebben olvassa a képernyő jobb oldalán.

 #rightside {
Pozíció: abszolút;
Jobb: 20px;
Top: 70%;
Átalakítás eredet: 90% 0%;
Átalakítás: forgatás (90DEG);
} 

19. Stílusosítja a szöveget

Most a bal felső sarok szövege stilizált. Az első két szó az alapértelmezett méretükön marad, míg a fennmaradó szavak megnagyobbodnak és a következő sorban vannak elhelyezve annak érdekében, hogy bizonyos hierarchiát biztosítsák a szöveghez. Ez ragaszkodik a bal felső sarokban bármilyen átméretezésen keresztül.

 #toplt {
Pozíció: abszolút;
Bal: 40px;
Top: 40px;
Szélesség: 180px;
Text-Align: Center;
}
#topledt span {
betűméret: 1.8em;
} 

20. Állítsa be a jobb oldali szöveget

A jobb felső sarok szövege most be van állítva. Ez egy fekete kerek körbe van beállítva, a szöveg fehér elleni szöveggel. Ez használ sormagasságának eljárás összehangolása a szöveg közepén, használatával a sor magassága megegyezik a div magasságát.

 #topright {
Pozíció: abszolút;
Jobb: 35px;
Top: 25px;
Vonalmagasság: 100px;
betűméret: 1.4em;
Szélesség: 100px;
Magasság: 100px;
Háttér: # 000;
Szín: #FFF;
Text-Align: Center;
Border-sugara: 50%;
} 

21. Állítsa be a címsor szövegét

A beállított utolsó szöveg a képernyő közepén található fő címsor. A betűtípust megváltozik erre, és ez adott egy világos rózsaszín áttetsző színű, hogy keveredik a kétszínben oldal design. Mentse el az oldalt, és frissítse a böngészőt a kész eredmény megtekintéséhez. Szeretné megmenteni vagy megosztani az oldal másolatát? Exportálja PDF-ként, és mentse el felhő tároló .

 # #headline {
Pozíció: abszolút;
Szélesség: 100%;
Z-index: 200;
Padding-Top: 65VH;
Font-Család: "Arvo", Serif;
Text-Align: Center;
Szín: RGBA (233, 173, 255, 0,8);
betűméret: 8vw;
Szöveges árnyék: 0px 3px 50px RGBA (0, 0, 0, 0.5);
} 

Ezt a cikket eredetileg a Creative Web Design magazinban tették közzé Web designer . Megvásárolható probléma 284 vagy Iratkozz fel .

Olvass tovább:

• Kezdje el a CSS-művészetet
• 5 Cool CSS rács generátorok
• A CSS-módszerek webes tervezője