Sujets similaires

Sujet: Onglet en CSS Mer 28 Mar 2012, 06:15

Bonjour à tous !

Je cherche à réaliser depuis des mois ceci : http://www.css3create.com/Navigation-slide-CSS3-avec-target-et-transitions
Cependant, je n'arrive pas à parvenir à mes fins, et je dois dire que je désespère un peu à présent !
Je sais faire tout ce qui est décoration en CSS, mais j'ai du mal avec ces nouvelles fonctionnalités de CSS3.

Si quelqu'un a la possibilité de m'aider à comprendre comment faire ceci, ce serait vraiment génial ! Very Happy

Merci d'avance !

Sujet: Re: Onglet en CSS Mer 28 Mar 2012, 07:57

Hop hop hello! Alors d'abord, je vais te donner le html de la partie d la page utilisant CSS3, te faire un petit schéma e quelle classe est quoi, puis te mettre le CSS correspondant de chacun. Je te laisserais alors essayer de trouver seule comment ça marche, et, au cas où tu n'y arrive pas, je t'aiderais! ^^

Code HTML:

Code:

<section class="crayon article-css-27 demoTime" id="article27">
<div id="demoWrap">
<div id="wrap1">
<div "="" id="wrap2">
<div id="wrap3">
<div id="wrap4">
<div id="background">
   <ul>
   <li><a href="#wrap1"><span>#1</span></a></li>
   <li><a href="#wrap2"><span>#2</span></a></li>
   <li><a href="#wrap3"><span>#3</span></a></li>
   <li><a href="#wrap4"><span>#4</span></a></li>
   </ul>
   <div id="fleche"></div>
   <div id="textes">

<p><strong>CSS3</strong>Everything is CSS, no images and no JavaScript.</p>

<p><strong>:target</strong>Use CSS3 pseudo-classes.</p>

<p><strong> ::after/before</strong>Use pseudo-elements too.</p>

<p><strong>Effects</strong>Add shadows, gradients and transitions.</p>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Schéma descriptif:

Code CSS des éléments:

Code:

#article27 {
border: 3px solid white;
font-family: "Helvetica Neue","Trebuchet MS",sans-serif;
font-size: 0.9em;
height: 394px;
overflow: hidden;
}

.demoTime {
background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
border: 2px solid white;
clear: right;
margin-top: 5px;
min-height: 100px;
overflow: hidden;
padding-top: 1px;
position: relative;
}

#article27 #demoWrap {
height: 800px;
position: absolute;
top: -400px;
width: 2340px;
}

#article27 #demoWrap #wrap3:target #background {
background-color: #CC9900;
}

#article27 #background {
-moz-transition: background-color 1s ease-out 0s;
background-color: #0099CC;
background-image: -moz-linear-gradient(center top , white, white 50%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0));
height: 400px;
padding-top: 400px;
width: 585px;
}

#article27 #demoWrap ul {
height: 80px;
padding-left: 110px;
padding-top: 110px;
}

#article27 #demoWrap ul li:after, #article27 #demoWrap #wrap2:target ul li:nth-child(1):after, #article27 #demoWrap #wrap3:target ul li:nth-child(1):after, #article27 #demoWrap #wrap4:target ul li:nth-child(1):after {
background: none repeat scroll 0 0 black;
border-radius: 2px 2px 2px 2px;
box-shadow: none;
content: "";
height: 4px;
left: 33px;
position: absolute;
top: 105px;
width: 4px;
}

#article27 #demoWrap ul li:nth-child(1):after, #article27 #demoWrap #wrap1:target ul li:nth-child(1):after, #article27 #demoWrap #wrap2:target ul li:nth-child(2):after, #article27 #demoWrap #wrap3:target ul li:nth-child(3):after, #article27 #demoWrap #wrap4:target ul li:nth-child(4):after {
background: none repeat scroll 0 0 white;
box-shadow: 0 0 4px #FFFFFF;
}

#article27 #demoWrap ul li:after, #article27 #demoWrap #wrap2:target ul li:nth-child(1):after, #article27 #demoWrap #wrap3:target ul li:nth-child(1):after, #article27 #demoWrap #wrap4:target ul li:nth-child(1):after {
background: none repeat scroll 0 0 black;
border-radius: 2px 2px 2px 2px;
box-shadow: none;
content: "";
height: 4px;
left: 33px;
position: absolute;
top: 105px;
width: 4px;
}

#article27 #demoWrap ul li {
background: -moz-linear-gradient(center top , #464C54, #22272B) repeat scroll 0 0 transparent;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 4px #1B1E22;
float: left;
height: 58px;
list-style: none outside none;
margin: 0 10px;
padding: 6px 5px;
position: relative;
width: 60px;
}

#article27 #demoWrap ul li a span {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.4);
border-radius: 18px 18px 18px 18px;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
display: block;
height: 31px;
left: 18px;
padding-top: 5px;
position: absolute;
top: 17px;
width: 36px;
}

#article27 #demoWrap #wrap3:target #fleche {
margin-left: 325px;
}

#article27 #demoWrap #fleche {
-moz-transition: margin-left 1s ease-out 0s;
border-bottom: 10px solid #1B1E22;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: 0;
margin-left: 145px;
width: 0;
}

#article27 #demoWrap #wrap3:target #textes {
margin-left: -1170px;
}

#article27 #demoWrap #textes {
-moz-transition: margin-left 1s ease-out 0s;
background: -moz-linear-gradient(center bottom , #21262A, #333941) repeat scroll 0 0 transparent;
border-top: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 -6px 0 #1B1E22, 0 -7px 3px rgba(0, 0, 0, 0.5);
clear: left;
height: 193px;
margin-top: 6px;
width: 2340px;
}

#article27 #demoWrap p {
color: #4E5358;
float: left;
font-size: 1.2em;
height: 143px;
padding-top: 30px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
width: 585px;
}

Sujet: Re: Onglet en CSS Jeu 29 Mar 2012, 05:48

Merci pour ton aide ! Smile

Pour l'instant j'en suis là : http://etoile-du-matin.forumzen.com/h3-onglet-css
J'ai deux petits soucis :
- Je n'arrive pas à bloquer la largeur dans un cadre, comme dans la démo.
- La flèche ne se positionne pas comme prévu, pourtant j'ai bien regardé dans le CSS et tout me semble bon pourtant.

Je continue à chercher, et si jamais je trouve j'éditerai ! ^^

Sujet: Re: Onglet en CSS Jeu 29 Mar 2012, 05:59

Arg, t'es plus rapide que moi, j'ai pas eût le temps de le mettre en place! x)

Pour ce qui est du dépassement visible, je suppose qu'il faut y avoir un overflow: hidden; ou quelque chose comme ça. Parce que tu as ton div "d'affichage" du texte, et le reste du texte est à "l'extérieur" du div, grâce à/à cause du margin. Si tu n'as pas l'overflow qui est caché, il sera tout simplement affiché.

Il est aussi possible que j'aie oublié de copié une partie du CSS, dans ce cas ce serait honte à moi! D=

Et pour la flèche, apparemment le petit point blanc ce met au bon endroit mais pas la flèche. Est-ce que tu arrives à retrouver dans le code le petit point blanc? (sinon je ferais des recherches moi, quand je rentre ce soir ^^)

Edit: Apparemment, dans ton PA, le problème du dépassement de texte n’existe pas! Par contre, toujours ce problème avec la flèche...

Sujet: Re: Onglet en CSS Jeu 29 Mar 2012, 11:59

Salut a tous

Comme Nyo The Neko te l'a suggéré il faut bien placer un ( overflow:hidden; ) dans le css suivant pour éviter que le bandeau ne dépasse du cadre.

Code:: #article27 #demoWrap{
position:absolute;
top:-400px;
/*width:2340px;*/
width: 585px;
height:800px;
}

Puis pour déplacer la flèche pour quelle se positionne sous chaque onglet cela se passe dans cette partie du CSS,prends exemple sur celui-ci.

Code:: #article27 #demoWrap #wrap1:target #fleche{margin-left:-280px;}

#article27 #demoWrap #wrap2:target #fleche{margin-left:-100px;}

#article27 #demoWrap #wrap3:target #fleche{margin-left:80px;}

#article27 #demoWrap #wrap4:target #fleche{margin-left:260px;}

Sujet: Re: Onglet en CSS Ven 30 Mar 2012, 04:36

Bonjour !

Alors voilà la seule ligne que j'ai modifié pour que ça marche chez moi :

Code:: #article27 #demoWrap{overflow:hidden;position:relative;top:-400px;width:585px;height:800px;}

Et jai copié tous le CSS disponible, parce que, d'après ce que j'ai compris, ce CSS disponible concerne uniquement ce que l'on veut. Quant au code HTML, il faut copier du "section id="article27"[...]" à sa balise de fermeture.

Donc voilà, j'espère que ça marchera désormais chez toi, parce que chez moi (en local lawl, je peux pas vous montrer pour le moment) ça marche ! ^^

Sujet: Re: Onglet en CSS Ven 30 Mar 2012, 10:48

Bonjour,

Donc tester, et changer dans le code CSS les variable pour la flèche. sa fonctionne.

(ps.: Moi c'est en page HTML xD donc voila)

Preuve: VOIR ICI

Code:: <center>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">

#article27{
height:394px;
overflow:hidden;
font-family:"Helvetica Neue","Trebuchet MS",sans-serif;
font-size:0.9em;
border:3px solid white;
}

/*wrapper*/
/*position+top+height: hack pour eviter
que la page scroll
*/
#article27 #demoWrap{overflow:hidden;position:relative;top:-400px;width:585px;height:800px;}

/*background gradient*/
#article27 #background{
width:585px;
height:400px;
padding-top:400px;
background-color:#09c;
background-image:-moz-linear-gradient(top,white,white 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,0));
background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(0.5,white),color-stop(0.75,rgba(255,255,255,0)),to(rgba(255,255,255,0)));
/*transitions background*/
-webkit-transition:background-color 1s ease-out;
-moz-transition:background-color 1s ease-out;
-o-transition:background-color 1s ease-out;
}

/*ul li*/
#article27 #demoWrap ul{
height:80px;
padding-top:110px;
padding-left:110px;
}
#article27 #demoWrap ul li{
position:relative;
float:left;
width: 60px;
height: 58px;
list-style:none;
margin: 0px 10px;
padding:6px 5px 6px 5px;
background:#353A40;
background:-moz-linear-gradient(top,#464c54,#22272b);
background:-webkit-gradient(linear,left top,left bottom,from(#464c54),to(#22272b));
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0px 0px 4px #1b1e22;
-moz-box-shadow:0px 0px 4px #1b1e22;
box-shadow:0px 0px 4px #1b1e22;
}
/* init lights : off */
/*
PLUS: lors de chaque :target sur lien 2,3,4
remise par défaut de light 1
*/
#article27 #demoWrap ul li::after,
#article27 #demoWrap #wrap2:target ul li:nth-child(1)::after,
#article27 #demoWrap #wrap3:target ul li:nth-child(1)::after,
#article27 #demoWrap #wrap4:target ul li:nth-child(1)::after{
content:"";
position:absolute;
top:105px;
left:33px;
width: 4px;
height: 4px;
background:black;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}

/* init lien */
/*
PLUS: lors de chaque :target sur lien 2,3,4
remise par défaut du lien 1
*/
#article27 #demoWrap ul li a,
#article27 #demoWrap #wrap2:target ul li:nth-child(1) a,
#article27 #demoWrap #wrap3:target ul li:nth-child(1) a,
#article27 #demoWrap #wrap4:target ul li:nth-child(1) a{
display: block;
height: 58px;
width: 60px;
color:#777;
font-size:1.4em;
font-weight:bold;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 0px rgba(0,0,0,0.5);
background:#888;
background:-moz-linear-gradient(right top 225deg,#575a5c,#757575 15%,#888 35%,#555a63);
background:-webkit-gradient(linear,right top,left bottom,from(#575a5c),color-stop(0.15,#757575),color-stop(0.35,#888),to(#555a63));
/*shadows top et bottom*/
-webkit-box-shadow:0px -1px 0px rgba(255,255,255,0.5),
0px -2px 0px rgba(0,0,0,0.3),
               0px 1px 0px rgba(255,255,255,0.5),
0px 2px 0px rgba(0,0,0,1);
-moz-box-shadow:0px -1px 0px rgba(255,255,255,0.5),
0px -2px 0px rgba(0,0,0,0.3),
               0px 1px 0px rgba(255,255,255,0.5),
0px 2px 0px rgba(0,0,0,1);
box-shadow:0px -1px 0px rgba(255,255,255,0.5),
0px -2px 0px rgba(0,0,0,0.3),
               0px 1px 0px rgba(255,255,255,0.5),
0px 2px 0px rgba(0,0,0,1);
/* hover sur couleur*/
-webkit-transition:color 0.25s ease;
-moz-transition:color 0.25s ease;
-o-transition:color 0.25s ease;
}

/* hover lien */
/*
PLUS: lors de chaque :target sur lien 2,3,4
remise par défaut du lien 1
*/
#article27 #demoWrap ul li a:hover,
#article27 #demoWrap #wrap2:target ul li:nth-child(1) a:hover,
#article27 #demoWrap #wrap3:target ul li:nth-child(1) a:hover,
#article27 #demoWrap #wrap4:target ul li:nth-child(1) a:hover{
color:white;
}

/* span */
#article27 #demoWrap ul li a span{
display:block;
position:absolute;
top:17px;
left:18px;
height: 31px;
width: 36px;
padding-top:5px;
background:rgba(255,255,255,0.4);
-webkit-border-radius:18px;
-moz-border-radius:18px;
border-radius:18px;
-webkit-box-shadow:0px -1px 0px rgba(0,0,0,0.5);
-moz-box-shadow:0px -1px 0px rgba(0,0,0,0.5);
box-shadow:0px -1px 0px rgba(0,0,0,0.5);
}

/* fleche */
#article27 #demoWrap #fleche{
width: 0px;
height: 0px;
border-bottom:10px solid #1b1e22;
border-right:10px solid transparent;
border-left:10px solid transparent;
/*margin-left: 145px;*/
/*deplacement*/
-webkit-transition:margin-left 1s ease-out;
-moz-transition:margin-left 1s ease-out;
-o-transition:margin-left 1s ease-out;
}

/* :target */
/* lien1 */
#article27 #demoWrap #wrap1:target #textes{margin-left:0px;}
#article27 #demoWrap #wrap1:target #background{background-color:#09c;}
#article27 #demoWrap #wrap1:target #fleche{margin-left:-275px;}
/* lien2 */
#article27 #demoWrap #wrap2:target #textes{margin-left:-585px;}
#article27 #demoWrap #wrap2:target #background{background-color :#9c0;}
#article27 #demoWrap #wrap2:target #fleche{margin-left:-95px;}
/* lien3 */
#article27 #demoWrap #wrap3:target #textes{margin-left:-1170px;}
#article27 #demoWrap #wrap3:target #background{background-color:#c90;}
#article27 #demoWrap #wrap3:target #fleche{margin-left:75px;}
/* lien4 */
#article27 #demoWrap #wrap4:target #textes{margin-left:-1755px;}
#article27 #demoWrap #wrap4:target #background{background-color:#90c;}
#article27 #demoWrap #wrap4:target #fleche{margin-left:255px;}

/* liens modifiés par :target */
/* PLUS: init lien1 */
#article27 #demoWrap ul li:nth-child(1) a,
#article27 #demoWrap #wrap1:target ul li a[href="#wrap1"],
#article27 #demoWrap #wrap2:target ul li a[href="#wrap2"],
#article27 #demoWrap #wrap3:target ul li a[href="#wrap3"],
#article27 #demoWrap #wrap4:target ul li a[href="#wrap4"]{
color:white;
background:#282C2F;
background:-moz-linear-gradient(bottom,#1a1e20,#585c61);
background:-webkit-gradient(linear,left bottom,left top,from(#1a1e20),to(#585c61));
-webkit-box-shadow:0px -1px 0px rgba(255,255,255,0.5),
0px -2px 0px rgba(0,0,0,0.3),
0px 1px 0px rgba(0,0,0,0.9),
0px 2px 0px rgba(255,255,255,0.4);
-moz-box-shadow:0px -1px 0px rgba(255,255,255,0.5),
0px -2px 0px rgba(0,0,0,0.3),
0px 1px 0px rgba(0,0,0,0.9),
0px 2px 0px rgba(255,255,255,0.4);
box-shadow:0px -1px 0px rgba(255,255,255,0.5),
0px -2px 0px rgba(0,0,0,0.3),
0px 1px 0px rgba(0,0,0,0.9),
0px 2px 0px rgba(255,255,255,0.4);
border-left:1px solid rgba(0,0,0,0.1);
border-right:1px solid rgba(0,0,0,0.1);
margin-left:-1px;
}

/* lights modif */
/* PLUS: init light 1 */
#article27 #demoWrap ul li:nth-child(1)::after,
#article27 #demoWrap #wrap1:target ul li:nth-child(1)::after,
#article27 #demoWrap #wrap2:target ul li:nth-child(2)::after,
#article27 #demoWrap #wrap3:target ul li:nth-child(3)::after,
#article27 #demoWrap #wrap4:target ul li:nth-child(4)::after{
background:white;
-webkit-box-shadow:0px 0px 4px #fff;
-moz-box-shadow:0px 0px 4px #fff;
box-shadow:0px 0px 4px #fff;
}

/* couleur du rond dans lien*/
#article27 #demoWrap #wrap1:target ul li a[href="#wrap1"] span,
#article27 #demoWrap #wrap2:target ul li a[href="#wrap2"] span,
#article27 #demoWrap #wrap3:target ul li a[href="#wrap3"] span,
#article27 #demoWrap #wrap4:target ul li a[href="#wrap4"] span{
background:rgba(151,151,151,0.7);
}

/* div textes */
#article27 #demoWrap #textes{
clear:left;
width:2340px;
height:193px;
margin-top:6px;
background:#292E34;
background:-moz-linear-gradient(bottom,#21262a,#333941);
background:-webkit-gradient(linear,left bottom,left top,from(#21262a),to(#333941));
border-top:1px solid rgba(255,255,255,0.4);
-webkit-box-shadow:0px -6px 0px #1b1e22,0 -7px 3px rgba(0,0,0,0.5);
-moz-box-shadow:0px -6px 0px #1b1e22,0 -7px 3px rgba(0,0,0,0.5);
box-shadow:0px -6px 0px #1b1e22,0 -7px 3px rgba(0,0,0,0.5);
-webkit-transition:margin-left 1s ease-out;
-moz-transition:margin-left 1s ease-out;
-o-transition:margin-left 1s ease-out;
overflow:hidden;
}
/*texte*/
#article27 #demoWrap p{
width:585px;
height:143px;
float:left;
padding-top:30px;
text-align:center;
font-size:1.2em;
color:#4e5358;
text-shadow:0px -1px 0px rgba(0,0,0,0.5);
overflow:hidden;
}
/*titre*/
#article27 #demoWrap p strong{
display: block;
font-size:3.4em;
line-height:1.2em;
}

</style>
</head>

<body>

<section id="article27" class="crayon article-css-27 demoTime">
<div id="demoWrap">
<div id="wrap1">
<div id="wrap2"">
<div id="wrap3">
<div id="wrap4">
<div id="background">
   <ul>
   <li><a href="#wrap1"><span>#1</span></a></li>
   <li><a href="#wrap2"><span>#2</span></a></li>
   <li><a href="#wrap3"><span>#3</span></a></li>
   <li><a href="#wrap4"><span>#4</span></a></li>
   </ul>
   <div id="fleche"></div>
   <div id="textes">

<p><strong>CSS3</strong>Everything is CSS, no images and no JavaScript.</p>

<p><strong>:target</strong>Use CSS3 pseudo-classes.</p>

<p><strong> ::after/before</strong>Use pseudo-elements too.</p>

<p><strong>Effects</strong>Add shadows, gradients and transitions.</p>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

</body>

</html>
</center>

Sujet: Re: Onglet en CSS Ven 30 Mar 2012, 17:08

Super ! Merci beaucoup à tous ! Very Happy

Sujet: Re: Onglet en CSS Ven 30 Mar 2012, 17:20

Sujet: Re: Onglet en CSS Sam 31 Mar 2012, 05:34

Oui, merci beaucoup Smile

Sujet: Re: Onglet en CSS Sam 31 Mar 2012, 08:16

J'archive alors. N'hésite pas à refaire une demande en cas de problème. Smile

Bonne journée !

Onglet en CSS

Onglet en CSS

Sujets similaires

Sujets similaires

Partenaires Or