일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #이미지
- 사이트제작
- 게시판
- #웹솔루션
- #해피CGI
- #happycgi
- #cgimall
- #뉴스
- jquery
- #CSS
- 웹솔루션
- 해피씨지아이
- php
- javascript
- #쇼핑몰
- 해피CGI
- 홈페이지제작
- 솔루션
- 쇼핑몰
- #홈페이지
- #동영상
- #솔루션
- #image
- CGIMALL
- CSS
- #업종별
- #jQuery
- happycgi
- #홈페이지제작
- 홈페이지
- Today
- Total
목록CSS (119)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
16진수 색상코드나 RGB 색상코드가 아닌 CSS에 지정된 색상명을 확인하고 조합 사용이 가능한 handy colors 정리된 정보입니다. 색상 편집기를 실행할 필요없이, css로 지정된 색상명을 바로 입력하여 사용이 가능하며, 본연의 색상을 조합하여 사용이 가능하네요. 또한 여러 테마별 색상 팔레트도 제공하여, 컨셉에 따른 색상 조합을 선택해서 CSS에 지정된 색상명으로 사용이 가능하네요. 색상명으로 구성하는걸 선호하면 좋은 자료네요.^^
순수 css로 만든 로딩 아이콘 애니메이션 효과입니다. css로 만든 로딩바 애니메이션으로 다양한 효과를 선택해서 쓰면 됩니다.
다음 슬라이드로 넘기게 되면 차트로 되어있는 다음 이미지가 확대 되면서 배경이 바뀌게됩니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. HTML "Lossless Youths" Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim. Read More "Estrange Bond" Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesen..
스프라이트 시트를 css로사용하여 움직이는 이미지 제작입니다. 소스다운로드 또는 데모페이지를 통해 확인해 보실 수 있습니다. HTML CSS .hi { width: 50px; height: 72px; background-image: url("http://s.cdpn.io/79/sprite-steps.png"); -webkit-animation: play .8s steps(10) infinite; -moz-animation: play .8s steps(10) infinite; -ms-animation: play .8s steps(10) infinite; -o-animation: play .8s steps(10) infinite; animation: play .8s steps(10) infinite; } @..
스크롤시 원하는 문구에 하이라이트가 텍스트 앞에서 뒤로 자동으로 적용됩니다. 원하는 문구에 mark 태그를 삽입합니다. 관련 css 소스입니다. mark 태그에 적용이 됩니다. animation-timeline을 이용하여 시작시점을 정할수 있습니다. 해당 사이트 또는 첨부파일에서 관련소스를 다운로드 받아 소스 확인이 가능합니다.
출처 : https://css-tricks.com/fluid-width-video/ CSS만으로 아이프레임 높이를 가로값에 맞춰 자동으로 늘어날 수 있는 코드입니다. 자바스크립트를 사용하지 않고 아이프레임 높이를 조절할 수 있습니다. padding-bottom 부분을 수정하시면 높이를 조절할 수 있습니다. HTML CSS 소스다운로드를 통해 확인해 보실 수 있습니다.
한개 또는 다중으로 범위를 선택하는 디자인 소스 입니다. html 소스 css 로 쉽게 디자인 변경이 가능합니다. 해당 사이트 또는 첨부파일을 다운로드 받아서 전체 소스를 확인할 수 있습니다. 해당 사이트에서는 디자인 변경을 미리 해볼수 있습니다.
CSS 만으로 별점 선택하는 코드입니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. [HTML 소스] Pure CSS Star Rating Widget [CSS 소스] @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); fieldset, label { margin: 0; padding: 0; } body{ margin: 20px; } h1 { font-size: 1.5em; margin: 10px; } /****** Style Star Rating Widget *****/ .rating { border: none; float: left; } .rating > input { display: none; ..
css 만으로 웨이브 에니메이션 효과를 만들수 있습니다. 홈페이지의 랜딩 페이지에서 유용하게 사용이 가능합니다, 반응형이라 모바일 기기에서도 해상도에 맞게 잘 작동합니다. 해당 사이트에서 css 소스 확인이 가능합니다. 첨부파일을 다운로드 받아 소스를 직접 확인할 수 있습니다.
calc() 함수 calc()함수는 속성 값으로 사용할 계산을 수행합니다. 예) calc()를 사용하여 요소의 너비를 계산합니다. #div1 { position: absolute; left: 50px; width: calc(100% - 100px); border: 1px solid black; background-color: yellow; padding: 5px; } max() 함수 max()함수는 쉼표로 구분된 값 목록에서 가장 큰 값을 속성 값으로 사용합니다. 예) max()를 사용하여 #div1의 너비를 50% 또는 300px 중 가장 큰 값으로 설정합니다. #div1 { background-color: yellow; height: 100px; width: max(50%, 300px); } min(..