Come designer di layout, sono sempre stato seriamente infastidito dal fatto che lo spessore del bordo in CSS venga preso in considerazione quando si forma la larghezza del blocco. Concordo sul fatto che sia più corretto in questo modo, ma in alcuni casi si tratta solo di una palese ingiustizia, che comporta molti problemi aggiuntivi.
Uno di questi problemi era che mi era impossibile tracciare un layout con un allineamento perfettamente uniforme dei blocchi lungo i bordi. Qualche blocco è sempre, sì, strisciato fuori dai bordi di tutti gli altri. Questo problema è stato attenuato dal fatto che "questa scansione" era di un massimo di 1-2 pixel e molto spesso il cliente semplicemente non se ne accorse. Ma personalmente, mi ha infastidito molto.
È lo stesso che comprare Falso cinese Orologi svizzeri. Sembra che tutto sia esattamente uguale, ma poi tu stesso capisci che questo è un falso.
Solo un po' di teoria
Lo standard CSS afferma che la larghezza finale di un blocco è formata dalla dimensione del padding, dalla larghezza del frame (se il frame ha 2 bordi orizzontali, allora anche questa dimensione deve essere moltiplicata per 2) e dalla larghezza del testo . Quel significato larghezza, che tutti indicano il blocco div ed è la larghezza del testo. Molte persone pensano che questa sia la larghezza del blocco, ma non lo è. È esattamente quello che ho pensato anch'io.
C'è uno strumento in CSS che ti consente di aggirare questo stato di cose e consente il parametro CSS larghezza impostare la larghezza del blocco senza tenere conto del riempimento e dei bordi.
La soluzione del problema
Per rendere più facile la comprensione, ecco un esempio di combattimento:
Parametri -dimensionamento della scatola moz e -dimensionamento della scatola del webkit sono necessari affinché le versioni precedenti dei browser Firefox e Safari comprendano che in questo caso non è necessario includere la larghezza del bordo e le dimensioni del riempimento.
Ogni specialista deve cercare quotidianamente nuova informazione nel loro campo di attività. Dopotutto, non per niente si dice che la vita è solo un movimento in avanti. Se hai vissuto un giorno e non ne hai imparato nulla di nuovo, assicurati di aver vissuto questo giorno invano!
PS Per me, come sviluppatore di siti Web personalizzati, è un test molto serio: la promozione del sito sui motori di ricerca. Per me, tutto questo motori di ricerca, la SEO è una foresta oscura che cerco di “regalare” ad altre persone, poiché una persona può essere un professionista solo in uno, nel suo campo. Non ho bisogno di qualcun altro.
Qualche lezione prima, abbiamo guardato rappresentazione schematica blocco di una pagina Web e ho anche parlato brevemente di una proprietà CSS come border , con la quale puoi impostare i bordi per un elemento. Questa volta esamineremo questa proprietà in modo più dettagliato utilizzando esempi.
Il confine si trova tra il margine e il riempimento. Ciò significa che il margine è dietro a frontiera. Il bordo può essere impostato sia da tutti e quattro i lati (come se racchiudesse il blocco in una cornice), sia da uno, due o tre lati. In CSS, puoi controllare lo spessore, il colore e lo stile dei bordi. Studiamo questo in modo più dettagliato.
border-width: la larghezza del bordo
attraverso proprietà di confine-width imposta la larghezza del bordo. Molto spesso, questa dimensione è specificata in pixel. È possibile impostare larghezze uguali o diverse per tutti e quattro i bordi, ad esempio:
/* tutti e 4 i bordi sono larghi 2px: */ border-width: 2px; /* i bordi superiore e inferiore sono larghi 2px, sinistro e destro sono larghi 4px: */ border-width: 2px 4px; /* bordo superiore - 2px, sinistro e destro - 6px, inferiore - 3px: */ larghezza bordo: 2px 6px 3px; /* bordo superiore - 2px, a destra - 3px, in basso - 4px, a sinistra - 5px: */ larghezza bordo: 2px 3px 4px 5px;
Inoltre, ci sono parole chiave per specificare la larghezza del bordo:
- sottile - bordo largo 2px;
- medio - bordo largo 4px;
- spesso - bordo largo 6px.
border-color: il colore del bordo
La proprietà border-color imposta il colore per i bordi. I colori possono essere specificati in qualsiasi formato CSS: parole chiave, esadecimale o RGB, a seconda di quale sia più conveniente per te. Per analogia con la proprietà precedente, puoi impostare un colore per tutti i bordi o scegliere colori diversi per ogni bordo.
Colore bordo: #FFFF00;
Puoi anche impostare un colore trasparente scrivendo:
colore bordo: trasparente;
stile bordo: stile bordo
Grazie alla proprietà in stile bordo, puoi creare un bordo regolare tratteggiato, raddoppiato, tridimensionale: ce ne sono molti significati diversi. Per fare ciò, utilizzare le seguenti parole chiave:
- bordo solido - solido;
- bordo punteggiato - punteggiato;
- bordo tratteggiato - tratteggiato;
- doppio - doppio bordo;
- scanalatura - confine tridimensionale della scanalatura;
- cresta - bordo volumetrico con bordo spesso (in effetti, l'inversione dello stile precedente);
- inizio - bordo estruso;
- inserto - un bordo rientrato (essenzialmente l'inverso dello stile precedente).
Come per le proprietà di larghezza del bordo e colore del bordo, il bordo di ogni casella può avere uno stile diverso, ad esempio, puoi rendere i bordi superiore e inferiore tratteggiati e i bordi destro e sinistro raddoppiati. Qui tutto dipende solo dall'immaginazione.
Stile bordo: doppio punto;
Nota: in browser diversi aspetto esteriore i bordi possono variare leggermente.
Confine proprietà CSS generale: 3 in 1
Non è necessario utilizzare tutte e tre le proprietà precedenti a turno per impostare lo stile per il bordo. Abbastanza per sapere del generale proprietà universale border CSS, con il quale puoi modellare molto più velocemente e risparmiare spazio. Per questo in ordine casuale annotare i valori per tutte e tre le proprietà:
Bordo: 2px punteggiato #FF0000;
Confini per i singoli lati
Con ulteriori proprietà CSS del bordo, puoi modellare ogni bordo del blocco individualmente. Le seguenti proprietà ti aiuteranno in questo:
- border-top - stile per il bordo superiore;
- border-right - per il confine destro;
- border-bottom - per il bordo inferiore;
- border-left - per il bordo sinistro.
Risultati
Ora che sai come creare bordi per scatole, puoi esercitarti a realizzarli. Ci sono molti modi per descrivere succintamente uno stile senza esagerare con le linee. file css. Un ruolo importante qui è svolto dalla conoscenza dei principi dei fogli di stile a cascata. Considera un esempio.
Diciamo che vuoi inquadrare un div con tre bordi grigi solidi e rendere il bordo inferiore tratteggiato di verde. Puoi scrivere questo stile in questo modo:
Div ( bordo destro: 8px double #FF0000; bordo sinistro: 8px double #FF0000; bordo inferiore: 8px double #FF0000; bordo superiore: 4px punteggiato #FDD201; )
Ma questo è troppo lungo. Tutto questo può essere scritto in breve:
Div (bordo: 8px doppio #FF0000; bordo superiore: 4px punteggiato #FDD201; )
Come accennato in precedenza, qui sfrutteremo le proprietà a cascata dei CSS. Innanzitutto, scriviamo lo stile per tutti e quattro i lati della cornice, quindi specifichiamo lo stile separatamente per il bordo inferiore, sovrascrivendo così parzialmente lo stile precedente. È molto importante seguire questa sequenza di linee.
mini-compito
Prova a creare un bordo div 200x200px. Gli stili per la cornice dovrebbero essere così:
- Rendi solidi i bordi superiore e inferiore solido, dai loro lo stesso colore di scelta e una larghezza di 5px.
- Crea un bordo sinistro tratteggiato, 3 pixel di larghezza, scegli un colore diverso dal precedente.
- Raddoppia il bordo destro Doppio, 7 pixel di larghezza, colore diverso dai due precedenti.
Alla fine, il tuo lavoro dovrebbe assomigliare a questo (tranne per il colore che scegli tu stesso):
Risultato del lavoro (visualizza in Chrome)
Sono sicuro che hai già familiarità con la proprietà CSS Border. Imparerai qualcosa di nuovo che non sapevi prima sul confine CSS? Bene, non solo imparerai, ma vedrai anche cose nuove che non hai mai saputo prima!
Non solo CSS3 può essere utilizzato per arrotondare gli angoli, ma anche puro codice CSS può essere utilizzato per creare forme complesse. In precedenza, era possibile utilizzare l'immagine di sfondo per dare l'impressione di angoli arrotondati. Grazie alle nuove tecniche di confine, possiamo farlo in puro CSS.
Le basi dell'uso dei bordi CSS
Probabilmente hai già familiarità con uso standard proprietà di confine:
Bordo: 1px nero fisso;
Il codice sopra visualizzerà un bordo di 1px che sarà nero. Semplicemente e facilmente. Puoi anche espandere un po' la sintassi:
larghezza del bordo: spessa; stile bordo: solido colore bordo: nero
In aggiunta, è possibile utilizzare valori specifici per la proprietà border-width, tre parole chiave: sottile, medio, spesso.
Ma l'uso della sintassi estesa non è sempre pratico. Diamo un'occhiata a un esempio in cui vuoi cambiare il colore del bordo di un blocco quando ci passi sopra. In tal caso, l'uso della sintassi abbreviata è molto più semplice:
Box (bordo: 1px rosso fisso; ) .box:hover (bordo: 1px verde fisso;)
Più elegante e più semplice può essere fatto in questo modo:
Box (bordo: 1px rosso fisso; ) .box:hover (colore del bordo: verde; )
Come puoi vedere, la tecnica avanzata è utile anche quando cambiamo solo alcune proprietà: larghezza, stile, colore e altre.
raggio di confine
Frontiera-raggioè la proprietà "d'oro" di CSS3 - la prima proprietà più comune che è diventata pratica e utile. Escludendo IE8 e precedenti, tutti i browser visualizzano gli angoli arrotondati con questo.
Tuttavia, è necessario utilizzare prefissi speciali per Webkit e Mozilla affinché lo stile sia corretto.
raggio-bordo-webkit: 10px; -moz-raggio-bordo: 10px; raggio di confine: 10px
Al giorno d'oggi, possiamo rimuovere i prefissi speciali e utilizzare modulo standard raggio di confine.
Un altro vantaggio è che possiamo usare valori speciali per ogni lato del blocco:
raggio di confine in alto a sinistra: 20px; raggio di confine in alto a destra: 0; bordo-basso-destra-raggio: 30px; bordo-basso-sinistra-raggio: 0;
Nel codice sopra, impostando il raggio di confine in alto a destra e il raggio di confine in basso a sinistra su "zero", è possibile ottenere forme sorprendenti. Sebbene l'elemento possa ereditare alcune proprietà che dovranno essere annullate.
Come il margine e il riempimento, possiamo condensare la sintassi:
/* in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra */ raggio-bordo: 20px 0 30px 0;
Ad esempio, usando la proprietà border-radius, ti mostrerò un "limone" che i designer usano spesso quando creano siti web:
Limone (larghezza: 200px; altezza: 200px; sfondo: #F5F240; bordo: 1px solido #F0D900; raggio del bordo: 10px 150px 30px 150px; )
Andare oltre le basi
In molti designer, tutta la conoscenza nel campo proprietà CSS confine, ecco dove finisce. Ma ce ne sono molti altri roba forte con cui puoi creare cose incredibili!
Strutture di confine CSS complesse
Esistono molte tecniche per progettare strutture di confine complesse. Si consideri ad esempio quanto segue...
stile del bordo
Utilizziamo sempre le proprietà solide, tratteggiate e tratteggiate più famose. Ma ci sono un paio di altre proprietà in stile bordo: scanalatura e cresta.
Bordo: scanalatura 20px #e3e3e3;
O con sintassi estesa:
colore del bordo: #e3e3e3; larghezza del bordo: 20px stile bordo: scanalatura;
Sebbene queste proprietà siano utili, non costituiscono la base per la creazione di frame complessi.
contorno
La tecnica più popolare per creare doppia cornice- utilizzando la proprietà outline.
Riquadro (bordo: 5px solido #292929; contorno: 5px solido #e3e3e3; )
Questo metodo funziona alla grande, anche se ci limita a solo due frame. A volte è necessario creare un bordo sfumato composto da molti livelli... come allora?
Pseudo elementi
Quando la tecnica del contorno non è sufficiente, mezzi alternativi consiste nell'usare gli pseudo elementi :before e :after. Con il quale puoi aggiungere ulteriori bordi all'elemento:
Riquadro (larghezza: 200px; altezza: 200px; sfondo: #e3e3e3; posizione: relativa; bordo: 10px verde pieno; ) /* Crea due riquadri con il stessa larghezza del contenitore */ .box:after, .box:before ( content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; ) .box:after ( bordo: 5px rosso fisso; contorno: 5px giallo fisso;) .box:before (bordo: 10px blu fisso;)
Non sembra molto elegante, ma almeno, Funziona. È un po' problematico affrontare la sequenza dei colori all'interno... ma si può capire.
Box Ombra
Un modo "infantile" interessante per creare questo effetto è utilizzare la proprietà box-shadow CSS3:
Box (bordo: 5px rosso fisso; box-ombra: 0 0 0 5px verde, 0 0 0 10px giallo, 0 0 0 15px arancione;)
In questo caso, siamo stati più intelligenti, utilizzando la proprietà box-shadow dedicata. Modificando i parametri x, y, sfocatura a zero, possiamo usare colori diversi per creare più fotogrammi.
Ma c'è un problema, nei browser meno recenti che non comprendono la proprietà box-shadow, sarà visibile solo un bordo rosso di 5px.
"Ricordare! Il design del sito dovrebbe apparire cross-browser, ovvero lo stesso in tutti i browser. Comprese le versioni precedenti.
Cambiare gli angoli
Oltre a quello utilizzato significato semplice border-radius, possiamo specificarne due separati - separandoli con / specificheremo il raggio orizzontale e verticale.
Per esempio:
Raggio bordo: 50px / 100px /* raggio orizzontale, raggio verticale */
... questo equivale a:
Raggio bordo in alto a sinistra: 50px 100px; bordo-alto-destra-raggio: 50px 100px; bordo-basso-destra-raggio: 50px 100px; bordo-basso-raggio-sinistra: 50px 100px;
Questa tecnica è adatta per creare forme di blocchi uniche. Ad esempio, ecco come creare un effetto carta incartata:
Riquadro (larghezza: 200px; altezza: 200px; sfondo: #666; raggio di confine in alto a sinistra: 15em 1em; raggio di confine in basso a destra: 15em 1em; )
Forme CSS usando il bordo
Questa tecnica mostra come creare moduli CSS utilizzando elementi con dimensioni di altezza e larghezza pari a zero. Sorpreso? Diamo un'occhiata ad un esempio...
Per i prossimi esempi, utilizzeremo il seguente markup:
...e il seguente stile di base:
Box (larghezza: 200px; altezza: 200px; sfondo: nero; )
Più esempio comune Utilizzo CSS forme - creando una freccia che scorre. Il segreto di questa freccia sta nel creare un confine con colori differenti per ogni lato. Quindi, mettiamo attributi di larghezza e altezza a 0.
Assegnato a blocco div classe freccia:
Freccia (larghezza: 0; altezza: 0; bordo superiore: 100 px rosso fisso; bordo destro: 100 px verde fisso; bordo inferiore: 100 px blu fisso; bordo sinistro: 100 px giallo fisso; )
Per dimostrare, utilizziamo prima la sintassi estesa. Successivamente, possiamo rimuovere codice extra, usando la sintassi abbreviata:
Freccia (larghezza: 0; altezza: 0; bordo: 100px solido; colore bordo: rosso verde blu giallo;)
Interessante, vero? Ora imposteremo colori trasparenti su tutti i lati tranne il lato blu.
Freccia (larghezza: 0; altezza: 0; bordo: 100px solido; colore bordo-fondo: blu; )
Ha funzionato alla grande! Ma questo contraddice disposizione semantica, crea un div .arrow, solo per aggiungere una freccia alla pagina. A questo scopo, possiamo usare pseudo-elementi, cosa che faremo ora.
Crea un fumetto
Per creare un fumetto, abbiamo bisogno di un piccolo pezzo puro CSS codice e un blocco div.
Speech-bubble ( posizione: relativa; colore di sfondo: #292929; larghezza: 200px; altezza: 150px; altezza della linea: 150px; /* centro verticalmente */ colore: bianco; allineamento testo: centro; )
Bolla vocale:dopo ( contenuto: ""; )
A questo punto creeremo la freccia che abbiamo fatto prima, la aggiungeremo all'elemento e non ci resta che posizionarla:
Speech-bubble:after ( contenuto: ""; posizione: assoluta; larghezza: 0; altezza: 0; bordo: 10px solido; colore bordo: rosso verde blu giallo; )
Se vogliamo che la freccia punti verso il basso, dovremo impostare tutti i bordi come trasparenti tranne quello in alto.
Speech-bubble:after ( contenuto: ""; posizione: assoluta; larghezza: 0; altezza: 0; bordo: 10px solido; colore bordo superiore: rosso; )
Quando creiamo questo modulo CSS, non possiamo specificare in modo specifico la dimensione della freccia. Invece, possiamo impostare la proprietà border-width, che imposterà la dimensione della freccia. Imposteremo anche la posizione della freccia in basso al centro. Di conseguenza, utilizziamo i valori in alto e a sinistra per questo.
Bolla vocale:dopo ( contenuto: ""; posizione: assoluta; larghezza: 0; altezza: 0; bordo: 15px solido; colore bordo superiore: rosso; alto: 100%; sinistra: 50%; )
Inoltre, resta a noi dare al colore lo stesso di quello del blocco. Ricorda, durante il posizionamento, devi tenere conto delle dimensioni degli altri bordi che sono invisibili (15px). Daremo anche l'arrotondamento del blocco agli angoli.
Speech-bubble ( /* ... altri stili */ border-radius: 10px; ) .speech-bubble:after ( contenuto: ""; posizione: assoluta; larghezza: 0; altezza: 0; bordo: 15px solido; bordo -top -color: #292929; top: 100%; left: 50%; margin-left: -15px; /* regola la larghezza del bordo */ )
Non male, eh? Usando alcune classi CSS e trucchi per i bordi, puoi creare una cosa del genere.
/* Utilizzo dei fumetti: applica la classe .speech-bubble e .speech-bubble-DIRECTION come mostrato di seguito
Bonus! Centratura verticale all'interno di un blocco
Per una singola riga di testo, è possibile utilizzare l'altezza della riga. Ma se ne hai due o più righe testo... soluzione migliore imposterà la proprietà di visualizzazione su tabella e metterà tutto il testo in un paragrafo. Ecco come appare markup html:
Speech-bubble ( /* altri stili */ display: tabella; ) .speech-bubble p ( display: table-cell; vertical-align: middle; )
Non siamo limitati ai triangoli. CSS è in grado di visualizzare forme diverse, persino cuori e un segnale di rischio biologico.
Rischio biologico ( larghezza: 0; altezza: 0; bordo: 60px solido; raggio-bordo: 50%; colore bordo-alto: nero; colore bordo-basso: nero; colore bordo-sinistra: giallo; bordo-destra- colore:giallo;)
