CSS3 : utiliser Flexbox pour faire de la mise en page
Il existe plusieurs méthodes pour mettre en page votre site et organiser les différents blocs qui le composent. Mais aujourd’hui, utiliser les CSS3 et Flexbox est la solution la plus efficace.
CSS : jouer avec les masques
Aujourd'hui, partons à la découverte de la propriété CSS appelée masquage. Elle permet de masquer un contenu source par un masque qui va cacher une partie de notre contenu source. C'est un peu comme un masque de fusion sur Photoshop. Mieux que des mots, passons à la démo !
Rendre un élément de menu non cliquable
Quand on a un menu avec un élément qui comporte un sous-menu déroulant, est-ce que le parent doit être cliquable ou pas ? Tout ceci est bien entendu lié à l’ergonomie, le but étant de ne pas perdre votre visiteur.
CSS : utiliser les modèles de boîtes simples 2/2
Il y a 15 jours, nous avons commencé à étudier les bases du positionnement avec les modèles de boîtes simples. Voici la suite de cet article avec de nouvelles propriétés !
CSS : utiliser les modèles de boîtes simples 1/2
Positionner des blocs dans une page web est tout un art, tout comme maîtriser leur comportement lorsque la taille de l’écran change. Après avoir étudié Flexbox, voyons aujourd'hui les modèles de boîtes simples.
Personnaliser les puces d’une liste en CSS
En HTML, vous connaissez les listes à puces non ordonnées, avec un rond noir par défaut et les listes ordonnées avec 1, 2, 3. Eh bien sachez qu’on peut faire pas mal de choses avec ces petites puces… Nous allons voir ça en détail.
Html : texte sur une image et hover
Dans WordPress, il est possible de définir une colonne avec une image d’arrière-plan et d’écrire du texte en html dessus. Mais si vous voulez que ce texte change au passage de la souris (hover) et / ou que l’image se change aussi, alors c’est moins évident.
Intégrer des arrière-plans en CSS
En CSS, on peut appliquer un arrière-plan à plusieurs types d’éléments. Image, couleur, dégradé, répété ou non, couvrant ou non, les possibilités sont nombreuses... Détaillons toutes ces propriétés avec des exemples.
Html : faire un carré responsive avec du texte centré verticalement
Réaliser un bloc carré sur un site web, c'est facile. Mais quand vous l'affichez sur mobile, ça ne va plus, le carré se change en rectangle... En plus, vous voulez centrer verticalement votre texte ? Ouh là !
Créer des transformations 3D en css3
Après les transformations 2D, les transitions et les animations, il est temps de passer au dernier article de la série, les transformations 3D. Et comme vous savez déjà faire des animations, vous allez pouvoir faire… des animations 3D !