Voici une manière vraiment rapide de créer un bloc à deux couleurs, un bloc coupé par une diagonale avec la propriété linear-gradient. See the Pen linear gradient by yuyazz (@yuyazz) on CodePen. Voici les explications du site MDN : « Représente la position du point de départ de la ligne du dégradé. Elle consiste en deux […]
Afin de rendre le visuel d’une page plus sympa, notamment ses listes d’articles et leurs images, on peut utiliser des diagonales, des polygones ou tout autre forme originale. Pour cela, le générateur de clip path est un excellent moyen pour y parvenir ! Voici un exemple tout simple produit grâce à ce générateur. On peut […]
Dans l’exemple qui va suivre, j’applique le code sur un site wordpress, en utilisant notamment le plugin ACF. Mais le code vaut évidemment pour tout type de site, il s’agit ici avant tout de css. Le principe est de créer une séparation entre deux sections d’une même page, en incluant une image circulaire centrée au […]
Dans cet article je reprend une astuce qui permet, avec bootstrap, de créer des rows (ou lignes) tous les 2, 3 ou 4 items (titre d’articles ou de catégories) . Ceci va nous permettre par exemple de styliser la ligne, comme d’ajouter une bordure et ainsi créer l’apparence d’un tableau : Dans un fichier quelconque […]
Font Awesome vient récemment de mettre à jour sa librairie en version 5, apportant de gros changements par rapport à la version précédente. Désormais on a le choix entre utiliser la version JS avec des icônes en SVG, ou la version CSS en faisant appel à la webfont classique, comme dans l’ancienne version. Dans cet […]
Ce sujet est désormais bien connu des intégrateurs, le bout de code css qu’on retrouve souvent pour annuler les marges bootstrap est le suivant; Dans notre fichier html ou php, on rajoute donc notre nouvelle classe no-gutter à nos div.row Ainsi tous les blocs « col-.. » à l’intérieur d’une classe « .row » n’auront plus les padding-left:15px et padding-right:15px […]
Voici deux trois exemples de boutons radios ou checkbox bootstrap stylisés: See the Pen LbexeR by yuyazz (@yuyazz) on CodePen.
Voici un exemple de code css qui va nous permettre de spliter une page en plusieurs colonnes. Ce code vaut pour des classes css d’un thème wordpress par défaut.Pour tout autre cas, il suffira juste d’indiquer les bonnes classes dans votre fichier css Voici donc un exemple de css qui vous permettra d’afficher vos articles en colonne […]
On a déjà vu dans cet article notamment comment on pouvait centrer en jquery ou en css. Aujourd’hui je vais m’appuyer sur une autre technique qui date mais qui a l’avantage de fonctionner aussi sur le navigateur safari, en plus de tous les autres.En effet sur safari la technique bien connue qui consiste à placer un élément […]
Dans cet article nous allons voir comment créer dans wordpress un slider avec le carousel bootstrap. Je vous renvoie à cet article pour créer un type de contenu particulier et vous en servir comme slider dans wordpress.Bien sur, il faut au préalable télécharger bootstrap et l’intégrer à son thème. Dans un système de carousel, la classe dite […]