/******************************************************************************* * Feuille de style du Forum TSTT * ******************************************************************************* * Modifications * * François Kieffer : FK * 29/04/04, fk : Ajout de styles pour la présentation des exonets * 28/04/04, fk : Ajout de styles pour phpMyEdit.class.php * 28/04/04, fk : reformatage des lignes pour uniformiser la présentation * *******************************************************************************/ /* global */ * {margin:0;FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif; font-size: 9pt; FONT-STYLE: normal;} html {background-image: linear-gradient(to 30%, silver,transparent);} zbody {margin-left: 0px; margin-top : 0px;} body {background:#333;} /* paragraphe */ zp {FONT-SIZE: small; COLOR: #003399;} a{text-decoration:none;} #avertissement{background:#000;color:ffff00;width:100%;height:3em;} #headerMenu ul{list-style-type:none;padding:0;text-align: center;} .gauche {float:left;} .droite {float:right;} /* entêtes */ #z-avertissement{color:ffff00;} #baniere {background:#002255;background-image:url(segami/bg1.jpg);background-repeat: no-repeat;background-position: right top;} /* différents formats d'écrans ??? (http://forum.alsacreations.com/topic-27-62929-1-Responsive-design.html) @media screen and (min-width: 240px) and (max-width: 480px) and (orientation: portrait) @media screen and (min-width: 481px) and (max-width: 767px) and (orientation: portrait) @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) @media screen and (min-width: 1025px) and (max-width: 1280px) @media screen and (min-width: 1281px) */ /* Ecrans 15' 4/3 800*600 */ @media screen and (min-width:800px) { body {background:#333;} * {font-size:8px;} } /* Ecrans larges */ /* @media screen and (min-width:50.5em) {*/ *{font-size:12px;} body {background:transparent;} /* entête **********************************************************************/ #z-avertissement{z-float:right;width:600px;max-width:40%;} #baniere {height:90px;} #logo{} #siteName{color:#01a4ca;font-size:30px;position:relative;float:left;text-align:center;margin-left:10%;vertical-align: middle;} /* 036ba4 */ #siteName a {position:absolute;left:0;top:0;height:100%;width:100%;text-decoration:none;} #slogan{color:#999;font-size:12px;font-style:italic;} /* 036ba4 */ #headerMenu {min-width:60%;display: inline-block;position:relative;vertical-align: middle;text-align: center;padding-top:3em;float:right;} .boutonMenu {display:inline;margin-left:.5em;margin-right:.5em;min-width:100px;} .boutonMenu a {display:inline;margin:10;min-width:100px; padding: 7px 14px;text-decoration:none; border-radius:5px; -moz-transition: background 0.15s; -webkit-transition: background 0.15s; transition: background 0.3s; color: #f6fafd; background: rgba(0, 178, 215, 0.2); } .boutonMenu a:hover {background:rgba(0,178,215,0.9);color:#f6fafd;text-decoration:none;} #coinCoin{position:absolute;top:0;right:0;background:white;height:3em;width:50px;} /* 036ba4 */ /* effet brillance au survol : http://www.css3create.com/Effet-de-brillance-en-CSS-et-SVG ne fonctionne pas pour un simple bouton, il y faut une image. A tester sur le logo, plus tard. INCOMPLET .boutonMenu a::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient( circle farthest-side at 0 0, rgba(255,255,255,0) 90%, rgba(255,255,255,.8) 98%, rgba(255,255,255,0) 100% ) no-repeat; background-position: -140px 0; -webkit-mask: url('meme-image.png'); mask: url('#id-masque'); // pour tout nav sauf ff } .lienBouton a:hover::after, .blockCours .lienBouton a:focus::after{ transition: background-position 1s; background-position: 10px 0; } /* pour ff, il faut ajouter le code html suivant dans la page : Note : sur ce site, ya plein d'autres effets comme : http://www.css3create.com/Menu-avec-slider-effet-transition = très sympa http://www.css3create.com/Reflection-en-CSS-sur-une-image */ aside {width:23em;} section {margin-left:23.5em;margin-right:10.5em;} /* menu **********************************************************************/ #cours , #archives{margin:5px;margin-bottom:10px;padding:5px; z_border:1px solid #002255;border-radius:5px; background:#ddd; } .menu header{margin:.2em;font-weight:bold;font-size:20px; background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); } .menu ul{list-style-type:none;padding:.3em;} .menu ul li { position:relative;width:95%; margin-top:.5%;margin-bottom:.5%;padding:3px; padding-left:3px ; background:trensparent; } .menu ul li.separator{height:1px;margin:0;padding-bottom:0;padding-top:0; background-image: -webkit-linear-gradient(to right, transparent,black,black, transparent); background-image: -moz-linear-gradient(to right, transparent,black,black, transparent); background-image: -ms-linear-gradient(to right, transparent,black,black, transparent); background-image: -o-linear-gradient(to right, transparent,black,black, transparent); background-image: linear-gradient(to right, transparent,silver,silver,silver,transparent); } .menu ul li:first-child{border-top:0} .menu ul li:last-child{border-bottom:0;} .menuRow1:hover {background:#aaa;} .menuRow1 a {position:absolute;left:0;top:0;height:100%;width:100%; color:white;text-decoration:none; } /* lidste des Cours Actuels **********************************************************************/ #listeCoursActuels {display:table;border-spacing : 1em;} .blockCours{position:relative;width:20%;padding:2%;padding-bottom:3.5em;} /* positionnement */ .blockCours{display: table-cell;vertical-align:top;} /* formatage */ /*design*/ .blockCours{background: #036ba5; background-image: -moz-radial-gradient(50% 10%, circle cover, #01a5ca, #036ba5 70%); background-image: -webkit-radial-gradient(50% 10%, circle cover, #01a5ca, #036ba5 70%); background-image: -o-radial-gradient(50% 10%, circle cover, #01a5ca, #036ba5 70%); background-image: -ms-radial-gradient(50% 10%, circle cover, #01a5ca, #036ba5 70%); background-image: radial-gradient(50% 10%, circle cover, #01a5ca, #036ba5 70%); border:1px solid black; border-radius: 5px; transition: background-image 1s;} .blockCours:hover{background-image: -moz-radial-gradient(50% 10%, circle cover, #11b5da, #137bb5 70%); background-image: -webkit-radial-gradient(50% 10%, circle cover, #01a5ca, #137bb5 70%); background-image: -o-radial-gradient(50% 10%, circle cover, #01a5ca, #137bb5 70%); background-image: -ms-radial-gradient(50% 10%, circle cover, #01a5ca, #137bb5 70%); background-image: radial-gradient(50% 10%, circle cover, #01a5ca, #137bb5 70%);} .blockCours::after{ content: " "; position: absolute; width: 50%; height: 80%; bottom:10%; z-index: -10; -moz-transition: border 0.15s; -webkit-transition: border 0.15s; transition: height 0.5s, bottom 0.5s; } z.blockCours:hover::after { bottom: 0px; left: 4%; width: 92%; height: 100%; border-radius: 300px / 12px;-webkit-border-radius: 150px / 12px; -moz-border-radius: 150px / 12px; -ms-border-radius: 150px / 12px; box-shadow: 0 0 20px #000; -webkit-box-shadow: 0 0 8px #333; -moz-box-shadow: 0 0 8px #333; -ms-box-shadow: 0 0 8px #333; -o-box-shadow: 0 0 8px #333; behavior: url(ie/PIE.htc); /* PIE */ } a.aBlock{position:absolute;left:0;top:0;height:100%;width:100%;text-decoration:none;} .titreBlocCours{ padding:.3em 0 .5em 0; border-bottom:1px solid black; font:normal 18px "Trebuchet MS", Arial; line-height:15px; text-shadow:0 1px 0 black; color:#fff; } .blockCours p{text-align:justify;border-top:1px solid white;color:#ddd;} .blockCours .lienBouton{color:white;background:black;border-radius:5px;padding:10px;position:absolute;left:.5em;bottom:.5em;text-decoration:none;} /* création de l'ombrage dynamique */ /* Liste de news */ legend {display:inline;} #listeNews ul {list-style-type:none;padding:.3em;} #listeNews ul li {position:relative;width:100%; } .msgBlock { padding:4px; padding-left:5px ; margin-top:.4%;margin-bottom:.4%; background: rgba(172,172,172,0.2); border-radius:5px 5px 5px 5px ; } .msgBlock header {font-size:1.5em;font-weight: bold;font-style: normal;} .msgRub {display:inline; color: #002255; } .msgTitle {display:inline;margin-left:1em; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #5577aa; } .msgText { color: #555; } /* Fin de page */ footer{width:95%;margin:auto;text-align:center;} #pageFooter{position:absolute;bottom:0;} #pageFooterDeco{position:absolute;z-index:-100;bottom:0;height:400px;width:100%;right:0; background-image:url(segami/bg2.png);background-repeat: no-repeat;background-position: right bottom; } #ruban1{z-index: 90; } #rubanMarcMathis{z-index: 80; } .ruban_contenaire { position: absolute; top:0; right:0; margin: 0; } #ruban1 .ruban-placement { position: absolute; top:-3px; right:-3px; width: 140px; height: 140px;} #rubanMarcMathis .ruban-placement { position: absolute; top:-3px; right:-3px; width: 200px; height: 200px;} .ruban-contenu { position: relative; top: 40; right: 50; width: 250px; padding: 7px 0; -webkit-transform: rotate(45deg); -moz-transform :rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform:rotate(45deg); background-color: #000; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5) ; -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5); box-shadow:0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 0px 10px rgba(128,128,128,0.9) inset, 0px 0px 13px rgba(0,0,0,0.5) ; -moz-box-shadow: 0px 0px 10px rgba(128,128,128,0.9) inset, 0px 0px 13px rgba(0,0,0,0.5); box-shadow: 0px 0px 10px rgba(128,128,128,0.9) inset, 0px 0px 13px rgba(0,0,0,0.5); text-align:center; font: bold 15px Sans-Serif; color: #555 ;ztext-shadow: rgba(255,255,255,0.5) 1px 1px 1px; } #rubanMarcMathis .ruban-contenu { position: relative; top: 70; right: 42; width: 310px; } /*

Lire

nuit gravement à l'ignorance
Salon du livre, Colmar 2015
*/ #message {width:200px;margin:auto; border:10px solid black; text-align:center;font-weight:bold;padding:5px;font-size:1.5em;} #message h1 {font-size:2em; text-transform: uppercase;} #message .citation {font-size:.5em; color:silver;font-style:italic;text-align:right;margin-top:5px} /* Tableaux **********************************************************************/ /* Divers */ .blanc { background-color: #86b9eC; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 8pt; FONT-STYLE: normal; FONT-WEIGHT: normal; color: #FFFFFF; } /* encadrement de cellules ou de table en noir */ .box { border:solid windowtext .25pt; padding:3.0pt 3.0pt 3.0pt 3.0pt; vertical-align: top; } .boxBlue { border:solid windowtext .25pt; padding:3.0pt 3.0pt 3.0pt 3.0pt; border-color:#86b9eC ; vertical-align: top; } /* affichage pour avertissements et erreurs (utile surtout en sql et pour débugger) */ .warning { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 10pt; FONT-STYLE: normal; font-weight: bold; COLOR: #006600; background-color: #ffcc66 } .error { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 10pt; FONT-STYLE: normal; font-weight: bold; COLOR: #003399; background-color: #ff6666; } /* ******************************************** *********** */ /* lignes spécifiques à ce fichier */ /* 11/09/09 efka : add msgTitle */ /* 11/09/09 efka : add msgTitle */ .msgInfo { font-family: Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; color: #000000; } /* 11/09/09 efka : add msgTitle */ /* } /* FIN min-width pour écran larges >800*600 */ /* Quelques liens pris à la volée .... responsive design http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ conseils pour un site moderne http://lesdoigtsdanslenet.com/7-conseils-design-moderne-ergonomique-2013/ http://www.webdesignertrends.com/2012/12/tendances-webdesign-2013-web/ http://blog.hubspot.com/marketing/elements-of-modern-web-design-list http://blog.neocamino.com/les-incontournables-du-web-design-pour-un-site-internet-moderne-utiliser-une-photo-en-fond-decran-et-un-defilement-sans-fin/ http://blog.neocamino.com/les-incontournables-pour-un-site-internet-moderne-partie-2/ */