Le formule magiche

Struttura e funzionalità delle pagine webWeb pages structure and functionality

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

Raccolta di elementi di struttura per le pagine web e di funzionalità utili.


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

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


Header

14a-Headers with animated titles - HTML, CSS

14a-Header con titoli animati - HTML, CSS

Preview + download

14b-Rounded header - HTML, CSS

14b-Header arrotondato - HTML, CSS

Preview + download

Inclined header - HTML, CSS

Header inclinato - HTML, CSS

Preview and code


Various boxes

Box vari

14c-Various boxes count - HTML, CSS

14c-Box vari count - HTML, CSS

Preview + download

14d-Various boxes grid - HTML, CSS

14d-Box vari grid - HTML, CSS

Preview + download

14e-Various boxes flex - HTML, CSS

14e-Box vari flex - HTML, CSS

Preview + download

14f-Various boxes flex card - HTML, CSS

14f-Box vari flex card - HTML, CSS

Preview + download

14g-Various boxes flex masonry - HTML, CSS

14g-Box vari flex masonry - HTML, CSS

Preview + download

14h-Single box text + image - HTML, CSS

14h-Box singolo testo + immagine - HTML, CSS

Preview + download


Events

Eventi

14i-Events panel - HTML, CSS, jQuery

14i-Pannello eventi - HTML, CSS, jQuery

Version with 4, 2, 1 panel in the same download Versione con 4, 2, 1 pannelli nello stesso download

Preview + download


Tag cloud

14l-Tag cloud - HTML, CSS

Preview + download


Fixed elements

Elementi fissi

14m-Fixed elements right, left, bottom - HTML, CSS

14m-Elementi fissi right, left, bottom - HTML, CSS

Preview + download


Preload

14n-Preload 1 theater curtain - HTML, CSS, jQuery

14n-Preload 1 a sipario - HTML, CSS, jQuery

Preview + download

14o-Preload 2 fade - HTML, CSS, jQuery

14o-Preload 2 con fade - HTML, CSS, jQuery

Preview + download

14p-Preload 3 curtain - HTML, CSS, jQuery

14p-Preload 3 a cortina - HTML, CSS, jQuery

Preview + download

14q-Preload 4 roll - HTML, CSS, jQuery

Preview + download

Preload animations - HTML, CSS

Serie di animazioni per preload - HTML, CSS

Preview + download


Scroll to top

Scroll to top - HTML, CSS, jQuery

Preview + code


Web page summary

Sommario per pagina web

Web page titles summary - HTML, CSS, jQuery

Sommario dei titoli di una pagina - HTML, CSS, jQuery

Preview + code


Inclinations

Inclinazioni

Div with inclined horizontal sides - HTML, CSS

Div con lati orizzontali inclinati - HTML, CSS

Preview +code

Div with inclined vertical sides - HTML, CSS

Div con lato verticale inclinato - HTML, CSS

Preview + code

Inclined header - HTML, CSS

Header inclinato - HTML, CSS

Preview + code


Magnifying glass

Lente di ingrandimento

14r-Magnifying glass - HTML, CSS, jQuery

14r-Lente di ingrandimento - HTML, CSS, jQuery

Preview + download

14s-Magnifying glass 2 - HTML, CSS, jQuery

14s-Lente di ingrandimento 2 - HTML, CSS, jQuery

Preview + download

14t-Magnifying glass 3 - HTML, CSS, JS

14t-Lente di ingrandimento 3 - HTML, CSS, JS

Preview + download


Tooltip

Tooltip onclick - HTML, CSS

Preview + code


Timed elements

Elementi a tempo

Element that appears after some time - HTML, CSS, JS

Elemento che appare dopo un certo tempo - HTML, CSS, JS

Applicabile a qualunque contenitore
<div id="adv" style="display:none">prova</div>

<script>
timeout_id = setTimeout(function(){document.getElementById('adv').style.display="block"}, 10000);
</script>

Element that appears after some time with fade - HTML, CSS, jQuery

Elemento che appare dopo un certo tempo con fade - HTML, CSS, jQuery

Applicabile a qualunque contenitore. Necessita di jQuery
<div id="showDiv" style="display:none">
  This div will show automatically after 5 seconds
</div>

<script>
$(function() {
setTimeout(function() { $("#showDiv").fadeIn(2000); }, 5000) //first time is fade duration - second time is show duration
})
</script>

Element that disappears after some time - HTML, CSS, JS

Elemento che scompare dopo un certo tempo - HTML, CSS, JS

Applicabile a qualunque contenitore
<div id="adv">prova</div>

<script>
timeout_id = setTimeout(function(){document.getElementById('adv').style.display="none"}, 10000); //millisecondi
</script>

Element that disappears after some time with fade - HTML, CSS, jQuery

Elemento che scompare dopo un certo tempo con fade - HTML, CSS, jQuery

Applicabile a qualunque contenitore. Necessita di jQuery.
<div id="hideDiv">
  This div will hide automatically after 5 seconds
</div>

<script>
$(function() {
setTimeout(function() { $("#hideDiv").fadeOut(2000); }, 5000) //first time is fade duration - second time is show duration
})
</script>

Other timed elements

Altri elementi a tempo

Message that appears according to daily timesMessaggio che appare secondo orari giornalieri

Image that appears after some time with fadeImmagine che appare dopo un certo tempo con fade

Image that appears on certain datesImmagine che appare a certe date

Image that changes after some timeImmagine che cambia dopo un certo tempo

Image that changes every day of the weekImmagine che cambia ogni giorno della settimana

Image that changes every monthImmagine che cambia ogni mese

Image that changes every day hourImmagine che cambia ogni ora del giorno

Change image according to daily timesImmagine che cambia secondo orari giornalieri

Change image according to daily times (with link)Immagine che cambia secondo orari giornalieri (con link)

Change image background according to daily timesImmagine di sfondo che cambia secondo orari giornalieri

Change background color according to daily timesColore di sfondo che cambia secondo orari giornalieri


Random elements

Elementi random

Basic random code

Codice random di base

Per qualunque elemento. Necessita di jQuery.
<div class="content">
<div class="item">Refresh 1</div>
<div class="item">Refresh 2</div>
<div class="item">Refresh 3</div>
<div class="item">Refresh 4</div>
</div>

<script>
var random = Math.floor(Math.random() * $('.item').length);
$('.item').hide().eq(random).show();
</script>

Random images

Immagini random

Necessita di jQuery.
<div class="show"></div>

<script>
      var path = './folder/', //folder path with final slash
    imgs = ['01.jpg','02.jpg','03.jpg'], //add images
    i = Math.floor(Math.random()*imgs.length);
    $('.show').append("<img src='"+path+imgs[i]+"'>").hide().fadeIn(2000);
</script>

14u-Random image - HTML, CSS, jQuery

14u-Immagini random - HTML, CSS, jQuery

Immagini che cambiano ad ogni aggiornamento della pagina con titolo e descrizione.
Anche versione con immagini multiple.

Preview + download

14v-Random image from folder - HTML, JS

14v-Immagini random da cartella - HTML, JS

Cambiare immagine all'aggiornamento della pagina prendendo le immagini automaticamente da una cartella.
Anche versione con immagini multiple e versione da cartelle differenti.

Preview + download

14z-Random image from folder 2 - HTML, PHP

14z-Immagini random da cartella 2 - HTML, PHP

Cambiare immagine, o altro tipo di file, all'aggiornamento della pagina, prendendo i file automaticamente da cartella.
Multipli box da cartelle differenti.

Preview + download

Random image with timeout

Immagini random con timeout

Affinchè le immagini cambino a tempo, basta racchiudere il codice in questa funzione:
<script>
function placeimage(){

//-----------------------------
your code here
//-----------------------------

setTimeout(placeimage, 2000);  //change this value as you like
}
placeimage();
</script>

Expandable content

Contenuto espandibile

Expandable text 1

Testo espandibile 1

Apri codice:
<style>
.more,
.show,
.hide:target {
display: none;
}
.hide:target + .show,
.hide:target ~ .more {
display: block;
}
</style>
<div>
<a id="hide1" href="#hide1" class="hide">Apri</a>
<a id="show1" href="#show1" class="show">Chiudi</a>
<div class="more">
Contenuto nascosto.
</div>
</div>

Expandable text 2

Testo espandibile 2

Necessita di jQuery
Apri codice:
<style>
.pop {
    display:none;
}
</style>

<ul>
    <li><a class="readmore">first div</a>
        <div class="pop">this ts the text</div>
    </li>
    <li>
<a class="readmore">second div</a>
        <div class="pop">this ts the text</div>
    </li>
    <li>
<a class="readmore">third div</a>
        <div class="pop">this ts the text</div>
    </li>
    <ul>

<script>
$(document).ready(function () {
    $(".readmore").click(function () {
        $(this).siblings(".pop").slideToggle();
        return false;
    });
});
</script>

Expandable text custom - HTML, CSS

Testo espandibile personalizzato- HTML, CSS

Preview + code

Expandable text with checkbox - HTML, CSS

Testo espandibile con checkbox - HTML, CSS

Preview + code

Expandable text with transitions - HTML, CSS, JS

Testo espandibile con transizioni - HTML, CSS, JS

Preview + code


Dividers - HTML, CSS

Separatori - HTML, CSS

Dividers

Linee di separazione

Preview + code


Various

Varie

14z1-Link list - HTML, CSS, jQuery

14z1-Elenco di link - HTML, CSS, jQuery

Preview + download

14z2-Horizontal scroll pages - HTML, CSS, jQuery

14z2-Pagine a scorrimento orizzontale - HTML, CSS, jQuery

Preview + download

Progress bar - HTML, CSS

Preview + code

Membership index


Argomenti del sito correlati: