Con Cappuccio Asics Sportler Blu Giacca Seamless Fitness Donna nkXw80OP
Con Cappuccio Asics Sportler Blu Giacca Seamless Fitness Donna nkXw80OP
Con Cappuccio Asics Sportler Blu Giacca Seamless Fitness Donna nkXw80OP
Con Cappuccio Asics Sportler Blu Giacca Seamless Fitness Donna nkXw80OP

La css3, con il passare degli anni, offre, ai web designer, sempre più proprietà per creare grafiche particolari e con effetti più ricercati, in questo articolo vediamo le proprietà text-shadow e box-shadow

Prima dell’introduzione della css3, le nostre sezioni ed elementi avevano un livello di customizzazione più limitato, e per dare un pò più di ‘anima’ agli elementi d’interfaccia, ci si affidava a colori pesanti e ad immagini di texture che disturbavano l’occhio dell’utente; ma con l’introduzione di nuove proprietà, ora si può avere a disposizione molte alternative per personalizzare i box ed altri elementi dell’interfaccia, creando grafiche piatte ma eleganti senza utilizzare texture in stile anni 80.
Due di queste proprietà sono il box-shadow ed il text-shadow, che permettono di aggiungere un’ombreggiatura, il box-shadow è utilizzabile, come dice la parola, nei div, nelle section, invece il text-shadow è utilizzabile per dare un’ombreggiatura al nostro testo, che può essere anche all’interno del box.

Comincio dicendo di aprire un file html ed inserire un div o una section all’interno della nostra pagina, per cominciare a lavorare sul box-shadow:

SaldoCollezione Primavera 2019 Scarpe Alexander Mcqueen In Uomo rshxQdtC
<div id="3ZwtcO6Fj-diH">
  <h4>Box with css shadow</h4>
</div>

Così, si è inserito un div a cui, successivamente, andremo a dare la proprietà box-shadow nel nostro file css; che è gestita inserendo sei valori principali:

  • Il primo valore corrisponde al posizionamento dell’ombra rispetto all’asse orizzontale; inserendo un valore positivo avremo un’ombra più spostata sulla destra, al contrario, inserendo un valore negativo, l’ombra sarà spostata più sulla sinistra
  • Il secondo valore corrisponde al posizione dell’ombra rispetto all’asse verticale, inserendo una valore positivo avremo un’ombra più spostata verso il lato superiore del box, al contrario, avremo un’ombra posizionata verso il lato inferiore del box.
  • il terzo valore serve per personalizzare il blur della nostra ombreggiatura, cioè la sfocatura.
  • Il quarto valore corrisponde allo spread della nostra ombreggiatura, cioè alla grandezza dello spazio che occuperà, aggiungendo un valore numerico negativo avremo un’ombra che occuperà uno spazio piccolo, viceversa, aggiungendo un valore numerico positivo avremo un’ombra che occuperà più spazio
  • L’ultimo valore da inserire è il colore della nostra ombra, è un valore che è opzionale, infatti tralasciandolo, la nostra ombra verrà renderizzata di colore nero.
#section-with-shadow{
   box-shadow: 5px 3px 8px 2px #606060;
}

L’esempio precedente, fa vedere una sintassi corretta del nostro, aggiungendo queste poche righe di codice avremo un box con um’ombreggiatura posizionata leggermente più a destra ma dalle dimensioni ridotte e con colore grigio scuro; consiglio sempre di farne un’uso sapiente delle ombreggiature, in modo tale da non creare delle ombre che danno fastidio e che invece di abbellire l’elemento, lo sminuiscono.

Come ultimo concetto basilare sulla box-shadow, introduco un’ultimo valore che possiamo inserire che è quello che può determinare se la nostra ombreggiatura sarà interna o esterna al box, lo si fa inserendo, prima del valore del colore; la parola ‘inset’ in caso si voglia che l’ombreggiatura sia interna al box; così facendo, sembrerà che il nostro box abbia un’effetto leggermente ‘scavato’; è un valore che s’inserisce in pochi casi, ma che mi è parso giusto intrrodurre per avere una panoramica di tutte le proprietà.

Invece, come anticipato nelle righe all’inizio dell’articolo, le text shadow vanno inserite sugli elementi testuali della nostra pagina, per dare un’esempio sulla text-shdow, uso lo stesso box che ho usato per il box-shadow, quindi avremo un box con un’ombreggiatura che al suo interno avrà un testo, anch’esso con un’ombra.

Fashion Designer Shop Designer OnlineKture Gmbh Shop Gmbh Fashion b6gfy7

La proprietà text-shadow, a diferrenza del box-shadow, ha meno valori da inserire per la gestione dei posizionamento e delle sfocature, e sono i seguenti:

  • Il primo valore è per la gestione del posizionamento dell’ombra sull’asse orizzontale, se s’inserisce un valore numerico positivo, l’ombra sarà posizionata più sul lato destro, al contrario, con un valore numerico positivo, sarà posizionata più sul lato sinistro della scritta
  • Il secondo valore permette di gestire il posizionamento dell’ombreggiatura rispetto l’asse verticale, se s’inserisce un valore numerico positivo, l’ombra sarà posizionata verso il lato superiore della nostra scritta, al contrario, con un valore numerico negativo, sarà posizionata verso il lato inferiore della scritta.
  • Il terzo valore è quello che gestisce il raggio di sfocatura, cioè quanto sarà sfocata la nostra text-shadow.
  • L’ultimo valore gestirà, come nel box-shadow, il colore della nostra ombra; tralasciando l’inserimento di questo valore, l’mbreggiatura, di default, avrà un colore nero.

Come esempio di text shadow, useremo il box html, precedentemente usato per il box-shadow; quindi vediamo di come aggiungere un’ombreggiatura al testo del box, che in questo è un titolo h4:

#section-with-shadow h4 {
    text-shadow: 2px 2px 5px #606060;

}

Con Cappuccio Asics Sportler Blu Giacca Seamless Fitness Donna nkXw80OP

In questo caso nei selettori css abbiamo inserito anche l’elemento html del box, nel caso in cui si voglia tenere l’ombreggiatura solo sul nostro titolo; ma se invece volessimo usare il text-shadow su tutte le scritte del box, basterà con i selettori css determinare  il text-shadow su tutto il box.

Per il text-shadow, consiglio di non usare valori numeri bassi per la gestione dell’ombreggiatura, per non trovarci una scritta che ha un’ombra che disturba la leggibilità della scritta, quindi stare attenti ai valori da inserire, a meno che si voglia ottenere un’effetto grafico particolare, come vedremo sucessivamente

Effetto 3D  con il text-shadow

Con il text shadow, abbiamo detto che ci sono dei parametri predefiniti per manipolare l’ombreggiatura degli elementi tipografici; con essi si può ‘giocare’ e sperimentare inserendo due righe  separate da una virgola con i valori citati precedentemente, e vedremo che la nostra scritta comincerà ad avere un aspetto tridimensionale.Cappotti Piumino Farfetch Blu Neri Reversibile Colore Herno cFKu13TJl

#section-with-shadow{
  text-shadow: 0 1px 0 #606060,
               0 2px 0 #c9c9c9,     
}

Queste due righe di codice insrrite, danno una text-shadow più chiara che è la prima sotto la scrittà e che darà l’effetto rialzato, con la seconda invece sta più sotto e darà più l’effetto di rilievo; ora continuando a inserire altre righe con i valori predefiniti, vedremo che la scritta aumenterà la sua tridimensionalità.

#box-with-shadow h4 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 12px rgba(0,0,0,.1);
}

Nelle righe finali, viene settato il colore con rgba, per settare al meglio l’opacità dei colori che stanno più sotto; per questo effetto consiglio di usare dei font più in grassrtto, in maniera da risaltare un pò di più la tridimensionalità, sui font più light l’effetto ha un resa peggiore.

Bottone con ombra in hover

Come per il text-shadow, anche con i box-shadow si può lavorare per ottenere degli effetti tridimensionali interessanti, un’esempio lampante potrebbe essere un’ombra esterna di un bottone che scompare quando l’utente sta cliccando su di esso.
Inanzittutto bisogna inserire il bottone nel file html, quindi commentando il box degli esempi precedenti, bisogna inserire il bottone nel nostro file:

<button class="rE1gtV7u8NozG">click me</button>

poi successivamente, andiamo sul file css e inseriamo il codice che darà l’ombreggiatura al bottone

 .button-with-shadow {
   padding:15px;
   border:none;
   border-radius:10px;
   text-align:center;
   background-color:#1BBC9B;
   box-shadow: 0 4px #999;
}

Ora il nostro bottone ha dei bordi arrotondati con un’ombreggiatura che lo fa sembrare leggermente elevato rispetto alla pagina, con ila proprietà transform andremo a spostare il bottone più in basso di qualche pixel; infine con lo pseudo selettore CSS  :active, andremo a togliere l’ombreggiatura per far sembrare che il bottone sia stato schiacciato:Donna Stileo Giacche PradaCollezione it 2019 Primavera rdBCeQExoW

.button:active {
  transform: translateY(3px);
  box-shadow:none;
}

Conclusioni

Con questo articolo ho elencato le varie opzioni di gestione dell’ombra, e ho portato due esempi che illustrano le potenzialità di questa proprietà, che con poche righe può veramente creare dei buoni effetti grafici: ovviamente si possono creare altri effetti, basta solo studiare e provare a giocare con il posizionamento delle ombre.

SoInfradito Sanuk E itScarpe UomoAmazon Fraid Borse QCxeWrdBoE

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

A Orlo Righe Volant Con Farfetch Msgm Camicia dorCexB

Con Cappuccio Asics Sportler Blu Giacca Seamless Fitness Donna nkXw80OP

Con Cappuccio Asics Sportler Blu Giacca Seamless Fitness Donna nkXw80OP

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Con Cappuccio Asics Sportler Blu Giacca Seamless Fitness Donna nkXw80OP