Membership index

NOTE: NOTA: Downloads reserved for members can also be made without registration with a free donation in support of the site. I download riservati ai membri possono essere effettuati anche senza registrazione con una donazione libera in sostegno del sito.

List of downloadable sresources with donationLista delle risorse scaricabili con donazione

Shadow


Shadows are used to create pleasant 3D effects and to give the impression of depth.

The values attributed to the rules are in pixels and composed in this way:

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;

Which correspond to:

Che corrispondono a:

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

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

Which correspond to:

Che corrispondono a:

horizontal offset - vertical offset -  blur-radius - color

The positive horizontal offset moves the shadow to the right, the negative horizontal offset moves the shadow to the left.
The positive vertical offset moves the shadow downwards, the negative vertical offset moves the shadow upwards.
By setting both the horizontal and vertical values to 0, the shadow will be uniform on all sides.
With the blur set to 0, the shadow is sharp, the higher the number, the more blurred it will be and the shadow will extend.
Positive spread values (optional) increase the width of the shadow, negative values decrease it. The default is 0.
The color accepts any value (hex, name, rgb, rgba, hsla). If the value is omitted the shadow will have the color of the page text.

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. NOTE: to test the codes you can use the HTML Editor.

ATTENTION: Don't forget to add the vendor prefixes to the css basic codes.

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


Classic examples:

Esempi classici:


Title with shadow on the left: Titolo con ombra a dx:
text-shadow: 2px 2px 4px #000000;

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

Title with sharp shadow (edge effect): Titolo con ombra netta (effetto bordo):
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

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

Title with background image

Titolo con sfondo immagine

Titles with letters that have an image in the background. 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:

The "clip-path" rules allow you to apply geometric shapes to elements. Le regole "clip-path" permettono di applicare forme geometriche agli elementi.
Browser support
The clip-path rule is not supported by all browsers. In unsupported browsers, the item will still be displayed, but in its original form. To work around this problem, you can complete the rule using svg like in this example: 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%);
      /* 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>

The values marked in red are equivalent in the style rules, but in the html code, under the heading "polygon points", contained in svg, they lose the percentage symbol and are all divided by 100.
Example: 50% becomes 0.5, 100% becomes 2% becomes 0.02, 35% becomes 0.35 etc.
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

The mask-image rule allows you to create gradients on images or parts of them. La regola mask-image permette di creare sfumature su immagini o parti di esse.

Mask-image effects

Preview + code


Perspective

Transform perspective effets

The transform perspective rule allows you to apply perspective to elements. 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 also for version with background image 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

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

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: