le formule magiche

Graphics

Grafica

NOTA: i codici sono accessibili solo per i membri


Sommario:

Shadow



"Shadow" è l'ombra che può essere messa intorno ad un contenitore, o ad una immagine, oppure intorno ai caratteri che compongono un testo.
Le ombre servono per creare piacevoli effetti 3D e per dare l'impressione di profondità.

I valori attribuiti alle regole sono in pixel e composti in questo modo:

 box-shadow: 3px 3px 5px 6px #ccc;

Che corrispondono a:

horizontal offset - vertical offset - blur radius - spread radius (optional) - color;

 text-shadow: 3px 3px 5px #ccc;

Che corrispondono a:

horizontal offset - vertical offset -  blur-radius - color

L'offset orizzontale positivo sposta l'ombra sulla destra, l'offset orizzontale negativo sposta l'ombra sulla sinistra.
L'offset verticale positivo sposta l'ombra verso il basso, l'offset verticale negativo sposta l'ombra verso l'alto.
Impostando a 0 sia il valore orizzontale che il valore verticale, l'ombra sarà uniforme su tutti i lati.
Con il blur impostato su 0, l'ombra è nitida, più alto è il numero, più sarà sfocato e l'ombra si estenderà.
I valori positivi dello spread (opzionale) aumentano la larghezza dell'ombra, i valori negativi la diminuiscono. L'impostazione predefinita è 0.
Il colore accetta qualsiasi valore (hex, nome, rgb, rgba, hsla). Se il valore viene omesso l'ombra avrà il colore del testo della pagina.


Box-shadow

Box-shadow generator

Anteprima

Anteprima + codici (member only)


Box-shadow 3D effects

Anteprima

Anteprima + codici (member only)


Text-shadow

Text-shadow generator

Anteprima

Anteprima + codici (member only)


Text-shadow 3D effects

Anteprima

Anteprima + codici (member only)


Esempi classici:


Titolo con ombra a dx:
text-shadow: 2px 2px 4px #000000;

Titolo con ombra diffusa:
text-shadow: 0 1px 5px rgb(0, 0, 0);

Titolo con ombra netta (effetto bordo):
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Titolo fosforescente:
text-shadow: 0 0 150px #66ff33, 0 0 60px #66ff33, 0 0 10px #66ff33;

Title with background image

Titolo con sfondo immagine

Titoli con le lettere che hanno un'immagine in background.

Text-fill-color method

Metodo text-fill-color

Anteprima

Anteprima + codice (member only)

Mix-blend-mode method

Metodo mix-blend-mode

Anteprima

Anteprima + codice (member only)


Clip-path:

Le regole "clip-path" permettono di applicare forme geometriche agli elementi. Browser support
La regola clip-path non è supportata da tutti i browser. Nei browser non supportati, l'elemento sarà ugualmente visualizzato, ma con la sua forma originale. Per ovviare a questo problema, è possibile completare la regola utilizzando svg come in questo esempio:
<style>
    .element {
      -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      /* per browser che non supportano clip-path */
      -webkit-clip-path: url("#clip-shape");
      clip-path: url("#clip-shape");
    }
</style>

<img src="https://www.lachiavenelpozzo.com/membership/grafica/img-02.jpg" alt="demo-clip-css" class="element">
  <!-- per browser che non supportano clip-path -->
<svg class="clip-svg" width="0" height="0">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox" >
      <polygon points="0.5 0, 0.61 0.35, 0.98 0.35, 0.68 0.57, 0.79 0.91, 0.5 0.7, 0.21 0.91, 0.32 0.57, 0.02 0.35, 0.39 0.35" />
      </clipPath>
  </defs>
</svg>

I valori segnati in rosso sono equivalenti nelle regole di stile e nel codice html, ma nel codice html, alla voce "polygon points", contenuta in svg, perdono il simbolo di percentuale e vengono divisi tutti per 100.
Esempio: 50% diventa 0.5, 100% diventa 2% diventa 0.02, 35% diventa 0.35 ecc.


Clip-path generator

Anteprima

Anteprima + codici (member only)


Clip-path effects

Anteprima

Anteprima + codici (member only)


Clip-path animations

Anteprima

Anteprima + codici (member only)


Mask-image

La regola mask-image permette di creare sfumature su immagini o parti di esse

Mask-image effects

Anteprima

Anteprima + codici (member only)


Perspective

Transform perspective effets

La regola transform perspective permette di applicare la prospettiva agli elementi.

Anteprima

Anteprima + codici (member only)


Gradients

Gradients generator 2 colors

Anteprima

Anteprima + codici (member only)


Gradients generator 3 colors

Anteprima

Anteprima + codici (member only)


Gradient animation1

Anteprima

Anteprima + codici (member only)


Gradient animation2

Anteprima

Anteprima + codici (member only)


Post-it

Classic Post-it

Anteprima

Anteprima + codice (member only)


Post-it transform

Anteprima

Anteprima + codice (member only)


Post-it transform rotate

Anteprima

Anteprima + codice (member only)


Various effects

Effetti vari

Overlapping images

Immagini sovrapposte

Anteprima

Anteprima + codice (member only)


Opaque title over semi-transparent image

Titolo opaco su immagine semi-trasparente

Anteprima

Anteprima + codice (member only)


Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 

Modulo di contatto per i membri

Argomenti del sito correlati: