Utente:Raoli/Navigazione/Cliccabile: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
2 |
codici |
||
Riga 36:
| style=white-space:nowrap | <div class="pulsantep pulsantep20">[[##|Pulsante Blu]]</div> || <div class="pulsantep pulsantep21">[[##|Pulsante Violetto]]</div> || <div class="pulsantep pulsantep22">[[##|Pulsante Celeste]]</div> || <div class="pulsantep pulsantep23">[[##|Pulsante Verde]]</div>
|}
''Per visualizzare correttamente i bottoni sovrastanti copiarsi nel proprio <code><nowiki>common.css</nowiki></code> il seguente codice:''
<source lang="css" strict>
/* Pulsante 3D
Autore: Matt Gentile
Licenza: CC-BY 3.0
Fonte: //icondeposit.wdfiles.com/local--files/chunky-3d-css3-buttons/style.css
*/
.pulsantep a { /* Stato a riposo */
padding: 4px 15px 7px 15px;
width: auto;
height: auto;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: normal;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(0,0,0,0.50);
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border: 1px solid rgba(0,0,0,0.50);
border-top: 1px solid rgba(0,0,0,0.001);
box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);
-ms-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);
cursor: pointer;
}
.pulsantep a:hover { /* Stato a passaggio del mouse sopra */
box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);
-ms-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);
-webkit-animation: glow 1s infinite ease-in-out;
cursor: pointer;
}
.pulsantep a:active { /* Stato successivo al clic del mouse */
padding: 6px 15px 5px 15px;
border-top: 1px solid rgba(0,0,0,0.55);
box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);
-ms-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);
-webkit-animation: none;
cursor: pointer !important;
}
/* Fine codice per Pulsante 3D */
/* Inizio schema Colori per Pulsanti 3D */
.pulsantep1 a {background: #c0c0c0;} /* GrigioChiaro */
.pulsantep2 a {background: #4b4b4b;} /* GrigioScuro */
.pulsantep3 a {background: #77AD0C;} /* VerdeChiaro */
.pulsantep4 a {background: #336600;} /* VerdeScuro */
.pulsantep5 a {background: #0066cc;} /* Azzurro */
.pulsantep6 a {background: #333399;} /* Bluette */
.pulsantep7 a {background: #663399;} /* Indigo */
.pulsantep8 a {background: #993399;} /* Viola */
.pulsantep9 a {background: #EA4C89;} /* Rosa */
.pulsantep10 a {background: #CC3333;} /* RossoSalmone */
.pulsantep11 a {background: #CC0000;} /* Rosso */
.pulsantep12 a {background: #990000;} /* RossoScuro */
.pulsantep13 a {background: #FF6600;} /* Arancione */
.pulsantep14 a {background: #FF9900;} /* Oro */
.pulsantep15 a {background: #F9BB11;} /* Giallo */
.pulsantep20 a {background: #0000CC;} /* Blu */
.pulsantep21 a {background: #9909FF;} /* Violetto */
.pulsantep22 a {background: #0099FF;} /* Celeste */
.pulsantep23 a {background: #00CC00;} /* Verde */
.pulsantep24 a {background: #1D1D1D;} /* Nero */
/* Fine schema Colori per Pulsanti 3D */
/* Inizio Animazione Glow */
@-webkit-keyframes glow {
0% {
box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);
-ms-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);
}
100% {
box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);
-ms-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);
}
}
/* Fine Animazione Glow */
</source>
| |||