En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
  • Sur ce site, vous trouverez : Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ces trois tutoriels : ici , ici  et  ici

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • ...un Audio Player dans un Iframe... ...un autre, simple, intégré dans Guppy... et... JPlayer ... intégré, lui aussi.

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY. Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos ! Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels : WaterwheelCarousel et FeatureCarousel.

    ¤ Deux "slideshows" sont disponibles avec ou sans JQuery : lisez les tutoriels : Accordion (CSS) et Circle Nav (JQuery).

  • iFrames

    iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ces trois tutoriels : ici , ici  et  ici

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Léger et "customisable", quelques skins en téléchargement lui sont destinées.

    Lisez le tutoriel

    ¤ Un Audio-player simple avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

    ¤ Un autre Audio-player (JPlayer) avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées aux dernières versions (à partir de GuppY 5.02.02) moyennant quelques champs à adapter dans "Config Look". Elles peuvent être testées sur Démo-skins en version 5.02.08 (et au-delà...) -ce sont celles qui sont proposées en téléchargement-.

    Démo-skins

    Zone de téléchargement

 
Vous êtes ici :   Accueil » CSS Textes en onglets-4-
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

 

CSS Textes en onglets-4-

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

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

Style Version 4

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

.tabs input#tab-2{
    top: 40px; /*position 2ème onglet en haut*/
}
.tabs input#tab-3{
    top: 80px; /*position 3ème onglet en haut*/
}
.tabs input#tab-4{
    top: 120px; /*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*/
    line-height: 40px; /*hauteur ligne*/
    height: 40px; /*hauteur*/
    position: relative;
    padding: 0 5px; /*marges intérieures*/
    float: left;
    display: block;
    clear: both;
    width: 90px;
/*largeur*/ /*!!largeur+marges=largeur onglet!!*/
    color: #5A2F14; /*couleur texte*/
    letter-spacing: 1px; /*écartement caractères*/
    text-transform: uppercase; /*tout en majuscule*/
    font-weight: bold; /*gras de la police*/
    text-align: center; /*alignement*/
    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 { /*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: -175px 0 0 100px; /*marges extérieures
!!important : à gauche = largeur onglet*/
    height: 340px; /*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: 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><!-- fin content-1 -->

        <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><!-- fin content-2 -->

        <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><!-- fin content-3 -->

        <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><!-- 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: 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).

Bien sûr, pour cette version, sur un smartphone en version portrait, les onglets risquent d'être un peu invasifs..., mais tout ceci fonctionne...

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
Catégorie : Astuces - Autres astuces en CSS
Page lue 2389 fois


Réactions à cet article


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

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

Préférences


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


  Nombre de membres 45 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