집 > 기사 > 웹 프론트엔드 > CSS 3을 사용하여 긴 그림자 만들기

CSS 3을 사용하여 긴 그림자 만들기

php中世界最好的语言원래의: 2017-11-18 11:35:511698검색

현재 가장 대중적인 플랫 디자인에서 롱섀도는 검증된 디자인 실력입니다. 오늘은 긴 그림자를 만드는 방법, PS와 CSS3를 사용하여 긴 그림자 효과를 얻는 방법을 가르쳐 드리겠습니다.

예를 들어 다음은 매우 고전적인 긴 투영 디자인입니다.

사진가는 일반적으로 사진에 극적인 효과를 주기 위해 긴 투영을 선택합니다. 태양이 수평선에 가까우면 수평 지면에 있는 물체를 위에서 보면 긴 그림자 효과가 나타납니다. 인터페이스 디자인에서는 일반적으로 북서쪽 모서리에서 들어오는 햇빛을 시뮬레이션하기 위해 45도 각도를 시뮬레이션하는 효과를 사용하여 디자인 주제와 뚜렷한 대조를 이룹니다. photoshop을 사용하여 긴 그림자를 만드는 방법에는 여러 가지가 있습니다. 긴 그림자 효과를 만드는 데 일반적으로 사용되는 네 가지 방법은 제가 주로 사용하는 네 번째 방법은 레이어를 복사하고 이동하여 이 효과를 얻는 것입니다. .예를 들어 I behance에 업로드된 이 사진은

CSS 3을 사용하여 긴 그림자 만들기

현재 레이어를 복사한 후 레이어 스타일을 선택하고 검정색으로 채운 후 원본 레이어 아래로 이동시키는 것이 일반적인 원칙입니다. 그런 다음 마우스나 필터를 사용하여 이동하고, 한 단위 위로 이동하고, 한 단위 아래로 이동할 수 있습니다.

CSS 3을 사용하여 긴 그림자 만들기

그런 다음 이 레이어를 복제하고 다시 번역합니다. 그런 다음 두 개의 그림자 레이어를 병합합니다.

CSS 3을 사용하여 긴 그림자 만들기

그런 다음 작업을 반복합니다. 즉, 이 레이어를 한 번 복제하고 아래로 오른쪽으로 2단위 이동합니다. 병합을 다시 수행하십시오. 짝수 개의 유닛을 복사하고 이동하고 병합하고 반복합니다.

물론 필터->기타->변위

CSS 3을 사용하여 긴 그림자 만들기

대략적인 효과이고 마지막에 투명도만 설정하면 더 편리합니다.

CSS 3을 사용하여 긴 그림자 만들기

위는 디자인에 관한 것입니다. 프론트엔드는 CSS 코드를 통해 어떻게 이런 효과를 얻나요? 모두가 가장 먼저 생각하는 것은 이미 css3에서 지원하는 text-shadow

입니다. 본문의 배경색을 설정해 보겠습니다. 나는 파란색을 선호합니다. 다음으로 Google Font로 이동하여 원하는 글꼴을 선택합니다. 기본 글꼴이 허용된다고 생각하면 상관없습니다. Passion One

을 선택한 다음 CSS 코드에 입력하면 됩니다.

@import url(‘https://fonts.googleapis.com/css?family=Passion+One‘);

이번에는 long Shadow

<body>  
  <h1>Long Shadow</h1>
</body>

와 같이 몸에 몇 글자만 입력해 보겠습니다. 그런 다음 h1의 기본 스타일을 정의합니다.

h1{  
  text-align:center;
  font-size:6rem;
  padding-top:2rem;
}

다음 단계는 text-shadow 작성의 핵심을 구현하는 것입니다.

text-shadow의 값은 x 및 y축의 변위와 함께 흐림 반경 및 색상을 가질 수 있습니다.

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

패닝을 반복해서 한 다음 배경색에 가깝게 만들기만 하면 됩니다.

이것이 코드입니다

text-shadow： 1px 1px rgba(18, 67, 100, 0.5) , 2px 2px rgba(20, 72, 107, 0.51) , 3px 3px rgba(22, 76, 113, 0.52) , 4px 4px rgba(23, 81, 119, 0.53) , 5px 5px rgba(25, 85, 125, 0.54) ...

하지만 이렇게 작성하는 것은 확실히 비현실적입니다. 단계 크기와 성장을 반복적으로 계산해야 합니다. 다행히 scss 등의 전처리 프레임워크가 있습니다. 색상 변환과 성장을 매우 편리하게 완료할 수 있습니다.

scss 코드 구현 참조

@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){
 
  $gradient_steps: null;
 
  <a href="http://www.jobbole.com/members/lowkey2046">@for</a> $i from 1 through $stepnum {
 
    $weight: ( ( $i - 1 ) / $stepnum ) * 100;
 
    $colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);
 
    $seperator: null;
 
    @if($i != $stepnum){
      $seperator: #{&#39;,&#39;};
    }
 
    $gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator );
 
  }
 
  @return $gradient_steps;
 
}

함수의 실행 효과는 색상 a와 색상 b를 전달할 때와 유사합니다. 여기서 색상 a는 그림자가 시작되는 색상이고, 색상 b는 배경 색상입니다. 단계 길이는 비슷합니다. 그림자가 얼마나 오래 지속되기를 원하시나요? 마지막은 투명도입니다. 그런 다음 계산합니다. 매번 한 단위씩 이동한 다음 백분율로 색상을 줄이고 마지막으로 스타일을 구성합니다.

현재 이 기능은 h1 스타일에서만 사용해야 합니다

@include text-shadow(longshadow(darken($bg,30%),$bg,50, 0.5));

여기서 $bg: 배경색은 #3498db입니다.

CSS 3을 사용하여 긴 그림자 만들기

관련 기사