분류 전체보기 (224) 썸네일형 리스트형 모바일 기기 접속시 모바일 페이지로 이동 스크립트 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.. 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 스터디 - SCSS scss는 css 전처리기 이다. css를 작성할때 중복 등 불편함을 해소하고자 생긴거라고 생각하면 될것같다. 처음 학원을 다니면서 배울때 css로 배웠기 때문에, scss라는게 있다고는 들었어도 막연하게 사용법이 어려울것이라고 생각하곤 시도해 보지 않았다. 헌데 점점 class명이 복잡해지고, 복잡한 구조의 사이트들을 만들면서 css 작성이 쉬워질수 있는 방법을 찾아보았고, scss 사용법을 가볍게 공부하고 실제 프로젝트에 도입함으로써 css 작업 효율성이 개선되었다. 여러 사이트들을 돌아다니며 공부한 scss에 대한 기본 study 내용이다. 내가 보려고 정리한 것이기 때문에 다소 중구난방이다. - Ruby 언어로 이루어져 있기 때문에 먼저 컴퓨터에 Ruby 설치 -> https://rubyinsta.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
