CSS3.0 Maker – 테두리, 상자 그림자 효과 등을 위한 CSS 코드 가져오기

이전에 Layer Styles 및 ThemeShock CSS Drop Shadow Generator 와 같은 몇 가지 CSS 코드 생성기를 검토했습니다 . 둘 다 우수하지만 단일 효과에 대한 코드만 생성하기 때문에 제한적입니다. CSS3.0 Maker 는 테두리, 텍스트 그림자, 상자 그림자, 윤곽선 효과 및 기울기, 크기 조정 또는 요소 회전에 대한 코드를 생성하는 자동 CSS 코드 생성기입니다. 다른 파일을 만들어 여러 CSS 파일(각 파일의 다른 스타일)에서 작업할 수 있습니다. 코드는 HTML 파일로 다운로드되고 CSS는 내부 시트로 추가됩니다. 이 서비스는 효과가 렌더링되는 Chrome, Firefox, Internet Explorer, Safari 및 Opera의 버전과 이를 지원하는 모바일 장치를 알려줍니다.

여러 파일을 만들려면 무료 계정에 가입해야 합니다. 그렇지 않으면 서비스를 생성하지 않고 사용할 수 있습니다. 이상하게도 이 사이트에서는 로그인하지 않은 상태에서 더 많은 효과를 추가할 수 있습니다. 사용 가능한 추가 효과(로그아웃 시)는 그라데이션, 애니메이션 및 전환 효과입니다. 등록되지 않은 사용자로 사용하는 경우 사이트에서 여러 효과를 추가할 수 없습니다. 계정을 등록하지 않고 서비스를 사용하기로 선택한 경우 사이트 헤더 바로 아래에 다양한 효과를 선택할 수 있는 가로 막대가 표시됩니다.

여러 효과를 추가하려면 무료 계정에 가입하고 파일을 만드십시오. 홈 페이지에서 새 파일을 클릭하거나 내 파일 로 이동하여 파일을 만들 수 있습니다 . 파일 이름을 입력합니다. 편집을 선택하면 모든 변경 사항이 이 파일에 저장됩니다. 효과 편집을 시작하려면 홈 탭 으로 이동합니다 .

다른 효과 간에 이동하려면 홈 탭 의 드롭다운 메뉴를 사용하십시오 . 요소의 색상을 변경하고 불투명도를 조정하려면 RGBA 효과로 이동합니다. 테두리를 추가하거나 테두리 스타일을 변경하려면 테두리 반경으로 이동합니다. 텍스트 그림자 및 상자 그림자 효과는 요소나 텍스트 뒤에 그림자 효과를 만듭니다. CSS 변환 효과 에서 기울이고 크기를 조정 하고 윤곽선 오프셋 효과 에서 요소의 테두리를 오프셋 할 수 있습니다 .

모든 변경 사항을 적용하고 필요한 효과를 적용했으면 저장을 클릭 한 다음 다운로드 를 클릭 하여 파일을 다운로드합니다. 필요한 사항을 변경하면 CSS를 사용할 준비가 된 것입니다. 이 서비스는 디자인을 실험하고 싶거나 특정 프로젝트에 대해 많은 CSS 효과를 실험해야 하는 경우에 탁월합니다.

CSS3.0 메이커 방문