일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 사이트제작
- #뉴스
- #홈페이지제작
- #쇼핑몰
- 홈페이지
- 홈페이지제작
- #happycgi
- #image
- #jQuery
- jquery
- #업종별
- #웹솔루션
- 쇼핑몰
- 솔루션
- CGIMALL
- #홈페이지
- javascript
- #동영상
- CSS
- #해피CGI
- #이미지
- 게시판
- #솔루션
- 해피CGI
- #cgimall
- 웹솔루션
- #CSS
- php
- Today
- Total
목록웹프로그램밍 자료실/HTML 자료 (268)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
박스의 라인 및 박스 뒷면의 배경색상이 에니메이션 효과 및 광원효과가 있습니다. 박스의 그라데이션 라인이 회전하는 css 및 박스 뒷에 라인에 따라 생기는 광원 효과 css 입니다. 해당사이트 또는 첨부 파일을 다운로드 받아서 소스를 확인 할 수 있습니다.
마우스 호버시 다양한 효과를 한번에 확인 할 수 있습니다. SLIDE IN : 왼쪽에서 오른쪽으로 슬라이드 SLIDE UP : 아래쪽에 위로 슬라이드 SLIDE DOWN DELAY : 위에서 아래쪽으로 슬라이드 ( 아이콘은 출력시간 딜레이 효과 ) ROTATE : 꼭지점을 기준으로 회전하면서 출력 SCALE : 아이콘의 크기 변경 FLIP : 좌우 뒤집기 SKEW : 비스듬한 모양으로 변형 CORNER : 꼭지점에서 슬라이드 효과별 css 를 확인할 수 있습니다.
가벼운 위지윅 에디터 프로그램 입니다. 다운로드 받은 파일의 압축을 해제한 뒤 example.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 아래 그림 처럼 몇몇가지 테마를 제공해줍니다. ms office 와 유사한 모양으로 만들어놨네요. 마유스를 이용해서 에디터의 크기를 조절할 수 있습니다. 가벼운 만큼 에디터가 가져야 할 필수적인 기능들로만 구현이 되어 있는것 같네요. 소스코드가 HTML태그로는 표시는 안되네요 에디터는 필요하지만, 복잡한 툴들 까지는 필요 없는 상황 에서는 괜찮아보이긴 하네요.
사이트를 패미컴 스타일로 만들수 있는 CSS 입니다. https://github.com/nostalgic-css/NES.css 위의 링크에서 관련을 파일을 받아 적용 하거나 CDN 으로도 사용 가능합니다. https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" /> https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" /> https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
색상이 있는 부분이 플립되면서 배경색상 및 텍스트가 변경됩니다. CSS를 수정하여 배경색 및 폰트크기 등을 쉽게 수정할 수 있습니다.
CSS를 이용한 간단 로그인/회원 가입 페이지 입니다. 데모페이지에서 만들어진 화면을 확인하실 수 있으며 첨부파일내에 관련 HTML, CSS를 확인하실 수 있습니다^^
를 이용하여 원모양으로 돌아가는 텍스트를 만들어 보실수 있습니다. [svg 소스] [주요 svg 요소] 1) - 로 텍스트를 배치할 선을 만듭니다. 2) Sweet ~ Coding - 로 텍스트 요소를 감싸고 href 속성에 연결할 path id값을 넣는다. 3) - 으로 움직이는 애니메이션 효과를 준다. svg 요소는 인터넷 익스플로어 및 일부 브라우저에서 지원하지 않습니다. 해당 소스를 활용하여 로딩화면에 돌아가는 이미지 등에 사용 해보실수 있을거 같습니다. ^^
Css를 이용한 체크박스 스위치 디자인입니다. 압축파일내에 html,css 파일이 포합되어 있습니다. css 내용중 var부분은 variable 변수입니다. css변수는 어떠한 기능인지 아래의 사이트에서 간단하게 확인이 가능합니다. https://fresh-mint.tistory.com/entry/css-variable-%EB%B3%80%EC%88%98-%EC%B4%9D-%EC%A0%95%EB%A6%AC 디자인시 유용하게 사용하시길 바랍니다 ^^
플러그인 소개 1줄의 스크립트와 CSS 로 2개의 이미지를 슬라이더로 비교할 수 있도록 구성된 플러그인 입니다. 사용 방법 1. CSS 를 호출하세요. 파일을 압축해제하면 CSS 폴더에 2개의 CSS 파일이 있습니다. 2. 컨테이너를 구성하세요. 실행 결과
Css를 이용하여 애니메이션 효과를 이용한 버튼과 텍스트 형태의 버튼을 제공하고 있습니다. CSS kine hover animations for links 버튼을 클릭하시면 버튼형태가 아닌 텍스트형태의 버튼을 확인하실 수 있습니다. https://tympanus.net/codrops/2021/02/17/ideas-for-css-button-hover-animations/ 페이지에서 데모 및 소스를 다운로드 받으실 수 있으니 참고 해주세요 ^^