recherche

Maison  >  Article  >  interface Web  >  Comment utiliser CSS3 pour obtenir un simple effet d'ombre sur les images (code complet ci-joint)

Comment utiliser CSS3 pour obtenir un simple effet d'ombre sur les images (code complet ci-joint)

坏嘻嘻
坏嘻嘻original
2018-09-29 17:48:136910parcourir

L'article précédent vous a montré comment utiliser CSS3 pour obtenir l'effet d'ombre d'un texte. Cet article continuera à vous montrer comment obtenir l'effet d'ombre d'images, qui comprend deux effets spéciaux : l'effet de projection de surface incurvée/ellipse et l'effet flottant. effet de projection. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Le principe de l'utilisation du CSS3 pour obtenir l'effet d'ombre des images

Un graphique doit avoir une projection principale et un autre graphique avec une radian a également Utilisez votre propre effet d'ombre pour superposer les deux graphiques, rendre leurs couleurs cohérentes, puis exposer l'ombre en arc, afin que vous puissiez voir l'effet d'une ombre incurvée.

Paramètre de la propriété text-shadow

  1. Décalage horizontal, valeur positive à droite, valeur négative à gauche.

  2. Décalage vertical, la valeur positive diminue, la valeur négative monte.

  3. Flou, ne peut pas être négatif.

  4. La couleur de l'ombre.

Utilisez CSS3 pour obtenir un effet de projection courbe/elliptique

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>曲面/椭圆投影效果</title>
  <style>
.shadow_wrap{
  width: 100%;background:#E6EEF6;max-width: 600px;margin: auto;overflow: hidden;
}
.shadow1{
  background-color: #9ecf68;
}
.shadow2{
  background-color: #00bcd4;
}
.shadow1,.shadow2{
position:relative;
width:40%;
    height:200px;
    float:left;
    margin:5% 15px;
    border-radius:5px;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
.shadow_wrap h3{
  width:87%;
  height:100px;
  margin-left:6%;
  text-align:center;
  padding-top:60px;
  color:#fff;
}
/**styling shadows**/
.shadow1:before, .shadow1:after{
  position:absolute;
  content:"";
  bottom:12px;left:15px;top:80%;
  width:45%;
  background:#9B7468;
  z-index:-1;
  -webkit-box-shadow: 0 20px 15px #9B7468;
  -moz-box-shadow: 0 20px 15px #9B7468;
  box-shadow: 0 20px 15px #9B7468;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow1:after{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 15px;left: auto;
}
.shadow2:before, .shadow2:after{
  position:absolute;
  content:"";
  top:100px;bottom:5px;left:30px;right:30px;
  z-index:-1;
  box-shadow:0 0 40px 13px #486685;
  border-radius:100px/20px; 
}
</style>
</head>
<body>
<div class="shadow_wrap">
  <div class="shadow1">
    <h3>椭圆投影1</h3>
  </div>
  <div class="shadow2">
    <h3>椭圆投影2</h3>
  </div>
</div>
</body>
</html>

L'effet est comme indiqué dans la figure

Comment utiliser CSS3 pour obtenir un simple effet dombre sur les images (code complet ci-joint)

Utilisez CSS3 pour obtenir un effet d'ombre flottante

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>悬浮投影</title>
 <style>
.shadow_wrap{
margin-top: 50px; margin-bottom: 10px;
}
.floating {
width:60%;max-width: 180px; height: 150px;line-height: 150px; background: #ff9800;
color:#fff;text-align: center;cursor: pointer;
    position: relative;transform: translateY(0);transition: transform 1s;
}
.floating:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    height: 8px;
    width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    transform: translate(-50%, 0);
    transition: transform 1s;
}
/*鼠标移上去的效果*/
.floating:hover {
    transform: translateY(-40px);
    transition: transform 1s;
}
.floating:hover:after {
    transform: translate(-50%, 40px) scale(0.75);
    transition: transform 1s;
}
</style>
<body>
<div class="shadow_wrap">
  <div class="floating">
    <h3>悬浮投影</h3>
  </div>
</div
</body>
</html>

L'effet est montré dans la figure

Comment utiliser CSS3 pour obtenir un simple effet dombre sur les images (code complet ci-joint)

Résumé

Utilisation box-shadow directement : 5px 5px 10px black insert ; définissez simplement le style avec les attributs. Les deux premières valeurs (5px 5px) sont les décalages horizontaux et verticaux. Les valeurs positives décaleront l'ombre vers la gauche et vers le bas, et les valeurs négatives feront le contraire ; la distance de flou ; le noir est l'ombre ; le dernier encart sert à créer une ombre à l'intérieur de l'élément, qui est l'ombre intérieure, la suppression de l'encart sert à définir l'ombre extérieure.

Il s'agit d'un effet obtenu en utilisant du CSS pur. L'ajout d'un effet d'ombre à la bordure de la zone du calque DIV semble très vivant, mais ce n'est pas trop difficile à mettre en œuvre. Le code CSS est relativement simple et mérite d'être appris. .

Méthode d'implémentation CSS de box shadow

Pour les liens de contenu connexes, veuillez consulter le didacticiel vidéo dans la section CSS3 de ce site :

http://www.php.cn/course/list/14.html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment obtenir l’effet concave et convexe des polices en CSS3 ? (avec code)Article suivant：Comment obtenir l’effet concave et convexe des polices en CSS3 ? (avec code)

Articles Liés

Voir plus