Mappa del sito
Web pages structure and functionality
Pagine web struttura e funzionalità
Information on accessing these resourcesMember contact form
List of downloadable sresources with donation
Collection of design elements for web pages and useful functionality.
NOTA: per provare i codici, puoi utilizzare l'HTML Editor.
ATTENTION: Don't forget to add the vendor prefixes to the css basic codes.
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 downloadPreview + 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
Applicable to any container
<div id="adv" style="display:none">prova</div>
<script>
timeout_id = setTimeout(function(){document.getElementById('adv').style.display="block"}, 10000);
</script>
<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
Applicable to any container. Need 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>
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
Applicable to any container
<div id="adv">prova</div>
<script>
timeout_id = setTimeout(function(){document.getElementById('adv').style.display="none"}, 10000); //millisecondi
</script>
<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
Applicable to any container. Need 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>
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 times
Image that appears after some time with fade
Image that appears on certain dates
Image that changes after some time
Image that changes every day of the week
Image that changes every month
Image that changes every day hour
Change image according to daily times
Change image according to daily times (with link)
Change image background according to daily times
Change background color according to daily times
Random elements
Elementi random
Basic random code
Codice random di base
for any element. Need 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>
<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
Need 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>
<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
Image that changes on page reload with title and description. Also multiple images version.Preview + download
14v-Random image from folder - HTML, JS
14v-Immagini random da cartella - HTML, JS
Change image on page reload and get images from folder dinamically. Also multiple images version.Preview + download
14z-Random image from folder 2 - HTML, PHP
14z-Immagini random da cartella 2 - HTML, PHP
Change image, or other file type, on page reload and get files from folder dinamically.One or more boxes from different folder.
Preview + download
Expandable content
Contenuto espandibile
Expandable text 1
Testo espandibile 1
<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>
.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
Need jQuery
<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>
.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
Argomenti del sito correlati: