Il y a plétore d’exemples sur le net pour centrer un élément, soit en pur css soit avec du jquery. Voici une solution de chaque, qui a le mérite de fonctionner: On crée la fonction center, que l’on applique ensuite au éléments que l’on souhaite centrer par rapport à la fenetre. Plus simple et voire […]
Actuellement, l’outil actuellement le plus puissant pour émuler une interface mobile reste l’outil de google chrome, pas besoin d’aller chercher plus loin. On fait un clic droit (ou ctrl Maj i) et on inspecte l’élément.(sur IE Ou Firefox on clique sur F12 puis pareil on cherche le petit icone d’émulation) Tout en haut à gauche, […]
Sur de nombreux thèmes gratuits ou payants, on a la possibiité de créer des blocs, des sections de pages, ou des pages entières en passant par les paramètres du thème et un éditeur customisé. Dans cet exemple, imaginons qu’on place une image dans une section, selon le thème on peut soit charger une image de […]
Sur le thème par défaut twenty thirteen de wordpress, on peut remarquer l’input search qui s’ouvre lorsqu’on clique dessus. En suivant divers tutos sur le net, on trouve des solutions sans aucun js, juste du css. voici le code: See the Pen search in put by yuyazz (@yuyazz) on CodePen. je place mon input pour […]
Voici une des nombreuses méthodes pour centrer un titre au milieu d’une ligne, si celle-ci est une image. Le principe est de placer l’image du tiret ou de la ligne en background de la div englobante. Le titre est centré, avec un background blanc, j’efface les tirets qui recouvrent le titre, et avec le padding […]
Voici quelques exemples d’effet étiquette et ruban, que l’on peut mettre sur un menu ou tout autre élément d’une page. See the Pen etiquette by yuyazz (@yuyazz) on CodePen.
Voici un petit mémo pour parvenir à incruster une image dans le coin d’une div, comme ci-dessous. Dans cet exemple, les deux éléments sont des images. Pour parvenir à recréer le même effet juste en css, reportez vous à ces exemples. En fait il faut juste créer une div englobante, en position relative, à ‘intérieur […]
Dans ce petit tuto, on va voir comment font certains pour créer des one page originales, avec ce système de flèche séparant chaque section de la page: voici un exemple de ce qu’on veut faire : On définit un padding ou une height pour chaque bloc de contenu. On définit les règles pour les pseudos […]
Par menu ‘shrinked‘, j’entends les menus qui se rétractent au scroll. Le principe ici est d’utiliser jquery, pour qu’au delà d’une certaine limite au scroll, une nouvelle classe s’ajoute au menu.On part d’une certaine hauteur, ou d’un certain padding de base pour notre menu, et la nouvelle classe injectée par jquery et définie dans le […]
Sur de très nombreux sites on peut voir les menu par dessus une image, donnant une certaine homogénéité au visuel: un exemple plus parlant: Quand on débute on pense qu’il y a un élément flottant dans un autre, qu’il y a plusieurs blocs et que chacun à son background.En réalité, c’est vraiment tout bête, c’est […]