le formule magiche

Grafica

Graphics

NOTA: le risorse sono accessibili solo ai membri

Non sei ancora membro? Guarda questa Breve anteprima video


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

Box-shadow effetti 3D


Text-shadow:

Text-shadow generator

Text-shadow effetti 3D


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;

Text-fill-color

La regola text-fill-color associata ad una immagine di background permette di ottenere l'effetto di un titolo con lettere trasparenti con lo sfondo di un'immagine.

Text-fill-color on background image


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

Clip-path effetti

Clip-path animation - rassegna


Mask-image

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

Mask-image effetti


Perspective

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

Transform perspective effetti


Gradients

Gradient generator 2 colors

Gradient generator 3 colors

Gradient animation1

Gradient animation2


Overlapping images - immagini sovrapposte

Overlapping images


Post-it

Post-it classico

Post-it transform

Post-it transform rotate


Testo opaco su immagine semi-trasparente

Esci dalla membership

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: