Mon code CSS est le résultat de différentes influences, parmi lesquelles les plus importantes sont :
- les thèmes gaia disponibles pour GNU/Linux;
- le style pour LATEXs’intitulant Classic Thesis, de André Miede.
Ci-dessous se trouve le code CSS significatif utilisé pour ce site, que je ferai suivre d’un bref commentaire lorsque j'en aurai le temps. Il est à noter que ce code ne serait rien sans toute les informations que j’ai pu trouver sur internet :
- @font-face
- {
- font-family: "Bauhaus Std";
- src: url(../fonts/Bauhaus_Std/BauhausStd-Medium.otf);
- }
- @font-face
- {
- font-family: "Corbel";
- src: url(../fonts/Corbel/corbel.ttf);
- }
- @font-face
- {
- font-family: "Friz Quadrata Std";
- src: url(../fonts/Friz_Quadrata_Std/FrizQuadrataStd.otf);
- }
- @font-face
- {
- font-family: "Gill Sans Std";
- src: url(../fonts/Gill_Sans_Std/GillSansStd.otf);
- }
- @font-face
- {
- font-family: "Heisei Maru Gothic Std";
- src: url(../fonts/Heisei_Maru_Gothic_Std/HeiseiMaruGoStd-W4.otf);
- }
- @font-face
- {
- font-family: "Oregon LDO Vanishing";
- src: url(../fonts/Oregon_LDO_Vanishing/OregonLDOVanishing.ttf);
- }
- @font-face
- {
- font-family:"Sony Sketch EF";
- src: url(../fonts/Sony_Sketch/Sony_Sketch_EF.ttf);
- }
- body
- {
- background:transparent;
- color:black;
- background-attachment: fixed;
- background-image:url(../images/Minimal.jpg) ;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
- margin-top: 5%;
- margin-bottom: 5%;
- margin-right:15%;
- margin-left:15%;
- height:30%;
- width: 950px;
- counter-reset:chapitre section table;
- font-family: "Corbel";
- font-variant-ligatures:historical-ligatures;
- font-variant-numeric:oldstyle-nums;
- hyphenate-limit-last:none;
- -webkit-transition: all 0.7s ease-in-out;
- -moz-transition: all 1s ease-in-out;
- -o-transition: all 1s ease-in-out;
- transition: all 1s ease-in-out;
- }
- header
- {
- margin-right:-12em;
- }
- p
- {
- text-align:justify;
- width:95%;
- }
- #code
- {
- background:rgba(190,190,190,0.4) 0 repeat-y;
- overflow:auto;
- width:28em;
- font-family:"Nimbus Sans",inconsolata, terminus, monospace;
- list-style: decimal;
- list-style-color: yellow;
- }
- #code:hover
- {
- width:35em;
- background-color:rgba(190,190,190,0.8);
- transition-property:width;
- -moz-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- -moz-transition-property: width; /* Firefox 4 */
- -webkit-transition-property:width; /* Safari and Chrome */
- -o-transition-property:width;
- }
- section
- {
- padding-right:11em;
- padding-left:12em;
- padding-bottom:2em;
- }
- ul
- {
- text-align:justify;
- width:75%;
- }
- ul li
- {
- list-style-type:none;
- text-align:justify;
- }
- section ul li a:hover
- {
- background:transparent;
- transition:background 0s;
- color:brown;
- }
- section ul li:before
- {
- content: "\2013 ";
- }
- section aside
- {
- background-color: #e6e6e6;
- margin-left: 20em;
- width: 4.5cm;
- float: right;
- clear: right;
- text-align: left;
- font-size: 0.9em;
- }
- div#border_transparent
- {
- background:rgba(208,207,209,0.6);
- border:5%;
- /*-webkit-border-radius: 1em 4em 1em 4em;*/
- /*-moz-border-radius: 1em 4em 1em 4em;*/
- /*border-radius: 1em 4em 1em 4em;*/
- padding:3%;
- }
- header ul#navigation
- {
- font-family: "Bauhaus Std";
- font-size:x-large;
- font-variant:small-caps;
- letter-spacing:0.3em;
- text-align:center;
- padding:1.5em;
- }
- ul#navigation li
- {
- padding: 1em;
- display:inline;
- list-style: none;
- margin:0.5em;
- }
- header a
- {
- color: brown;
- text-decoration: none;
- border:none;
- text-shadow:0 1px 0 #fff;
- -webkit-transition: color 0.2s ease;
- -moz-transition: color 0.2s ease;
- -o-transition: color 0.2s ease;
- }
- header a:hover
- {
- opacity: 0.5;
- color: rgba(255,255,255,0.3);
- text-shadow: 2px 2px 0px rgba(177,51,51,0.8);
- }
- footer
- {
- font-family:"Bauhaus Std";
- padding:1em;
- text-shadow:0 1px 0 #fff;
- font-variant: small-caps;
- letter-spacing: 0.1em;
- font-size: small;
- }
- footer p
- {
- text-align:left;
- padding-right:11em;
- padding-left:12em;
- }
- ol#code li:before
- {
- content : "|";
- }
- ol#table_of_content li
- {
- text-indent: 1em;
- color :rgb(100,100,100);
- text-shadow:0 1px 0 #fff;
- }
- li #h2
- {
- font-variant:small-caps;
- letter-spacing:0.1;
- }
- ul#table_of_content li:before
- {
- content:"";
- }
- ul#table_of_content li
- {
- list-style:lower-latin;
- }
- #h3
- {
- list-style-position:outside;
- text-indent:1em;
- }
- #h2
- {
- text-indent:2em;
- }
- a
- {
- color: rgb(8,83,26);
- text-decoration: none;
- }
- a:hover
- {
- color:brown;
- }
- h1
- {
- font-family: "Bauhaus Std";
- font-variant: small-caps;
- letter-spacing:0.4em;
- font-size: 300%;
- color:brown;
- text-align:center;
- text-shadow:0 1px 0 #fff;
- }
- h2
- {
- color: grey;
- font-family: "Friz Quadrata Std";
- font-variant:small-caps;
- letter-spacing: 0.1em;
- text-shadow:0 1px 0 #fff;
- padding-top:1.5em;
- margin-bottom:-0.5em;
- }
- h3
- {
- font-family:"Friz Quadrata Std";
- font-style: italic;
- font-weight:normal;
- text-shadow:0 1px 0 #fff;
- }
- h4
- {
- font-style: italic;
- text-shadow:0 1px 0 #fff;
- }
- table span
- {
- text-transform: uppercase;
- }
- table
- {
- border-collapse:collapse;
- text-align: left;
- }
- td.title_entry
- {
- font-family:"Gill Sans Std";
- padding:1em;
- margin:0.5em;
- width:7em;
- color :rgb(90,90,90);
- letter-spacing:0.1em;
- vertical-align:top;
- text-shadow:0 1px 0 #fff;
- font-variant:small-caps;
- }
- .japanese
- {
- font-family: "Heisei Maru Gothic Std";
- font-size:small;
- }
- video
- {
- -moz-box-shadow: -20px -20px 20px white, 20px -20px 20px white, -20px 20px 20px white, 20px 20px 20px white;
- -webkit-box-shadow: -20px -20px 20px white, 20px -20px 20px white, -20px 20px 20px white, 20px 20px 20px white;
- box-shadow: -20px -20px 20px white, 20px -20px 20px white, -20px 20px 20px white, 20px 20px 20px white;
- }
- figure
- {
- /*margin-bottom:5em;*/
- }
- figcaption.light
- {
- font-family: "Oregon LDO Vanishing";
- color:white;
- background-image: -moz-linear-gradient(100% 100% 90deg, #e1e1e1, rgba(255, 255, 255, 0) );
- background-image: -webkit-gradient(linear, 0% 0%, 0% 120%, from(rgba(255, 255, 255, 0)), to(#e1e1e1));
- bottom:1.9em;
- position:relative;
- -moz-box-shadow: -20px 50px 50px white, 20px 50px 50px white;
- -webkit-box-shadow: -20px 50px 50px white, 20px 50px 50px white;
- box-shadow: -20px 50px 50px white, 20px 50px 50px white;
- padding-bottom:1em;
- }
- figcaption.light a
- {
- text-shadow:text-shadow:5px 10px 10px #fff;
- color:white;
- }
- figcaption.future
- {
- font-family:"Sony Sketch EF";
- text-align:center;
- }
- figure.rotation
- {
- background: rgba(255,255,255,1);
- border: 10px solid #fff;
- -webkit-border-radius: 8px;
- -moz-border-radius: 8px;
- border-radius: 8px;
- -webkit-box-shadow: 0 3px 10px #ccc;
- -moz-box-shadow: 0 3px 10px #ccc;
- box-shadow: 0 3px 10px #ccc;
- }
- figure.rotation img {
- width: 100%;
- -webkit-transition: all 0.7s ease-in-out;
- -moz-transition: all 1s ease-in-out;
- -o-transition: all 1s ease-in-out;
- transition: all 1s ease-in-out;
- }
- figure.rotation img:hover
- {
- border: 10px solid #fff;
- -webkit-border-radius: 8px;
- -moz-border-radius: 8px;
- border-radius: 8px;
- -webkit-box-shadow: 0 3px 10px #ccc;
- -moz-box-shadow: 0 3px 10px #ccc;
- box-shadow: 0 3px 10px #ccc;
- -moz-transform: scale(2) rotate(360deg);
- -webkit-transform: scale(2) rotate(360deg);
- -o-transform: scale(2) rotate(360deg);
- transform: scale(2) rotate(360deg);
- }
- .img{
- -moz-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- -moz-box-shadow: -20px -20px 20px black, 20px -20px 20px black, -20px 20px 20px black, 20px 20px 20px black;
- -webkit-box-shadow: -20px -20px 20px black, 20px -20px 20px black, -20px 20px 20px black, 20px 20px 20px black;
- box-shadow: -20px -20px 10px black, 20px -20px 10px black, -20px 20px 10px black, 20px 20px 10px black;
- }
- .img:hover
- {
- -moz-transform:scale(1.5);
- -webkit-transform:scale(1.5);
- -moz-box-shadow:0px 0px 30px #ccc;
- -webkit-box-shadow:0px 0px 30px #ccc;
-
- }
- .img .mask{
- width: 34%;
- background-color: rgb(0, 0, 0);
- position: absolute;
- height: 47%;
- opacity:0.6;
- cursor:pointer;
- -moz-transition-duration:3s;
- -webkit-transition-duration: 3s;
- }
- #img:hover .mask{
- height:0%;
- width:0%;
- }
- figcaption.trans_future
- {
- font-family:"Sony Sketch EF";
- text-align:center;
- background-color:rgba(255,255,255,0);
- color:white;
- }