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
14b-Rounded header - HTML, CSS
14b-Header arrotondato - HTML, CSS
Inclined header - HTML, CSS
Header inclinato - HTML, CSS
Various boxes
Box vari
14c-Various boxes count - HTML, CSS
14c-Box vari count - HTML, CSS
14d-Various boxes grid - HTML, CSS
14d-Box vari grid - HTML, CSS
14e-Various boxes flex - HTML, CSS
14e-Box vari flex - HTML, CSS
14f-Various boxes flex card - HTML, CSS
14f-Box vari flex card - HTML, CSS
14g-Various boxes flex masonry - HTML, CSS
14g-Box vari flex masonry - HTML, CSS
14h-Single box text + image - HTML, CSS
14h-Box singolo testo + immagine - HTML, CSS
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.
Tag cloud
14l-Tag cloud - HTML, CSS
Fixed elements
Elementi fissi
14m-Fixed elements right, left, bottom - HTML, CSS
14m-Elementi fissi right, left, bottom - HTML, CSS
Preload
14n-Preload 1 theater curtain - HTML, CSS, jQuery
14n-Preload 1 a sipario - HTML, CSS, jQuery
14o-Preload 2 fade - HTML, CSS, jQuery
14o-Preload 2 con fade - HTML, CSS, jQuery
14p-Preload 3 curtain - HTML, CSS, jQuery
14p-Preload 3 a cortina - HTML, CSS, jQuery
14q-Preload 4 roll - HTML, CSS, jQuery
Preload animations - HTML, CSS
Serie di animazioni per preload - HTML, CSS
Scroll to top
Scroll to top - HTML, CSS, jQuery
Web page summary
Sommario per pagina web
Web page titles summary - HTML, CSS, jQuery
Sommario dei titoli di una pagina - HTML, CSS, jQuery
Inclinations
Inclinazioni
Div with inclined horizontal sides - HTML, CSS
Div con lati orizzontali inclinati - HTML, CSS
Div with inclined vertical sides - HTML, CSS
Div con lato verticale inclinato - HTML, CSS
Inclined header - HTML, CSS
Header inclinato - HTML, CSS
Magnifying glass
Lente di ingrandimento
14r-Magnifying glass - HTML, CSS, jQuery
14r-Lente di ingrandimento - HTML, CSS, jQuery
14s-Magnifying glass 2 - HTML, CSS, jQuery
14s-Lente di ingrandimento 2 - HTML, CSS, jQuery
14t-Magnifying glass 3 - HTML, CSS, JS
14t-Lente di ingrandimento 3 - HTML, CSS, JS
Tooltip
Tooltip onclick - HTML, CSS
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.
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.
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.
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
Expandable text with checkbox - HTML, CSS
Testo espandibile con checkbox - HTML, CSS
Expandable text with transitions - HTML, CSS, JS
Testo espandibile con transizioni - HTML, CSS, JS
Dividers
Separatori, divisori
Dividers - HTML, CSS
Linee di separazione - HTML, CSS
Animated dividers SVG - HTML, CSS
Separatori animati SVG - HTML, CSS
Various
Varie
14z1-Link list - HTML, CSS, jQuery
14z1-Elenco di link - HTML, CSS, jQuery
14z2-Horizontal scroll pages - HTML, CSS, jQuery
14z2-Pagine a scorrimento orizzontale - HTML, CSS, jQuery
Progress bar - HTML, CSS
Membership index
Argomenti del sito correlati:
Leggi tutto