Créer des animations avec animate et wow !

La bibliothèque d’effet animate.css est idéale pour agrémenter son site d’effets visuels sympa. L’inconvénient et que les effets ont lieu au chargement de la page. Si vous mettez par exemple des effets à des éléments situés en dessous de la ligne de flottaison, en gros ils ne serviront à rien. On doit donc se débrouiller pour […]

Créer une carte de tous ses articles avec Leaflet et wordpress

Dans ce tuto, on va voir comment afficher dans un site wordpress, tous ses articles sous forme de marqueurs sur une carte générée grâce à leaflet. Cette carte pourra être affichée dans n’importe quel type de template, la page d’accueil, la catégorie, archive ou tout autre modèle de page crée en dur. Disons que nous […]

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

Entourer tous les iframe d’une balise : exemple d’une vidéo responsive

Voici un petit mémo de rappel pour entourer toutes ses iframes google,  ses vidéos youtube ou ses cartes google map, par des balises additionnelles. Cela peut être utile pour définir une règle pour toutes les iframes google d’un site par exemple et laisser intactes les autres provenant d’autres sources; Ci-dessousi j’entoure tous mes iframes Youtube […]

Créer une animation au scroll

Voici un petit bout de code de rappel pour faire appraître et disparaître son titre ou tout autre élément en fonction du scroll de l’utilisateur. Le chiffre 50 correspond au nombre de pixel à partir duquel la fonction agit. A régler en fonction de ses besoins.

Raccourcir le texte de la navigation des articles dans wordpress

Dans ce petit mémo, on va voir une petite fonction bien utile, qui va nous permettre de raccourcir le texte de la navigation dans un site wordpress. Au bas de chaque article, on a généralement des flèches ou une div censés nous afficher l’article suivant, ou l’article précédent. Si le titre est trop long, cela […]

Raccourcir la description de vos catégories

Dans un site wordpress, on peut facilement afficher la description d’une catégorie dans la page catégorie : Ou encore, dans une page d’archives : Ou encore dans un article : La description pouvant être longue et impacter votre mise en page, voici une solution pour la raccourcir, sur une page de catégorie ou de sous-catégorie. […]

Différencier l’affichage des articles

Dans ce court mémo, on va voir comment on peut parvenir à créer un affichage original de nos articles dans une page d’archive. Le but est d’arriver à quelque chose qui se rapproche du résultat suivant : La première image dans une grande taille, puis les deux suivantes en taille moyenne. Pour arriver à ce […]

Alterner l’affichage de ses articles wordpress avec bootstrap

Dans un précédent tuto, nous avions vu rapidement comment alterner l’affichage de ses articles dans une page d’archive ou de catégorie. Le but était dans une liste de placer les images un coup à gauche, un coup à droite. Comme ceci : Aujourd’hui, on va voir la même chose, mais en utilisant bootstrap. La technique […]