professional webmaster

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
NOTA: il contenuto dei pannelli sarà visibile solo online.

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

Apri codice:
<div id="adv" style="display:none">prova</div>

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

Tag (or class) of elements that appear after some time - HTML, CSS, JS

Tag (o classe) di elementi che appaiono dopo un certo tempo - HTML, CSS, JS

Esempio con il tag div.
NOTA: per utilizzare una classe basta sostituire nelle regole di stile e nello script il nome del tag con il nome della classe degli elementi preceduto dal punto (es: .name).
Apri codice:
<style>
div {
 display:none;
}
</style>

<div>prova</div>

<script>
setTimeout(function(){
document.querySelector("div").style.display="block"}, 3000);
</script>

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

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

Necessita di jQuery
Apri codice:
<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

Apri codice:
<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

Necessita di jQuery.
Apri codice:
<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>

Elements that disappear on a set date - HTML, CSS, jQuery

Elementi che scompaiono ad una data stabilita - HTML, CSS, jQuery

Esempio con e senza orario. Necessita di jQuery.
Apri codice:
<div id="one" class="expiry" style="display:none" data-expiry="August 07, 2024 12:00:00">
  <p>content for div one</p>
</div>
<div id="two" class="expiry" style="display:none" data-expiry="May 08, 2024">
  <p>content for div two</p>
</div>

<script>
$(function() {
  var current_date = new Date();
  $(".expiry").each(function() {
    var div_date = $(this).data('expiry');
    div_date = new Date(div_date);
    if (current_date.getTime() > div_date.getTime()) {
      $(this).hide();
    } else {
      $(this).show();
    }
  });
})
</script>

Message that appears according to daily times

Messaggio che appare secondo orari giornalieri

Apri codice:
<div id="container"></div>

<script>
   var myDate = new Date();
   var hrs = myDate.getHours();
   var greet;
   if (hrs < 12)
      greet = 'Good Morning';
      else if (hrs >= 12 && hrs < 17)
          greet = 'Good Afternoon';
      else if (hrs >= 17 && hrs < 21)
          greet = 'Good Evening';
      else if (hrs >= 21 && hrs < 5)
          greet = 'Good Night';
      document.getElementById('container').innerHTML =
          '<b>' + greet + '</b> and welcome!';
</script>

Image that appears after some time with fade

Immagine che appare dopo un certo tempo con fade

Apri codice:
<style>
   img {
      max-width: 600px;
      display: block;
      margin: 20px auto;
   }
</style>

<img id="im" src="img.jpg" onLoad="aumentaOpacita();">

<script>
 var val = 0;
 function cambiaOpacita(){
 var immagine = document.getElementById("im");
 immagine.style.opacity = val/100;
 immagine.style.filter = 'alpha(opacity = ' + val + ')';      
 }
 function aumentaOpacita(){
   val += 2;
   cambiaOpacita();
   if(val<100){
      setTimeout("aumentaOpacita();", 50);
   }  
 }
</script>

Image that appears on certain dates

Immagine che appare a certe date

Apri codice:
<style>
  img {
    max-width: 600px;
    display: block;
    margin: 20px auto;
  }
</style>

<div id='immagine'></div>

<script>
window.onload = function(){immagine();}
function immagine()
{
    var oggi = new Date();
    if((oggi.getMonth() + 1 == 9) && (oggi.getDate() == 18))
          document.getElementById('immagine').innerHTML = "<img-01.jpg'>";
    else if((oggi.getMonth() + 1 == 10) && (oggi.getDate() == 20))
          document.getElementById('immagine').innerHTML = "<img src='img-02.jpg'>";
    else if((oggi.getMonth() + 1 == 11) && (oggi.getDate() == 12))
          document.getElementById('immagine').innerHTML = "<img src='img-03.jpg'>";
}
</script>

Image that changes after some time

Immagine che cambia dopo un certo tempo

Apri codice:
<style>
  img {
    max-width: 600px;
    display:  block;
    margin: 20px auto;
  }
</style>

       <img id="img" src="img-01.jpg" alt=""/>

       <script>
         window.onload = function(){startTimer();}
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }
          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }
          function startTimer() {
              setInterval(displayNextImage, 3000);
          }
          var images = [], x = -1;
          images[0] = "img-01.jpg";
          images[1] = "img-02.jpg";
          images[2] = "img-03.jpg";
      </script>

Image that changes every day of the week

Immagine che cambia ogni giorno della settimana

Apri codice:
<style>
    img {
        max-width: 600px;
        display: block;
        margin: 20px auto;
    }
</style>

<img src="img1.jpg" name="galle">

<script>
window.onload = function(){avvia();}
function apri(conta) {
nuovo=new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg",
"img5.jpg","img6.jpg","img7.jpg")
document.galle.src=nuovo[conta]
}
function avvia() {
data = new Date
ora=data.getDay() - 1
apri(ora)
}
</script>

Image that changes every month

Immagine che cambia ogni mese

Apri codice:
<style>
    img {
        max-width: 600px;
        display: block;
        margin: 20px auto;
    }
</style>

<img src="img1.jpg" name="galle">

<script>
  window.onload = function(){avvia();}
function apri(conta) {
nuovo=new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg",
"img5.jpg","img6.jpg","img7.jpg","img8.jpg","img9.jpg",
"img10.jpg","img11.jpg","img12.jpg")
document.galle.src=nuovo[conta]
}
function avvia() {
data = new Date
ora=data.getMonth()
apri(ora)
}
</script>

Image that changes every day hour

Immagine che cambia ogni ora del giorno

Apri codice:
<style>
    img {
        max-width: 600px;
        display: block;
        margin: 20px auto;
    }
</style>
<img src="img1.jpg" name="galle">

<script>
  window.onload = function(){avvia();}
function apri(conta) {
nuovo=new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg",
"img5.jpg","img6.jpg","img7.jpg","img8.jpg","img9.jpg",
"img10.jpg","img11.jpg","img12.jpg","img13.jpg","img14.jpg"
,"img15.jpg","img16.jpg","img17.jpg","img18.jpg","img19.jpg"
,"img20.jpg","img21.jpg","img22.jpg","img23.jpg","img24.jpg")
document.galle.src=nuovo[conta]
}
function avvia() {
data = new Date
ora=data.getHours() - 1
apri(ora)
}
</script>

Change image according to daily times

Immagine che cambia secondo orari giornalieri

Apri codice:
<style>
   img {
   max-width:600px;
   display: block;
   margin:20px auto;
   }
</style>

<img src="" alt="" id="image" />

<script>
   var myDate = new Date();
      var hrs = myDate.getHours();
    var imgElem=document.getElementById('image');
   (function(){
           if(hrs < 12){
               imgElem.src='img-01.jpg';
           }else if(hrs >= 12 && hrs < 17){
                imgElem.src='img-02.jpg';
                          }else if(hrs >= 17 && hrs < 21){
                imgElem.src='img-03.jpg';
           }else if(hrs >= 21 && hrs < 5){
               imgElem.src='img-01.jpg';
           }    
   })();
</script>

Change image according to daily times (with link)

Immagine che cambia secondo orari giornalieri (con link)

Apri codice:
<a href="" id="DJlink" target="_blank"><img id="DJimage" src="img1.jpg" alt="img"/></a>

<script>
window.onload = function(){TODimage();}
function TODimage() {
var DJimages = [  // add path to directory if necessary
  { pic:"img1.jpg", link:"" },
  { pic:"img2.jpg", link:"https://www.lachiavenelpozzo.com" }, // link example
  { pic:"img3.jpg", link:"" },
  { pic:"img4.jpg", link:"" }  // NOTE: no comma after last entry
];
  var now = new Date();
  hr = now.getUTCHours();
  var DJ = 0;
  if ((hr >= 11) && (hr < 17)) { DJ = 1; }
  if ((hr >= 17) && (hr < 23)) { DJ = 2; }
  if ((hr >= 23) && (hr < 5)) { DJ = 3; }
  if ((hr >= 5) && (hr < 11)) { DJ = 4; }
  document.getElementById('DJimage').src = DJimages[DJ].pic;
  document.getElementById('DJlink').href = DJimages[DJ].link;
}
</script>

Change image background according to daily times

Immagine di sfondo che cambia secondo orari giornalieri

Apri codice:
<style>
   #container {
   width:600px;
   height:400px;
   border:1px solid;
   background-size:cover;
   margin:20px auto
   }
</style>

<div id="container"></div>

<script>
   var myDate = new Date();
      var hrs = myDate.getHours();
    var elem=document.getElementById('container');
   (function(){
           if(hrs < 12){
               elem.style.backgroundImage = "url('img-01.jpg')";
           }else if(hrs >= 12 && hrs < 17){
                elem.style.backgroundImage = "url('img-02.jpg')";
                          }else if(hrs >= 17 && hrs < 21){
                elem.style.backgroundImage = "url('img-03=3.jpg')";
           }else if(hrs >= 21 && hrs < 5){
               elem.style.backgroundImage = "url('img-04.jpg')";
           }
   })();
</script>

Change background color according to daily times

Colore di sfondo che cambia secondo orari giornalieri

Apri codice:
<style>
   #container {
   width:600px;
   height:400px;
   border:1px solid;
   margin: 20px auto;
   }
</style>

<div id="container"></div>

<script>
   var myDate = new Date();
      var hrs = myDate.getHours();
    var elem=document.getElementById('container');
   (function(){
           if(hrs < 12){
               elem.style.backgroundColor = 'yellow';
           }else if(hrs >= 12 && hrs < 17){
                elem.style.backgroundColor = 'red';
                          }else if(hrs >= 17 && hrs < 21){
                elem.style.backgroundColor = 'blue';
           }else if(hrs >= 21 && hrs < 5){
               elem.style.backgroundColor = 'green';
           }
   })();
</script>

Random elements

Elementi random

Basic random code

Codice random di base

Necessita di jQuery.
Apri codice:
<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.
Apri codice:
<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:
Apri codice:
<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

Separatori, divisori

Dividers - HTML, CSS

Linee di separazione - HTML, CSS

Preview + code

Animated dividers SVG - HTML, CSS

Separatori animati SVG - HTML, CSS

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:
Leggi tutto