Étiquette : CSS
-
Animer une police variable
Temps de lecture : < 1 minute Des polices très flexibles Dans le monde dynamique du design web et de la typographie numérique, la police variable se présente comme une innovation révolutionnaire. Une seule police de caractères capable de se transformer et de s’adapter à vos besoins spécifiques, sans avoir besoin de multiples fichiers de polices distincts.…
-
Smooth Scrolling
Temps de lecture : 2 minutes L’utilisation d’un outil de défilement fluide (smooth scroll) comme lenis.js en webdesign offre plusieurs avantages significatifs : Amélioration de l’expérience utilisateur (UX) Un défilement fluide rend la navigation plus agréable et intuitive. Les utilisateurs perçoivent le site comme étant plus raffiné et professionnel, ce qui peut améliorer leur perception globale…
-
Composition typographique fluide
Temps de lecture : 3 minutes La typographie fluide, en développement web, est une approche qui permet de rendre le texte adaptable aux différentes tailles d’écran et résolutions. Contrairement à la typographie fixe, où la taille des polices est définie en unités fixes (comme les pixels), la typographie fluide utilise des unités relatives et des techniques…
-
Calculer en css
Temps de lecture : < 1 minute La fonction CSS calc() est un outil extrêmement puissant pour les développeurs web, et son utilisation présente plusieurs avantages, particulièrement pour les étudiants en développement web. Calc() permet de mélanger différentes unités de mesure dans une seule expression, comme combiner des pourcentages avec des pixels… Premièrement, calc() permet de mélanger…
-
La magie des variables css : color switcher.
Temps de lecture : 3 minutes Le « Color Switcher » est une fonctionnalité interactive qui permet aux utilisateurs de changer le thème de couleur d’une page web en cliquant sur un bouton. Cette technique est particulièrement utile pour améliorer l’expérience utilisateur en offrant une personnalisation visuelle. Dans notre exemple, le switcher modifie les couleurs de fond et…
-
Précharger un contenu
Temps de lecture : 3 minutes L’utilité d’un preloader (préchargeur) en HTML se manifeste à plusieurs niveaux, notamment techniques, ergonomiques et humains : Considérations Techniques Considérations Ergonomiques Considérations Humaines En résumé, un preloader en HTML joue un rôle crucial dans l’amélioration de l’expérience utilisateur, en gérant les aspects techniques du chargement des pages web, en offrant…
-
Animation Css par @keyframes
Temps de lecture : 2 minutes L’animation webdesign via CSS, notamment avec l’implémentation de @keyframes, marque une étape significative dans l’évolution du design web. Introduites avec CSS3, les animations CSS permettent aux concepteurs de créer des animations complexes et interactives directement dans le navigateur, sans dépendre de technologies supplémentaires comme Flash. Le principe de @keyframes repose…
-
Animation « micro interaction » par transition CSS
Temps de lecture : < 1 minute Un élément interactif avec l’utilisation des transitions CSS pour créer un effet animé appelé aussi « micro interaction ». Pour une version plus fonctionnelle, voire la micro interaction avec javascript. Micro interaction css Le code commenté Ressources
-
Diaporama horizontal
Temps de lecture : 2 minutes Une mise en page conçue pour une expérience de défilement horizontal où chaque div remplit un écran, et où l’utilisateur est invité à faire défiler vers la droite ou la gauche pour passer d’un écran à l’autre. Cela crée un effet de diaporama ou de présentation de type « carrousel ». Un…
-
Diaporama vertical
Temps de lecture : 2 minutes La technique qui utilise le défilement (scroll) d’une page web à des fins créatives est souvent appelée « scrolling parallaxe » ou « effet parallaxe au défilement ». Cette technique implique de déplacer différents éléments de la page web à des vitesses différentes lors du défilement, créant ainsi une impression de profondeur et de…
-
Centrer avec Flexbox
Temps de lecture : 3 minutes Comment maitriser parfaitement le positionnement dans un conteneur. Centrer horizontalement et verticalement des éléments dans la page Les bases de compréhension Il est important de comprendre la notion d’axe principal et d’axe secondaire.SI flex-direction : rows, l’axe principal est une ligne, sinon c’est une colonne. Concrêtement Essayez ! Les éléments…