Connexion
Pokemon Community :: Hors-jeu :: Atelier graphique :: Tutoriels

Pokemon Community

T’façon tu m’aimes trop pour me tuer là. Et on est sur un forum tout public tu n’as pas le droit..
en savoir plus ?
Marcher puis dormir sous la lune.
Marcher puis s'enlacer jusqu'à l'aurore.
Marcher puis s'aimer pour l'éternité.
Marchaimer.
en savoir plus ?
Contrairement à ce que tu penses, les gens ne sont pas prisonniers de leurs idéaux. Et tu devrais toi-même en prendre conscience ...
en savoir plus ?
Les gosses dans ton genre n'ont aucune expérience de vie. Et certainement pas leur mot à dire pour juger les autres.
en savoir plus ?
T’es là depuis une seconde à peine et tu me casses déjà les couilles. C’est parfait.
en savoir plus ?
Je ferai tout pour que ce soit notre flamme qui reste allumée à la fin de ce combat.
en savoir plus ?
Je te l'ai dis Alex, à demi mot, que je t'aime. C'est vrai, pourtant je t'aime… Est-ce là? La fin de notre relation? Un message perdu que j'essaie de sauver au bord d'une plage alors que tu te noies dans tes sanglots? Je ne me savais pas condamné aux sables
en savoir plus ?
Tu es prêt Germain ? Reste sage et admire le spectacle, surtout n'interviens pas et sois gentil, trouve moi une cigarette.
en savoir plus ?
Je ne peux pas te contredire, tu as merdé en beauté.
en savoir plus ?
Je continuerai de t’aider, de t’assister, ou te servir, pour atteindre ton rêve. Même en sachant tout ça. Même si, pour se faire, je dois abandonner mes propres rêves.
en savoir plus ?
Son paquet d'Eucalyptus avait provoqué le chaos.
en savoir plus ?
Mademoiselle Potts ? Je suis désolée mais … est-ce que vous pourriez m’aider à trouver un partenaire, je ne connais personne et je …
en savoir plus ?

Enzo White
http://pokemoncommunity.forumactif.org/t7536-514-enzo-white-la-panique-mecanique-adulte#76980
http://pokemoncommunity.forumactif.org/t7548-enzo-white-adulte#77041
Icon : [Intermédiaire] Scrollbars | html css BHJNPf
Taille de l'équipe : 5/7
Région d'origine : Hoenn - Pacifiville
Âge : 25 ans
Niveau : 10
Jetons : 1320
Points d'Expériences : 190
[Intermédiaire] Scrollbars | html css BHJNPf
5/7
Hoenn - Pacifiville
25 ans
10
1320
190
pokemon
[Intermédiaire] Scrollbars | html css BHJNPf
5/7
Hoenn - Pacifiville
25 ans
10
1320
190
Enzo White
est un Adulte Blogueur


Scrollbars
Intermédiaire | HTML CSS

Et bonjour, bonsoir à tous et à toutes !
Dans ce nouveau numéro des "Tutos de Max", on va se pencher sur un élément relativement important d'un code. Tout du moins, ça fait partit des petits détails, des finitions, qui amènent un code de sympa à vraiment chouette.

Les scrollbars.

Disclaimer, ce tutoriel est destiné envers les personnes de goût qui utilisent Google Chrome et pas Mozilla Firefox et autres inépties. Déso pas déso. En vrai y'a une explication un petit peu plus sérieuse et c'est vaguement le but de mes tutos donc c'est partit !

Pourquoi pas sur Firefox and co ?
Tous les navigateurs ne sont pas égaux face aux avancées technologiques. Il existe plusieurs types de modules qui permettent aux navigateurs de gérer certaines propriétés css les plus avancées. La scrollbar en fait partie et seuls les navigateurs utilisant le "moteur" webkit peuvent les utiliser. Ca comprend Chrome, Safari et Opera.

Maintenant que ça c'est dit, passons au vif du sujet.

La scrollbar, qu'est ce que c'est ?

Ce tutoriel suppose que vous avez des connaissances de bases en css et html et sur la manière de l'utiliser sur les forums. Je m'attarderais pas sur les détails du coup !

Une scrollbar peut se diviser en deux. Le bout qui bouge et ceux sur quoi il bouge. Pour des raisons de lisibilité, on va utiliser les termes anglais (je connais pas les français rip) : Thumb pour le bout qui bouge et Track pour le fond. On peut aussi compter les flèches mais généralement on est bien content de les dégager parce qu'elles sont moches.

Donc, comment on va personaliser notre thumb et notre track ? Et bien Michel, c'est ce que je vais t'expliquer !

Personaliser une scrollbar

On va donc créer une classe qu'on va ici appeller scroll pour la simplicité et l'originalité. On va commencer par définir la scrollbar en elle-même avant d'ajouter, ou non des détails et des personalisations sur les différentes parties de la scrollbar.

Code:

.scroll::-webkit-scrollbar {width: 5px;height:4px;}
.scroll::-webkit-scrollbar-track {background-color: transparent;}
.scroll::-webkit-scrollbar-thumb {background-color: black;}


Qu'est ce que ça veut dire ? Plutôt simple, notre scrollbar est large de 5 px si elle est verticale et haute de 4 px si elle est horizontale. La track est transparence et le thumb est noir. Tout simplement.

Visuellement, ça ressemble à ça :


test test test test test test test test test test test test test test test test test test test test test test test test test test test test


C'est le moment ou vous me dites "Mais Max, j'ai fait tout pareil mais ça marche pas !!" et où, mon cher Michel, je te répond qu'il faut que tu instancies ta classe sur le bloc où tu veux que la scrollbar apparaisse.

Code:

<div class="scroll">mon texte à scroller</div>


Il est évident que votre div doit avoir été stylisée à l'avance pour avoir soit une hauteur max soit une largeur max et la commande de style qui lui indique comment gérer quand il y a plus de texte que de place. Vous la connaissez c'est :

Code:

overflow:auto;


Je m'attarde pas là dessus, je considère que si vous êtes ici, vous connaissez ça et que j'ai pas besoin de l'expliquer uwu.

Et du coup voilà, vous avez les bases ! Maintenant j'aimerais vous proposer quelques petites mises en style histoire de vous montrer rapidement ce qu'on peut faire !
Quelques exemples

test test test test test test test test test test test test test test test test test test test test test test test test test test test test

Code:

.scroll2::-webkit-scrollbar {width: 9px;height:4px;}
.scroll2::-webkit-scrollbar-track {background-color: #f9ebee;}
.scroll2::-webkit-scrollbar-thumb {background-color:#cc526c; border-bottom:10px solid #d6768a; border-radius:30px;}

On expérimente avec les bordures et les couleurs !
test test test test test test test test test test test test test test test test test test test test test test test test test test test test

Code:

.scroll3::-webkit-scrollbar {width: 5px;height:4px;}
.scroll3::-webkit-scrollbar-thumb {background-color:transparent; border:1px solid black;}

Simple et élégant avec simplement une petite barrière.
test test test test test test test test test test test test test test test test test test test test test test test test test test test test

Code:

.scroll4::-webkit-scrollbar { width:7px;border:solid 3px #ccc;background-color:black; }
.scroll4::-webkit-scrollbar-thumb{background-color:#cc526c; }

Un peu plus complexe, avec une simple barre comme track. Attention, la largeur de la scrollbar doit être impaire ! La technique c'est d'englober votre scrollbar avec une bordure de la couleur de votre fond et de laisser un pixel à l'intérieur pour faire la barre !
test test test test test test test test test test test test test test test test test test test test test test test test test test test test

Code:

.scroll5::-webkit-scrollbar { width:7px;}
.scroll5::-webkit-scrollbar-thumb{border:solid 3px #ccc;background-color:black; }

La même chose, mais inversée !

N'hésitez pas à expérimenter, il y a de nombreuses possibilités avec ces scrollbars et c'est relativement simple à prendre en main !

Et voilà voilà ! Si vous avez des questions, je suis, comme toujours, à votre disposition !




traveller
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
reply