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 ce tutoriel et aussi celui-là.

    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 ce tutoriel et aussi celui-là.

    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 -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-1-
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

 

Nouveau  CSS Textes en onglets-1-

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/

Tout est téléchargeable sur le site. Je me suis juste contenté de jouer avec et d'adapter les propositions pour un article, une boite libre de GuppY ou un autre CMS, bien sûr. Elles sont partiellement "responsive design". La hauteur doit être malheureusement fixée, mais une solution simple permet de contourner ce souci et de prévoir un ascenseur vertical pour les longs textes.

Bien sûr une solution existe dans GuppY, mais qui utilise JQuery. Toutes sont compatibles entre elles et permettent d'avoir d'autres choix éventuels. Ces présentes solutions sont très simples à mettre en oeuvre, et il sera possible, en les appliquant telles que décrites dans ces articles, d'avoir des réglages de style différents dans des articles différents (ce qui n'est pas possible -simplement- avec la solution native de GuppY).

Voici la première 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.
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 1
  • Code simplifié du corps de l'article

Style Version 1

<style type="text/css">
.tabs { /*attributs du conteneur-1*/
    position: relative;
    margin: 40px auto; /*marges extérieures*/
    width: 100%; /*largeur*/
}

.tabs input { /*attributs zones onglets*/
    position: absolute;
    z-index: 1000;
    width: 120px; /*largeur*/
    height: 40px; /*hauteur*/
    left: 0px; /*position 1er onglet à gauche*/
    top: 0px; /*position en haut*/
    opacity: 0;
    cursor: pointer;
}
.tabs input#tab-2{
    left: 120px; /*position 2ème onglet à gauche*/
}
.tabs input#tab-3{
    left: 240px; /*position 3ème onglet à gauche*/
}
.tabs input#tab-4{
    left: 360px; /*position 4ème onglet à gauche*/
}

.tabs label { /*attributs titres onglets*/
    background: linear-gradient(#5ba4a4 0%,#4e8c8a 100%); /*couleur fond*/
    font-size: 15px; /*taille police*/
    line-height: 40px; /*hauteur ligne*/
    height: 40px; /*hauteur*/
    position: relative;
    padding: 0 20px; /*marges intérieures*/
    float: left;
    display: block;
    width: 80px; /*largeur*/
/*!!largeur+marges=largeur onglet!!*/
    color: #294342; /*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: 2px 0 2px rgba(0,0,0,0.3), -2px 0 2px rgba(0,0,0,0.3); /*ombre portée boite onglet*/
    border-radius: 3px 3px 0 0; /*arrondis*/
}

.tabs label:after { /*pseudo-élément : permet de masquer l'ombre du haut des contenus*/
    content: '';
/*!!NE PAS MODIFIER!!*/
    background: #fff; /*couleur fond : mieux si = couleur fond .content */
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    display: block;
}

.tabs input:hover + label {
    background: #5ba4a4; /*couleur dond onglet survolé*/
}

.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*/
}

.clear-shadow {
    clear: both;
}

.content { /*attributs contenu*/
    background: #fff; /*couleur fond*/
    position: relative;
    width: 100%;
    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*/
    transition: opacity linear 0.6s; /*transition opacité  : 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*/
    transition: opacity ease-out 0.6s 0.3s; /*transition opacité  : 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: 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><!-- 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).

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 - Changements au survol
Page lue 199 fois


Réactions à cet article


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

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

Préférences


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


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