CSS3를 사용하여 이미지에 간단한 그림자 효과를 얻는 방법(전체 코드 첨부)-CSS 튜토리얼-php.cn

CSS3를 사용하여 이미지에 간단한 그림자 효과를 얻는 방법(전체 코드 첨부)

坏嘻嘻

풀어 주다： 2018-09-29 17:48:13

원래의

6924명이 탐색했습니다.

마지막 기사에서는 CSS3를 사용하여 텍스트의 그림자 효과를 얻는 방법을 설명했습니다. 이 기사에서는 곡면/타원 투영 효과와 부동 투영 효과라는 두 가지 특수 효과가 포함된 그림의 그림자 효과를 얻는 방법을 계속 설명합니다. . 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

그림의 그림자 효과를 얻기 위해 CSS3를 사용하는 원리

그래픽에는 기본 투영이 있어야 하며 라디안이 있는 다른 그래픽에도 자체 그림자 효과가 있습니다. 색상이 일관되면 곡선 그림자를 노출시켜 곡선 그림자 효과를 볼 수 있습니다.

text-shadow 속성 설정

수평 오프셋, 양수 값은 오른쪽으로, 음수 값은 왼쪽으로 이동합니다.
세로 오프셋, 양수 값은 내려가고 음수 값은 올라갑니다.
흐릿하며 음수일 수 없습니다.
그림자 색상.

css3를 사용하여 표면/타원 투영 효과 얻기

<!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>

로그인 후 복사

효과는 그림과 같습니다

CSS3를 사용하여 이미지에 간단한 그림자 효과를 얻는 방법(전체 코드 첨부)

css3을 사용하여 부동 투영 효과 얻기

<!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>

로그인 후 복사

는 다음 효과를 얻습니다. 그림과 같이

CSS3를 사용하여 이미지에 간단한 그림자 효과를 얻는 방법(전체 코드 첨부)

요약

box-shadow:5px 5px 10px black inset 속성을 사용하여 스타일을 설정하세요. 처음 두 값(5px 5px)은 가로 및 세로 방향의 오프셋입니다. 양수 값은 그림자를 왼쪽 및 아래쪽으로 오프셋하고 음수 값은 반대 값(10px)을 수행합니다. 흐림 거리를 설정하는 것입니다. 색상은 요소 내부에 그림자를 만드는 것이며, 삽입을 삭제하는 것은 외부 그림자를 설정하는 것입니다.

이것은 순수 CSS를 사용하여 얻은 효과입니다. DIV 레이어의 영역 테두리에 그림자 효과를 추가하면 매우 선명해 보이지만 구현하기가 그리 어렵지 않습니다. CSS 코드는 비교적 간단하며 배울 가치가 있습니다.

상자 그림자의 CSS 구현 방법

관련 컨텐츠 링크를 보려면 이 사이트의 CSS3 부분에 있는 비디오 튜토리얼을 보십시오:

http://www.php.cn/course /목록/ 14.html

위 내용은 CSS3를 사용하여 이미지에 간단한 그림자 효과를 얻는 방법(전체 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!