Pour avoir une page d’accueil un peu originale on peut avoir envie de mettre un bouton d’entrée sur son index. See the Pen OPXRKv by yuyazz (@yuyazz) on CodePen. L’utilisateur devrait alors cliquer sur le bouton pour entrer et voir tout le site. L’index.html, première page chargée, doit donc être codée au plus simple : […]
On a vu dans un précédent tuto comment créer un menu vertical sur wordpress. Voici un deuxième petit mémo pour créer un menu latéral sur son site wordpress. Dans l’autre tuto, on fait apparaître les sous menus au survol, en les faisant apparaître sur le coté. Ca peut être plus ou moins joli selon les […]
Dans ce petit mémo, on va voir comment créer un menu vertical et latéral dans wordpress. See the Pen Menu vertical I by yuyazz (@yuyazz) on CodePen. Il existe plein de manière de faire, notamment en jQuery pour obtenir de beaux déroulés de sous menus, mais on y reviendra dans un prochain tuto.. Pour notre […]
Une simple règle css permet de rendre un peu plus opaque vos images, et de les faire briller au survol de la souris. Regardons les deux css suivants: Ici, je pars d’une opacité à 0.8 pour la rendre à 1 au survol. J’aurai ainsi une image un peu floutée, et qui redevient normale au survol..Cela […]
Un simple attribut permet de transformer toutes vos images carrées en cercle c’est l’atttribut border radius..sur une image par exemple, voici un code type : Remarquez l’attribut border-radius, en le mettant à 50 %, vos images seront rondes, ce qui peut etre plus joli dans certains cas;..
Grace à la propriété column en css, je vais pouvoir me passer de calcul en tout genre, de modulo ou autre tournure php. On juste beoin d’une classe css et de ses attributs. Et voila le rendu. Le « column-gap » permet de jouer sur les marges entre chaque colonne.
Sur l’excellent tuto css learnlayout.com, on découvre la propriété css box-sizing. Le site donne l’exemple suivant : deux div contenant du texte. On voit qu’en rajoutant du padding et une bordure, toutes ces marges s’ajoutent les unes aux autres, décalant d’autant notre div. La solution préconisée sur ce site est d’utiliser la propriété box-sizing, qui […]