Login

Bienvenue sur le site de Jef

La foire aux questions

Les formes

Carré

.carre { width:100px; height:100px;  background-color:red; }

Rectangle

.rectangle { width:200px; height:100px; background-color:red; }

Cercle

.cercle		{ width:100px; height:100px; background-color:red; 
                  -moz-border-radius:50px; 
                  -webkit-border-radius:50px; 
                  border-radius: 50px; }

Oval

.oval 		{ width:200px; height:100px; background-color:red;
                  -moz-border-radius:100px / 50px; 
                  -webkit-border-radius:100px / 50px; 
                  border-radius:100px / 50px; }			  

Triangle haut

.triangle-up { width:0; height:0; 
               border-left:50px solid transparent; 
               border-right:50px solid transparent; 
               border-bottom:100px solid red; }		  

Triangle bas

.triangle-down { width:0; height:0; margin:0 auto;
                 border-left:50px solid transparent; 
                 border-right:50px solid transparent; 
                 border-top:100px solid red; } 		  

Triangle gauche

.triangle-left { width:0; height:0; 
                 border-top:50px solid transparent; 
                 border-right:100px solid red; 
                 border-bottom:50px solid transparent; }

Triangle droit

.triangle-right { width:0; height:0;
                  border-top:50px solid transparent; 
                  border-left:100px solid red; 
                  border-bottom:50px solid transparent; }

Triangle haut gauche

.triangle-topleft { width:0; height:0; 
                    border-top:100px solid red; 
                    border-right:100px solid transparent; }

Triangle haut droit

.triangle-topright { width:0; height:0; 
                     border-top:100px solid red; 
                     border-left:100px solid transparent; }

Triangle bas gauche

.triangle-bottomleft { width:0; height:0; 
                       border-bottom:100px solid red; 
                       border-right:100px solid transparent; }

Triangle bas droit

.triangle-bottomright { width:0; height:0; 
                        border-bottom:100px solid red; 
                        border-left:100px solid transparent; }

Flèche courbe

.curvedarrow        { position:relative; width:0; height:0; 
                      border-top:9px solid transparent; 
                      border-right:9px solid red; 
                      -webkit-transform:rotate(10deg); 
                      -moz-transform:rotate(10deg); 
                      -ms-transform:rotate(10deg); 
                      -o-transform:rotate(10deg); } 
.curvedarrow:after { content:""; position:absolute; top:-12px; left:-9px;  
                     width:12px; height:12px;
                     border:0 solid transparent; 
                     border-top:3px solid red;
                     border-radius:20px 0 0 0; 
                     -webkit-transform:rotate(45deg); 
                     -moz-transform:rotate(45deg); 
                     -ms-transform:rotate(45deg); 
                     -o-transform:rotate(45deg); }

Trapèze

.trapezoid          { height:0; width:100px; 
                      border-bottom:100px solid red; 
                      border-left:50px solid transparent; 
                      border-right:50px solid transparent; }

Parallelogramme

.parallelogram    { width: 150px; height: 100px;
                    background:red; 
                    -webkit-transform: skew(20deg); 
                    -moz-transform: skew(20deg); 
                    -o-transform: skew(20deg); }

Étoile à 6 branches

.star-six         { position:relative; width:0; height:0; 
                    border-left:50px solid transparent; 
                    border-right:50px solid transparent; 
                    border-bottom:100px solid red; } 
.star-six:after   { content:""; position:absolute; top:30px; left:-50px; 
                    width:0; height:0; 
                    border-left:50px solid transparent; 
                    border-right:50px solid transparent; 
                    border-top:100px solid red; }

Étoile à 5 branches

.star-five        { position:relative; 
                    width:0px; height:0px; margin:50px 0; 
                    display:block; color:red;
                    border-right:100px solid transparent; 
                    border-bottom:70px solid red; 
                    border-left:100px solid transparent; 
                    -moz-transform:rotate(35deg); 
                    -webkit-transform:rotate(35deg); 
                    -ms-transform:rotate(35deg); 
                    -o-transform:rotate(35deg); } 
.star-five:before { content: ''; display: block; 
                    position:absolute; top:-45px; left:-65px;  
                    height:0; width:0;
                    border-bottom:80px solid red; 
                    border-left:30px solid transparent; 
                    border-right:30px solid transparent; 
                    -webkit-transform: rotate(-35deg); 
                    -moz-transform: rotate(-35deg); 
                    -ms-transform: rotate(-35deg); 
                    -o-transform: rotate(-35deg); } 
.star-five:after  { content: ''; display:block;
                    width:0px; height:0px;
                    position:absolute; top:3px; left:-105px; 
                    color:red; 
                    border-right:100px solid transparent; 
                    border-bottom:70px solid red; 
                    border-left:100px solid transparent; 
                    -webkit-transform:rotate(-70deg); 
                    -moz-transform:rotate(-70deg); 
                    -ms-transform:rotate(-70deg); 
                    -o-transform:rotate(-70deg); }

Pentagone

.pentagon         { position:relative; width:54px; 
                    border-width:50px 18px 0; 
                    border-style:solid; 
                    border-color:red transparent; } 
.pentagon:before  { content:""; 
                    position:absolute; top:-85px; left:-18px; 
                    width:0; height:0; 
                    border-width:0 45px 35px; 
                    border-style:solid; 
                    border-color:transparent transparent red; }

Hexagone

.hexagon          { position:relative; 
                    width:100px; height:55px; background:red; } 
.hexagon:before   { content:""; 
                    position:absolute; top:-25px; left:0; 
                    width:0; height:0; 
                    border-left:50px solid transparent; 
                    border-right:50px solid transparent; 
                    border-bottom:25px solid red; } 
.hexagon:after    { content:""; 
                    position:absolute; bottom:-25px; left:0; 
                    width:0; height:0; 
                    border-left:50px solid transparent; 
                    border-right:50px solid transparent; 
                    border-top:25px solid red; }

Octogone

.octagon         { position:relative; 
                   width:100px; height:100px; 
                   background:red; } 
.octagon:before  { content:""; 
                   position:absolute; top:0; left:0;
                   width:42px; height:0; 
                   border-bottom:29px solid red; 
                   border-left:29px solid #eee; 
                   border-right:29px solid #eee; } 
.octagon:after   { content:""; 
                   position:absolute; bottom:0; left:0;
                   width:42px; height:0; 
                   border-top:29px solid red; 
                   border-left:29px solid #eee; 
                   border-right:29px solid #eee; }

Cœur

.heart           { position:relative; 
                   width:100px; height:90px; } 
.heart:before, 
.heart:after     { content:""; 
                   position:absolute; left:50px; top:0; 
                   width:50px; height:80px; 
                   background:red; 
                   -moz-border-radius:50px 50px 0 0; 
                   border-radius:50px 50px 0 0; 
                   -webkit-transform:rotate(-45deg); 
                   -moz-transform:rotate(-45deg); 
                   -ms-transform:rotate(-45deg); 
                   -o-transform:rotate(-45deg); 
                   transform:rotate(-45deg); 
                   -webkit-transform-origin:0 100%; 
                   -moz-transform-origin:0 100%; 
                   -ms-transform-origin:0 100%; 
                   -o-transform-origin:0 100%; 
                   transform-origin:0 100%; } 
				   
.heart:after    { left:0; 
                  -webkit-transform:rotate(45deg); 
                  -moz-transform:rotate(45deg); 
                  -ms-transform:rotate(45deg); 
                  -o-transform:rotate(45deg); 
                  transform:rotate(45deg); 
                  -webkit-transform-origin:100% 100%; 
                  -moz-transform-origin:100% 100%; 
                  -ms-transform-origin:100% 100%; 
                  -o-transform-origin:100% 100%; 
                  transform-origin:100% 100%; }

Infini

.infinity       { position:relative; 
                  width:212px; height:100px; } 
.infinity:before, 
.infinity:after { content:""; 
                  position:absolute; top:0; left:0; 
                  width:60px; height:60px; 
                  border:20px solid red; 
                  -moz-border-radius:50px 50px 0 50px; 
                  border-radius:50px 50px 0 50px; 
                  -webkit-transform:rotate(-45deg); 
                  -moz-transform:rotate(-45deg); 
                  -ms-transform:rotate(-45deg); 
                  -o-transform:rotate(-45deg); 
                  transform: rotate(-45deg); } 
.infinity:after { left:auto; right:0; 
                  -moz-border-radius:50px 50px 50px 0; 
                  border-radius:50px 50px 50px 0; 
                  webkit-transform:rotate(45deg); 
                  -moz-transform:rotate(45deg); 
                  -ms-transform:rotate(45deg); 
                  -o-transform:rotate(45deg); 
                  transform:rotate(45deg); }	

Diamant carré

.diamond        { position:relative; top:-50px; 
                  width:0; height:0; 
                  border:50px solid transparent; 
                  border-bottom-color:red; } 
.diamond:after  { content:''; 
                  position:absolute; left:-50px; top:50px; 
                  width:0; height:0; 
                  border:50px solid transparent; 
                  border-top-color:red; }

Diamant bouclié

.diamond-shield       { position:relative; top:-50px; 
                        width:0; height:0; 
                        border:50px solid transparent; 
                        border-bottom:20px solid red; } 
.diamond-shield:after { content: ''; 
                        position:absolute; left:-50px; top:20px; 
                        width:0; height:0; 
                        border:50px solid transparent; 
                        border-top:70px solid red; }

Diamant étroit

.diamond-narrow       { position:relative; top:-50px; 
                        width:0; height:0; 
                        border:50px solid transparent; 
                        border-bottom:70px solid red; } 
.diamond-narrow:after { content:''; 
                        position:absolute; left:-50px; top:70px; 
                        width:0; height:0; 
                        border:50px solid transparent; 
                        border-top:70px solid red; }

Diamant coupé

.cut-diamond          { position:relative; 
                        width:50px; height:0; 
                        border-style:solid; 
                        border-color:transparent transparent red transparent; 
                        border-width:0 25px 25px 25px; } 
.cut-diamond:after    { content:""; 
                        position:absolute; top:25px; left:-25px; 
                        width:0; height:0; 
                        border-style:solid; 
                        border-color:red transparent transparent transparent; 
                        border-width:70px 50px 0 50px; }

Œuf

.egg       { display:block; 
             width:126px; height:180px; 
             background-color:red; 
             -webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px; 
             border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; }

Pacman

.pacman      { width:0px; height:0px; 
               border-right:60px solid transparent; 
               border-top:60px solid red; 
               border-left:60px solid red; 
               border-bottom:60px solid red; 
               border-top-left-radius:60px; 
               border-top-right-radius:60px; 
               border-bottom-left-radius:60px; 
               border-bottom-right-radius:60px; }

ou

.pacman      { width:0px; height:0px; 
               border-right:60px solid transparent; 
               border-top:60px solid red; 
               border-left:60px solid red; 
               border-bottom:60px solid red; 
               -webkit-border-radius:60px; 
               border-radius:60px; }

Bulle de conversation

.talkbubble        { position:relative; 
                     width:120px; height:80px; 
					 background:red; 
					 -moz-border-radius:10px; 
					 -webkit-border-radius:10px; 
					 border-radius:10px; } 
.talkbubble:before { content:""; 
                     position:absolute; right:100%; top:26px; 
					 width:0; height:0; 
					 border-top:13px solid transparent; 
					 border-right:26px solid red; 
					 border-bottom:13px solid transparent; }

Explosion

.burst-12        { position:relative; 
                   width:80px; height:80px;
                   background:red; 
                   text-align:center; } 
.burst-12:before, 
.burst-12:after  { content:""; 
                   position:absolute; top:0; left:0; 
                   height:80px; width:80px; 
                   background:red; } 
.burst-12:before { -webkit-transform:rotate(30deg); 
                   -moz-transform:rotate(30deg); 
                   -ms-transform:rotate(30deg); 
                   -o-transform:rotate(30deg); } 
.burst-12:after  { -webkit-transform:rotate(60deg); 
                   -moz-transform:rotate(60deg); 
                   -ms-transform:rotate(60deg);
                   -o-transform:rotate(60deg); }

Explosion 2

.burst-8         { position:relative; 
                   width:80px; height:80px; 
                   background:red; text-align:center; 
                   -webkit-transform:rotate(20deg); 
                   -moz-transform:rotate(20deg); 
                   -ms-transform:rotate(20deg); 
                   -o-transform:rotate(20eg); } 
.burst-8:before  { content:""; 
                   position:absolute; top:0; left:0; 
                   height:80px; width:80px; 
                   background:red; 
                   -webkit-transform:rotate(135deg); 
                   -moz-transform:rotate(135deg); 
                   -ms-transform:rotate(135deg); 
                   -o-transform:rotate(135deg); }

Yin Yang

.yin-yang        { position:relative; 
                   width:96px; height:48px; 
                   background:#eee; border-color:red; 
                   border-style:solid; 
                   border-width:2px 2px 50px 2px; 
                   border-radius:100%; } 
.yin-yang:before { content:""; 
                   position:absolute; top:50%; left:0;
                   width:12px; height:12px; 
                   background:#eee; 
                   border:18px solid red; 
                   border-radius:100%; } 
.yin-yang:after  { content:""; 
                   position:absolute; top:50%; left:50%;
                   width:12px; height:12px; 
                   background:red; 
                   border:18px solid #eee; 
                   border-radius:100%; } 

Ruban de badge

.badge-ribbon       { position:relative; 
                      width:100px; height:100px; 
                      background:red; 
                      -moz-border-radius:50px; 
                      -webkit-border-radius:50px; 
                      border-radius:50px; } 
.badge-ribbon:before, 
.badge-ribbon:after { content:''; 
                      position:absolute; top:70px; left:-10px; 
                      border-bottom:70px solid red; 
                      border-left:40px solid transparent; 
                      border-right: 40px solid transparent; 
                      -webkit-transform: rotate(-140deg); 
                      -moz-transform: rotate(-140deg); 
                      -ms-transform: rotate(-140deg); 
                      -o-transform: rotate(-140deg); } 
.badge-ribbon:after { left:auto; right:-10px; 
                      -webkit-transform:rotate(140deg); 
                      -moz-transform:rotate(140deg); 
                      -ms-transform:rotate(140deg); 
                      -o-transform:rotate(140deg); }

Envahisseur de l'espace

.space-invader      { width:1em; height:1em; 
                      overflow:hidden;
                      box-shadow:0 0 0 1em red,
                      0 1em 0 1em red,
                      -2.5em 1.5em 0 .5em red, 
                      2.5em 1.5em 0 .5em red,
                      -3em -3em 0 0 red,
                      3em -3em 0 0 red,
                      -2em -2em 0 0 red,
                      2em -2em 0 0 red, 
                      -3em -1em 0 0 red, 
                      -2em -1em 0 0 red, 
                      2em -1em 0 0 red, 
                      3em -1em 0 0 red, 
                      -4em 0 0 0 red, 
                      -3em 0 0 0 red, 
                      3em 0 0 0 red, 
                      4em 0 0 0 red, 
                      -5em 1em 0 0 red, 
                      -4em 1em 0 0 red, 
                      4em 1em 0 0 red, 
                      5em 1em 0 0 red, 
                      -5em 2em 0 0 red, 
                      5em 2em 0 0 red, 
                      -5em 3em 0 0 red, 
                      -3em 3em 0 0 red, 
                      3em 3em 0 0 red, 
                      5em 3em 0 0 red, 
                      -2em 4em 0 0 red, 
                      -1em 4em 0 0 red, 
                      1em 4em 0 0 red, 
                      2em 4em 0 0 red; 
                      background:red; }

Écran de télévision

.tv           { position:relative; 
                width:200px; height:150px; margin:20px auto; 
                background:red; 
                border-radius:50% / 10%; 
                color:white; text-align:center; text-indent:.1em; } 
.tv:before    { content:''; 
                position:absolute; top:10%; bottom:10%; right:-5%; left:-5%; 
                background:inherit; 
                border-radius:5% / 50%; }

Chevron

.chevron        { position:relative; 
                  height:60px; width:200px;
                  text-align:center; } 
.chevron:before { content:''; 
                  position:absolute; top:0; left:0; 
                  width:51%; height:100%; 
                  background:red; 
                  -webkit-transform:skew(0deg, 6deg); 
                  -moz-transform:skew(0deg, 6deg); 
                  -ms-transform:skew(0deg, 6deg); 
                  -o-transform:skew(0deg, 6deg); 
                  transform:skew(0deg, 6deg); } 
.chevron:after  { content:''; 
                  position:absolute; top:0; right:0; 
                  width:50%; height:100%; 
                  background:red; 
                  -webkit-transform:skew(0deg, -6deg); 
                  -moz-transform:skew(0deg, -6deg); 
                  -ms-transform:skew(0deg, -6deg); 
                  -o-transform:skew(0deg, -6deg); 
                  transform:skew(0deg, -6deg); }​

Loupe

.loupe             { position: relative; 
                     display: inline-block; 
                     font-size: 10em; /* This controls the size. */
                     width:0.4em; height:0.4em; margin:0 auto;
                     border:0.1em solid red; 
                     border-radius: 0.35em;  }
.loupe:before      { content: "";
                     display: inline-block;
                     position: absolute;
                     right: -0.25em;
                     bottom: -0.1em;
                     border-width: 0;
                     background: red;
                     width: 0.35em;
                     height: 0.08em;
                     -webkit-transform: rotate(45deg);
                     -moz-transform: rotate(45deg);
                     -ms-transform: rotate(45deg);
                     -o-transform: rotate(45deg); }