En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
Vous êtes ici :   Accueil » CSS Textes en onglets-4bis-
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

 

CSS Textes en onglets-4bis-

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

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 une variante à la quatrième version. [Les textes sont obtenus aléatoirement sur ce site.]

Les onglets sont écrits verticalement de haut en bas et donc prennent moins de place en largeur, ce qui peut être un compromis acceptable pour les smartphones et tablettes.

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. Iamque lituis cladium concrepantibus internarum non celate ut antea turbidum saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem sollemniter inquirente nec discernente a societate noxiorum insontes velut exturbatum e iudiciis fas omne discessit, et causarum legitima silente defensione carnifex rapinarum sequester et obductio capitum et bonorum ubique multatio versabatur per orientales provincias, quas recensere puto nunc oportunum absque Mesopotamia digesta, cum bella Parthica dicerentur, et Aegypto, quam necessario aliud reieci ad tempus.

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. Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.

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. Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.

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. Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

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. 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.

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. Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi) praesidii adiumentique causa, non benevolentiae neque caritatis, amicitias esse expetendas; itaque, ut quisque minimum firmitatis haberet minimumque virium, ita amicitias appetere maxime; ex eo fieri ut mulierculae magis amicitiarum praesidia quaerant quam viri et inopes quam opulenti et calamitosi quam ii qui putentur beati.

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. Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

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. Illud tamen te esse admonitum volo, primum ut qualis es talem te esse omnes existiment ut, quantum a rerum turpitudine abes, tantum te a verborum libertate seiungas; deinde ut ea in alterum ne dicas, quae cum tibi falso responsa sint, erubescas. Quis est enim, cui via ista non pateat, qui isti aetati atque etiam isti dignitati non possit quam velit petulanter, etiamsi sine ulla suspicione, at non sine argumento male dicere? Sed istarum partium culpa est eorum, qui te agere voluerunt; laus pudoris tui, quod ea te invitum dicere videbamus, ingenii, quod ornate politeque dixisti.

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 4bis
  • Code simplifié du corps de l'article

Style Version 4bis

<style type="text/css">
.tabs { /*attributs du conteneur-4bis*/
    position: relative;
    margin: 40px auto; /*marges extérieures*/
    width: 100%; /*largeur*/
}
.tabs input { /*attributs zones onglets*/
    position: absolute;
    z-index: 1000;
    width: 30px; /*largeur*/
    height: 125px; /*hauteur*/
    left: 0px; /*position à gauche*/
    top: 0px; /*position 1er onglet en haut*/
    opacity: 0;
    cursor: pointer;
}

.tabs input#tab-2{
    top: 125px; /*position 2ème onglet en haut*/
}
.tabs input#tab-3{
    top: 250px; /*position 3ème onglet en haut*/
}
.tabs input#tab-4{
    top: 375px; /*position 4ème onglet en haut*/
}

.tabs label { /*attributs titres onglets*/
    background: linear-gradient(#D2763E 0%,#A85726 100%); /*couleur fond*/
    font-size: 15px; /*taille police*/
    height: 125px; /*hauteur*/
    position: relative;
    padding: 2px 5px; /*marges intérieures*/
    float: left;
    display: block;
    clear: both;
    width: 20px; /*largeur*/
/*!!largeur+marges=largeur onglet!!*/
    color: #5A2F14; /*couleur texte*/
    text-transform: uppercase; /*tout en majuscule*/
    font-weight: bold; /*gras de la police*/
    text-align: center; /*alignement*/
    writing-mode: verical-rl; /*texte vertical*/
    text-orientation: upright; /*texte H>B*/
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3); /*ombre portée texte*/
    box-shadow: 0px 0px 2px rgba(72,38,17,0.5); /*ombre portée boite onglet*/
    border-radius: 3px 0 0 3px; /*arrondis*/
}
.tabs label:after { /*pseudo-élément : permet de masquer l'ombre à gauche des contenus*/
    content: '';
/*!!NE PAS MODIFIER!!*/
    background: #fff; /*couleur fond : mieux si = couleur fond .content */
    position: absolute;
    right: -2px;
    top: 0;
    width: 2px;
    height: 100%;
}
.tabs input:hover + label {
    background: #D2763E; /*couleur fond onglet survolé*/
}

.tabs label:first-of-type {
    z-index: 4;
}
.tabs label:first-of-type { /*attributs titre 1er onglet*/
    z-index: 4;
/*index superposition : important*/
    box-shadow: 0px 0px 2px rgba(72,38,17,0.5); /*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(72,38,17,0.5); /*ombre portée texte*/
    z-index: 6;
/*index superposition : important*/
}
.clear-shadow {
    clear: both;
}
.content { /*attributs contenu*/
    background: #fff; /*couleur fond*/
    position: relative;
    width: auto; /*largeur = auto*/
    margin: -525px 0 0 30px; /*marges extérieures
!!important : à gauche = largeur onglet*/
    height: 540px; /*hauteur*/
    z-index: 5;
/*index superposition : important*/
    overflow: hidden; /*masque les débordements extérieurs : important*/
    box-shadow: 1px 1px 2px rgba(72,38,17,0.5), 0px 0px 2px rgba(72,38,17,0.5); /*ombre portée boite contenu*/
    border-radius: 3px; /*arrondis*/
}
.content div { /*attributs div contenu*/
    position: absolute;
    top: 0; /*position*/
    padding: 10px 20px; /*marges intérieures*/
    z-index: 1;
/*index superposition : important*/
    opacity: 0; /*opacité : 0=invisible*/
    transform: translateY(-450px); /*translationV*/
    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é*/
    transform: translateY(0px); /*translationV0*/
    z-index: 100;
/*index superposition : important*/
    opacity: 1; /*opacité : 1=visible*/
    transition: all ease-out 0.6s 0.6s; /*transition tout  : nature temps*/
}
.content div h2,
.content div h3{ /*attributs div h2 et h3 (titres) du contenu*/
    color: #8E4920; /*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: 0; /*marges extérieures*/
    color: #777; /*couleur texte*/
    padding-left: 15px; /*marge intérieure gauche*/
    border-left: 8px solid rgba(219,146,102, 0.8); /*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: 500px; 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><!-- fin content-1 -->

        <div class="content-2" style="background-color: transparent; max-height: 500px; 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><!-- fin content-2 -->

        <div class="content-3" style="background-color: transparent; max-height: 500px; 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><!-- fin content-3 -->

        <div class="content-4" style="background-color: transparent; max-height: 500px; 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><!-- fin content-4 -->

    </div><!-- fin content -->

</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: 500px; margin: 0px auto; overflow: auto;" qui permet de placer un ascenseur vertical dès que la hauteur est supérieure à 500px (à 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 : 05/02/2019
Catégorie : Astuces - Autres astuces en CSS
Page lue 3032 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Vous êtes ici :   Accueil » CSS Textes en onglets-4bis-

Préférences


Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
<O>


  Nombre de membres 48 membres
Connectés :
( personne )
Snif !!!

Lettre d'information

Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.

Avant de soumettre ce formulaire, veuillez lire et accepter les Mentions légales.

J'accepte :
Recopier le code :
16 Abonnés