분류 전체보기 (227) 썸네일형 리스트형 타이핑효과 css로만 만들기 CSS Typing Effect https://codepen.io/denic/details/GRoOxbM See the Pen CSS Typing Effect by Marko (@denic) on CodePen. vanilla javascript accordion menu See the Pen Untitled by uming (@uming) on CodePen. 패럴렉스 스크롤 애니메이션 See the Pen Parallax scroll animation by isladjan (@isladjan) on CodePen. 모바일 기기 접속시 모바일 페이지로 이동 스크립트 pc 메인 안에 적용. 3D CSS TEXT 애니메이션 효과 https://codepen.io/z-/pen/QWWOBwX See the Pen 2000 Followers🥳 3D CSS text by Zed Dash (@z-) on CodePen. 애니메이션 효과와 함께 자동 슬라이드 https://codepen.io/nathantaylor/pen/PJGqdE See the Pen Untitled Slider by Nathan Taylor (@nathantaylor) on CodePen. 마우스 오버시 눈속임으로 3D 효과 주기 https://codepen.io/petebarr/pen/GvKgvQ See the Pen Panel 3D Tilt by Pete Barr (@petebarr) on CodePen. 반응형 subpage aside css 반응형 기준, 각 메뉴에 border 있을 시, on효과 있음. html 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 css ul{padding:1px 0 0 1px; width:95%; background-color:#fff; overflow: hidden; box-sizing: border-box; margin:30px 2.5%} ul li{position:relative; float:left; margin:-1px 0 0 -1px; width:calc(33.333333% + 1px); height:50px; border:1px solid #999; box-sizing:border-box;} ul li a{display: block; width: 100%; height: 100%; text-align:.. 특정 텍스트 자동으로 슬라이딩하며 바꾸기 See the Pen Title Scroller by Jordan Halvorsen (@halvo) on CodePen. 스크롤 내릴때 svg 선 그려지는 효과 See the Pen SVG Scroll by Webstoryboy (@webstoryboy) on CodePen. Custom input file 여러개 demo : https://tympanus.net/Tutorials/CustomFileInputs/ Custom File Inputs | Codrops tympanus.net download : https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ Styling & Customizing File Inputs the Smart Way | Codrops A tutorial on how to style and customize file inputs in a semantic and accessible way using the label element and some JavaScript. tympanus.net 가로 draggable 리스트 - codrops demo : https://tympanus.net/Development/DraggableImageStrip/ Draggable Image Strip | Codrops Evanescent Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president. tympanus.net donwload : https://tympanus.net/codrops/2019/06/11/draggable-i.. 포트폴리오 리스트에서 ajax와 같이 쓰기 좋을것 같은 리스트 See the Pen Agency website POC by Jamie Coulter (@jcoulterdesign) on CodePen. 1. 컨텐츠 가로 나열 (드래그로 스크롤 가능) 2. 컨텐츠 hover 효과 3. 컨텐츠 click 효과 4. 전체 감싸는것 다음에 비어있던 div 추가하고 컨텐츠 클릭시 특정 파일 내용을 ajax로 불러와서 하단의 div에 뿌려주는 형식으로 사용하면 좋을듯. 다양한 스크롤링 이미지 이펙트 - codrops 스크롤을 내릴때 배치되어 있는 이미지 등에 애니메이션 효과가 들어간다. demo : https://tympanus.net/Development/SmoothScrollingImageEffects/ Smooth Scrolling Image Effects | Demo 1 | Codrops 01 Oh Little trees and bushes grow however makes them happy. 02 Ri We don't have to be committed. We are just playing here. 03 Nj I thought today we would do a happy little picture. 04 Mo Nature is so fantastic, enjoy it. Let it make you h.. scss로 프리픽스 자동으로 붙이는 mixin 지정 // 프리픽스 붙이는 요소에 사용하는 prifix mixin 선언 @mixin prefix($property, $value, $prefixes: ()) { @each $prefix in $prefixes { #{'-' + $prefix + '-' + $property}: $value; } #{$property}: $value; } 사용법 예시 div{ @include prefix(border-radius, 100px, webkit moz ms o) } 속성명 , 속성값, 프리픽스들 순으로 사용하면 된다. 스크롤바 스타일 변경 (ie안됨) ::-webkit-scrollbar { // 스크롤바 width 지정 width: 10px; height: 10px; } ::-webkit-scrollbar-track { // 스크롤바 트랙 스타일 border-radius: 10px; background: rgba(127,127,127,0.7) } ::-webkit-scrollbar-thumb { // 스크롤바 스타일 border-radius: 10px; background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-thumb:hover { // 스크롤바 hover 스타일 background: rgba(0, 0, 0, 0.4); } ::-webkit-scrollbar-thumb:active { // 스크롤바 active.. 배경 이미지 흐림 효과 See the Pen Blurred Backgrounds by Louis Coyle (@dropside) on CodePen. html5 심볼, entitiy code 등 확인할수 있는 사이트 https://www.toptal.com/designers/htmlarrows/symbols/ HTML Symbols, Entities and Codes — Toptal Designers Easily find HTML symbols, entities, characters and codes with ASCII, HEX, CSS and Unicode values; including copyright sign, trademark sign and at symbol. www.toptal.com 기존에 사용하던 entitycode 사이트보다 카테고리 별로 좀더 다양한 문자를 코드로 작성할수 있도록 소스를 제공하는것 같다. css animation을 쉽게 확인하고 코드까지 볼수있는 animista http://animista.net/ Animista Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use. animista.net rotate, flip 등 다양한 효과를 css를 이용해 만들었을때 어떤 모양일지 실시간으로 확인 가능하며, 소스코드까지 제공해준다. 이미지 hover 효과 여러개 (good) 간단한 이미지 hover 효과들 여러개 모음 demo : https://tympanus.net/Development/HoverEffectIdeas/ Hover Effect Ideas | Set 1 Nice Lily Lily likes to play with crayons and pencils tympanus.net download : https://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/ Ideas for Subtle Hover Effects Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and ps.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
