Archives par catégories: CSS

Modifier le placement des ancres

Pour un site onepage ou dans tout type de configuration, si l’on souhaite placer des ancres sur la page, il se peut qu’il y ait des problèmes de marges ou de padding qui font que la page ne se positionnera pas tout à fait à l’endroit désiré. Typiquement un sous menu en position sticky peut […]

Créer un effet de fondu ou dégradé sur une image

Voici un petit bout de code css à appliquer directement sur vos images ou tout autre bloc de couleur. Imaginons que nous avons une image en background d’une div.home_image. A l’aide de ce bout de code, à modifier bien sûr selon ses besoins, on obtient rapidement un effet de fondu du bas vers le haut. […]

Créer une diagonale dans un bloc avec Linear-gradient

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 […]

Créer des div de toutes les formes avec Clip Path

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 […]

Retirer les marges des colonnes bootstrap

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 […]

Centrer un élément dans tous les navigateurs

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 […]

Un carousel bootstrap dans wordpress

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 […]

Afficher une barre extensible à coté du titre

Cet article renvoie à un précédent post sur la possibilité de créer des barres de chaque coté d’un titre.Da cet article on va plutot voir la technique pour placer une seule barre d’un coté ou de l’autre du titre, en l’occurence ici à droite. Voici un exemple de code: On crée une div dans laquelle […]