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

Review of solutions for style rules.

Rassegna di soluzioni per le regole di stile.

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.

NOTA: per provare i codici, puoi utilizzare l'HTML Editor. NOTE: to test the codes you can use the HTML Editor.

Fix lateral swing on mobile

Oscillazione laterale su mobile

The lateral swing on mobile can be caused by wrong style settings that must be corrected.
If, after corrections, it still persists, it can be eliminated with this rule applied to the element causing this oscillation. 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..

Scrolling div padding

Scrolling a div with border and with maximum or defined height, the content seems to come out directly from the border and does not respect normal padding. By adding these style rules you can create a distance from the margin. 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.

Distance a list from a float image

Distanziare elenco da immagine float

By placing a list next to an image, the list will not be spaced correctly.
To get around this, just apply the overflow: hidden rule to ul 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

Continue with the text below a float image

Proseguire con il testo sotto a immagine float

By placing the text next to an image, there may be a need to stop it and continue it under the image itself.
To obtain this result we use <br> with the following rule: 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:

Change image onmouseover using picture source for avif format

Cambio immagine onmouseover usando picture source per formato avif

Prevent two words breack

Impedire la separazione di due parole

When the screen tightens, words automatically wrap.
If you want to prevent the separation of only two specific words, you can use this inline rule: 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:

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):

To center horizontally use only: Per centrare orizzontalmente usate solo:

To center vertically use only: Per centrare verticalmente usate solo:

Inclined text or element

Inclinazione del testo, o di un elemento

NOTE: The display: inline-block rule is only needed for text. NOTA: la regola display:inline-block è necessaria solo per il testo

Inclined div with not inclined text

Div inclinato con testo non inclinato

By tilting the sides of a div, the text it contains inherits the same inclination.
So that it doesn't happen, you can adopt this solution: Inclinando i lati di un div, il testo in esso contenuto eredita la stessa inclinazione.
Affinchè non accada, si può adottare questa soluzione:

Div with cut corner

Div con angolo tagliato

Add this style rule to the div, changing the color as desired.. Aggiungere questa regola di stile al div, cambiando il colore come desiderato.

Transparency and opacity

Trasparenza e opacità

• The rule set with rgba affects a single element
• rgba makes the color set more or less transparent and can be applied to items such as: color, background-color, border-color
• The opacity imposed rule affects the element and all of its children
• opacity makes the element to which it is applied and which already has its characteristics, such as an image or a colored container, more or less transparent

• 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

Examples: Examples:



In all examples, the value 0.5 represents the level of transparency and can be modified according to preferences.
When using the rgba rule, it is good practice to precede it with the rule that also sets a fixed color for browsers that do not support rgba. 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

Highlighted Text

Testo evidenziato

Text with this rule will appear as if it had been highlighted with a highlighter. Il testo con questa regola apparirà come se fosse stato evidenziato con un evidenziatore.

Highlight content on click

Evidenziare il contenuto al click

Active link color

Link attivo colore

Adjust to give a specific color to the active link. The link loses color when another link is clicked. Regola per dare un colore specifico al link attivo. Il link perde il colore quando un altro link viene cliccato

Horizontal line (hr) style

Stile della linea orizzontale

Horizontal list with vertical dividing lines

Separare un elenco orizzontale con linee verticali

Parent and child element with onmouseover effect

Effetto onmouseover su elemento padre e figlio

By hovering the mouse over the parent element, its style settings are activated and, at the same time, those of the child element are activated. Passando il mouse sull'elemento padre, si attivano le sue impostazioni di stile e, in contemporanea, si attivano quelle dell'elemento figlio.

Deactivate animations

Disattivare le animazioni

To disable the animations only for a defined container, just indicate its name instead of body. 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

When an empty space appears under the images contained in a div, it is often the cause of a line-height set. Quando appare uno spazio vuoto sotto alle immagini contenute in un div, spesso la causa è una line-height impostata.

To delete it, just add the "line-height: 0" rule to the container. 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

When an empty space appears under the images contained in a div, need to add display:block to video tag style rules. 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

Add this rule to the div style. Aggiungete questa regola allo stile del div.

Cursor types

Tipi di cursore

Hover over the name to see the cursor.

Passare il mouse sul nome per vedere il cursore.

Special web colors

Colori particolari

Bright orange color: #E25537
Gold color: #CFB53B
Fluorescent colors: green #ccff00, pink #ff00cb, yellow ffff00

Membership index