Questa è una raccolta di alcuni stili di base che possono tornare utili quando si creano le proprie definizioni di stile. Imparare a fare alcune classi utili per gli stili semplici e come applicarle a una varietà di elementi.
Oggi ci accingiamo a scavare un po’ di più nel processo di sviluppo. Quando si crea un sito web o un’applicazione da zero, potrebbe essere necessario un collezione di modelli che aiutano voi costruendo cosa in su.
Questo è il punto di tutorial di oggi. Solo per voi, ho sfornato un piccola suite di frammenti di CSS di base, pronto per l’uso!
Prima di proseguire, mi permetta di spiegare a voi come ho costruito questo in su. Ho cercato di classificare le cose in base al loro tipo. In modo da avere alcuni miglioramenti per gli elementi a livello di blocco, per i collegamenti, per gli ingressi, testo normale, e così via.
Il mio punto è stato anche di concentrarsi sulla riutilizzabilità, è per questo che ho usato le classi. Gli stili non sono direttamente applicati ad un elemento, ma ad una classe con un nome non-so-semantica, che possono essere usate e riutilizzate.
È inoltre possibile creare classi di classi di cose personalizzate in base alle proprie esigenze. Potrebbe apparire come segue:
.my-class {
/* My awesome styles here */
}
.my-class.custom {
/* Specific styles to .my-class only if it only has the .custom class */
}
In questo modo la classe .custom di per sé non ha alcun punto, ma se lo si applica ad un elemento .il mio classe, è possibile modificare un po ‘gli stili .il mio classe. Capisci cosa intendo?
Ora è venuta l’idea di base, diamo uno sguardo a quei modelli, a partire dagli elementi di blocco.
Si noti che non ci sono prefissi specifici vendor in questo tutorial, ma si possono trovare gli stili prefissati nel CSS.
Elementi a livello di <div>
Si sta creando una galleria di immagini e vuole dare alcuni stili sottili alle immagini? Si sta progettando un modello per i vostri articoli sul tuo blog e vuole sottolineare il piccolo blocco “da parte”? Si sta costruendo il vostro curriculum e vuole fare questa piccola foto si guarda più bello? Ci si va ai miei amici.
il markup
Per tutta questa sezione, ho preso un una divisione con la “a livello di blocco” di classe e aggiunto le classi aggiuntive ad esso. Si potrebbe ovviamente farlo su più o meno quello che volete fintanto che si tratta di un elemento a livello di blocco. Se hai intenzione di applicare uno di quegli stili su un’immagine, assicurarsi di impostare display: blockad esso.
<div class="block-level"></div>
Il CSS di base
Per la demo, ho applicato alcune righe di CSS per il mio piccolo div:
.block-level {
width: 120px;
height: 120px;
margin: 20px;
position: relative;
float: left;
}
Troverete alcuni più stili per il tipo di carattere, ma questo è solo per la demo, concentriamoci sugli stili principali.
Ombre
Uno dei modo più semplice per dare un po profondità ad un elemento di blocco è quello di applicare una piccola ombra ad esso. Tuttavia, le ombre sono pericolosi: possono rovinare il vostro disegno con facilità. Se non mi credete, basta dare un’occhiata a quelle ombre sul “Nuovo eBay” .
L’idea alla base di questo è che invia un poco e ombra sottile di un elemento di blocco. Non una grande ombra di grasso nero che lo fa apparire come “HEY SONO QUI!”. Qualcosa di tranquillo.
.drop-shadow {
background: #9479fa;
}
.drop-shadow.top {
box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4)
}
.drop-shadow.right {
box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4)
}
.drop-shadow.bottom {
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4)
}
.drop-shadow.left {
box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4)
}
Guardate come usiamo un valore differenziale negativo al fine di dare un po ‘di profondità al ombra. Sembra modo più realistico in questo modo a mio modesto parere.
Nota: il colore utilizzato nella dichiarazione box-shadow possono variare a seconda del background-color del vostro elemento. L’accenditore della scatola, l’accendino l’ombra deve essere al fine di mantenere un contrasto accettabile.
Nota: non sarà in grado di aggiungere più classi di direzione sullo stesso elemento. Quest’ultimo ignorare gli altri. Se desiderate una casella per avere più di un ombra, è sufficiente creare un multiplo ombra scatola.
Quei 4 esempi mirano a sottolineare il contenuto con un bagliore esterno, bianco o nero, offuscata o meno offuscata, a seconda di ciò che si vuole e più importante sullo sfondo nella casella (tinta unita, texture, immagini, ecc).
div[class*="emphasize-"] {
background: #69D2E7;
}
.emphasize-dark {
box-shadow: 0 0 5px 2px rgba(0,0,0,.35)
}
.emphasize-light {
box-shadow: 0 0 0 10px rgba(255,255,255,.25)
}
.emphasize-inset {
box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5)
}
.emphasize-border {
box-shadow: inset 0 0 0 7px rgba(255,255,255,.5)
}
Ultimo ma non meno importante quando si tratta di ombre, due effetti in rilievo. Il primo è abbastanza sottile su quanto si applica solo una piccola riflessione della luce sulla parte superiore di un oggetto, e la seconda è più complesso. Sembra particolarmente bene su elementi cerchio, come pulsanti.
div[class*="embossed"] {
background: #8ec12d;
color: #333;
text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}
.embossed-light {
border: 1px solid rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.embossed-heavy {
border: 1px solid rgba(0,0,0,0.05);
box-shadow:
inset 0 2px 3px rgba(255,255,255,0.3),
inset 0 -2px 3px rgba(0,0,0,0.3),
0 1px 1px rgba(255,255,255,0.9);
}
Sfumature
A volte, si consiglia di applicare una sfumatura morbida ad un elemento al fine di dargli un po’ di sollievo. L’idea era quella di dare una sfumatura che non si deve cambiare se si cambia il colore di sfondo / immagine.
div[class*="gradient"]{
background-color: #DEB8A0;
box-shadow: 0 0 0 1px #a27b62;
}
.gradient-light-linear {
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}
.gradient-dark-linear {
background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
}
In sostanza, si basa sull’applicazione di un trasparente per strato più trasparente sopra il vostro roba, come si farebbe su Photoshop per esempio. Abbastanza semplice.
Si prega di notare che i gradienti potrebbero non funzionare in alcuni browser (ad esempio, IE9), dovrete dare una sorta di fallback per loro.
Va bene, così che era la parte facile. Ora, cerchiamo di trattare con gradienti radiali. Si desidera aggiungere alcuni effetti di luce dolce al vostro elementi di blocco, giusto? Quindi è necessario gradienti radiali. In primo luogo, il modo più semplice per i browser supportati.
.gradient-light-radial {
background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
}
.gradient-dark-radial {
background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
}
Tranne il fatto che devo controllare la sintassi ogni volta che voglio fare un gradiente radiale, era abbastanza semplice. Giusto?
Angoli arrotondati
Avete notato, abbiamo combattuto per anni per avere un border-radius senza prefisso in tutti i principali browser e ora che li abbiamo, la tendenza vuole sbarazzarsi di ogni angolo arrotondato? Questo è l’ironia.
A seconda del modello, angoli acuti può essere bello o molto dannoso. In ogni caso, si consiglia di aggiungere border-radius a un gruppo di elementi. Anche quelli piccoli. Così ho creato alcune classi per questo.
div[class*="rounded"] {
background: #fca1cc;
}
.light-rounded {
border-radius: 3px;
}
.heavy-rounded {
border-radius: 8px;
}
.full-rounded {
border-radius: 50%;
}
.barrel-rounded {
border-radius: 20px/60px;
}
La mia teoria sulla border-radius (a seconda delle dimensioni dell’elemento):
- A 0px, si dispone di angoli acuti. Storia vera.
- Tra 1 e 4px, si dispone di angoli arrotondati sottili. La maggior parte delle persone non sarà in grado di dire angoli sono arrotondati, ma non avranno l’impressione di “coltello affilato”.
- Tra il 5 e 10px, si dispone di angoli arrotondati. Non più, non di meno. A seconda del modello, si può guardare molto a buon mercato, o assolutamente incantevole.
- Dopo 10px, avete -in miei opinion angoli arrotondati brutti. Sembra che si sta cercando di ricreare il “facciamo perché possiamo” cosa del passato. Inoltre, come ho già detto, la tendenza non è molto in angoli arrotondati più.
Ci sono due valori che si dovrebbero ricordare quando si utilizza la proprietà border-radius:
border-radius: 50%disegna un cerchio perfetto fino a quando si ha a che fare con un quadrato. Se si tratta di un rettangolo, poi si piega in un ellisse.- Per conseguire icona-come border-radius, il rapporto ideale è 6.4 secondo questo tweet da Nina Giorgieva . Quindi, se si dispone di un quadrato di 100 * 100px e vuole trasformarlo in un’icona, si dovrebbe applicare
16px border-radius(100 / 6,4 = 15.625).
link
Abbiamo finito con elementi di blocco miglioramenti. Parliamo di collegamenti. I link sono assolutamente ovunque. Dalla navigazione per i collegamenti esterni, passando per il pulsante per i social network e gli ancoraggi, i collegamenti si affollano ogni sito web.
D’ora in poi, facciamo una differenza tra i collegamenti in linea e collegamenti di blocco. i collegamenti in linea sono per lo più ancore dalla pagina corrente a un’altra pagina da qualche parte sul web. i collegamenti di blocco sono un po ‘più polivalente: pulsanti, menu nav, etc.
il markup
Potreste aver capito già. Per questa sezione avremo bisogno di due contesti diversi: una frase con un link per il caso inline-collegamento e un collegamento semplice per il caso del blocco-link. Io uso un tag di ancoraggio per quest’ultimo, ma si potrebbe utilizzare un ingresso o di un pulsante di invio pure.
This is some dummy text to show an <a href="#">inline link</a>.
<a href="#">Link</a>
Inline links
Ho cercato di stare il più lontano possibile dalla sottolineatura solido predefinito e il colore che cambia al passaggio del mouse. Ho cercato di essere un po ‘più creativo per fare qualcosa di fresco. E’ figo vero?
.inline-link-1 {
display: inline-block;
margin: 0 0.2em;
padding: 3px;
background: #97CAF2;
border-radius: 2px;
transition: all 0.3s ease-out;
/* Font styles */
text-decoration: none;
font-weight: bold;
color: white;
}
.inline-link-1:hover {
background: #53A7EA
}
.inline-link-1:active {
background: #C4E1F8
}
.inline-link-1:visited {
background: #F2BF97
}
Importante : non dimenticare di aggiungere uno stato visitato per collegamenti in linea. Ad alcune persone piace sapere che cosa collega che hanno vissuto durante la lettura di un sito. Qui, ho applicato una rotazione di 180 ° alla ruota tonalità di colore; Mi piace questo per fare davvero la differenza tra i link di default e link visitati.
Questo esempio è molto efficace se si vuole veramente i collegamenti in linea per essere visto. Direi che dipende dalla vostra scelta progettuale: alcune persone vogliono link di essere molto discreti, altri vogliono renderli abbastanza grande da innescare call-to-action. La tua scelta.
Questo è stato l’esempio “pesante”. Vediamo qualcosa di più leggero, per lo più in base agli stili di collegamento di default.
.inline-link-2 {
display: inline-block;
border-bottom: 2px dashed rgba(0,0,0,0.9);
/* Font styles */
text-decoration: none;
color: #777;
}
.inline-link-2:hover {
border-bottom-style: dotted;
}
.inline-link-2:active {
border-bottom-style: solid;
}
.inline-link-2:visited {
border-bottom: 2px solid #97CAF2;
}
L’idea è quella di avere una linea tratteggiata come uno stato predefinito. Quando si passa il collegamento, la linea diventa tratteggiata e, infine, quando si fa clic, è una sottolineatura solida.
Ultima idea, coinvolgendo un pseudo-elemento per creare una piccola freccia prima che il collegamento. Si potrebbe pensare ad esso come un modo per mostrare all’utente il link lascia il sito web, o qualcosa del genere.
.inline-link-3 {
display: inline-block;
position: relative;
padding-left: 6px;
/* Font styles */
text-decoration: none;
color: #6AB3EC;
text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}
.inline-link-3:hover {
color: #3C9CE7;
}
.inline-link-3:before {
content: "25BA";
font-size: 80%;
display: inline-block;
padding-right: 3px;
pointer-events: none;
}
.inline-link-3:hover:before {
color: #F2BF97;
}
Block links
Ora, diamo uno sguardo a collegamenti a livello di blocco. Nella maggior parte dei casi, quando l’utente può interagire con il tuo sito o applicazione, si tratta di un pulsante. Invia un commento, andare alla pagina successiva, il login, e molti altri. Qualunque sia il tipo di elemento che si sta utilizzando per questo ( <a>, <input type="submit">, <button>, ecc), si consiglia di applicare alcuni stili ordinate ad esso per attirare l’utente.
Il primo esempio è molto semplice. Tuttavia, in alcuni disegni, in grado di adattarsi molto bene. Sto pensando di Windows 8, ovviamente. 😉
.metro {
display: inline-block;
padding: 10px;
margin: 10px;
background: #08C;
/* Font styles */
color: white;
font-weight: bold;
text-decoration: none;
}
.metro:hover {
background: #0AF
}
Va bene, teniamoci la stessa base ma con qualche effetto 3D! Si potrebbe riconoscere questo dal nuovo design del CSS-Tricks. Ci sarà anche utilizzare una classe figlia per questo.
.metro.three-d {
position: relative;
box-shadow:
1px 1px #53A7EA,
2px 2px #53A7EA,
3px 3px #53A7EA;
transition: all 0.1s ease-in;
}
.metro.three-d:active {
box-shadow: none;
top: 3px;
left: 3px;
}
Non sembra bello? Soprattutto stato attivo, giusto? Va bene, basta con il tema della metropolitana.
Proviamo qualcosa di più leggero. Questo è trasparente con un bordo spesso e ombra sottile.
.bordered-link {
display: inline-block;
padding: 8px;
border: 3px solid #FCB326;
border-radius: 6px;
box-shadow:
0 2px 1px rgba(0, 0, 0, 0.2),
inset 0 2px 1px rgba(0, 0, 0, 0.2);
/* Font styles */
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
color: #222;
}
.bordered-link:hover {
border-color: #FDD68B
}
.bordered-link:active {
border-color: #FEE8BD
}
Creiamo qualcosa di un po ‘più interessante.
.modern {
display: inline-block;
margin: 10px;
padding: 8px 15px;
background: #B8ED01;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
transition: all 0.3s ease-out;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2);
/* Font styles */
text-decoration: none;
text-shadow: 0 1px rgba(255,255,255,0.7);
}
.modern:hover {
background: #C7FE0A
}
Possiamo anche aggiungere alcuni box-ombra più complessi con la seguente classe:
.embossed-link {
box-shadow:
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.17),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2),
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.15),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1), 0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link:active {
box-shadow:
inset 0 -2px 1px rgba(255,255,255,0.2),
inset 0 3px 2px rgba(0,0,0,0.12);
}
Ultimo, ma non meno importante, una classe aggiunta di un pseudo-elemento per far sembrare come se il pulsante è una parte dello sfondo.
.socle {
position: relative;
z-index: 2;
}
.socle:after {
content: "";
z-index: -1;
position: absolute;
border-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.1),
inset 0 -1px 0 rgba(255,255,255,0.7);
top: -6px;
bottom: -6px;
right: -6px;
left: -6px;
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}
Si consiglia di modificare il valore del border-radius per soddisfare le vostre esigenze. A seconda del border-radius del pulsante, può sembrare strano.
Questo è tutto più o meno con i collegamenti, ma ora è possibile creare la propria classe per dare alcuni stili di base per le ancore.
input
Come ho detto nel mio precedente tutorial, le forme sono più o meno in tutto il web, e così sono ingressi. Particolarmente ingressi di testo. Purtroppo, gli stili di default per gli ingressi sono piuttosto brutto. Sono sicuro che possiamo fare di meglio!
il markup
<input type="text" placeholder="Input name">
il CSS
Cominciamo con qualcosa di molto semplice: la sostituzione del bordo predefinito e l’aggiunta di un raggio di confine.
.simple-input {
display: block;
padding: 5px;
border: 4px solid #F1B720;
border-radius: 5px;
color: #333;
transition: all 0.3s ease-out;
}
.simple-input:hover {
border-radius: 8px
}
.simple-input:focus {
outline: none;
border-radius: 8px;
border-color: #EBD292;
}
Gli input sono tipo di elementi strani, ecco abbiamo deciso loro di display: block;rendere le cose più facili. Sono lì per dare un pò di spazio al contenuto.
Hai mai voluto replicare ingressi iOS?
.mac {
display: block;
border: none;
border-radius: 20px;
padding: 5px 8px;
color: #333;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1);
}
.mac:focus {
outline: none;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1),
0 0 5px 1px #51CBEE;
}
Proviamo qualcosa con un gradiente come sfondo e alcuni box inserto ombra.
.depth {
display: block;
border: 1px solid rgba(255,255,255,0.6);
background: linear-gradient(#eee, #fff);
transition: all 0.3s ease-out;
box-shadow:
inset 0 1px 4px rgba(0,0,0,0.4);
padding: 5px;
color: #555;
}
.depth:focus {
outline: none;
background-position: 0 -1.7em;
}
Come ultimo esempio, qualcosa di un po ‘più originale. Non una scatola, solo una linea. Si potrebbe infine Coppia questo con un carattere dolce, e si dispone di un modulo bello!
.line {
display: block;
border: none;
color: #333;
background: transparent;
border-bottom: 1px dotted black;
padding: 5px 2px 0 2px;
}
.line:focus {
outline: none;
border-color: #51CBEE;
}
Considerazioni finali
Progettare fuori dal contesto è difficile. Ma avere questo tipo di “classi pre-costruiti” sono un enorme risparmio di tempo in cui si sta creando un sito web o e l’applicazione, soprattutto quando non sei un ninja CSS.
L’idea principale è semplicemente quello di avere quelle classi nel tuo foglio di stile (o in un file specifico, se si sta utilizzando un pre-processore) e di chiamarli facilmente quando si genera il markup. O semplicemente copiare gli stili che è necessario per lo stile qualcosa in fretta.
Ultimo, posso solo incoraggiare per creare le proprie classi di design, atto a soddisfare i vostri gusti, si adattano alle vostre esigenze. Prendete un paio di ore per costruire una sorta di kit di interfaccia utente, sarà davvero risparmiare tempo durante il processo di progettazione. Ti ringrazio te, fidati di me. 😉
Grazie per aver letto questo tutorial. E come sempre, se avete domande basta chiedere, o se hai le proprie classi per mostrare, si prega di fare!