Scribd
Importer
41 vues5 pages

Cours Maitrise CSS

Ce document présente un cours avancé sur la maîtrise complète de CSS3, couvrant des sujets tels que la gestion des dimensions, le positionnement, les couleurs, les fonds, les espacements, les bordures, les ombres, les transformations, les animations, et le design responsive. Chaque section fournit des exemples de code pour illustrer les concepts, comme l'utilisation de propriétés CSS pour modifier la taille, la couleur, et les effets visuels des éléments. Le cours aborde également des techniques modernes et avancées pour améliorer l'esthétique et la fonctionnalité des sites web.

Transféré par

84x2xwfgk9
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 PDF, TXT ou lisez en ligne sur Scribd

Thèmes abordés

  • accessibilité CSS,
  • design adaptatif,
  • background-color,
  • dimensions,
  • dégradé,
  • couleurs,
  • animation,
  • transparence,
  • techniques CSS,
  • box-shadow
41 vues5 pages

Cours Maitrise CSS

Ce document présente un cours avancé sur la maîtrise complète de CSS3, couvrant des sujets tels que la gestion des dimensions, le positionnement, les couleurs, les fonds, les espacements, les bordures, les ombres, les transformations, les animations, et le design responsive. Chaque section fournit des exemples de code pour illustrer les concepts, comme l'utilisation de propriétés CSS pour modifier la taille, la couleur, et les effets visuels des éléments. Le cours aborde également des techniques modernes et avancées pour améliorer l'esthétique et la fonctionnalité des sites web.

Transféré par

84x2xwfgk9
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 PDF, TXT ou lisez en ligne sur Scribd

Thèmes abordés

  • accessibilité CSS,
  • design adaptatif,
  • background-color,
  • dimensions,
  • dégradé,
  • couleurs,
  • animation,
  • transparence,
  • techniques CSS,
  • box-shadow

Cours Avance : Maitrise Complete de CSS3

PARTIE 1 : Gestion des Dimensions et Positionnement

1. Modifier la taille d'un element


On peut redimensionner avec width et height.

div {
width: 200px;
height: 100px;
}

2. Ajuster la taille en fonction de l'ecran


On utilise des valeurs relatives (%, vw, vh).

div {
width: 50%;
height: 50vh;
}

3. Ajuster la taille avec max-width et min-width


Evite les elements trop petits ou trop grands.

img {
max-width: 100%;
height: auto;
}

4. Centrer un element
Avec margin auto ou Flexbox.

div {
width: 50%;
margin: 0 auto;
text-align: center;
}

PARTIE 2 : Couleurs et Fonds

1. Modifier la couleur du texte


On utilise la propriete color.

p {
color: red;
}

2. Modifier la couleur de fond


Avec background-color.

div {
background-color: lightblue;
}

3. Ajouter un degrade
On utilise background-gradient.

div {
background: linear-gradient(to right, red, blue);
}

4. Ajouter une image de fond


Avec background-image.

body {
background-image: url('image.jpg');
background-size: cover;
}

PARTIE 3 : Ajustement des Espacements

1. Ajouter des marges externes


Avec la propriete margin.

div {
margin: 20px;
}

2. Ajouter des espaces internes


Avec padding.

div {
padding: 15px;
}

3. Regler les espacements differemment pour chaque cote


On peut separer margin et padding.

div {
margin-top: 10px;
margin-bottom: 20px;
padding-left: 15px;
padding-right: 25px;
}

PARTIE 4 : Bordures et Ombres

1. Ajouter une bordure


Avec la propriete border.

div {
border: 2px solid black;
}

2. Arrondir les bords


Avec border-radius.

div {
border-radius: 10px;
}

3. Ajouter une ombre


Avec box-shadow.

div {
box-shadow: 5px 5px 10px gray;
}

PARTIE 5 : Transformation et Animation

1. Agrandir ou retrecir un element


Avec transform: scale.

div:hover {
transform: scale(1.2);
}

2. Rotation d'un element


Avec transform: rotate.

div {
transform: rotate(45deg);
}

3. Animation d'un element


Avec @keyframes.

@keyframes slide {
from { left: 0px; }
to { left: 200px; }
}

div {
position: relative;
animation: slide 2s infinite alternate;
}

PARTIE 6 : Responsive Design et Adaptabilite

1. Utiliser les Media Queries


Pour adapter le site aux ecrans.

@media (max-width: 600px) {


body {
background-color: yellow;
}
}

2. Adapter les images


Avec max-width et height auto.

img {
max-width: 100%;
height: auto;
}

PARTIE 7 : Effets avances et CSS modernes

1. Effet de flou sur un element


Avec filter: blur.

img {
filter: blur(5px);
}

2. Effet de zoom au survol


Avec transition et transform.

div:hover {
transform: scale(1.1);
transition: transform 0.3s ease-in-out;
}

3. Ajouter une transparence


Avec opacity.
div {
opacity: 0.5;
}

Vous aimerez peut-être aussi