Membership index

Rassegna di varie risorse, non diversamente catalogate, per la creazione delle pagine web.

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

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

NOTA BENE: le risorse con codice PHP funzionano solo online.

Fonts

Various fonts gallery

Rassegna di diversi tipi di fonts

Preview + download

Per la guida all'implementazione visita: Il foglio di stile

NOTA: per una buona visualizzazione delle pagine web dovrebbero essere usati solo i Web Safe Font. Tutti gli altri font sono utili per i lavori di grafica.
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 network

Pinterest

17b-Pin-it icon over image (jQuery)

17b-Icona pin-it sulle immagini (jQuery)

Script per far apparire l'icona di condivisione di Pinterest sulle immagini di una pagina web.

Per escludere singole immagine, usare:

<img src="" alt="" data-pin-nopin="true">

Preview + download

External link icon

Icona per link esterno

With SVG image:

Con immagine SVG:

Esempio: link

With PNG image:

Con immagine PNG:

Esempio: link

Scarica entrambe le versioni

Map

Responsive async map

17e-Mappa Google responsive asincrona

Mappa Google responsive e caricata in modo asincrono per migliorare la performance della pagina.

NOTA: Il blocco dei cookie sull'iframe (vedi script sotto) sostituisce questo metodo.

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

Search Box

Casella di ricerca

Leggi anche l'argomento dedicato nella guida: Cose utili per il sito web.

Simple Google search box

Semplice casella di ricerca di Google search

Codice:

17g-Google Search box for website

17g-Casella di ricerca nel sito web tramite Google search

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

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

Evidenziazione e scroll.

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

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

Evidenziazione, scroll, scelta di parola intera o qualsiasi carattere. Necessita di jQuery.

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

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

Evidenziazione, scroll. Necessita di jQuery.

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

Watermark

Watermark da applicare alle pagine web

CSS Text Watermark

Apri codice:

<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

Apri codice:

<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

Apri codice:

<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 - HTML, CSS, JS

Contatore di numeri - HTML, CSS, JS

Preview + code

17l-Click counter - HTML, JS, PHP

17l-Contatore di click - HTML, JS, PHP

Contatore di click sui link con archiviazione in file txt.

Download for member
Download with donation

17m-Click on image counter - HTML, JS, PHP

17m-Contatore di click sulle immagini - HTML, JS, PHP

Contatore di click sulle immagini con archiviazione in file txt.

Download for member
Download with donation

17n-Click on audio image counter - HTML, JS, PHP

17n-Contatore di click su immagini audio - HTML, JS, PHP

Contatore di click sulle immagini audio con archiviazione in file txt.

Download for member
Download with donation

Color-picker

Classic color-picker

Color picker classico

Apri:

<input type="color" value="#f86f0b">

Open color picker on click

Color-picker che si apre cliccando su un link testuale

Apri:

Click here

<style>
#color-picker {
display: none;
}
.color-picker {
  cursor: pointer;
  text-decoration: underline;
}
.color-picker:hover {
  color: #ffa500;
}
</style>

<input type="color" id="color-picker" value="#f86f0b">
<label for="color-picker" class="color-picker">color</label>

Color-picker with text field

Color picker con casella di testo

Apri:

<input id="background-color" type="color" value="#ff0000" onchange="javascript:document.getElementById('chosen-color').value = document.getElementById('background-color').value;">
<br>
<input id="chosen-color" type="text" readonly="" value="#ff0000">

Membership index