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 !
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.
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 !
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.
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.
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.
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.
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à !
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 !
Nous avons vu il y a 2 semaines comment faire des transitions en CSS3. Aujourd’hui, nous allons un peu plus loin en abordant le sujet des animations. Les animations sont des transitions ++, elles nous permettent beaucoup plus de choses.
