le formule magiche

Practical resources for webmasters,
webdesigners and websites developers

Risorse pratiche per webmaster,webdesigner e sviluppatori di siti web

Passa il mouse sul testo in inglese per visualizzare la traduzione in italiano
Collection of rigorously selected and useful solutions, features and resources for the creation and management of websites.

Table of Contents

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

    • Form with data storage in csv file

    • 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

    • Advanced comments form

  • Other

    • Anonymous survey form

    • Drag and drop images with folder storage

  • Usefull solutions

    • Registration form

    • Redirect form

    • Internal search engine

    • Anonymous reporting button

    • Click on link notification

    • Click counter

    • Click on image counter

    • Click on audio image counter

    • Submit button with background image

    • Textarea with save as html/txt functionality

    • Textarea character counter

    • Reset textarea

    • Checkboxes + textarea copy and delete

    • Checkboxes select all

    • Checkboxes reset all

    • Checkbox dropdown

    • Prevent form submission if at least one checkbox is not selected

    • Option select with notification

    • Prevent browser autocompilation

    • Preserve compiled fields

    • Preserve selected checkboxes

    • Exclude specific words in input fields (PHP)

    • 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

  • Image galleries 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

Layouts HTML5

Summary:
  • Classic HTML5 layout

  • Two columns HTML5 layout

  • Three columns HTML5 layout

  • Full page HTML5 layout

  • Sidebar 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

  • 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 animation 1

    • Gradient animation 2

  • Post-it

    • Classic Post-it

    • Transform Post-it

    • Transform rotate Post-it

  • Various effects

    • Overlapping images

    • Opaque title over semi-transparent image

Audio/Video

Summary:
  • Audio player with playlist

  • 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

  • Video player with playlist

Various resources

Risorse varie
Summary:
  • Fonts

    • Various fonts gallery

  • SVG icon sprite

    • SVG icon sprite pack

    • SVG icon sprite social with jQuery code for global url

  • Pinterest

    • Pin-it icon over image

  • External link symbol

    • 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 - deactivation of user functions

  • Open all the page links in a new tab

  • Button that opens a alert window

  • Expandable content

  • Clickable phone number

  • Link with error in file manager

  • New line in tooltip

  • Titles in a list

  • Color picker

    • Classic color-picker

    • Open color picker on click

CSS solutions

Soluzioni CSS
(member only)
Summary:
  • Page height 100%

  • Fix lateral swing on mobile

  • Scrolling div padding solution

  • Distance a list from a float image

  • Continue with the text below a float image

  • Prevent two words breack

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

  • Inclined text or element

  • Inclined div with not inclined text

  • Underlined text onmouseover

  • Transparency and opacity

  • Expandable text

  • Highlighted Text

  • Highlight content on click

  • Active link color

  • Horizontal line (hr) style

  • Horizontal list with vertical dividing lines

  • Parent and child element with onmouseover effect

  • Deactivate animations

  • Remove white space under the images in a div

  • Mobile Safari - background-image

  • Mobile Safari - fix text size

  • Mobile Safari - activate scroll

  • Cursor types

  • Special web colors

Js, jQuery, PHP solutions

Soluzioni Js, jQuery, PHP
(member only)
Summary:
  • New line in javascript

  • Multiple functions in singol onclick

  • Adblock redirect scrip

  • Adjust Iframes script

  • Change page color

  • Script to display the current year

  • Signature protection script

  • Return to previous page on click

  • Redirect with countdown

  • Download + redirect

  • Date of the last page update

  • Refresh page button

  • Button to activate web push notifications

  • Copy text on click

  • Export content as HTML

  • Disable right button, dragging and selecting content

  • Disable right button on images

  • Disable body scroll when a popup with active scroll is open

  • Exclude functions according to the screen size

  • Change image after a defined time

  • Prevent page images caching

  • Show all images in a folder

  • Play all videos in a folder

Argomenti del sito utili per i webmaster: