07 mars Astuces html css

Quelques exemples de code css3 pour enjoliver son site internet

  1. Animations et transitions: Les animations et transitions sont des éléments clés de CSS3 qui permettent d’ajouter du dynamisme et de l’interactivité à votre site. Voici un exemple de code pour ajouter une animation de fondu enchaîné à une image :
img {
  transition: opacity 0.5s ease-in-out;
}
img:hover {
  opacity: 0.5;
}

Ce code applique une transition d’opacité de 0,5 seconde avec une accélération et un ralentissement progressifs (ease-in-out) à une image. Lorsque l’utilisateur passe la souris sur l’image, l’opacité de l’image passe de 1 à 0,5 en 0,5 seconde, créant ainsi un effet de fondu enchaîné.

  1. Effets de dégradé: Les dégradés sont une autre fonctionnalité intéressante de CSS3 qui permettent de créer des effets de couleur dégradés sur des éléments de votre site. Voici un exemple de code pour créer un dégradé radial sur un bouton :
button {
  background-image: radial-gradient(circle, #ff7f50, #ff6347);
}

Ce code applique un dégradé radial en cercle avec les couleurs #ff7f50 et #ff6347 à un bouton. Le résultat est un bouton avec un dégradé de couleur qui ajoute de la profondeur et de l’intérêt visuel.

  1. Utilisation de polices de caractères personnalisées: Les polices de caractères personnalisées sont une fonctionnalité puissante de CSS3 qui permettent de personnaliser l’apparence de votre site en utilisant des polices de caractères uniques. Voici un exemple de code pour inclure une police de caractères personnalisée dans votre site :
@font-face {
  font-family: 'Open Sans';
  src: url('opensans.woff2') format('woff2'),
       url('opensans.woff') format('woff');
}
body {
  font-family: 'Open Sans', sans-serif;
}

Ce code utilise la règle @font-face pour inclure la police de caractères « Open Sans » dans votre site en utilisant les fichiers de police woff2 et woff. Ensuite, la police est appliquée au corps de la page en utilisant la propriété font-family.

  1. Transformations 3D: Les transformations 3D sont une autre fonctionnalité intéressante de CSS3 qui permettent de créer des effets de profondeur et de perspective sur des éléments de votre site. Voici un exemple de code pour créer une boîte en 3D qui tourne lorsqu’on passe la souris dessus :
.box {
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}
.box:hover {
  transform: rotateY(180deg);
}

Ce code applique une transformation 3D à une boîte en utilisant la propriété transform-style pour conserver la perspective, et une transition de 0,5 seconde avec une accélération et un ralentissement progressifs (ease-in-out). Lorsque l’utilisateur passe la souris sur la boîte, celle-ci tourne sur elle-même de 180 degrés autour de son axe Y

Laisser un commentaire

Accessibility by WAH