Cum se proiectează cu forme CSS: o introducere

Baza fiecărui site web este de a împărți pagina în jos în elemente mai mici care au conținut. Marea problemă cu acest lucru pentru designeri este că conținutul este întotdeauna un dreptunghi. Ecranele sunt dreptunghiulare în formă, iar orice subdiviziune a acestuia va fi un dreptunghi. În acest tutorial vom examina cum să depășim formele dreptunghiulare utilizând proprietatea CSS clip-calea și rotația pentru a face designul mai interesant. Pentru alte modalități de a face desenele dvs. mai interesante, verificați exemplele noastre de CSS animație . Dacă toate acestea sună ca prea multă muncă, încercați un top Builder de site-uri web in schimb. Dar indiferent de nevoile site-ului dvs., trebuie să obțineți dreptul web hosting Pentru dumneavoastră.

Cea mai ușoară formă de început este un cerc sau oval. Dacă aveți un dreptunghi și ați stabilit întreaga rază de frontieră la mai mult de 50%, veți avea o ovală și, dacă începeți cu un pătrat, deoarece toate părțile au aceeași lungime, veți obține un cerc. Acesta este ceva pe care probabil ați făcut-o înainte, dar este o tehnică care este adesea folosită în proiectarea paginilor.

• Cele mai bune 20 de instrumente wireframe

O soluție mai complexă este crearea unui triunghi utilizând CSS-ul CSS pentru a reduce partea vizibilă a unui div. Un triunghi este o formă destul de simplă pentru a crea, deoarece are doar trei puncte, dar dacă doriți să creați forme mai complexe, atunci va fi necesar un editor de clip vizual.

Acest tutorial vă va arăta cum să adăugați toate aceste elemente împreună, inclusiv gradienți și dreptunghiuri rotative, pentru a crea un design mai unic. Adăugați gradienți CSS și un design geometric complex poate fi creat prin CSS.

• Descărcați fișierele pentru tutorialul de la Filesilo

01. Începeți

Deschide start Folder în editorul codului IDE și începeți editarea index.html. pagină. Pentru a începe tutorialul, va fi necesară o legătură simplă la Tipurile de Tip Google Fonturi, astfel încât atunci când un anumit text este inclus mai târziu, acesta poate avea terapii corespunzătoare adăugate la pagină.

 & Link Rel = "Stylesheet" Href = "CSS / Forme.css" & GT;
& lt; link href = "https://fonts.googleapis.com/
CSS? Familie = Arvo: 700 | Lato: 700 "Rel =" Stylesheet "& GT; 

02. Ancorați formele împreună

În corp Etichetă pe pagină Adăugați următorul conținut. Forma conține Eticheta DIV va fi utilizată pentru a ține toate formele diferite care sunt produse și acest lucru se va face pentru a umple fereastra de vizualizare a browserului. Prima formă care trebuie creată va fi un cerc simplu, care va ancora împreună celelalte imagini împreună.

 & lt; div id = "shape_contain" & gt;
& lt; div id = "cerc" & gt; / lt; / div & gt;
& lt; / div & gt; 

03. Faceți pagina

Acum treceți la Css. dosar și deschideți forme.css. fişier. Corpul și HTML sunt setate doar pentru a umple browser-ul cu familia de fonturi dreapta, înființată pentru majoritatea textului care va fi adăugat spre sfârșitul tutorialului ca la atingerea finisajului.

 corp,
HTML {
Marja: 0;
Padding: 0;
Lățime: 100%;
Înălțime: 100VH;
Overflow-X: Ascuns;
Font-Family: "Lato", Sans-Seif;
Transformare text: majusculă;
} 

04. Conține formele

Următoarea regulă CSS este pentru div cu ID-ul lui shape_contain. . Acesta este setat pentru a umple browserul cu orice depășire ascunsă. Traducere3d. este de a asigura că conținutul este accelerat hardware. O margine mare se adaugă înainte de două imagini de fundal. Una este o imagine obișnuită, în timp ce cel de mai sus este un gradient semi-transparent de culoare aqua.

 #Shape_contain {
Dimensionarea casetei: Border-cutie;
Lățime: 100%;
Înălțime: 100VH;
Depășirea: ascunsă;
Transformare: Translate3D (0, 0, 0);
Frontieră: 20px RGB solid (255, 254, 244);
Fundal: Linear-Gradient (0DEG, RGBA (7,
47, 46, 0.8) 0%, RGBA (255, 252, 226, 0,5)
100%), URL (.. / Imagini / Munte.jpg)
Centrul central fără repetări;
Dimensiune de fundal: acoperire;
} 

05. Începeți cu un cerc

Prima formă geometrică care va fi creată este una dintre cele mai simple forme. Un cerc poate fi făcut din orice formă de pătrat div adăugând o rază de frontieră de 50% . Cercul este semi-transparent, cu o umbră moale adăugată la marginea acestuia.

 #circle {
Lățime: 80VH;
Înălțime: 80VH;
Raza de frontieră: 50%;
Fundal: RGBA (136, 239, 231, 0.3);
Poziție: absolută;
Top: 7VH;
stânga: 50%;
Transformare: Translate3D (-50%, 0, 0);
Box-umbra: 0px 5px 40px RGBA (0, 0, 0, 0.3);
} 

06. Încercați un triunghi

Următoarea formă va fi puțin mai complexă, deoarece este un triunghi. Este relativ simplă pentru a crea prin utilizarea căii CSS care permite crearea unei forme de poligon. Adăugați acest div în shape_contain. Div.

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

07. Aplicați triunghiul

Aici Clip-Path. este creat pentru CSS pentru a face triunghiul. Forma este pur și simplu trei puncte. Imaginea de fundal este adăugată și se adaugă un filtru aici, astfel încât nuanța să poată fi schimbată ușor, ceea ce face ca imaginea să ia o nuanță roz roz care este accentuată cu contrastul.

 # tri1 {
Clip-Cale: Polygon (0 0, 100% 0, 50%
100%);
Lățime: 100VH;
Înălțime: 88VH;
Fundal: URL (../ Imagini / Girl3.jpg)
Centrul central fără repetări;
Dimensiune de fundal: acoperire;
Poziție: absolută;
Top: 10VH;
stânga: 50%;
Transformare: Translate3D (-50%, 0, 0);
Filtrul: Contrastul de rotire (310DEG) (140%);
Opacitate: 0,8;
} 

08. Du-te mai complex

Următoarea formă care trebuie creată va fi un triunghi cu o gaură în mijloc. Acest lucru pare relativ simplu, dar poligonul clipului trebuie să fie o linie continuă, deci este mai complexă să creați. Dacă aveți nevoie să creați o formă similară, utilizați Bennett Felly's Clip-Path Maker pentru a crea forma.

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

09. Stack formele

Forma de aici este mai complexă deoarece a fost creată vizual în link-ul menționat anterior. Imaginea nori este plasată în formă și apoi nuanța este ajustată pentru a face acest lucru puțin mai galben. Fiecare formă este poziționată absolut, în centrul Divului din jur și a stivuit unul deasupra celuilalt.

 # tri2 {
Clip-Cale: Polygon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Lățime: 80VH;
Înălțime: 70VH;
Fundal: URL (.. / Imagini / clouds.jpg)
Centrul central fără repetări;
Dimensiune de fundal: acoperire;
Poziție: absolută;
TOP: 1VH;
stânga: 50%;
Transformare: Translate3D (-50%, 0, 0);
Filtrul: Contrast (90DEG) Rotire (90DEG);
Opacitate: 0,7;} 

10. Încercați să redimensionați browserul

Următorul triunghi trebuie adăugat în shape_contain. Div. Dacă verificați browserul, veți vedea că puteți redimensiona browserul, iar formele vor redimensiona perfect, deoarece se bazează pe procente. Containerul este setat cu înălțimea de vizualizare, astfel încât acesta să se potrivească întotdeauna pe ecran.

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

11. Stilul it

Triunghiul final utilizează aceeași formă ca cea anterioară cu gaura din centru. De data aceasta are doar o simplă nuanță de turcoaz, mai degrabă decât o imagine. Transparența este stabilită scăzută pentru a putea vedea prin acest triunghi la celălalt conținut de mai jos.

 # tri3 {
Clip-Cale: Polygon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Lățime: 80VH;
Înălțime: 70VH;
Fundal: RGBA (0, 113, 110, 0.2);
Poziție: absolută;
Top: 20VH;
stânga: 50%;
Transformare: Translate3D (-50%, 0, 0);
} 

12. Creați o bandă înclinată

Următoarea formă este o formă div. Acest lucru va fi plasat între triunghi și două în shape_contain. Div etichetă. Se amestecă în pagină folosind un gradient semi-transparent pe ecran. Acestea vor scala, de asemenea, în sus și în jos la ecrane diferite.

& lt; div id = "Strip1" Clasa = "Strip" & GT; & lt; / div & gt; 

13. Faceți unghiurile

bandă Clasa stabilește gradientul de fundal. Acest lucru se face folosind editorul de gradient online CSS Gradient. . ID-ul stabilește poziția acestei forme de gradient unghiular. Acesta este plasat în centru și apoi compensat ușor astfel încât să păstreze plasarea consecventă pe diferite monitoare.

 .Strip {
Poziție: absolută;
Fundal: Linear-Gradient (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%);
}
# strip1 {{{{
Lățime: 20VH;
Înălțime: 120VH;
stânga: 50%;
Transformare: Translate3D (-175%, -15%, 0)
Rotatez (30DEG);
} 

14. Încercați mai multe unghiuri de gradient

Două etichete DIM sunt adăugate acum care dețin clasa lui bandă . ID-ul le va permite să fie plasate în diferite poziții pe ecran. Acestea sunt folosite ca forme repetitive care construiesc estetica generală a scenei, adăugând, de asemenea, o stropire de culoare.

 & Lt; Div id = "Strip2" Clasa = "Strip" & GT; & Lt; / Div & gt;
& Lt; div id = "Strip3" Clasa = "Strip" & GT; / lt; / div & gt; 

15. Poziționați unghiul

Cele două forme de gradient cu unghi de bandă sunt poziționate în fiecare parte a conținutului principal de pe ecran. Unul este plasat spre stânga jos și celălalt spre dreapta sus, astfel încât acesta să echilibreze ecranul afară. Redimensionați browserul pentru a vedea aceste elemente stick în loc pe ecran și scară pentru a se potrivi.

 # Strip2 {
Lățime: 5VH;
Înălțime: 90VH;
stânga: 50%;
Transformare: Translate3D (60VH, -15%, 0)
Rotatez (30DEG);
}
# strip3 {
Lățime: 5VH;
Înălțime: 90VH;
stânga: 50%;
Transformare: Translate3D (-70VH, 25%, 0)
Rotatez (30DEG);
} 

16. Adăugați un conținut de text

Această pagină nu are o cantitate imensă de conținut de text, dar Divs Aici au întregul conținut de pagină rămas pe ecran. DIFS ar trebui adăugat înainte de închiderea Tag-ului div al shape_contain. panou. Aceste elemente de text vor fi împărțite în diferite colțuri.

 & lt; div id = "stânga" & gt; mergeți dincolo de dreptunghi
& lt; / div & gt;
& lt; div id = "dreapta" & gt; formă receptivă
Layouts & Lt; / Div & Gt;
& lt; div id = "torpleft" & gt; designeri de web
lt; span și gt; css toolkit & lt; / d div & gt;
& lt; div id = "Topright" & GT; 2019 & Lt; / Div & gt;
& lt; div id = "titlu" & gt; forme css & lt; / div & gt; 

17. Rotiți textul

DIV-ul stâng este poziționat absolut pe partea stângă a ecranului și este rotită rotundă în sens contrar acelor de ceasornic cu 90 de grade, astfel încât să se potrivească pe partea laterală. Originea transformării este mișcată ușor pentru a face ca textul să se potrivească mai aproape de marginea ecranului.

 #leftside {
Poziție: absolută;
Stânga: 20px;
Top: 70%;
Transformare-origine: 10% 0%;
Transformare: Rotire (-90DEG);
} 

18. Poziționați textul din dreapta

Textul din dreapta este foarte asemănător cu textul din stânga, cu excepția poziției din partea dreaptă a ecranului. Rotația trebuie împinsă rotundă în sensul acelor de ceasornic, astfel încât textul să stabilească mai bine și citește mai ușor pe partea dreaptă a ecranului.

 # Înregistrați-vă {
Poziție: absolută;
dreapta: 20px;
Top: 70%;
Transformare-origine: 90% 0%;
Transformare: Rotiți (90DEG);
} 

19. St stilizează textul

Acum textul pentru colțul din stânga sus este stilizat. Primele două cuvinte sunt lăsate la dimensiunea lor implicită, în timp ce cuvintele rămase sunt mărite și poziționate pe următoarea linie în jos pentru a oferi o ierarhie textului. Acest lucru va rămâne în colțul din stânga sus prin orice redimensionare.

 #topleft {
Poziție: absolută;
Stânga: 40px;
Top: 40px;
Lățime: 180px;
Text-align: centru;
}
#popleft span {
font-dimensiune: 1.8Em;
} 

20. Setați textul din dreapta

Textul pentru colțul din dreapta sus este acum setat. Acesta este setat în interiorul unui cerc rotund negru, cu textul setat în alb împotriva cercului. Aceasta utilizează metoda înălțimii liniei pentru alinierea textului în centru, folosind înălțimea liniei la fel ca înălțimea div.

 #topright {
Poziție: absolută;
dreapta: 35px;
Top: 25px;
Linie-înălțime: 100px;
Font-dimensiune: 1.4EM;
Lățime: 100px;
Înălțime: 100px;
Context: # 000;
Culoare: #ffff;
Text-align: centru;
Raza de frontieră: 50%;
} 

21. Setați textul principal

Ultimul text care trebuie setat este principalul titlu din centrul ecranului. Tipul este schimbat pentru acest lucru și se dă o culoare semi-transparentă roz roz, astfel încât să se amestece cu culoarea evidențiată a acestui design de pagină. Salvați pagina și actualizați browserul pentru a vedea rezultatul final. Doriți să salvați sau să distribuiți o copie a paginii? Exportați-l ca un PDF și salvați-l în Stocare in cloud .

 #headline {
Poziție: absolută;
Lățime: 100%;
Z-Index: 200;
Pumning-top: 65VH;
Font-Family: "Arvo", Serif;
Text-align: centru;
Culoare: RGBA (233, 173, 255, 0,8);
font-dimensiune: 8VW;
Umbra de text: 0px 3px 50px RGBA (0, 0, 0, 0.5);
} 

Acest articol a fost publicat inițial în revista Creative Web Design Web designer . Cumpăra problema 284. sau Abonati-va .

Citeste mai mult:

• Începeți cu arta CSS
• 5 Generatoare de grilă CSS cool
• Ghidul designerului web pentru metodologiile CSS