Bibliothèque de codes HTML CCS
Dans cet article je mets des codes spécifiques que j'emploie dans ce blog, ce qui constitue une bibliothèque, permettant ainsi de gagner du temps en faisant des copier/coller.
Code utlisé régulièrement dans le blog
Barres de défilement - Uniquement IE
/* ------------- IE barres de défilement ------------------ */
HTML, BODY
{
scrollbar-face-color : #517913;
scrollbar-arrow-color : #0033CC;
scrollbar-track-color : #DAF3B4;
scrollbar-highlight-color:#DEDEDE;
scrollbar-shadow-color:#707070;
scrollbar-3dlight-color:#AEAEAE;
scrollbar-darkshadow-color:#505050;
}
Coins arrondis
/* ------------- coins arrondis ------------------ */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
behavior:url(border-radius.htc); /* inactif en cours étude */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
behavior:url(border-radius.htc); /* inactif en cours étude */
Ombre
/* ----------------- ombrage ------------------- */
-moz-box-shadow: 8px 12px 10px #A0A0A0;
-webkit-box-shadow: 8px 12px 10px #A0A0A0;
-khtml-box-shadow: 8px 12px 10px #A0A0A0;
box-shadow: 8px 12px 10px #A0A0A0; filter:progid:DXImageTransform.Microsoft.Shadow(color='#A0A0A0', Direction=120, Strength=12); zoom: 1;
/* -------- ombre des titres ----- */
text-shadow: 2px 4px 1px #DAF3B4;
-moz-box-shadow: 8px 12px 10px #A0A0A0;
-webkit-box-shadow: 8px 12px 10px #A0A0A0;
-khtml-box-shadow: 8px 12px 10px #A0A0A0;
box-shadow: 8px 12px 10px #A0A0A0; filter:progid:DXImageTransform.Microsoft.Shadow(color='#A0A0A0', Direction=120, Strength=12); zoom: 1;
/* -------- ombre des titres ----- */
text-shadow: 2px 4px 1px #DAF3B4;
Voir mon article lien et le générateur.
Dégradé
Pour les navigateurs Firefox, Chrome, Safari et Internet Explorer, mais pas pour Opéra.
background-image : -moz-linear-gradient(center bottom, #DAF3B4 0%, #517913 100%); background-image : -webkit-gradient(linear, left 0%, left 100%, color-stop(0.01, #DAF3B4), color-stop(0.99, #517913)); background-image : linear-gradient(#DAF3B4,#517913); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#DAF3B4,endColorstr=#517913); -ms-filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#DAF3B4,endColorstr=#517913);
Voir mon article lien et le générateur.
Transparence
/* compatible Firefox, Chrome, Opéra, Safari */
background-color: rgba(0, 0, 0, 0.2); /* noir opacity 20% */
/* pour IE noir opacity 20% = #33 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
zoom: 1;
background-color: rgba(0, 0, 0, 0.2); /* noir opacity 20% */
/* pour IE noir opacity 20% = #33 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
zoom: 1;
Voir mon article lien et le générateur
Code fichiers liés
Dans la bordure gauche/droite.
<!-- favicon pour modeles-graphiques -->
<link href="https://static.blog4ever.com/2010/08/431181/artfichier_431181_218434_20110307430189.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="https://static.blog4ever.com/2010/08/431181/artfichier_431181_218434_20110307430189.ico" rel="shortcut icon" type="image/x-icon"/>
Dans la bordure gauche/droite ou dans un article(en HTML) si on utilise l'ancien composeur.
<!-- lien feuille de style pour page aide -->
<link type="text/css" rel="stylesheet" href="https://static.blog4ever.com/2010/08/431181/artfichier_431181_227796_201104032225511.css" />
<link type="text/css" rel="stylesheet" href="https://static.blog4ever.com/2010/08/431181/artfichier_431181_227796_201104032225511.css" />
Dans un article si on utilise le nouveau composeur.
<script type="text/javascript">// <![CDATA[
// lien feuille de style pour page aide
document.write('<link type="text/css" rel="stylesheet" href="https://static.blog4ever.com/2010/08/431181/artfichier_431181_227796_201104032225511.css" />');
// ]]></script>
// lien feuille de style pour page aide
document.write('<link type="text/css" rel="stylesheet" href="https://static.blog4ever.com/2010/08/431181/artfichier_431181_227796_201104032225511.css" />');
// ]]></script>
Scripts Javascript
Dans la bordure gauche/droite.
<script language="javascript">
// ===============================
<!--
// Ouvrir une page dans une grande fenêtre
// Pour revenir en taille normale alt+F4
function fullwin(){
window.open("#","g_ecran","fullscreen,scrollbars")
}
//-->
</script>
// ===============================
<!--
// Ouvrir une page dans une grande fenêtre
// Pour revenir en taille normale alt+F4
function fullwin(){
window.open("#","g_ecran","fullscreen,scrollbars")
}
//-->
</script>
<script type="text/javascript">
<!--
// Pour créer des menus déroulants compatibles navigateurs
window.onload=montre_mb;
function montre_mb(id) {
var d = document.getElementById(id);
for (var i = 1; i<=100; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<!--
// Pour créer des menus déroulants compatibles navigateurs
window.onload=montre_mb;
function montre_mb(id) {
var d = document.getElementById(id);
for (var i = 1; i<=100; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
CSS Style complémentaire spécifique
Dans le HTML article ou catégorie, pour mettre une couleur ou une image de fond à une page.
<script type="text/javascript">// <![CDATA[
document.write('<style type="text/css">' +
'body{background:#336699;' +
'background-image:url(http://);' +
'background-repeat:repeat;' +
'background-attachment:fixed;' +
'}</style>');
// ]]></script>
document.write('<style type="text/css">' +
'body{background:#336699;' +
'background-image:url(http://);' +
'background-repeat:repeat;' +
'background-attachment:fixed;' +
'}</style>');
// ]]></script>
Outils persos
...