Une scrollbar iOS pour vos projets web en CSS
::-webkit-scrollbar{
width:10px;
height:10px;
}
::-webkit-scrollbar-track-piece {
background-color:#EEE;
-webkit-border-radius:0;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
}
::-webkit-scrollbar-thumb:vertical {
height:50px;
background-color:#999;
-webkit-border-radius:8px;
}
::-webkit-scrollbar-thumb:horizontal {
width:50px;
background-color:#999;
-webkit-border-radius:8px;
}
Compatible avec Google Chrome (testé)…
À placer dans votre feuille de style. Il modifie ainsi l’aspect graphique de la scrollbar de votre navigateur (Google Chrome pour le moment). Pour vos projets web ou tout simplement votre site, voici une bonne façon de personnaliser l’aspect graphique de cette fameuse scrollbar/barre de défilement. Vous pouvez modifier la couleur de la barre, ainsi que le fond, les bordures et la taille générale.
function GkWidgets() { unregister_widget( 'WP_Widget_Categories' ); unregister_widget( 'WP_Widget_Recent_Posts' ); unregister_widget( 'WP_Widget_Search' ); unregister_widget( 'WP_Widget_Tag_Cloud' ); unregister_widget( 'WP_Widget_Meta' ); unregister_widget( 'WP_Widget_Pages' ); unregister_widget( 'WP_Widget_Calendar' ...
En savoir plus
Publicité
En savoir plus
< ?php if(mb_strlen($post->post_title)>15){echo mb_substr($post->post_title,0,30).'...';}else{the_title();} ?>Cette fonction est à placer là où vous souhaitez voir apparaitre le ...
En savoir plusdefine ('WP_POST_REVISIONS', 3);WordPress sauvegarde les modifications que vous pouvez apporter sur les articles ou les pages ...
En savoir plus
6 commentaires !
nicolas says:
avr 28, 2011
Une page de démo aurait pu être sympa ! :)
Valentin says:
avr 28, 2011
Si tu es sous Chrome, tu peux voir la scrollbar modifiée sur cette page et l’ensemble du blog :)
Felipe says:
avr 28, 2011
Ça ne me manquait pas … :p (testé avec Chromium build 78164)
Kumo says:
avr 28, 2011
Tim Van Damme avait créé un hack pour pouvoir s’en servir sur l’ensemble des navigateurs webkit. C’est donc aussi compatible Safari.
Son blog (avec la fameuse scrollbar): http://maxvoltar.com/
Un tuto: http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/
Valentin says:
mai 5, 2011
Merci du lien :)
Alexandre says:
avr 29, 2011
Fonctionne très bien sous chromium 83510. Très bien, merci
Qu'est-ce que vous en pensez ? :)