CSS Textes en onglets-3-

4 Versions de textes en "onglets" (tabulations) uniquement en CSS

Les 4 propositions sont issues de ce site : (auteur : Rey Wang)

info licence : https://tympanus.net/codrops/licensing/

Voici la troisième version. [Les textes sont obtenus aléatoirement sur ce site.]

Montius Haec Novo Fuerit

Montius

Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.

Fieri

Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.

Haec

Haec igitur prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur.

Ideo

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Novo

Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.

Victus

Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

Fuerit

Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.

Etenim

Etenim si attendere diligenter, existimare vere de omni hac causa volueritis, sic constituetis, iudices, nec descensurum quemquam ad hanc accusationem fuisse, cui, utrum vellet, liceret, nec, cum descendisset, quicquam habiturum spei fuisse, nisi alicuius intolerabili libidine et nimis acerbo odio niteretur. Sed ego Atratino, humanissimo atque optimo adulescenti meo necessario, ignosco, qui habet excusationem vel pietatis vel necessitatis vel aetatis. Si voluit accusare, pietati tribuo, si iussus est, necessitati, si speravit aliquid, pueritiae. Ceteris non modo nihil ignoscendum, sed etiam acriter est resistendum.

Les codes utilisés sont ci-dessous. Il n'y a pas de différence de fonctionnement, reportez-vous à la Version 1.

Le contenu du premier onglet : Style est obligatoire au début du code source de l'article ou de la boite libre, ou dans styleplus.css. Il est différent pour chacune des 4 versions.
Adapter à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises <style type="text/css"> au début du code source et </style> à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les textes à onglets, insérez le code correspondant en adaptant les contenus, bien sûr. Les parties surlignées en blanc seront à adapter à vos souhaits et votre configuration. Le code du corps de l'article, pour les textes est le même dans les 4 versions.

Style Version 3
Code simplifié du corps de l'article

Style Version 3

.tabs input:checked:hover + label { /*attributs titre onglet sélectionné*/
    top: 0; /*hauteur*/
}
.tabs input:checked:hover + label:after{
   background: #fff; /*couleur fond*/
}
.tabs input:checked:hover + label ~ .clear-shadow {
    top: 0; /*hauteur=idem*/
   background: #fff; /*couleur fond=idem*/
   transition: none; /*pas de transition*/
}

.tabs input.tab-selector-1:hover + label.tab-label-1 ~ .clear-shadow{
z-index: 3; /*index superposition : important*/
}

.tabs input.tab-selector-2:hover + label.tab-label-2 ~ .clear-shadow {
z-index: 2; /*index superposition : important*/
}

.tabs input.tab-selector-3:hover + label.tab-label-3 ~ .clear-shadow {
z-index: 1; /*index superposition : important*/
}

.tabs input.tab-selector-4:hover + label.tab-label-4 ~ .clear-shadow {
    z-index: 0; /*index superposition : important*/
}
.tabs label:first-of-type { /*attributs titre 1er onglet*/
    z-index: 4; /*index superposition : important*/
    box-shadow: 2px 0 2px rgba(0,0,0,0.3), 0 0 2px rgba(0,0,0,0.3); /*ombre portée boite onglet*/
}

.tab-label-2 { /*2ème onglet*/
z-index: 3; /*index superposition : important*/
}

.tab-label-3 { /*3ème onglet*/
z-index: 2; /*index superposition : important*/
}

.tab-label-4 { /*4ème onglet*/
z-index: 1; /*index superposition : important*/
}

.tabs input:checked + label { /*attributs titre onglet sélectionné*/
    background: #fff; /*couleur fond*/
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3); /*ombre portée texte*/
   z-index: 6; /*index superposition : important*/
    transition: top linear 0.2s; /*transition : nature temps*/
}

.clear-shadow { /*attributs bande onglets*/
    background: #5ba4a4; /*couleur fond : mieux si = couleur fond onglet survolé */
   position: relative;
   top: 0; /*position*/
    height: 10px; /*hauteur*/
   margin-bottom: -10px; /*marge extérieure basse*/
    clear: both;
   z-index: -2; /*index superposition : important*/
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.3); /*ombre portée boite onglets*/
    border-radius: 3px 3px 0 0; /*arrondis*/
}
.content { /*attributs contenu*/
    background: #fff; /*couleur fond*/
   position: relative;
    width: 100%;
    top: -5px; /*ajustement du contenu en position haute*/
   height: 340px; /*hauteur*/
   z-index: 5; /*index superposition : important*/
   overflow: hidden; /*masque les débordements extérieurs : important*/
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.3); /*ombre portée boite contenu*/
    border-radius: 0 3px 3px 3px; /*arrondis*/
}
.content div { /*attributs div contenu*/
    position: absolute;
   top: 0; /*positions*/
   left: 0;
   padding: 10px 20px; /*marges intérieures*/
   z-index: 1; /*index superposition : important*/
    opacity: 0; /*opacité : 0=invisible*/
    transform:scale3d(0,1,1); /*échelle = 0 !*/
    transform-origin:100% 0; /*origine transformation : ici haut*/
    transition: all linear 0.6s; /*transition tout : nature temps*/
}
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 { /*attributs contenu si sélectionné*/
   z-index: 100; /*index superposition : important*/
    opacity: 1; /*opacité : 1=visible*/
    transform:scale3d(1,1,1); /*échelle = 1 !*/
    transition: all ease-out 0.6s 0.6s; /*transition all : nature temps*/
}
.content div h2,
.content div h3{ /*attributs div h2 et h3 (titres) du contenu*/
   color: #385c5b; /*couleur texte*/
}
.content div p { /*attributs div paragraphe du contenu*/
   font-size: 14px; /*taille police*/
   line-height: 20px; /*hauteur ligne*/
   font-style: italic; /*à ajuster ou supprimer*/
   text-align: left; /*alignement*/
   margin: 15px 0; /*marges extérieures*/
   color: #777; /*couleur texte*/
   padding-left: 15px; /*marge intérieure gauche*/
   border-left: 8px solid rgba(63,148,148, 0.3); /*bordure gauche*/
}
</style>

Code simplifié du corps de l'article

<section class="tabs">

   <input checked="checked" class="tab-selector-1" id="tab-1" name="radio-set" type="radio" />
       <label class="tab-label-1" for="tab-1">ONGLET 1</label>

   <input class="tab-selector-2" id="tab-2" name="radio-set" type="radio" />
       <label class="tab-label-2" for="tab-2">ONGLET 2</label>

   <input class="tab-selector-3" id="tab-3" name="radio-set" type="radio" />
       <label class="tab-label-3" for="tab-3">ONGLET 3</label>

   <input class="tab-selector-4" id="tab-4" name="radio-set" type="radio" />
       <label class="tab-label-4" for="tab-4">ONGLET 4</label>

   <div class="clear-shadow"></div>

<div class="content">

<div class="content-1" style="background-color: transparent; max-height: 300px; margin: 0px auto; overflow: auto;">
           <h2>Titre 1-A</h2>
           <p>Contenu 1-A</p>
           <h3>Titre 1-b</h3>
           <p>Contenu 1-b</p>
       </div>

<div class="content-2" style="background-color: transparent; max-height: 300px; margin: 0px auto; overflow: auto;">
           <h2>Titre 2-A</h2>
           <p>Contenu 2-A</p>
           <h3>Titre 2-b</h3>
           <p>Contenu 2-b</p>
       </div>

<div class="content-3" style="background-color: transparent; max-height: 300px; margin: 0px auto; overflow: auto;">
           <h2>Titre 3-A</h2>
           <p>Contenu 3-A</p>
           <h3>Titre 3-b</h3>
           <p>Contenu 3-b</p>
       </div>

<div class="content-4" style="background-color: transparent; max-height: 300px; margin: 0px auto; overflow: auto;">
           <h2>Titre 4-A</h2>
           <p>Contenu 4-A</p>
           <h3>Titre 4-b</h3>
           <p>Contenu 4-b</p>
       </div>

</div>

</section>

Notez bien dans le code du corps de l'article la reprise des "class" du style et de la numérotation de celles-ci ains que des "id".

Notez aussi checked="checked" à l'intérieur de la balise <input qui permet de déterminer quel onglet est ouvert (c'est une astuce à retenir pour travailler leur contenu dans l'éditeur de GuppY)

Notez également dans : <div class="content-X" ... >

la présence de : style="background-color: transparent; max-height: 300px; margin: 0px auto; overflow: auto;" qui permet de placer un ascenseur vertical dès que la hauteur est supérieure à 300px (à adapter) et ainsi éviter d'avoir de trop longs textes affichés et surtout, pour les smartphones et les tablettes de pouvoir utiliser ce procédé. Les onglets y seront affichés et fonctionnels (même si il y aurait probablement à revoir un peu le style pour cet usage).

Amusez-vous bien...

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.

Date de création : 01/02/2019 @ 14:30
Catégorie : - Autres astuces en CSS
Page lue 89791 fois

Bienvenue !

Et les navigateurs ?

Skins série "Transparences" présentées avec Camera !

Camera : slider développé par Manuel Masia

À quoi servent ces iFrames ?

Des bandeaux avec des cellules (tuiles) indépendantes

Trois AudioPlayers

Quelques exemples d'effets obtenus au survol

... et bien d'autres encore, suivez ces liens...

Astuces en pur CSS