CSS 그림자 : 그리는 방법

어둠이 없으면 빛이 없으며 그림자가없는 형태는 없습니다. 여성을위한 메이크업 도구조차도 "그림자"라고 불립니다. 사이트의 페이지를 멋지게 꾸미려면 올바른 악센트를 배치해야합니다. 필요한 경우 CSS 섀도우를 추가하십시오.

아래의 내용은 CSS를 사용하여 블록이나 그림의 그림자를 설정하는 방법을 배우는 데 도움이됩니다.

CSS 그림자. 구문

실제로 box-shadow, 상자는 블록이고 shadow는 그림자 자체입니다.

코드는 중괄호로 표시됩니다.

{box-shadow : 11px 22px 33px 44px # 333333;}.

문자열은 블록에 픽셀 반경이있는 표준 그림자가 있음을 알려줍니다. 데이터는 다음과 같이 해독됩니다.

  • 11px - X 축을 따라 블록을 기준으로 음영 이동 (양수 값 (20 픽셀)) 그림자가 오른쪽으로 이동하고 음수 (-37px)가 왼쪽으로 이동합니다.
  • 22 픽셀 - 초Y 축을 따라 블록을 기준으로 음영 처리 (양수 값 (5 픽셀))하면 그림자가 아래로 이동하고 음수 (-17 픽셀) - 위로 이동합니다.
  • 33px - 이것은 흐림 매개 변수입니다. 숫자가 클수록 효과는 강해집니다.
  • 44px - 그림자의 반경도 직접 비례합니다.
  • # 333333 - 그림자가 그려지는 색입니다.

마지막 세 매개 변수는 선택 사항이며 단순히 행에 지정되지 않을 수 있습니다 (예 : {box-shadow : 10px 13px;}-이러한 선은 오류가 아닙니다 (그림자 색상은 블록의 텍스트 색상과 동일합니다).

따라서 귀하의 페이지에 그림자를 생성하십시오.사이트는 복잡성을 나타내지 않지만 얼마나 많은 눈을 즐겁게 만들어 줄 수 있습니까? 모든 작은 세부 사항, 모든 세부 사항이 디자인에서 중요하기 때문에 자녀를 더욱 독특하고 독특하게 만드십시오. 여기에 특별한 것은 없지만 훨씬 더 흥미롭고 매력적입니다.

CSS 그림자

코드에 따라 블록의 CSS 그림자가 어떻게 보이는지 몇 가지 예를 살펴 보겠습니다.

  1. {box-shadow : 25px 25px;} - 오프셋이 25 픽셀 인 CSS 그림자.
    CSS 블록 그림자
  2. {box-shadow : 25px 25px 10px;} - 25 픽셀 오프셋 및 10 픽셀 흐리게 처리가 적용된 CSS 그림자입니다.
    CSS 그림자 사진들
  3. {box-shadow : 25px 25px 10px 5px;} - 25 픽셀 오프셋, 가장자리가 10 픽셀 흐리게 처리되고 지정된 반경이 5 픽셀 인 CSS 그림자
    그림자
  4. {그림자 박스 : 25 픽셀 x 25 픽셀의 10px 5px # 9e9e9e} - CSS 그림자 흐림 10 픽셀, 5 개 픽셀 컬러의 반경을 지정할 에지, 축 (25 개)의 픽셀 오프셋.
    색깔

그림자 효과

더 아름답고, 우아하고,원래의 그림자는 다른 효과를냅니다. 당신은 내면의 그림자를 만들 수 있습니다. 이를 위해서는 매개 변수 앞에 매개 변수 앞에 "inset"을 지정하는 것으로 충분합니다. 매개 변수에 대한 설명은 평소와 같이됩니다.

{box-shadow : 4px 2px 6px 9e9e9e 삽입}.

삽입하다

절대적으로 다른 매개 변수를 사용하여 블록 아래에 여러 개의 그림자를 넣을 수 있습니다. 코드에서 그림자 (쉼표)는 쉼표로 나열됩니다.

{박스 그림자 : -20px -10px 11px 15 픽셀 # 800080을 -50px -40px 5px 10px #의 daa520, 20 픽셀 10px 11px 15 픽셀 # 0700f9, 50 픽셀 40px 5px 10px #의 ffa500}.

여러

그림자 사진

사이트의 블록 외에도,그림, 사진, 배경 -이 모든 요소들은 그림자와 함께 훨씬 더 재미있어 보입니다. 이미 그래픽 편집기에서 그림을 만들고 그림자가있는 페이지에 그림을 삽입 할 수 있습니다. 그러나 첫째, 이것은 그래픽 기술의 부족을 비롯하여 여러 가지 이유로 항상 가능하지는 않습니다. 둘째, 이미지의 조작으로 인해 "무게"가 가중되며 이러한 그림은 페이지 로딩을 방해 할 수 있습니다. 이 경우 CSS 섀도우 이미지를 만들 수 있습니다.

이미지들

이 문제에 대한 가장 간단하고 가장 구문 론적으로 올바른 해결책은 그림을 배경으로 블록을 만드는 것입니다. 다음으로 블록에 필요한 그림자를 만들고 그림의 배경에 표시합니다.

  • .block1 {box-shadow : 삽입} 0 0 11px 9px # 9e9e9e; 너비 : 480px; 높이 : 360px; 배경 : url (images / charlize_theron_2.jpg) 0 0 no-repeat;}

이 예제에서 우리는 내부 그림자를 생성하지 않고흐림 및 반경이있는 축을 따라 오프셋이 적용되어 블록의 색상, 높이 및 너비가 결정되고 배경이 그림에 지정되었습니다. 결과적으로 우리는 내면의 그림자를 가진 그림을 얻었습니다.

CSS 코드의 도움으로 그림자를 만드는 것은 매우 간단하고 매혹적이며 가장 중요한 것은 유용한 교훈입니다.

</ p>
좋아요 :
0
관련 기사
신비한 일본에서 "낸시 드류"의 통로
시스템 요구 사항 "스토커 : 그림자
"스토커 : 체르노빌의 그림자": 통로와
당신은 큐브를 그리는 방법을 모른다. 이 기사
플롯, 리뷰 및 배우 : "2 : 나 그리고 내 그림자"
놀이 동화 "그림자", Schwarz : 짧은
시리즈 "미국 신": 배우와 역할,
발코니에 꽃 상자 : 밝은 장식
Marquises가 당신의 선택을 멈추게합니까?
인기 게시물
위로