Scribd
Importer
9 vues2 pages

Techniques CSS pour effets visuels

Le document présente une série d'exercices CSS pour améliorer la mise en forme et l'interactivité des éléments web. Chaque exercice fournit des instructions spécifiques sur l'utilisation de propriétés CSS telles que les dégradés, les ombres, les animations, et les mises en page avec Flexbox et Grid. Ces techniques visent à créer des effets visuels attrayants et une expérience utilisateur améliorée.

Transféré par

lopezlona102
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
9 vues2 pages

Techniques CSS pour effets visuels

Le document présente une série d'exercices CSS pour améliorer la mise en forme et l'interactivité des éléments web. Chaque exercice fournit des instructions spécifiques sur l'utilisation de propriétés CSS telles que les dégradés, les ombres, les animations, et les mises en page avec Flexbox et Grid. Ces techniques visent à créer des effets visuels attrayants et une expérience utilisateur améliorée.

Transféré par

lopezlona102
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

TP1 CSS

### Exercice 1 : Mise en forme de texte et de couleurs

1. Pour appliquer un **dégradé de couleur** au texte, utilisez la propriété `background: linear-


gradient(...)` puis ajoutez `-webkit-background-clip: text` et `color: transparent` pour masquer la
couleur de fond.

2. Pour une **police de caractères différente**, importez une police depuis Google Fonts ou utilisez
`font-family`.

3. **Ombre du texte** : Utilisez `text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);`.

### Exercice 2 : Styles de boutons

1. Pour l'**effet de survol** avec changement de couleur et d'ombre, utilisez `:hover` pour changer
`background-color` et `box-shadow`.

2. **Bordures arrondies** : Utilisez `border-radius: 5px;`.

3. **Effet de pulsation** : Utilisez une animation CSS comme `@keyframes pulse { 0% { transform:
scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }` et appliquez-la au bouton lors
du survol.

### Exercice 3 : Carte de profil

1. **Ombre légère** : Utilisez `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);`.

2. **Effet de zoom** sur l’image : Utilisez `transform: scale(1.05);` dans `:hover`.

### Exercice 4 : Mise en page avec Flexbox

1. Pour une **barre de navigation horizontale** avec Flexbox : `display: flex;` et `justify-content:
space-between;`.

2. **Contenu principal** : Utilisez `flex: 3;` et pour le menu latéral `flex: 1;`.

### Exercice 5 : Grille d'images avec CSS Grid

1. Pour une **grille responsive** de 3 colonnes : `grid-template-columns: repeat(3, 1fr);`.

2. Ajoutez `gap: 10px;` pour espacer les images.


### Exercice 6 : Animation de texte

1. **Effet de type "fondu"** : `@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }`.

### Exercice 7 : Animation au défilement

1. Pour que chaque **section apparaisse progressivement**, utilisez `opacity: 0;` au début puis
ajoutez un effet d’apparition lorsque visible avec `opacity: 1;`.

### Exercice 8 : Formulaire de contact stylisé

1. **Effet de survol fluide** : Utilisez `transition: all 0.3s ease-in-out;` pour les champs.

### Exercice 9 : Menu de navigation animé

1. Utilisez `text-decoration` pour ajouter un **effet de soulignement progressif** et `transition` pour


l’animation.

### Exercice 10 : Carte d’info avec effet de rotation

1. Utilisez `transform-style: preserve-3d;` et `transform: rotateY(180deg);` pour l’effet de **rotation


3D**.

Ces ajustements permettront d’obtenir les effets visuels et interactifs demandés pour chaque
exercice.

Vous aimerez peut-être aussi