Share | 
 

 CSS CSS CSS

View previous topic View next topic Go down 
AuthorMessage
Admin
Admin


Messages : 20
Date d'inscription : 2015-08-01

PostSubject: 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;
}
Back to top Go down
View user profile http://merino.forumactif.com
Admin
Admin


Messages : 20
Date d'inscription : 2015-08-01

PostSubject: Re: CSS CSS CSS   Thu 20 Aug - 14:15

Back to top Go down
View user profile http://merino.forumactif.com
 
CSS CSS CSS
View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
Merino et ses petits tests  ::  :: Tutorial-
Jump to: