- -CSS3 자동 코드 생성기를 사용하여 이미지에 그림자 효과 추가

CSS3 자동 코드 생성기를 사용하여 이미지에 그림자 효과 추가

CSS를 사용하면 웹 페이지를 쉽게 스타일링 할 수 있습니다.용이하게. 한 페이지에서 100 가지가 넘는 텍스트 스타일을 정의 할 수 있지만 (물론 페이지는 서커스 텐트처럼 보일 것입니다.) 웹 페이지에서 CSS를 사용할 때의 유연성과 유연성에 관한 것입니다.테마 쇼크 추가하는 데 도움이되는 CSS 코더 생성기가 있습니다.몇 번의 클릭만으로 이미지에 다양한 그림자 효과를 적용 할 수 있습니다. 효과를 선택하면 코드가 작성됩니다. 효과는 하단, 측면, 상단 및 하단, 왼쪽 하단, 오른쪽 하단, 오른쪽 상단 및 왼쪽 하단 또는 대각선 코너에 추가 할 수 있습니다.

CSS 그림자 생성기 _HQ

시작하기 전에; 당신의 치수를 확인이미지 (효과를 추가하려는 이미지). 코드 생성기는 이미지 너비와 높이에 대해 사전 정의 된 상한과 하한이 130 – 347px입니다. 이미지 크기가이 크기를 초과하면 나중에 너비와 높이를 언제든지 편집 할 수 있습니다. 이 코드를 사용하면 그림자의 불투명도와 흐림을 결정할 수도 있습니다. 코드 생성기에 이미지를 업로드 할 수 없으며 기본 이미지가 사용되므로 효과를 미리 볼 수 있습니다.

드롭 다운 메뉴에서 그림자를 선택하십시오선택기 중 하나를 변경할 때마다 새로운 코드가 생성되므로 최신 코드를 사용해야합니다. 원하는 효과를 선택한 후에는 가로 스크롤 막대를 사용하여 이미지의 너비와 높이를 설정하십시오. 버튼을 조금 움직이려면 오른쪽 및 왼쪽 화살표 키를 사용하십시오. 흐림 및 불투명도를 설정하면 코드가 생성됩니다. 이 매개 변수 중 하나를 늘리거나 줄이면 새 코드가 작성됩니다.

CSS3 그림자

모든 것이 설정되면 CSS 코드를CSS 파일을 작성하고 웹 페이지 (또는 테마)로 이름을 지정하십시오. 웹 페이지에 들어가는 HTML 코드도 생성됩니다 (드롭 다운 메뉴에서 선택한 각 효과마다 고유함). 복사 한 다음 이미지 코드 (img src =”“)를‘여기에 코드’라고 적습니다.

이 코드 생성기의 가장 좋은 점은작동하며 무료입니다. 이미지의 치수 제약이 있지만 코드에서 편집 할 수 있습니다. 투명한 이미지 (위와 같은)를 사용하면 흐린 회색 배경이 나타납니다. 나중에 코드에서 배경색을 편집 할 수 있습니다. (코드 라인 배경 편집 : #ccc). 이 코드는 또한 모든 이미지에 5px 프레임을 제공합니다. 프레임을 편집 할 수도 있지만 너비를 늘리거나 줄이면 필요 이상으로 그림자가 숨겨 지거나 노출되므로 혼자 두는 것이 가장 좋습니다.

ThemeShock CSS Drop Shadow Generator 방문

코멘트