Voici un exemple tout simple de blocs d’infos, qu’on retrouve maintenant sur absolument tous les sites. See the Pen NPwdmp by yuyazz (@yuyazz) on CodePen. Le principe est de les aligner en float:left, avec une width définie. Les éléments à l’intérieur des blocs s’alignent naturellement les uns en dessous des autres. Le problème du float […]
Sur de nombreux sites, on voit souvent dans la partie témoigagne, ou sur certaines sidebar, des blocs coiffés d’une petite flèche, donnant l’impression d’une bulle comme dans une BD: un exemple avec une image en position absolute: See the Pen bNYgzg by yuyazz (@yuyazz) on CodePen. See the Pen PwOmpB by yuyazz (@yuyazz) on CodePen.
Voici un petit mémo et des bouts de code pour créer un triangle en css. C’est notamment utile pour des listes : Pour créer un triangle on peut utiliser le code suivant (tiré du site grafykart) Pour appliquer cet effet à une liste, il faut l’appliquer sur un pseudo élement: Voici le rendu: See the […]
Il existe pléthore de tutoriels pour apprendre à se servir des grilles de Bootstrap, comme celui-ci. Je vous partage donc ici ces connaissances: Partant d’un exemple concret, la majorité des sites à colonne ont 4 colonnes sur grand écran, 2 en petit et moyen écran , puis une seule colonne sur mobile. Voici un tableau récapitulatif […]
Ce tutoriel fait référence à quelques infos trouvées sur le net qui me paraissent particulièrement intéressantes, et quelque fois méconnues, à propos de bootstrap. Voici quelques exemples de classes bootstrap permettant une grosse économie de code css : Dans son html,on aura donc de nouvelles possibilités de mises en page: Une pratique courante est de […]
Pour un template wordpress, j’ai cherché un moyen de créer des surlignements dynamiques sous les titres de mes menus, mais ceci vaut pour n’importe quel type de site, puisqu’il s’agit ici de css et de jQuery. Par dynamique j’entends le fait d’avoir un surlignement qui apparaît au survol de la souris, ou qui suit la […]
Pour un projet de templating wordpress, avec un menu bootstrap 3 intégré, j’ai cherché une solution pour changer le break point du menu bootstrap 3. Par défaut, le menu se rétracte et devient « responsive » à 768px, mais j’ai trouvé deux snippets css contenant les classes à modifier.Vous pouvez fixer les break points des media queries à la […]
Voici un petit menu simple et responsive , à adapter selon vos besoins. La technique ici est d’appliquer avec les medias queries, un ‘display :table cell ‘sur les éléments ‘li’, en mettant bien sûr l’élément parent ‘ul’ en ‘display : table’, et ces derniers se rangeront donc comme les cases d’un tableau!! Se reporter à la doc pour […]
Voici un deuxième petit exercice d’intégration, pour une page de type blog, à partir d’un PSD, Voici le rendu final: le PSD Comme on le voit la page est découpée en plusieurs lignes, on peut imaginer une grille derrière la page : ici je vais utiliser html5 Boiler, qui utilise 960 grid gs pour découper […]
Tiré des cours d’une formation web, on va voir aujourd’hui un exercice d’intégration tout ce qu’il y a de plus banal.La page n’est pas complexe du tout, je vais plutot que de faire un cours d’intégration, ce qui serait très mal venu, je vais plutot afficher le PSD, vous laissez vous entrainer, et vous donner […]