Mappa del sito
NOTE:
Downloads reserved for members can also be made without registration with a free donation in support of the site.
List of downloadable sresources with donation
NOTE: Only Web Safe Fonts should be used for good viewing of web pages. All other fonts are useful for graphics work.
CSS Web Safe FontsPinterest
Download for member
Download for member
Il banner di consenso è stato ottimizzato per soddisfare il responso di Google PageSpeed Insights.Download for member
Download for member
Download for member
Download for member
Codice:
Codice:
Codice:
Download for member
Download for member
Download for member
List of downloadable sresources with donation
ATTENTION: Don't forget to add the vendor prefixes to the css basic codes.
Review of different resources not otherwise cataloged for web page creation.
Fonts
Various fonts gallery
Rassegna di diversi tipi di fonts
Preview + download
Per la guida all'implementazione visita: Il foglio di stileNOTE: Only Web Safe Fonts should be used for good viewing of web pages. All other fonts are useful for graphics work.
CSS Web Safe Fonts
Social icons
17o-Social icons popup with jQuery code for global url
17o-Icone social con apertura in popup e script jQuery che permette l'impostazione di un url globale
Aggiornamento: sono stati aggiunti il tag title e il falso collegamento href="#" per soddisfare i parametri di Google PageSpeed Insights.Preview + download
Per le icone dei social network visita anche la pagina: Le icone dei social network17b-Pin-it icon over image (jQuery)
17b-Icona pin-it sulle immagini (jQuery)
Script to make the Pinterest sharing icon appear on the images of a web page.
NOTE: the page hosting the images must be validated by the Pinterest debugger
To exclude individual images, use:
Preview + download
External link icon
Icona per link esterno
17c-Using SVG image:
17c-Usando immagine SVG:
Example: linkDownload for member
Download with donation
17d-Using PNG image:
17d-Usando immagine PNG:
Example: linkDownload for member
Download with donation
Map
Responsive async map
17e-Mappa Google responsive asincrona
17e-Google map responsive and asynchronously loaded to improve page performance.
NOTE: Blocking cookies on the iframe (see script below) replaces this method.
Preview + download
Cookie law script
Per siti amatoriali.17e-Cookie Law script (Italian legislation)
17e-Script per la gestione dei cookie secondo la normativa italiana
NOTA: questo script è stato originariamente sviluppato da corsidia.com e poi modificato e aggiornato per essere adeguato alla normativa vigente.Il banner di consenso è stato ottimizzato per soddisfare il responso di Google PageSpeed Insights.
Download for member
Download with donation
Casella di ricerca
Simple Google search box
Semplice casella di ricerca di Google search
Codice:
<form action="http://google.com/search" target="_blank">
<input name="q">
<input type="submit">
</form>
<input name="q">
<input type="submit">
</form>
17g-Google Search box for website
17g-Casella di ricerca nel sito web tramite Google search
The zip contains the file with search box + the file for the results. Lo zip contiene il file con casella di ricerca + il file per i risultati.Download for member
Download with donation
17h-Custom Google Search box for website
17h-Casella di ricerca tramite Google search personalizzata
The zip contains the file with search box + the file for the results. Lo zip contiene il file con casella di ricerca + il file per i risultati.
Download for member
Download with donation
17i-Internal search engine for website using search keys - HTML, CSS, PHP
17i-Casella di ricerca nel sito web tramite chiavi di ricerca - HTML, CSS, PHP
Download for member
Download with donation
Search box for words in a web page - HTML, JS
Casella di ricerca per le parole in una pagina - HTML, JS
Highlighting and scrolling.Codice:
<input type="text" id="search">
<input type="hidden" id="hid_search">
<input type="button" id="button" onmousedown="doSearch(document.getElementById('search').value)" value="Find">
<p>Duis tristique, lectus vel tempor condimentum, enim augue mattis ligula, vitae finibus tellus felis vitae eros. Nullam tristique nunc in cursus fermentum.</p>
<script>
function doSearch(text,color="yellow") {
if (color!="transparent") {
doSearch(document.getElementById('hid_search').value,"transparent");
document.getElementById('hid_search').value = text;
}
if (window.find && window.getSelection) {
document.designMode = "on";
var sel = window.getSelection();
sel.collapse(document.body, 0);
while (window.find(text)) {
document.execCommand("HiliteColor", false, color);
sel.collapseToEnd();
}
document.designMode = "off";
} else if (document.body.createTextRange) {
var textRange = document.body.createTextRange();
while (textRange.findText(text)) {
textRange.execCommand("BackColor", false, color);
textRange.collapse(false);
}
}
}
</script>
<input type="hidden" id="hid_search">
<input type="button" id="button" onmousedown="doSearch(document.getElementById('search').value)" value="Find">
<p>Duis tristique, lectus vel tempor condimentum, enim augue mattis ligula, vitae finibus tellus felis vitae eros. Nullam tristique nunc in cursus fermentum.</p>
<script>
function doSearch(text,color="yellow") {
if (color!="transparent") {
doSearch(document.getElementById('hid_search').value,"transparent");
document.getElementById('hid_search').value = text;
}
if (window.find && window.getSelection) {
document.designMode = "on";
var sel = window.getSelection();
sel.collapse(document.body, 0);
while (window.find(text)) {
document.execCommand("HiliteColor", false, color);
sel.collapseToEnd();
}
document.designMode = "off";
} else if (document.body.createTextRange) {
var textRange = document.body.createTextRange();
while (textRange.findText(text)) {
textRange.execCommand("BackColor", false, color);
textRange.collapse(false);
}
}
}
</script>
Search box for words in div (type 1) - HTML, CSS, jQuery
Casella di ricerca per le parole in un div (tipo 1) - HTML, CSS, jQuery
Highlighting, scroll, choice for whole word or any character. Needs jQuery.Codice:
<style>
.highlighted {
background-color: yellow;
}
</style>
<input type="text" id="search-term" />
<input type="submit" id="search-button" value="search" />
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras enim ex, faucibus id fermentum sit amet, volutpat non lectus. Vestibulum id ultricies mauris, ac pellentesque eros.
</div>
<script>
function searchAndHighlight(searchTerm, selector) {
if (searchTerm) {
var selector = selector || "#content"; //use body as selector if none provided
searchRegex = new RegExp('(\\W|^)(' + searchTerm + ')(\\W|$)','ig'), //matches whole word only
//searchRegex = new RegExp('(\\D|^)(' + searchTerm + ')(\\D|$)','ig'), //matches whole word or syllables
replaceRegex = new RegExp( searchTerm, 'ig' );
if (matches) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights
var index;
for (index = 0; index < matches.length; ++index) {
var wordreg = new RegExp(matches[index]);
$(selector).html($(selector).html()
.replace(wordreg, "<span class='highlighted'>" + matches[index] + "</span>"));
}
if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears
$(window).scrollTop($('.highlighted:first').position().top); //change like this to add margin top: position().top-100);
}
return true;
}
}
return false;
}
$(document).ready(function () {
$('#search-button').on("click", function () {
if (!searchAndHighlight($('#search-term').val())) {
alert("No results found");
}
});
});
</script>
.highlighted {
background-color: yellow;
}
</style>
<input type="text" id="search-term" />
<input type="submit" id="search-button" value="search" />
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras enim ex, faucibus id fermentum sit amet, volutpat non lectus. Vestibulum id ultricies mauris, ac pellentesque eros.
</div>
<script>
function searchAndHighlight(searchTerm, selector) {
if (searchTerm) {
var selector = selector || "#content"; //use body as selector if none provided
searchRegex = new RegExp('(\\W|^)(' + searchTerm + ')(\\W|$)','ig'), //matches whole word only
//searchRegex = new RegExp('(\\D|^)(' + searchTerm + ')(\\D|$)','ig'), //matches whole word or syllables
replaceRegex = new RegExp( searchTerm, 'ig' );
if (matches) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights
var index;
for (index = 0; index < matches.length; ++index) {
var wordreg = new RegExp(matches[index]);
$(selector).html($(selector).html()
.replace(wordreg, "<span class='highlighted'>" + matches[index] + "</span>"));
}
if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears
$(window).scrollTop($('.highlighted:first').position().top); //change like this to add margin top: position().top-100);
}
return true;
}
}
return false;
}
$(document).ready(function () {
$('#search-button').on("click", function () {
if (!searchAndHighlight($('#search-term').val())) {
alert("No results found");
}
});
});
</script>
Search box for words in div (type 2) - HTML, CSS, jQuery
Casella di ricerca per le parole in un div (tipo 2) - HTML, CSS, jQuery
Highlighting, scroll. Needs jQuery.Codice:
<style>
.highlight {
background-color: yellow;
}
</style>
<input class=modal_search id=x><button class=search>search</button>
<div id="textModal_x">
<p>
The European languages are members of the same family. Their separate existence is a myth.
</p>
<p>
The European languages are members of the same family. Their separate existence is a myth.
</p>
</div>
<script>
$(function() {
$(".modal_search").each(function() {
var textModal = $('#textModal_' + this.id),
html = textModal.html();
$(".search").click(function() {
var reg = new RegExp($(".modal_search").val() || "&fakeEntity;", 'gi');
var $matches = textModal.html(html.replace(reg, function(str, index) {
var t = html.slice(0, index+1),
lastLt = t.lastIndexOf("<"),
lastGt = t.lastIndexOf(">"),
lastAmp = t.lastIndexOf("&"),
lastSemi = t.lastIndexOf(";");
//console.log(index, t, lastLt, lastGt, lastAmp, lastSemi);
if(lastLt > lastGt) return str; // inside a tag
if(lastAmp > lastSemi) return str; // inside an entity
return "<span class='highlight'>" + str + "</span>";
})).find("span.highlight");
if ($matches.length) $matches.get(0).scrollIntoView({behavior: "smooth"});
else alert("not found");
});
})
})
</script>
.highlight {
background-color: yellow;
}
</style>
<input class=modal_search id=x><button class=search>search</button>
<div id="textModal_x">
<p>
The European languages are members of the same family. Their separate existence is a myth.
</p>
<p>
The European languages are members of the same family. Their separate existence is a myth.
</p>
</div>
<script>
$(function() {
$(".modal_search").each(function() {
var textModal = $('#textModal_' + this.id),
html = textModal.html();
$(".search").click(function() {
var reg = new RegExp($(".modal_search").val() || "&fakeEntity;", 'gi');
var $matches = textModal.html(html.replace(reg, function(str, index) {
var t = html.slice(0, index+1),
lastLt = t.lastIndexOf("<"),
lastGt = t.lastIndexOf(">"),
lastAmp = t.lastIndexOf("&"),
lastSemi = t.lastIndexOf(";");
//console.log(index, t, lastLt, lastGt, lastAmp, lastSemi);
if(lastLt > lastGt) return str; // inside a tag
if(lastAmp > lastSemi) return str; // inside an entity
return "<span class='highlight'>" + str + "</span>";
})).find("span.highlight");
if ($matches.length) $matches.get(0).scrollIntoView({behavior: "smooth"});
else alert("not found");
});
})
})
</script>
Watermark
Watermark for web pagesCSS Text Watermark
<style>
html:after {
content: "XXXXXXXXXX\AXXXXXXXXXXX"; /*watermark text - \A = new line*/
white-space: pre;
font-size: 420%;
color: #d9d9d9;
color: rgba(0, 0, 0, .1);
z-index: 9997;
cursor: default;
display: block;
position: fixed;
top: 33%;
right: 0;
bottom: 0;
left: 15%;
font-family: sans-serif;
font-weight: bold;
font-style: italic;
text-align: center;
line-height: 100%;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
html:after {
content: "XXXXXXXXXX\AXXXXXXXXXXX"; /*watermark text - \A = new line*/
white-space: pre;
font-size: 420%;
color: #d9d9d9;
color: rgba(0, 0, 0, .1);
z-index: 9997;
cursor: default;
display: block;
position: fixed;
top: 33%;
right: 0;
bottom: 0;
left: 15%;
font-family: sans-serif;
font-weight: bold;
font-style: italic;
text-align: center;
line-height: 100%;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
Javascript text Watermark
<script>
var textWatermark = 'watermark'; //add watermark text
var body = document.getElementsByTagName('body')[0];
var background = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'>" +
"<text transform='translate(20, 100) rotate(-30)' fill='rgba(128,128,128, 0.3)' font-size='20' >" + textWatermark + "</text></svg>\")";
body.style.backgroundImage = background
</script>
var textWatermark = 'watermark'; //add watermark text
var body = document.getElementsByTagName('body')[0];
var background = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'>" +
"<text transform='translate(20, 100) rotate(-30)' fill='rgba(128,128,128, 0.3)' font-size='20' >" + textWatermark + "</text></svg>\")";
body.style.backgroundImage = background
</script>
CSS background image Watermark
<style>
body::after {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url('https://www.lachiavenelpozzo.com/img/pozzo.jpg');
background-repeat: no-repeat;
background-position: center;
opacity: 0.1;
pointer-events: none;
}
</style>
body::after {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url('https://www.lachiavenelpozzo.com/img/pozzo.jpg');
background-repeat: no-repeat;
background-position: center;
opacity: 0.1;
pointer-events: none;
}
</style>
Counters
Contatori
Numbers counter
Contatore di numeri
Preview + code
17l-Click counter
17l-Contatore di click
Click counter on links with archiving in txt file.Download for member
Download with donation
17m-Click on image counter
17m-Contatore di click sulle immagini
Click counter on images with storage in txt file.Download for member
Download with donation
17n-Click on audio image counter
17n-Contatore di click su immagini audio
Click counter on audio images with storage in txt files.Download for member
Download with donation
Argomenti del sito correlati: