Admin Admin
Messages : 20 Date d'inscription : 2015-08-01
| Subject: CSS CSS CSS Mon 17 Aug - 14:55 | |
| - Code:
-
#content1 { display: block; height: 320px; overflow: hidden; border: 1px solid #b39897; font-size: 11px; color: #3c506f; background-color: #baacac; border-radius: 80px 80px 15px 15px / 25px 25px 15px 15px; } #content2 { display: none; } #accueil1:target #content1 { display: block; height: 320px; background-color: #baacac; overflow: hidden; border: 1px solid #b39897; font-size: 11px; color: #3c506f; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); } #accueil2:target #content2 { display: block; height: 320px; overflow: hidden; background-color: #baacac; font-size: 11px; color: #3c506f; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); }
.langue { border-radius: 10px 0px 0px 0px / 20px 0px 0px 0px; display: block; width: 150px; height: 65px; background-color: #b39897; margin-left: 5px; margin-bottom: 15px; padding: 5px; box-shadow: 0px 0px 8px #b39897; }
.serveurs { display: block; width: 150px; height: 65px; background-color: #b39897; margin-left: 5px; margin-bottom: 12px; padding: 5px; box-shadow: 0px 0px 8px #b39897; }
.projet { display: block; width: 385px; height: 157px; background-color: #b39897; margin-left: 5px; margin-bottom: 12px; padding: 5px; box-shadow: 0px 0px 8px #b39897; }
.news { display: block; width: 185px; height: 157px; background-color: #b39897; margin-left: 5px; margin-bottom: 12px; padding: 5px; border-radius: 0px 10px 0px 0px / 0px 20px 0px 0px; box-shadow: 0px 0px 8px #b39897; } .staff { display: block; width: 368px; height: 100px; background-color: #b39897; margin-left: 5px; padding: 5px; border-radius: 0px 0px 0px 10px / 0px 0px 0px 20px; box-shadow: 0px 0px 8px #b39897; }
.liens { display: block; width: 369px; height: 100px; background-color: #b39897; margin-left: 5px; padding: 5px; border-radius: 0px 0px 10px 0px / 0px 0px 20px 0px; box-shadow: 0px 0px 8px #b39897; }
.titre { top: -12px; font-family: 'Kalam', cursive; letter-spacing: 4px; font-size: 20px; position: relative; color: white; text-shadow:0px 0px 4px black; font-style: bold; }
.texte { font-family: 'Patrick Hand SC', cursive; font-size: 14px; color: white; }
.rond { width: 80px; height: 80px; border-radius: 40px; background-color: red; }
.conteneur { display:inline-block; margin: 5px; position: relative; top: -10px; width: 80px; height: 80px; border-radius: 40px; background-color: red; overflow: visible; box-shadow: 0px 0px 5px red; }
.conteneur .objet_vise { height: 80px; border-radius: 40px; width: 80px; background-color: red; }
.conteneur .infobulle { position: absolute; top: 0px; left: 0px; width: 80px; height: 80px; border-radius: 40px; opacity: 0; visibility: hidden; color: white; font-family: 'Patrick Hand SC', cursive; font-size: 14px; padding-top: 10px; }
.conteneur:hover .infobulle { transition: 2s; opacity: 1; visibility: visible; z-index: 999: }
.news_contenu { width: 150px; display: block; font-family: 'Patrick Hand SC', cursive; font-size: 14px; color: white; padding-bottom: 3px; margin-bottom: 5px; margin-top: 5px; border-bottom:2px dashed white; }
#news_contenu a { color: #ffffff !important; }
.ul1 { width: 560px; padding: 0; } .ul1 .li1 { display: inline-block; width: 112px; height: 165px; background: orangered; }
/* tous les elements */ .ul1 .li1{ ... transform: rotateY(45deg); } /* l'element central */ .ul1 .li1:nth-child(3){ ... transform: rotateY(0deg) scale(1.2); } /* les elements qui suivent l'element central */ .ul1 .li1:nth-child(3) ~ .li1{ ... transform: rotateY(-45deg); }
.ul1{ ... perspective: 500px; }
/* l'élément survolé */ .ul1 .li1:hover{ ... transform: rotateY(0deg) scale(1.2); }
/* les elements qui suivent l'element survole */ .ul1 .li1:hover ~ .li1{ transform: rotateY(-45deg); }
/* les éléments survolés */ .ul1 .li1:hover, .ul1 .li1:nth-child(3) ~ .li1:hover{ ... transform: rotateY(0deg) scale(1.2); }
/* les elements non survoles, lors du survol du parent */ .ul1:hover .li1:not(:hover){ transform: rotateY(45deg); }
/* les elements qui suivent l'element survole */ .ul1:hover .li1:hover ~ .li1{ transform: rotateY(-45deg); }
ou
.ul1#id .li1:hover ~ .li1{ transform: rotateY(-45deg); }
.ul1{ ... width: 500px; } .ul1 .li1{ ... margin-right: -15px; }
.ul1 .li1{ ... transition: all .45s; }
/* z-index de tous les elements */ .ul1 .li1{ ... position: relative; z-index: 50; }
/* z-index de l'element central (devant) */ .ul1 .li1:nth-child(3){ ... z-index: 55; }
/* z-index du premier et dernier element (derrière) */ .ul1 .li1:first-child, .ul1 .li1:last-child{ z-index: 45; }
/* les éléments survolés */ .ul1 .li1:hover, .ul1 .li1:first-child:hover, .ul1 .li1:nth-child(3) ~ .li1:hover{ ... z-index: 60; } | |
|
Admin Admin
Messages : 20 Date d'inscription : 2015-08-01
| Subject: Re: CSS CSS CSS Thu 20 Aug - 14:15 | |
| | |
|