Come progettare con le forme CSS: un'introduzione

La base di ogni sito Web è di sotto-dividere la pagina in basso in elementi più piccoli che hanno contenuto. Il grosso problema con questo per i progettisti è che il contenuto è sempre un rettangolo. Gli schermi sono di forma rettangolare e qualsiasi suddivisione di questo sarà un rettangolo. In questo tutorial esamineremo come andare oltre le forme rettangolari utilizzando la proprietà e la rotazione del percorso clip CSS per rendere il design più interessante. Per altri modi per rendere i tuoi disegni più interessanti, controlla i nostri esempi di Animazione CSS. . Se tutto questo sembra un troppo lavoro, prova una cima Builder del sito web anziché. Ma qualunque sia le esigenze del tuo sito, devi avere il diritto web hosting per te.

La forma più semplice da iniziare è un cerchio o ovale. Se hai un rettangolo e hai impostato tutto il raggio di bordo in oltre il 50%, avrai un ovale e se inizi con un quadrato, perché tutti i lati hanno la stessa lunghezza, otterrai un cerchio. Questo è qualcosa che probabilmente hai fatto prima, ma è una tecnica che è spesso sottoutilizzata nella progettazione delle pagine.

• I 20 migliori strumenti wireframe

Una soluzione più complessa è quella di creare un triangolo utilizzando il percorso del clip CSS per ridurre la parte visibile di un div. Un triangolo è una forma piuttosto semplice da creare perché ha solo tre punti, ma se si desidera creare forme più complesse, sarà richiesto un editor di clip visive.

Questo tutorial ti mostrerà come aggiungere tutti questi elementi insieme, compresi gradienti e rettangoli rotanti, per creare un design più unico. Aggiungi gradienti CSS e un design geometrico complesso può essere creato tramite CSS.

• Scarica i file per il tutorial da filelio

01. Inizia

Apri il inizio cartella nell'editor di codice IDE e inizia a modificare il index.html. pagina. Per iniziare il tutorial, verrà richiesto un semplice collegamento fino ai caratteri di caratteri di Google Fonts in modo che quando un po 'di testo sia incluso in seguito può avere i caratteri tipografici appropriati aggiunti alla pagina.

 & lt; link rel = "stylesheet" href = "css / shapes.css" & gt;
& lt; link href = "https://fonts.googleapis.com/
CSS? Famiglia = Arvo: 700 | LATO: 700 "REL =" Stylesheet "& GT; 

02. Ancora le forme insieme

Nel corpo Tag nella pagina Aggiungi il seguente contenuto. Il forma contenente Il tag div sarà utilizzato per contenere tutte le diverse forme prodotte e questo verrà effettuato per riempire la vista del browser. La prima forma da creare sarà un cerchio semplice, che ancora gli altre immagini insieme.

 & lt; div id = "shade_contain" & gt;
& lt; div id = "cerchio" e gt; & lt; / div & gt;
& lt; / div & gt; 

03. Fai la pagina

Ora passare al CSS. cartella e apri il forme.css. file. Il corpo e l'HTML sono semplicemente impostati per riempire il browser con la famiglia destra della famiglia, impostato per la maggior parte del testo che verrà aggiunto verso la fine del tutorial dei tocchi di finitura.

 Corpo,
html {
Margine: 0;
Imbottitura: 0;
Larghezza: 100%;
Altezza: 100VH;
Overflow-x: nascosto;
Fammon-family: 'Lato', sans-serif;
Trasformazione del testo: maiuscolo;
} 

04. Contiene le forme

La successiva regola CSS è per il div con l'ID di shape_contain. . Questo è impostato per riempire il browser con qualsiasi overflow nascosto. Il Traduci3d. è garantire che il contenuto sia accelerato hardware. Un grande confine viene aggiunto prima di due immagini di sfondo. Uno è un'immagine regolare mentre quella sopra è un gradiente semi-trasparente color acquatico.

 #Shape_Contain {
ridimensionamento della scatola: Border-Box;
Larghezza: 100%;
Altezza: 100VH;
Overflow: nascosto;
Trasforma: translate3d (0, 0, 0);
Border: 20px Solid RGB (255, 254, 244);
Sfondo: sfumatura lineare (0DEG, RGBA (7,
47, 46, 0.8) 0%, RGBA (255, 252, 226, 0.5)
100%), URL (../ Immagini / Mountain.jpg)
Centro centrale senza ripetizione;
Dimensioni di sfondo: copertina;
} 

05. Inizia con un cerchio

La prima forma geometrica che verrà creata è una delle forme più semplici. Un cerchio può essere fatto da qualsiasi forma quadrata div. aggiungendo un raggio di frontiera di 50% . Il cerchio è semitrasparente, con un'ombra morbida aggiunta al bordo di esso.

 #circle {
Larghezza: 80VH;
Altezza: 80vh;
Border-Radius: 50%;
Sfondo: RGBA (136, 239, 231, 0.3);
Posizione: assoluto;
Top: 7vh;
a sinistra: 50%;
Trasforma: Translate3d (-50%, 0, 0);
Box-shadow: 0px 5px 40px RGBA (0, 0, 0, 0.3);
} 

06. Prova un triangolo

La forma successiva sarà leggermente più complessa perché è un triangolo. È relativamente semplice da creare utilizzando il percorso del clip CSS che consente di creare una forma poligono. Aggiungi questo div nel shape_contain. Div.

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

07. Applicare il triangolo

Qui clip-path è stato creato per il CSS per rendere il triangolo. La forma è semplicemente tre punti. L'immagine di sfondo viene aggiunta, e un filtro viene aggiunto qui in modo che la tonalità possa essere spostata leggermente, il che rende l'immagine su una leggera tinta rosa che viene enfatizzata con il contrasto.

 # TRI1 {
Clip-Path: Polygon (0 0, 100% 0, 50%
100%);
Larghezza: 100VH;
Altezza: 88vh;
Sfondo: URL (../ Immagini / Girl3.jpg)
Centro centrale senza ripetizione;
Dimensioni di sfondo: copertina;
Posizione: assoluto;
Top: 10vh;
a sinistra: 50%;
Trasforma: Translate3d (-50%, 0, 0);
Filtro: contrasto di Hue-Rotate (310DEG) (140%);
Opacità: 0.8;
} 

08. Vai più complesso

La forma successiva da creare sarà un triangolo con un buco nel mezzo. Sembra relativamente semplice, ma il poligono del clip deve essere una linea continua, quindi è più complesso da creare. Se è necessario creare una forma simile, utilizzare Bennett Feely's Clip-Path Maker per creare la forma.

 & lt; div id = "TRI2" & GT; & LT; / DIV & GT; 

09. Impila le forme

La forma qui è più complessa perché è stata creata visivamente nel link precedentemente menzionato. L'immagine delle nuvole è posta nella forma e quindi la tonalità viene regolata per renderlo un po 'più giallo. Ogni forma è posizionata assolutamente, al centro del div circostante e impilato uno sopra l'altro.

 # TRI2 {
Clip-Path: Polygon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Larghezza: 80VH;
Altezza: 70vh;
Sfondo: URL (../ Immagini / Clouds.jpg)
Centro centrale senza ripetizione;
Dimensioni di sfondo: copertina;
Posizione: assoluto;
Top: 1vh;
a sinistra: 50%;
Trasforma: Translate3d (-50%, 0, 0);
Filtro: contrasto Hue-Rotate (90DEG) (140%);
Opacità: 0,7;} 

10. Prova a ridimensionare il browser

Il prossimo triangolo dovrebbe essere aggiunto nel shape_contain. Div. Se si controlla il browser, vedrai che è possibile ridimensionare il browser e le forme ridimensionerà perfettamente, poiché si basano su percentuali. Il contenitore è impostato con l'altezza della vista, quindi si adatta sempre allo schermo.

 & lt; div id = "TRI3" & GT; & LT; / DIV & GT; 

11. Style It Up

Il triangolo finale utilizza la stessa forma del precedente con il foro al centro. Questa volta ha solo una semplice sfumatura di turchese piuttosto che un'immagine. La trasparenza è impostata a basso per essere in grado di vedere attraverso questo triangolo agli altri contenuti di seguito.

 # TRI3 {
Clip-Path: Polygon (50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
Larghezza: 80VH;
Altezza: 70vh;
Sfondo: RGBA (0, 113, 110, 0.2);
Posizione: assoluto;
Top: 20vh;
a sinistra: 50%;
Trasforma: Translate3d (-50%, 0, 0);
} 

12. Creare una striscia angolata

La forma successiva è una forma div angolata. Questo sarà collocato tra triangolo uno e due nel shape_contain. tag div. Blend nella pagina utilizzando un gradiente semitrasparente sullo schermo. Questi si ridurranno anche su e giù per schermi di dimensioni diverse.

 & lt; div id = "strip1" class = "striscia" e gt; & lt; / div & gt; 

13. Rendi gli angoli

Il striscia La classe imposta il gradiente di sfondo. Questo è fatto usando l'editor di gradienti online Gradiente CSS. . L'ID imposta quindi la posizione di questa particolare forma sfumata angolata. È posto nel centro e quindi compensato leggermente in modo che mantenga il posizionamento coerente su monitor diversi.

 .strip {
Posizione: assoluto;
Sfondo: sfumatura lineare (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 {
Larghezza: 20vh;
Altezza: 120VH;
a sinistra: 50%;
Trasforma: Translate3d (-175%, -15%, 0)
rotatez (30Deg);
} 

14. Prova più angoli di gradiente

Altri due tag div sono ora aggiunti che tengono la classe di striscia . L'ID consentirà loro di essere posizionati in diverse posizioni sullo schermo. Questi sono usati come forme ripetitive che accumulano l'estetico generale della scena, aggiungendo anche una spruzzata di colore.

 & lt; div id = "strip2" class = "strip" & gt; & lt; / div & gt;
& lt; div id = "strip3" class = "strip" & gt; & lt; / div & gt; 

15. Posizionare l'angolo

Le due forme di gradiente dell'angolo di striscia sono posizionate su ciascun lato del contenuto principale sullo schermo. Uno è posto verso l'in basso a sinistra e l'altro verso in alto a destra in modo che bilancia lo schermo. Ridimensiona il browser per vedere questi elementi attaccarsi in posizione sullo schermo e scala per adattarsi.

 # Strip2 {
Larghezza: 5VH;
Altezza: 90vh;
a sinistra: 50%;
Trasforma: Translate3d (60vh, -15%, 0)
rotatez (30Deg);
}
# strip3 {
Larghezza: 5VH;
Altezza: 90vh;
a sinistra: 50%;
Trasforma: Translate3d (-70vh, 25%, 0)
rotatez (30Deg);
} 

16. Aggiungi alcuni contenuti di testo

Questa pagina non ha una grande quantità di contenuto di testo, ma i divs qui hanno tutto il contenuto della pagina rimanente da posizionare sullo schermo. I div dovrebbero essere aggiunti prima della chiusura tag div del shape_contain. pannello. Questi elementi di testo saranno suddivisi in angoli diversi.

 & lt; div id = "Leftside" & GT; va oltre il rettangolo
& lt; / div & gt;
& lt; div id = "a destra" e gt; forma reattiva
Layouts & lt; / div & gt;
& lt; div id = "topleft" & gt; web designer
& lt; br & gt; & lt; span & gt; css toolkit & lt; / span & gt; & lt; / div & gt;
& lt; div id = "topright" & gt; 2019 & lt; / div & gt;
& lt; div id = "Titolo" e GT; CSS Shapes & Lt; / Div & GT; 

17. Ruota il testo

Il div lato sinistro è posizionato assolutamente sul lato sinistro dello schermo, e viene ruotato rotondo in senso antiorario di 90 gradi in modo che si adatta al lato. L'origine della trasformazione viene spostata leggermente per rendere il testo si avvicina al bordo dello schermo.

 #leftside {
Posizione: assoluto;
a sinistra: 20 px;
Top: 70%;
Trasformazione-Origine: 10% 0%;
Trasforma: ruotare (-90Deg);
} 

18. Posizionare il testo destro

Il testo a destra è molto simile al testo sintonizzato tranne che è posizionato da destra dal lato destro dello schermo. La rotazione dovrebbe essere spinta in senso orario in senso orario in modo che il testo si sieda meglio e legge più facilmente sulla destra dello schermo.

 #Rightside {
Posizione: assoluto;
Destra: 20px;
Top: 70%;
Trasformazione-Origine: 90% 0%;
Trasforma: ruotare (90DEG);
} 

19. Stilise il testo

Ora il testo per l'angolo in alto a sinistra è stilizzato. Le prime due parole vengono lasciate alle dimensioni predefinite, mentre le parole rimanenti sono ingrandite e posizionate sulla riga successiva verso il basso per fornire una certa gerarchia al testo. Questo si attenuerà all'angolo in alto a sinistra attraverso qualsiasi ridimensionamento.

 #Topleft {
Posizione: assoluto;
a sinistra: 40 px;
Top: 40 px;
Larghezza: 180 px;
Text-Align: Center;
}
#topleft span {
Dimensione del carattere: 1.8em;
} 

20. Impostare il testo a destra

Il testo per l'angolo in alto a destra è ora impostato. Questo è ambientato all'interno di un cerchio rotondo nero, con il testo impostato in bianco contro il cerchio. Questo utilizza il metodo di altezza di linea per allineare il testo al centro, utilizzando l'altezza della linea uguale all'altezza delv.

#in alto a destra {
Posizione: assoluto;
Destra: 35px;
Top: 25px;
Altezza di linea: 100px;
Dimensione del carattere: 1.4em;
Larghezza: 100px;
Altezza: 100px;
Sfondo: # 000;
Colore: #FFFF;
Text-Align: Center;
Border-Radius: 50%;
} 

21. Imposta il testo del titolo

L'ultimo testo da impostare è il titolo principale al centro dello schermo. Il carattere tipografico è cambiato per questo, e viene somministrato un colore semi-trasparente rosa chiaro in modo che si fonda con il colore di evidenziazione di questa progettazione della pagina. Salva la pagina e aggiorna il tuo browser per vedere il risultato finito. Vuoi salvare o condividere una copia della pagina? Esportalo come PDF e salvalo in deposito cloud. .

 #headline {
Posizione: assoluto;
Larghezza: 100%;
z-index: 200;
imbottitura: 65vh;
Fammon-family: 'Arvo', serif;
Text-Align: Center;
Colore: RGBA (233, 173, 255, 0.8);
dimensione del carattere: 8vw;
Text-Shadow: 0px 3px 50px RGBA (0, 0, 0, 0.5);
} 

Questo articolo è stato originariamente pubblicato su Creative Web Design Magazine Web designer . Acquista il problema 284. o sottoscrivi .

Per saperne di più:

• Inizia con CSS Art
• 5 Generatori di griglia Cool CSS
• Una guida di Web Designer alle metodologie CSS