Le formule magiche

Soluzioni specifiche con le regole di stileSpecific solutions with style rules

Informazioni sull'accesso a queste risorse

Modulo di contatto per i membri
Per aiuto e segnalazioni

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

Rassegna di soluzioni per le regole di stile.

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


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

Fix lateral swing on mobile

Oscillazione laterale su mobile

L'oscillazione laterale su mobile può essere causata da impostazioni di stile sbagliate che vanno corrette.
Se, dopo le correzioni, persiste ugualmente, può essere eliminata con questa regola applicata all'elemento che causa tale oscillazione.
overflow-x: hidden !important;

Scrolling div padding

Scrollando un div con bordo e con altezza massima o definita, il contenuto sembra uscire direttamente dal bordo e non rispetta il padding normale. Aggiungendo queste regole di stile è possibile creare una distanza dal margine.
div {
overflow: auto;
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
padding: 8px;
outline: 2px solid #f00;
max-height: 100px;
}

Distance a list from a float image

Distanziare elenco da immagine float

Posizionando un elenco di fianco ad una immagine, l'elenco risulterà non distanziato correttamente.
Per ovviare a questo problema, basta applicare a ul la regola overflow:hidden
<ul style="overflow:hidden">
  <li>Testo</li>
  <li>Testo</li>
  <li>Testo</li>
</ul>

Continue with the text below a float image

Proseguire con il testo sotto a immagine float

Posizionando il testo di fianco ad una immagine, può verificarsi la necessità di interromperlo e farlo proseguire sotto all'immagine stessa.
Per ottenere questo risultato si utilizza <br> con la seguente regola:
<br style="clear:both" />

Change image onmouseover using picture source for avif format

Cambio immagine onmouseover usando picture source per formato avif

<style>
.no-hover {
  display: block;
}
.on-hover {
  display: none;
}
.card:hover > .on-hover {
  display: block;
}
.card:hover > .no-hover {
  display: none;
}
</style>

<div class="card">
  <picture class="no-hover">
    <source srcset="img-01.avif" type="image/avif">
    <img src="img-01.jpg" alt="">
  </picture>
  <picture class="on-hover">
    <source srcset="img-02.avif" type="image/avif">
    <img src="img-02.jpg" alt="">
  </picture>
</div>

Prevent two words breack

Impedire la separazione di due parole

Quando lo schermo si stringe, le parole vanno automaticamente a capo.
Se volete impedire la separazione solo di due parole specifiche, potete usare questa regola inline:
<span style="white-space: nowrap">testo testo</span>

Center an element in a fixed or absolute position in its container

Centrare un elemento in posizione fissa o assoluta nel suo contenitore

Center both horizontally and vertically (example with a paragraph p): Centrare sia orizzontalmente che verticalmente (esempio con un paragrafo p):
<html>
  <head>
    <style>
      p {
      position: fixed;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Ciao</p>
    </div>
  </body>
</html>

Per centrare orizzontalmente usate solo:
left: 50%;
-webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        transform: translate(-50%);

Per centrare verticalmente usate solo:
top: 50%;
-webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        transform: translate(-50%);

Inclined text or element

Inclinazione del testo, o di un elemento

NOTA: la regola display:inline-block è necessaria solo per il testo
<style>
span {
    display: inline-block;
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
</style>

<span>inclinazione</span>

Inclined div with not inclined text

Div inclinato con testo non inclinato

Inclinando i lati di un div, il testo in esso contenuto eredita la stessa inclinazione.
Affinchè non accada, si può adottare questa soluzione:
<html>
   <head>
      <style>
         div {
         -webkit-transform: skew(-15deg);
         -ms-transform: skew(-15deg);
         transform: skew(-15deg);
         border:1px solid;
         padding: 10px;
         margin:10px
         }
         p {
         -webkit-transform: skew(15deg);
         -ms-transform: skew(15deg);
         transform: skew(15deg);
         }
      </style>
   </head>
   <body>
      <div>
         <p>Test Test Test</p>
      </div>
   </body>
</html>

Div with cut corner

Div con angolo tagliato

Aggiungere questa regola di stile al div, cambiando il colore come desiderato.
background: linear-gradient(125deg, transparent 80px, #f6fcfe 0);

Div 100% screen height

Div 100% altezza schermo

Utile per visualizzare in full screen la prima porzione visibile della pagina.
Applicare questa regola al div contenitore:
height: 100vh;

Transparency and opacity

Trasparenza e opacità

  • La regola imposta con rgba influenza un singolo elemento
  • rgba rende il colore impostato più o meno trasparente e può essere applicato a voci come: color, background-color, border-color
  • La regola imposta con opacity influenza l'elemento e tutti i suoi figli
  • opacity rende più o meno trasparente l'elemento a cui viene applicata e che già possiede le sue caratteristiche, come un'immagine, o un contenitore colorato
Esempi:
img {
  opacity: 0.5;
}

div {
  background-color: #000;
  opacity: 0.5;
}

div {
  background-color: #000;
  background-color: rgba(0,0,0,0.5);
}

In tutti gli esempi, il valore 0.5 rappresenta il livello di trasparenza e può essere modificato secondo le preferenze.
Quando si usa la regola rgba, è buona norma farla precedere dalla regola che imposta anche un colore fisso per i browser che non supportano rgba.

Blinking text

Testo lampeggiante

<style>
.blink {
  animation:1s blinker linear infinite;
  -webkit-animation:1s blinker linear infinite;
  -moz-animation:1s blinker linear infinite;
  color: red;
}
@-moz-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
</style>

<span class="blink">Testo</span>

Highlighted Text

Testo evidenziato

Il testo con questa regola apparirà come se fosse stato evidenziato con un evidenziatore.
<html>
<head>
<style>
.evidenzia {
  box-shadow: 0 0 5px #ffff00;
  background-color: #ffff00;
  border-radius: 1px;
}
</style>
</head>
<body>
  <span class="evidenzia">Testo evidenziato</span>
  <p class="evidenzia">Testo evidenziato</p>
  <div class="evidenzia">Testo evidenziato</div>
</body>
</html>

Highlight content on click

Evidenziare il contenuto al click

div {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

Active link color

Link attivo colore

Regola per dare un colore specifico al link attivo. Il link perde il colore quando un altro link viene cliccato.
a:focus {
  color: red;
}

Horizontal line (hr) style

Stile della linea orizzontale

<style>
 hr {
    background-color: transparent;
    border: 1px solid #cccccc
}
</style>

Horizontal list with vertical dividing lines

Separare un elenco orizzontale con linee verticali

<style>
   li {
   display:inline;
   }
   ul li:not(:last-child):after {
   content: '\007C';
   position: relative;
   top: 2px;
   padding-left: 4px;
   color: #000;
   }
</style>

<ul>
   <li>uno</li>
   <li>due</li>
   <li>tre</li>
   <li>quattro</li>
</ul>

Parent and child element with onmouseover effect

Effetto onmouseover su elemento padre e figlio

Passando il mouse sull'elemento padre, si attivano le sue impostazioni di stile e, in contemporanea, si attivano quelle dell'elemento figlio.
<html>
  <head>
    <style>
      .container {
      border: 1px solid;
      padding: 4px;
      }
      .container:hover {
      background-color: green;
      }
      .container:hover p {
      color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Bottone</p>
    </div>
  </body>
</html>

Deactivate animations

Disattivare le animazioni

body {
 transition-property: none !important;
 transform: none !important;
 animation: none !important;
}

Per disattivare le animazioni solo per un definito contenitore, basta indicarne il nome al posto di body.

Remove white space under an image in a div

Eliminare spazio vuoto sotto ad una immagine in un div

Quando appare uno spazio vuoto sotto alle immagini contenute in un div, spesso la causa è una line-height impostata.
img
Per eliminarlo, basta aggiungere la regola line-height: 0 al contenitore.

Remove white space under a video in a div

Eliminare spazio vuoto sotto ad un video in un div

Quando appare uno spazio vuoto sotto al video contenuto in un div, bisogna aggiungere display:block alle regole di stile del tag video.

Fit the width of a div to its contents

Adattare larghezza div a contenuto

Aggiungete questa regola allo stile del div.
width: fit-content;

Adapt div size to background image

Adattare dimensioni div all'immagine di background

Applicate la regola aspect-ratio.
Esempio:
<style>
.container {
  background-image: url(img.jpg);
  aspect-ratio: 83/38;
  background-size:cover;
  background-position: center;
  margin: 40px auto;
}
</style>

<div class="container"></div>

Cursor types

Tipi di cursore

Passare il mouse sul nome per vedere il cursore.

alias

all-scroll

auto

cell

context-menu

col-resize

copy

crosshair

default

e-resize

ew-resize

grab

grabbing

help

move

n-resize

ne-resize

nesw-resize

ns-resize

nw-resize

nwse-resize

no-drop

none

not-allowed

pointer

progress

row-resize

s-resize

se-resize

sw-resize

text

url

w-resize

wait

zoom-in

zoom-out

Special web colors

Colori particolari

Colore arancione brillante:: #E25537
Colore oro: #CFB53B
Colori fluorescenti: verde #ccff00, rosa #ff00cb, giallo ffff00

Membership index

Mappa del sito
Mappa del sito