퍼블리싱 (179) 썸네일형 리스트형 마우스 오버시 눈속임으로 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. 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.. css를 활용한 체크박스,라디오버튼 애니메이션 (간단) See the Pen input radio #1 by moksunung (@moksunung) on CodePen. IOS CSS팁 1. 가로 화면 텍스트 대응 - 모바일에서 화면 가로로 눕힐때 폰트 사이즈 변형 방지 *{-webkit-text-size-adjust:none;} 2. 버튼 기본 모양 reset input {-webkit-appearance: none;-webkit-border-radius: 0;} 3. 숫자에 전화번호 링크 방지 - 번호만 입력해도 전화번호로 인식하고 링크가 걸림 출처 : http://www.happycgi.com/16611 그림자가 긴 텍스트 (only css) See the Pen Pure CSS Long Shadow by Rafael González (@rgg) on CodePen. 텍스트 네온사인 애니메이션 (only css) See the Pen cibuh by Timothy M. LeBlanc (@WhiteWolfWizard) on CodePen. 텍스트 배경 애니메이션 (only css) See the Pen Animated text fill by Daniel Riemer (@zitrusfrisch) on CodePen. 텍스트가 스크롤 되는듯한 효과 (only css) See the Pen Title Scroller by Jordan Halvorsen (@halvo) on CodePen. 부드럽게 나타나는 텍스트 See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen. 이전 1 ··· 3 4 5 6 7 8 9 다음
