le formule magiche

Risorse pratiche per webmaster,
webdesigner e sviluppatori di siti web

Raccolta di soluzioni, funzionalità e risorse rigorosamente selezionate e utili per la creazione e la gestione dei siti web.

Indice generale

Animations

Animazioni
Summary:
  • Animations generator

  • Onmouseover animations

    • Onmouseover animations gallery

    • Zoom effects

    • Filter effects

    • Change image onmouseover

  • Automatic animations

    • Animated titles

    • Scrolling text

    • Images sequence with fade

    • Ken-burns effect (zoom)

    • Flowing light

  • Rotations (automatic and onmouseover)

    • Various rotations

    • Rotating images

    • Swinging card

  • Scroll animations

Background

Summary:
  • Backgrounds created using style rules

  • Background image with centered title

  • Background image with text

  • Positioning a background image

  • Animated background

    • Background image changing with centered title

    • Background image changing with text

    • Background image changing onmouseover with centered title

    • Background changing with centered title

    • Background animated gradient with centered title

    • Disappearing background image

    • Scrolling background

Time and calendars

Data, ora e calendari
Summary:
  • Date and time

    • Date and time various solutions

  • Calendars

    • Events calendar

  • Other

    • Countdown

Captions

Didascalie
Summary:
  • Fixed captions

    • Simple fixed captions

  • Animated captions onmouseover

    • Various effects captions

    • Different directions captions

    • Card captions

Forms (moduli)

Summary:
  • Contact forms

    • Simple contact forms

    • Complete contact form

    • Contact form with attachment

    • Contact form with attachment and storage

    • Multistep contact form

    • Contact form in pop-in

    • Booking form

  • Login forms

    • Simple login form

  • Comments form

    • Simple comments form

  • Other

    • Anonymous survey form

    • Drag and drop images with folder storage

  • Usefull solutions

    • Registration form

    • Internal search engine

    • Anonymous reporting button

    • Click on link notification

    • Click counter

    • Click on image counter

    • Click on audio image counter

    • Textarea with save as html/txt functionality

    • Checkboxes + textarea copy and delete

    • Checkboxes select all

    • Checkboxes reset all

    • Checkbox dropdown

    • Option select con notification

    • Reset textarea

    • Prevent browser autocompilation

    • Preserve compiled fields

    • Preserve selected checkboxes

    • Show password button

    • Activate / deactivate button

    • Mobile Safari - force style settings for form input fields

Galleries

Gallerie
Summary:
  • Equal size image gallery

  • Equal size image gallery with lightbox

  • Different size image gallery

  • Different size image gallery with lightbox

  • Different height image gallery

  • Different height image gallery with lightbox

  • Self-filling different size image gallery

  • Image gallery with lightbox + video mp4 + video youtube

  • Folder images gallery with lightbox

Slideshow

Summary:
  • Manual slideshow with fade

  • Manual slideshow with video

  • Automatic slideshow with animations

  • Automatic slideshow with pause/play

  • Automatic slideshow with thumbnails

  • Automatic text slideshow

  • Automatic text and image slideshow

  • Automatic crossfade slideshow

  • Automatic staff slideshow

  • Automatic continuous carousel 1

  • Automatic continuous carousel 2

  • Advanced external slideshows recommended

Modal windows - lightbox - pop-in

Finestre modali
Summary:

Tabs

Summary:
  • Simple Tabs

  • Custom Tabs

  • Multiple rooms Tabs

Online selling

Vendita online
Summary:
  • Shop window products for sale via PayPal

  • Products for sale box

  • Single product for sale

  • Total price calculator

Menu

Summary:

Footer

Summary:
  • Three columns footer - logo, links, data, social

  • Two columns footer - logo, links, social, form

  • Two columns footer - links, search box

  • Two columns footer - links, social

HTML5 layouts

Summary:
  • Classic HTML5 layout

  • Two columns HTML5 layout

  • Three columns HTML5 layout

  • Full page HTML5 layout

  • Simple HTML5 parallax layout

  • Advanced HTML5 paralax layout

  • Special files (.htaccess, robots.txt, sitemap.xml)

Page structure and functionality

Pagine-struttura-funzionalità
Summary:
  • Various boxes

    • Various boxes count

    • Various boxes grid

    • Various boxes flex

    • Various boxes flex card

  • Tag cloud

  • Fixed elements right, left, bottom

  • Preload

    • Preload 1 theater curtain

    • Preload 2 fade

    • Preload 3 curtain

    • Preload 4 roll

    • Preload animations

  • Redirect

  • Scroll to top

  • Web page titles summary

  • Web page watermark

  • Inclined div

    • Div with inclined horizontal sides

    • Div with inclined vertical sides

  • Magnifying glass

  • Tooltip onclick

  • Random images

  • Expandable text

    • Expandable text

    • Expandable text with checkbox

Graphics

Grafica
Summary:
  • Box-shadow

    • Box-shadow generator

    • Box-shadow 3D effects

  • Text-shadow

    • Text-shadow generator

    • Text-shadow 3D effects

  • Title with background image

    • Text-fill-color method
    • Mix-blend-mode method
  • Clip-path

    • Clip-path generator

    • Clip-path effects

    • Clip-path animation gallery

  • Mask-image

    • Mask-image effects

  • Transform perspective

    • Transform perspective effects

  • Gradients

    • Gradient generator 2 colors

    • Gradient generator 3 colors

    • Gradient animation1

    • Gradient animation2

  • Post-it

    • Classic Post-it

    • Transform Post-it

    • Transform rotate Post-it

  • Various effects

    • Overlapping images

    • Opaque title over semi-transparent image

Video

Summary:
  • MP4 video player with lightbox

  • Youtube video player with lightbox

  • All video type player

  • Video with overlay image

  • Video background with text

  • Video background round

Various resources

Risorse varie
Summary:
  • Fonts

    • Various fonts gallery

  • Icon sprite

    • Icon sprite pack

    • Icon sprite social with jQuery code for global url

  • Pinterest

    • Pin-it icon over image

  • External link icon

    • SVG image

    • PNG image

  • Maps

    • Responsive async map

  • Cookie Law

    • Script per la gestione dei cookie secondo la normativa italiana

  • Google Search engine for website

    • Website Google Search engine + results page

  • Summary

    • Web page titles summary

  • Watermark

    • Web page watermark

HTML solutions

Soluzioni HTML
(member only)
Summary:
  • Body - disattivazione delle funzioni per l'utente

  • Aprire tutti i link della pagina in una nuova scheda

  • Pulsante che apre una finestra di avviso

  • Contenuto espandibile

  • Numero di telefono cliccabile

  • Link con errore

  • Andare a capo in un tooltip

  • Color picker

    • Color-picker classico

    • Color-picker click su un link testuale

CSS solutions

Soluzioni CSS
(member only)
Sommario:
  • Altezza pagina 100%

  • Oscillazione laterale su mobile

  • Scrolling div padding

  • Distanziare elenco da immagine float

  • Proseguire con il testo sotto a immagine float

  • Impedire la separazione di due parole

  • Centrare un elemento in posizione fissa o assoluta nel suo contenitore

  • Div inclinato con testo non inclinato

  • Trasparenza e opacità

  • Testo espandibile

  • Testo evidenziato

  • Evidenziare il contenuto al click

  • Link attivo colore

  • Rotazione del testo, o di un elemento

  • Stile della linea orizzontale

  • Separare un elenco orizzontale con linee verticali

  • Effetto onmouseover su elemento padre e figlio

  • Disattivare le animazioni

  • Eliminare spazio bianco sotto alle immagini in un div

  • Mobile Safari - background-image

  • Mobile Safari - fissare dimensioni testo

  • Mobile Safari - attivare scroll

  • Mobile Safari - forzare stile input

  • Tipi di cursore

  • Colori particolari

Javascript solutions

Soluzioni Javascript
(member only)
Sommario:
  • Andare a capo in javascript

  • Multiple funzioni in un unico Onclick

  • Adblock redirect scrip

  • Adjust Iframes script

  • Cambiare il colore della pagina

  • Script per visualizzare l'anno corrente

  • Script per la protezione della firma

  • Torna alla pagina precedente

  • Redirect con conto alla rovescia

  • Download + redirect

  • Data dell'ultimo aggiornamento di una pagina web

  • Pulsante aggiorna pagina

  • Pulsante per attivare notifiche web push

  • Copiare testo al click

  • Disabilitare tasto dx, trascinamento e selezione di un contenuto

  • Disabilitare il tasto dx sulle immagini

  • Disabilitare lo scroll del body quando è aperto un popup con scroll attivo

  • Escludere funzioni secondo la dimensione dello schermo

  • Immagine che cambia dopo un tempo definito

  • Mostra tutte le immagini di una cartella

  • Riproduci tutti i video di una cartella

Argomenti del sito utili ai webmaster: