Share
Certo, conosciamo tutti i confini. C'è qualcosa di nuovo che potrebbe essere introdotto? Beh, scommetto che ci sono parecchie cose in questo articolo che non hai mai saputo!
Non solo è possibile utilizzare CSS3 per creare angoli arrotondati, ma anche i CSS semplici possono essere sottoposti alla visualizzazione di forme personalizzate. Giusto; in passato, prima che queste tecniche venissero scoperte, potevamo ricorrere all'uso di immagini di sfondo assolutamente posizionate per visualizzare cerchi o frecce. Fortunatamente, mentre facciamo un altro passo in più da Photoshop, non è più così.
Probabilmente hai familiarità con l'uso più basilare dei confini.
bordo: 1px solido nero;
Il codice sopra riportato si applicherà a 1px confine con un elemento. Chiaro e semplice; ma possiamo anche modificare un po 'la sintassi.
larghezza del bordo: spesso; border-style: solido; border-color: nero;
Oltre a passare un valore specifico a larghezza del bordo, possono essere alternativamente utilizzate tre parole chiave: magro, medio, e di spessore.
Anche se inizialmente potrebbe non essere necessario utilizzare mai il -Lunga mano forma, ci sono una manciata di casi quando è vantaggioso, ad esempio quando è necessario aggiornare alcuni aspetti di un bordo quando si verifica un evento designato.
Forse è necessario modificare il colore di un bordo quando l'utente si posiziona su un elemento specifico. L'uso della forma abbreviata richiederebbe la ripetizione dei valori dei pixel.
.riquadro bordo: 1px rosso solido; .box: hover border: 1px solid green;
Un approccio più elegante e DRY potrebbe essere quello di aggiornare specificamente il colore del bordo proprietà.
.riquadro bordo: 1px rosso solido; .box: hover border-color: green;
Inoltre, come scoprirai tra poco, questo -Lunga mano la tecnica è utile quando si creano forme personalizzate con i CSS.
border-radius è il figlio d'oro di CSS3 - la prima nuova proprietà ad avere un uso diffuso nella comunità. Ciò a cui questo si traduce è che, escludendo Internet Explorer 8 e successivi, tutti i browser possono visualizzare angoli arrotondati.
In precedenza, era necessario utilizzare i prefissi dei fornitori sia per Webkit che per Mozilla, in modo che lo stile fosse applicato correttamente.
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
In questi giorni, tuttavia, possiamo troncare le versioni del venditore senza preoccupazioni e semplicemente attenerci al modulo ufficiale: border-radius.
Come ci si potrebbe aspettare, possiamo anche specificare valori personalizzati per ciascun lato di una scatola.
border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;
Nel codice sopra, impostazione border-top-right-radius e border-bottom-left-radius a zero sarebbe superfluo, a meno che l'elemento non stia ereditando valori che devono essere ripristinati.
Molto simile margine o imbottitura, queste impostazioni possono essere condensate in una singola proprietà, se necessario.
/ * in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra * / border-radius: 20px 0 30px 0;
Ad esempio (e come fanno i web designer così spesso), la forma di un limone può essere riprodotta con CSS e border-radius proprietà, in questo modo:
.lemon width: 200px; altezza: 200 px; sfondo: # F5F240; border: 1px solid # F0D900; border-radius: 10px 150px 30px 150px;
Molti stilisti aderiscono felicemente alle conoscenze finora delineate in questo capitolo; tuttavia, ci sono alcuni modi in cui possiamo spingerci oltre!
C'è una varietà di tecniche alle quali possiamo fare riferimento quando abbiamo il compito di applicare più bordi a un elemento.
Mentre solido, tratteggiata, e tratteggiata sono i valori più frequenti per stile del bordo proprietà, ci sono anche alcuni altri che possiamo usare, incluso scanalatura e cresta.
border: 20px groove # e3e3e3;
Oppure, con la forma a mano lunga:
border-color: # e3e3e3; border-width: 20px; border-style: groove;
Mentre questo è certamente utile, a cresta o scanalatura l'effetto non è davvero un confine multiplo.
La tecnica più popolare per la creazione di due confini è quella di sfruttare il schema proprietà.
.box border: 5px solid # 292929; contorni: 5px solid # e3e3e3;
Questo metodo funziona meravigliosamente, tuttavia, è limitato a due bordi. Se hai bisogno di creare un effetto stratificato, gradiente-sfumato, sarà necessario un approccio diverso.
Quando il schema la tecnica non è sufficiente, un approccio alternativo è quello di sfruttare il :prima e :dopo pseudo elementi e applica i bordi aggiuntivi necessari al contenuto generato.
.box larghezza: 200px; altezza: 200 px; sfondo: # e3e3e3; posizione: relativa; bordo: 10px verde fisso; / * Crea due caselle con la stessa larghezza del contenitore * / .box: after, .box: before content: "; position: absolute; top: 0; left: 0; bottom: 0; right: 0; .box: after border: 5px solid red; outline: 5px solid yellow; .box: before border: 10px solid blue;
Questo forse non è l'approccio più elegante, ma certamente ottiene il lavoro. Un avvertimento è che è facile confondere l'ordine in cui verranno applicati i colori del bordo. Spesso è richiesto un certo livello di "ipotesi e controllo" per applicare la sequenza corretta.
Il bei ragazzi modo per creare un numero infinito di confini è quello di sfruttare il diffusione parametro nel box-ombra Proprietà CSS3.
.riquadro bordo: 5px rosso fisso; box-shadow: 0 0 0 5px verde, 0 0 0 10px giallo, 0 0 0 15px arancione;
In questo caso, siamo intelligenti e stiamo usando box-ombra in un modo che potrebbe non essere stato necessariamente inteso quando la specifica è stata originariamente scritta.
Impostando il X, y, e sfocatura componenti a 0, possiamo invece usare il diffusione valore per creare bordi solidi nelle posizioni desiderate. Perché box-ombras può essere impilato, attraverso l'uso di una virgola, il numero di possibili livelli è infinito.
Questa tecnica degrada dolcemente in modo piacevole. Nei browser più vecchi, che non riconoscono il box-ombra proprietà, questo renderà semplicemente il singolo rosso 5px confine.
Ricorda: i design non devono essere identici in tutti i browser. Scrivi il tuo CSS per il più moderno dei browser, e quindi fornisci fallback adatti, di conseguenza.
Oltre a passare un singolo valore a border-radius, possiamo in alternativa fornire due - separati da a / - per specificare valori univoci per entrambi i raggi orizzontale e verticale.
Per esempio…
border-radius: 50px / 100px; / * raggio orizzontale, raggio verticale * /
… è equivalente a:
border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;
Questa tecnica è particolarmente utile quando devi imitare una curva sottile e lunga, piuttosto che un generico angolo arrotondato. Ad esempio, il codice seguente ci consente di staccarci leggermente da una forma quadrata, ottenendo un effetto più simile a una carta.
.box larghezza: 200px; altezza: 200 px; sfondo: # 666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em;
Forse l'uso più accurato dei confini è quando vengono applicati in modo intelligente agli elementi, che hanno larghezza e altezza pari a zero. Confusione, eh? Vediamo una dimostrazione.
Per i prossimi numerosi esempi, si assuma il seguente markup ...
... e il seguente base messa in piega:
.box larghezza: 200px; altezza: 200 px; sfondo: nero;
L'esempio di riferimento più frequente, quando si dimostra come le forme CSS possono essere utilizzate in un progetto, consiste nel creare la freccia obbligatoria.
La chiave per capire come una freccia potrebbe essere formata con CSS è quella di impostare un unico colore del bordo da ciascun lato, e quindi ridurre entrambi i larghezza e altezza valori per il contenitore a 0.
Supponendo a div con una classe di freccia come il contenitore:
.arrow larghezza: 0; altezza: 0; border-top: 100 px rosso fisso; border-right: 100 px verde fisso; border-bottom: 100 px blu fisso; border-left: 100 px giallo solido;
Come dimostrato all'inizio di questo capitolo, una sintassi più pulita sarebbe non usa la versione a breve mano onnicomprensiva:
.arrow larghezza: 0; altezza: 0; bordo: 100 px solido; border-top-color: rosso; border-right-color: green; border-bottom-color: blu; border-left-color: giallo;
Possiamo anche ridurlo ulteriormente, raggruppando i valori dei colori.
.arrow larghezza: 0; altezza: 0; bordo: 100 px solido; border-color: rosso verde blu giallo;
Interessante, vero? Ha perfettamente senso, però, quando facciamo un passo indietro. Questo è l'unico modo possibile in cui i colori potrebbero allinearsi, assumendo a larghezza e altezza di zero per il contenitore. Ora, cosa succede se impostiamo tutti i colori del bordo in modo trasparente, ad eccezione del lato blu?
.arrow larghezza: 0; altezza: 0; bordo: 100 px solido; border-bottom-color: blu;
Eccellente! Ma non sembra troppo semantico per creare un .freccia div, tutto allo scopo di aggiungere una freccia alla pagina. Invece, gli elementi pseudo possono essere usati per applicare la freccia dopo o prima dell'elemento associato.
Per creare un fumetto al 100% CSS, iniziamo con il markup.
Ciao!
Successivamente, alcuni base lo styling dovrebbe essere applicato.
.nuvoletta posizione: relativa; background-color: # 292929; larghezza: 200 px; altezza: 150 px; altezza della linea: 150 px; / * centro verticale * / colore: bianco; allineamento del testo: centro;
La freccia verrà applicata utilizzando il dopo pseudo-elemento.
.fumetto: dopo contenuto: ";
Il
:primae:dopogli elementi di psuedo possono essere utilizzati per inserire contenuti generati prima o dopo il contenuto di un elemento.
A questo punto, si tratta semplicemente di riprodurre la freccia e posizionarla nella posizione corretta. Iniziamo con il posizionamento assoluto del contenuto, ripristinando il larghezza e altezza, e applicare i colori del bordo.
.fumetto: after content: "; position: absolute; width: 0; height: 0; border: 10px solid; border-color: rosso verde blu giallo;
Poiché sappiamo che vogliamo che la freccia punti verso il basso, l'immagine qui sopra dimostra che tutti tranne il bordo rosso (o superiore) dovrebbero essere omessi o impostati su trasparente.
.fumetto: after content: "; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red;
Quando si creano forme CSS, perché non possiamo usare il larghezza proprietà per specificare quanto deve essere ampia la freccia, il larghezza del bordo la proprietà dovrebbe essere usata invece. In questo caso, la freccia dovrebbe essere leggermente più grande; così la larghezza del bordo può essere aumentato a 15px. Posizioneremo anche la freccia in basso e al centro del contenitore, usando il superiore e sinistra proprietà, rispettivamente.
.fumetto: after content: "; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%;
Quasi lì; il passaggio finale consiste nell'aggiornare il colore della freccia in modo che corrisponda allo sfondo del contenitore. Anche il posizionamento deve essere modificato per tenere conto della larghezza dei bordi (15px). Mentre siamo qui, applicheremo anche un sottile border-radius per rendere il contenitore sembra essere più simile a bolle.
.speech-bubble / * ... altri stili * / border-radius: 10px; .speech-bubble: after content: "; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: # 292929; top: 100%; left: 50%; margin- a sinistra: -15px; / * regola la larghezza del bordo * /
Non male, eh? Estrai questo codice per alcune classi riutilizzabili e sei a posto per tutti i progetti futuri.
/ * Speech Bubbles Usage: applica una classe di .speech-bubble e .speech-bubble-DIRECTIONCiao* / .speech-bubble position: relative; background-color: # 292929; larghezza: 200 px; altezza: 150 px; altezza della linea: 150 px; / * centro verticale * / colore: bianco; allineamento del testo: centro; border-radius: 10px; font-family: sans-serif; .speech-bubble: after content: "; position: absolute; width: 0; height: 0; border: 15px solid; / * Posiziona la freccia * / .speech-bubble-top: after border-bottom- colore: 292929; left: 50%; bottom: 100%; margin-left: -15px; .speech-bubble-right: after border-left-color: # 292929; left: 100%; top: 50% ; margin-top: -15px; .speech-bubble-bottom: after border-top-color: # 292929; top: 100%; left: 50%; margin-left: -15px; .speech-bubble- a sinistra: dopo border-right-color: # 292929; top: 50%; right: 100%; margin-top: -15px;
Uno svantaggio di usare altezza della linea per centrare verticalmente il testo è che sei limitato a una singola riga. Se il testo richiede due o più righe, ogni altezza della linea sarà troppo grande. Una soluzione intelligente è quella di impostare a display di tavolo alla nuvoletta e a display di table-cell al paragrafo che avvolge il testo. Questo ci consente quindi di allineare il testo al centro, di conseguenza.
Il testo va qui.
Successivamente, il CSS modificato.
.speech-bubble / * altri stili * / display: tabella; .speech-bubble p display: table-cell; allineamento verticale: medio;
Se riferimenti a
display: tabellariportare ricordi terribili di layout vecchio stile, basati su tabelle, non ti preoccupare. Queste proprietà si riferiscono semplicemente allo stile in cui un elemento dovrebbe essere visualizzato.
Non siamo limitati ai triangoli; Il CSS è in grado di produrre tutti i tipi di forme, persino i segni di cuori e di rischio biologico!
.rischio biologico larghezza: 0; altezza: 0; bordo: 60 px solido; raggio-limite: 50%; border-top-color: nero; border-bottom-color: nero; border-left-color: giallo; border-right-color: giallo;
Anche se è vero che il semplice bordo: 1px solido nero la sintassi va molto lontano, se siamo intelligenti, possiamo creare una varietà di effetti, icone e forme utili. Chi avrebbe mai pensato che i confini potessero essere così potenti? La chiave è ricordare che lo stile per forme comuni o fumetti dovrebbe essere creato una sola volta e quindi estratto in classi di utilità per uso futuro.
Accentsconagua