목록#CSS (87)

웹솔루션개발 25년 노하우! 해피CGI의 모든것

[해피CGI][cgimall]CSS Hover Effects 마우스 호버시 다양한 슬라이드 효과

마우스 호버시 다양한 효과를 한번에 확인 할 수 있습니다. SLIDE IN : 왼쪽에서 오른쪽으로 슬라이드 SLIDE UP : 아래쪽에 위로 슬라이드 SLIDE DOWN DELAY : 위에서 아래쪽으로 슬라이드 ( 아이콘은 출력시간 딜레이 효과 ) ROTATE : 꼭지점을 기준으로 회전하면서 출력 SCALE : 아이콘의 크기 변경 FLIP : 좌우 뒤집기 SKEW : 비스듬한 모양으로 변형 CORNER : 꼭지점에서 슬라이드 효과별 css 를 확인할 수 있습니다.
웹프로그램밍 자료실/HTML 자료 2022. 1. 27. 09:08
[해피CGI][cgimall] Pure CSS Sliding Tab Select 슬라이딩 탭

css 만으로 구현된 슬라이딩 탭 소스 입니다. 탭을 클릭시 탭과 컨텐츠가 슬라이딩 됩니다. 상단 우측 네비로 탭을 이동시킬수도 있습니다. css 로 구현되어 있습니다. 반응형으로 디자인 되어 있습니다. html, css 파일의 간단한 수정으로 탭 추가가 가능합니다. 해당 사이트나 첨부파일을 다운로드 받아서 소스확인이 가능합니다.
웹프로그램밍 자료실/기타 자료 2021. 6. 2. 09:23
[해피CGI][cgimall] [CSS] Explanation of different points of the image / css로 구현한 이미지의 각 부분 설명

checkbox와 label 을 이용하여 이미지의 특정 부분들을 클릭시 이미지가 줌인되고 설명 텍스트가 나오도록 제작된 소스입니다.
웹프로그램밍 자료실/기타 자료 2021. 5. 18. 09:52
[해피CGI][cgimall] CSS를 이용한 손전등 마우스 커서

background css를 사용하여 웹페이지 내에서 손전등을 비추어 보는 듯한 효과를 만들어 볼 수 있습니다. background로 원형의 그라디언트를 주어 손전등을 비춘것 처럼 보이게 하였으며, 마우스 커서를 따라 움직이도록 스크립트 소스가 사용되었습니다. [주요 background css] background: radial-gradient( circle 10vmax at var(--cursorX) var(--cursorY), rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.95) 100% ) → 10vmax 의 숫자를 조정하면 손전등 빛의 크기를 조절 할 수 있습니다. → 색상의 투명도나 색상코드를 변경하시면 검은색 말고도 다양한 색상으로 변경해보실 수 있습..
웹프로그램밍 자료실/기타 자료 2020. 12. 31. 09:06
[해피CGI][cgimall] Pure CSS Flip Card

마우스 오버시 수평 또는 수직으로 카드가 뒤집어집니다.
웹프로그램밍 자료실/기타 자료 2020. 12. 30. 09:08
[해피CGI][cgimall] css로 만드는 to-do list

:checked 를 이용하여 checkbox 의 선택 여부에 따라 각각의 스타일을 줄 수 있으며 이를 이용하여 to-do list를 만들어 볼 수 있습니다. [선택안된 체크박스 스타일] [선택된 체크박스 스타일] 사이트 또는 첨부파일을 다운 받아보시면 자세한 소스를 확인해보실 수 있습니다. 해당 소스를 이용하여 to-do list 뿐만아니라 일반 체크박스 스타일에도 응용 해볼 수 있습니다.
웹프로그램밍 자료실/기타 자료 2020. 12. 24. 09:33
[해피CGI][cgimall] 간단하지만, 유용한 input 버튼 css

간단하지만, 유용한 input 버튼 css 입니다. 기본 시스템 input 버튼이 아닌 디자인을 하기 위한 기본적인 소스이며, 간단한 css와 javascript로 구현이 가능합니다. 별도의 프로그램 작업없이도 디자이너가 사용이 가능합니다.
웹프로그램밍 자료실/기타 자료 2020. 11. 16. 09:57
[해피CGI][cgimall] CSS로 만드는 화살표

CSS만으로 화살표 아이콘을 만들어 볼 수 있습니다. 홈페이지, 첨부파일에서 3가지의 화살표 스타일을 확인할 수 있으며 적용해서 사용해보세요 ^^ 화살표 모양은 border 스타일로 표현되었으며, 전체적인 색상은 *에 지정된 color 값으로 변경하실 수 있습니다. [첫번째 스타일] - 기본 style 소스 [두번째 스타일] - 기본 style 소스 [세번째 스타일] - 기본 style 소스
웹프로그램밍 자료실/기타 자료 2020. 11. 6. 09:43
[해피CGI][cgimall] 그라디언트로 만드는 다양한 Underline style

그라디언트 css를 이용하셔 다양한 underline 스타일을 만들어 볼 수 있습니다. 사이트에 가보시면 12종의 underline을 확인 하실 수 있으며 소스를 수정하여 다양하게 응용하여 사용하실 수 있습니다. 밑줄과 사용된 css는 아래와 같습니다. 1. Standard Rainbow 2. Energetic Rainbow 3. This One is Tapered! 4. This One Grows! 5. Double Underline 6. Rare Triple Underline 7. Graph Paper 8. Blue Weave 9. Shades of Green 10. Shades of Purple 11. Purple and Orange 12. Yellow to Orange
웹프로그램밍 자료실/기타 자료 2020. 10. 16. 09:49
[해피CGI][cgimall] CSS Peeper

사이트에 대한 텍스트와 이미지정보를 자세하게 알려주는 크롬 확장프로그램입니다. 설치를 하면 브라우저 상단에 peeper아이콘이 생깁니다. 이제 확인하고 싶은 사이트에 이동하여 아이콘을 누르면 아래와같이 별도의 창이 뜨고 사이트에 대한 기본정보가 먼저 노출이 됩니다. . 이제 확인하고 싶은 요소를 브라우저에서 클릭하면 별도의 창에서 폰트 및 이미지에 대한 정보가 노출이 됩니다. 크롬 뿐많이 아닌 웨일브라우저에서도 설치가 잘되니 참고하세요 ^^ ​​
웹프로그램밍 자료실/기타 자료 2020. 10. 8. 09:15
Prev 1 2 3 4 ··· 9 Next