{"id":251365,"date":"2022-12-20T14:02:00","date_gmt":"2022-12-20T11:02:00","guid":{"rendered":"https:\/\/inform.click\/7-techniques-css3-impressionnantes-que-vous-devriez-essayer\/"},"modified":"2022-12-20T14:38:00","modified_gmt":"2022-12-20T11:38:00","slug":"7-techniques-css3-impressionnantes-que-vous-devriez-essayer","status":"publish","type":"post","link":"https:\/\/inform.click\/fr\/7-techniques-css3-impressionnantes-que-vous-devriez-essayer\/","title":{"rendered":"7 techniques CSS3 impressionnantes que vous devriez essayer"},"content":{"rendered":"

\n L’\u00e9volution de CSS (Cascading Style Sheets) avec HTML a \u00e9t\u00e9 incroyable. Il existe de nombreuses fonctionnalit\u00e9s telles que Flexbox, CSS Grid et les propri\u00e9t\u00e9s personnalis\u00e9es CSS introduites r\u00e9cemment.\n<\/p>\n

\n Son avancement continu et son \u00e9norme potentiel sont ce qui incite les d\u00e9veloppeurs \u00e0 essayer de nouvelles techniques CSS et \u00e0 d\u00e9passer les limites de ce qu’il peut faire. La combinaison des technologies HTML 5 et CSS3 est, sans aucun doute, un tueur de flash.\n<\/p>\n

\n Il n’est pas \u00e9tonnant qu’un plan CSS bien ex\u00e9cut\u00e9 puisse presque contr\u00f4ler toutes les facettes de la conception et conduire \u00e0 une meilleure exp\u00e9rience utilisateur, ce qui est tout \u00e0 fait n\u00e9cessaire. Apr\u00e8s tout, les visiteurs ont certaines attentes lorsqu’ils consultent votre site via un ordinateur portable, un ordinateur de bureau, une tablette ou tout autre support.\n<\/p>\n

\n Mais quelles sont les techniques CSS tendance? N’est-ce pas une question \u00e9vidente qui nous vient \u00e0 l’esprit lorsque l’on parle de concevoir un site Web attrayant et convivial.\n<\/p>\n

\n C’est pourquoi nous avons mis au point quelques-unes des nouvelles techniques et astuces CSS pour ma\u00eetriser vos comp\u00e9tences en conception Web. Chacun comprend des explications et des exemples d’extraits de code.\n<\/p>\n

\n Alors allons-y directement !\n<\/p>\n

\n 1 Aligner verticalement avec Flexbox
\n<\/h5>\n

\n Les d\u00e9veloppeurs pr\u00e9c\u00e9dents rencontraient de nombreuses difficult\u00e9s pour aligner verticalement un texte ou tout autre \u00e9l\u00e9ment au centre. Mais maintenant, apr\u00e8s l’introduction de la nouvelle sp\u00e9cification CSS3 Flexbox<\/strong>, les choses sont devenues beaucoup plus faciles.\n<\/p>\n

\n La propri\u00e9t\u00e9 display: flex<\/strong> permet aux utilisateurs d’aligner sans effort n’importe quel texte ou \u00e9l\u00e9ment au centre. Voici l exemple de code!\n<\/p>\n

\n HTML :<\/strong>\n<\/p>\n

\n Vertically centered!<\/code>\n<\/div>\n
 <\/pre>\n
\n  <strong>CSS\u00a0:<\/strong><\/code>\n<\/p>\n
<code>.align-vertically {\n  background: #FFA500;\n  color: #hhh;\n  display: flex;\n  align-items: center;\n  height: 200px;\n}<\/code><\/code><\/pre>\n
\n  Dans le code CSS ci-dessus, display: flex d\u00e9crit la disposition Flexbox de l’\u00e9l\u00e9ment, tandis que align-items: center; est responsable du centrage vertical du texte.\n<\/p>\n
\n  R\u00c9SULTAT:<\/strong>\n<\/p>\n
\n  2 Grille CSS r\u00e9active
\n<\/h5>\n
\n  Ne faites pas de votre grille une exception, rendez-la \u00e9galement r\u00e9active, comme tout le reste de votre conception.\n<\/p>\n
\n  Il existe de nombreuses fa\u00e7ons de rendre votre grille r\u00e9active avec CSS Grid. Et la meilleure partie de son utilisation est que vous pourrez cr\u00e9er une grille plus flexible qui vous donnera l’apparence souhait\u00e9e, quelle que soit la taille de l’appareil.\n<\/p>\n
\n  En plus de cela, la grille CSS vous permet \u00e9galement de travailler avec des tailles de colonnes in\u00e9gales et \u00e9gales. C’est une grande technologie dot\u00e9e d’options qui donnent aux utilisateurs la libert\u00e9 de contr\u00f4ler leurs conceptions.\n<\/p>\n
\n  Vous pouvez utiliser divers points d’arr\u00eat, la hauteur de plusieurs dimensions et effectuer d’autres placements, comme indiqu\u00e9 dans l’exemple ci-dessous.\n<\/p>\n
\n  HTML :<\/strong>\n<\/p>\n
\n  \u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n<\/div>\n
\n  <strong>CSS\u00a0:<\/strong><\/code>\n<\/p>\n
<code>.grid\n {\n  display: grid;\n  grid-template-rows: repeat(5, 1fr);\n  grid-auto-columns: calc((100vh - 3em) \/ 4);\n  grid-auto-flow: column;\n  grid-gap: 1em;\n  height: 100vh;\n}\n.grid-item:nth-child(3n)\n {\n  background-color: purple;\n}\n.grid-item:nth-child(3n + 2)\n{\n  background-color: pink;\n}<\/code><\/code><\/pre>\n
\n  L’unit\u00e9 de fraction (fr) utilis\u00e9e dans le code CSS ci-dessus est l’unit\u00e9 flexible qui s\u00e9pare l’espace ouvert selon vos directives. Chaque instruction fr est pour la colonne, vous pouvez ensuite additionner les \u00e9carts et pr\u00e9parer la grille.\n<\/p>\n
\n  R\u00c9SULTAT:<\/strong>\n<\/p>\n
\"\"<\/a><\/p>\n
\n  3 animations textuelles
\n<\/h5>\n
\n  Vous avez peut-\u00eatre cr\u00e9\u00e9 des animations d’arri\u00e8re-plan avec CSS, mais maintenant, cela influence \u00e9galement la fa\u00e7on dont les utilisateurs interagissent et interagissent avec les \u00e9l\u00e9ments de texte d’un site Web. Qu’il s’agisse d’ajuster le survol ou de faire flotter des mots dans l’air, CCS3 a rendu tout cela possible.\n<\/p>\n
\n  Les sites Web qui n’ont pas beaucoup d’\u00e9l\u00e9ments attrayants pour engager leurs utilisateurs peuvent tirer le meilleur parti de cette caract\u00e9ristique. En voici un petit exemple.\n<\/p>\n
\n  HTML :<\/strong>\n<\/p>\n
\n