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.
NOTA: la pagina che ospita le immagini deve essere validata dal debugger di Pinterest.

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

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