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
Box-shadow 3D effects
Box-shadow inset examples
Text-shadow
Text-shadow generator
Text-shadow 3D effects
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
15a-Backdrop mix-blend-mode method
15a-Metodo backdrop mix-blend-mode
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
Clip-path effects
Clip-path animations
Mask-image
La regola mask-image permette di creare sfumature su immagini o parti di esse.
Mask-image effects
Perspective
Transform perspective effets
La regola transform perspective permette di applicare la prospettiva agli elementi.
Gradients
Gradients generator 2 colors
Gradients generator 3 colors
Gradient animation1
Gradient animation2
Post-it
Classic Post-it
Various effects
Effetti vari
15b-Overlapping images
15b-Immagini sovrapposte
Image with inset (overlapped) shadow using gradients or box-shadow
Immagine con ombra sovrapposta usando i gradienti, o box-shadow
Opaque title over semi-transparent image
Titolo opaco su immagine semi-trasparente
Download anche per versione con immagine di background
Titles with effects
Titoli con effetti
Zigzag
Book cover image generator
Generatore di un'immagine come cover di un libro
Split box
Box sdoppiato
Esempio:

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:

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
Share on Social:
Condividi sui social:
Argomenti del sito correlati:
Leggi tutto