Membership index

NOTA: I download riservati ai membri possono essere effettuati anche senza registrazione con una piccola donazione a sostegno del sito.

Lista delle risorse scaricabili con donazione

Shadow

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.

NOTA: per provare i codici, puoi utilizzare l'HTML Editor.

ATTENZIONE: Non dimenticate di aggiungere i vendor prefixes ai codici css di base.

Box-shadow

Box-shadow generator

Preview + download


Box-shadow 3D effects

Preview + code


Box-shadow inset examples

Preview + code


Text-shadow

Text-shadow generator

Preview + download


Text-shadow 3D effects

Preview + code


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

Preview + code

15a-Backdrop mix-blend-mode method

15a-Metodo backdrop mix-blend-mode

Preview + download


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:
Apri codice:
<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%);
      /* for browsers not supporting 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">
  <!-- for browsers not supporting 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, 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 1, 2% diventa 0.02, 35% diventa 0.35 ecc.


Clip-path generator

Preview + download


Clip-path effects

Preview + code


Clip-path animations

Preview + code


Mask-image

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

Mask-image effects

Preview + code


Perspective

Transform perspective effets

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

Preview and code


Gradients

Gradients generator 2 colors

Preview + download


Gradients generator 3 colors

Preview + download


Gradient animation1

Preview + code


Gradient animation2

Preview + code


Post-it

Classic Post-it

Preview + code


Various effects

Effetti vari

15b-Overlapping images

15b-Immagini sovrapposte

Preview + download


Image with inset (overlapped) shadow using gradients or box-shadow

Immagine con ombra sovrapposta usando i gradienti, o box-shadow

Preview + code


Opaque title over semi-transparent image

Titolo opaco su immagine semi-trasparente

Download anche per versione con immagine di background

Preview + code


Titles with effects

Titoli con effetti

Preview + code


Zigzag

Preview + code


Book cover image generator

Generatore di un'immagine come cover di un libro

Preview + download


Split box

Box sdoppiato

Esempio:

split-box

Apri codice:
<style>
div {
  background: #000;
  height: 75px;
  width: 175px;
  position: relative;
}
div:after {
  content: '';
  background: transparent;
  border: 1px solid #000;
  top: 7px;
  right: 7px;
  bottom: -7px;
  left: -7px;
  position: absolute;
  z-index: -1;
}
</style>

<div></div>

triangles

Triangoli

Esempio:

split-box

Apri codice:
<style>
.triangle-top {
  width: 0;
  height: 0;
  border-bottom: 20px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
.triangle-down {
  width: 0;
  height: 0;
  border-top: 20px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
.triangle-left {
  width: 0;
  height: 0;
  border-right: 20px solid #333;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.triangle-right {
  width: 0;
  height: 0;
  border-left: 20px solid #333;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
</style>

<div class="triangle-top"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>

Membership index


Argomenti del sito correlati:
Leggi tutto