일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- #솔루션
- 홈페이지
- 게시판
- happycgi
- #jQuery
- #image
- #홈페이지
- 홈페이지제작
- CGIMALL
- 해피씨지아이
- jquery
- CSS
- 사이트제작
- #cgimall
- #웹솔루션
- 웹솔루션
- #쇼핑몰
- 솔루션
- #이미지
- php
- #동영상
- #happycgi
- #해피CGI
- 쇼핑몰
- #홈페이지제작
- javascript
- #업종별
- #뉴스
- #CSS
- 해피CGI
- Today
- Total
목록CSS (119)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
일전에도 Sprite 이미지를 Css로 변환해주는 사이트를 올렸지만.. 조금 불편해서 다른곳을 찾는중에 더 괜찮은곳을 찾아서 소개해드립니다. 이미 만들어둔 Sprite 이미지를 이용하여 클릭만으로 하단에 CSS코드를 생성해 줍니다. 그리고 하단의 2* 와 %는 각 각 레티나용 그리고 백그라운드 포지션을 %로 이용할시에 선택하는곳이며 선택시 각 각 css코드가 변경이되게 됩니다. Select Sprite를 클릭하여 선택한다음 Css를 확인하신 후 작성해주시면 쉽게 적용이 가능합니다. 이전의 사이트와는 조금 다른점은 이전 사이트에서는 이미지를 이용하여 만들어주는 곳이었지만. 여기는 제작한 이미지가 있어야 한다는점이 조금 다른점 입니다. 사용하기 편하신곳으로 아무곳이나 이용하셔도 좋을듯합니다 ^^
위 설정항목을 통해 다각형 형태의 배경이미지를 생성합니다. 이미지 사이즈부터 cellsize, cellpadding,bleed 값을 입력하면 해당 모양 및 영역만큼 이미지가 변경되게 됩니다. 팔레트 리스트에서 원하시는 색상을 선택하면 해당 색상의 조합으로 이미지가 생성되게 됩니다.
미리보기 화면을 보면서 손쉽게 그림자 소스를 생성이 가능합니다. 아래와 같은 옵션이 있습니다. Horizontal Lengthpx, Vertical Lengthpx, Blur Radiuspx, Spread Radiuspx, Shadow Color, Background Color, Box Color, Opacity 미리보기 부분의 소스를 복사하여 사용하시면 됩니다.
심플한 이펙트부터 유니크한 이펙트까지 다양한 마우스 오버 효과가 있습니다. 아래와 같이 각각의 이펙트별 html 소스와 css 소스를 분리하여 보기쉽게 잘 정리되어 있습니다.
CSS로 말풍선을 간단히 생성/디자인하는 Bubbler 입니다. 간단한 조작으로 말풍선을 생성하고 CSS를 확인하여 적용할 수 있습니다. [ 말풍선 디자인툴 ] 데모페이지 하단에서 말풍선 디자인과 관련된 툴을 확인하실 수 있습니다. [ 말풍선 디자인 미리보기 ] 편집툴의 상단에서 즉시 적용되어 보여지는 말풍선 디자인을 확인할 수 있습니다. 원하는 말풍선 디자인을 완성한후 우측 화면상단의 CSS버튼을 클릭하면 펼쳐지는 CSS소스를 확인할 수 있습니다.
이미지 슬라이드 사용시 다양한 화살표 효과를 이용할 수 있습니다. 미리보기는 데모사이트 이동시, 마우스모양에 커서를 올리면 효과를 확인하실 수 있습니다. 압축파일내에는 예시에 필요한 이미지와 html, css파일이 압축되어있습니다.
태그 유형 설명 버전 . .class {color:#fff;} 클래스 선택자 CSS1 # .id {color:#fff;} 아이디 선택자 CSS1 * * {color:#fff;} 전체 선택자 CSS2 element p {color:#fff;} 요소 선택자 CSS1 element, element p, div {color:#fff;} 그룹 선택자 CSS1 element element div p {color:#fff;} 후손 선택자 CSS1 element > element div > p {color:#fff;} 이웃 선택자 CSS2 element + element div > p {color:#fff;} 자식 선택자 CSS2 element ~ element div ~ p {color:#fff;} 형제 선택자 CS..
하나의 화면에서 반투명한 레이아웃을 CSS로 구현할 수 있습니다. [제작화면] HTML과 CSS, JS를 하나의 화면에서 확인할수있습니다.
HTML을 입력하면 HTML구조에 맞춰 css를 컨버팅 해주는 사이트를 소개해드립니다. 코딩시 구조가 복잡해질수록 css구조가 복잡해지지만 위 컨버팅 사이트를 이용하면 보다 편하게 이용이 가능한거 같습니다. 간단히 예제로 html코드를 작성해보니 우측에 css영역에 html을 입력한 계층구조로 컨버팅되는 이미지를 확인하실 수 있습니다. 체크박스를 통하여 필요없는 클래스 또는 아이디명을 삭제할 수 있으며 사이트 방문필요없이 아래의 태그를 복사하셔서 아이프레임으로 퍼가기도 가능합니다 ^^ 코딩을 주업이신 퍼블리셔 분들꼐 도움이 되었으면 좋겠네요~~^^