All Free <Script>

tips and tricks per webmaster

Come si crea un pulsante che “pulsa”

4 Dicembre 2020        

Per ottenere l’effetto voluto useremo i css3 transform e animation. Per realizzare la grafica del pulsante utilizzeremo bootstrap.

Di seguito il codice html:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<button type="button" class="btn btn-primary btn-lg pulse">pulse</button>:

Questo è il codice css:


.pulse {
  -webkit-animation: pulse 1.5s infinite;
}
.pulse-button:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  50% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
  }
}

Qui troverete una demo funzionante.

Semplice framework css a griglia responsive

3 Dicembre 2015        

Questo è il codice css che ci serve per creare una griglia responsive di 12 colonne e 10 pixel di margine tra una riga e l’altra. || leggi tutto »

L’attributo media nei fogli di stile

12 Maggio 2015        

L’ attributo media serve a specificare a quale piattaforma applicare un foglio di stile e viene inserita nel tag <head> in questo modo se è un foglio di stile interno: 

<style type=’text/css’ media="valore">

oppure così se è un foglio di stile esterno:

<link href="print.css" media="valore" rel="stylesheet">

dove al posto di ‘valore’ vanno inseriti i seguenti media:

  1. all: il css viene applicato a tutti i dispositivi
  2. screen: su schermi di computer
  3. print: il css viene applicato per la stampa
  4. print:su dispositivi a sintesi vocale
  5. tv: su schermi televisivi
  6. braille: per l’uso del braille
  7. projection: proiettori per presentazioni
  8. embossed: per stampanti braille
  9. handheld: per dispositivi palmari
  10. tty: per i terminali

Richiamare un foglio di stile esterno

7 Aprile 2015        

Esistono due metodi per richiamare un foglio di stile esterno; tramite la direttiva @import oppure tramite il tag <link>. Di seguito il codice:

<style>
  @import url(http://miosito.ext/css.css);
</style>

<link rel=’stylesheet’ type=’text/css’ href=’css.css’ media=’all’>

Differenza tra elementi inline ed elementi block-level

7 Aprile 2015        

Molti non hanno ben chiara la differenza che passa tra questi due elementi, ed è spesso causa di errori di codifica di html e css. Vediamo allora le differenze sostanziali.
Cominciamo col dire che un elemento block-level può contenere altri elementi block-level e anche elementi inline, mentre un elemento inline può contenere solo altri elementi inline. || leggi tutto »