Hello 100A

주로 사이드바가 열릴때 쓰는 햄버거 버튼을 닫기버튼 (x버튼)으로 변경하는 css 소스 입니다. 버튼을 클릭 시에 클래스가 추가되어 첫번째와 마지막 작대기는 transform의 rotate로 회전시키고 가운데 작대기는 opcity를 0로 변경해 안보이게 처리했습니다. html 소스입니다. css 소스입니다 .menu-wrap{ margin-top:50px; margin-left:100px; position: relative; width: 28px; height: 16px; cursor: pointer; } .menu-wrap .line{ position: absolute; width: 100%; height: 2px; border-radius: 2px; background: #222; left: 0; }..

평상시 작업할때 자주 쓰는 버튼 마우스 오버 css 스타일입니다. 전체 html은 간단히 이렇게 작업했습니다. 버튼디자인 버튼타입1 버튼타입2 버튼타입3 버튼 1번은 간단히 배경색이 바뀌는 css입니다. transtion은 background를 넣었습니다.btn1{ position:relative; display:inline-block; background:rgb(26, 115, 232); padding:10px 20px; color:#fff; cursor:pointer; transition:background .4s; } .btn1:hover{ background:#5AAEFF; } 버튼 2번은 마우스 오버시에 progress bar스타일로 게이지바가 채워지듯이 배경색이 변경됩니다..btn2{ posi..

마우스를 움직일때마다 동그라미 모양의 트래커가 따라다니는 마우스 좌표를 따라다니는 효과입니다! 그리고 cursor change라는 영역에 마우스오버를 하면, 노란색 동그라미 트래커가 하얀색 불투명한 트래커로 변경됩니다. 가장 중요했던 css 속성은 마우스 커서를 따라다니는 트래커에 들어가는 pointer-events:none; 이라는 속성입니다. See the Pen Untitled by baekah (@baekah) on CodePen.

간단하게 자주 사용하는 슬라이드 갤러리입니다. https://unpkg.com/swiper/swiper-bundle.css https://unpkg.com/swiper/swiper-bundle.min.js 세팅 하시는거 잊지마시고, js에서 spaceBetween 는 사이간격을 slidesPerView로 몇개씩 보여주고 싶은지 설정해주면 됩니다. 이미지 비율은 이미지 크기에 상관없이 일정하게 나오게 하기위해 padding-bottom을 이용해 비율을 정했습니다. 100% - 가로와 세로 비율 1:1 50% - 가로와 세로 비율 1:0.5 로 보면 됩니다. loop:true 는 제가 html에 작성한 슬라이드는 5개인데 그 뒤로 복제해 가며 계속해서 슬라이드가 될 수 있게 해줍니다. transition을 ..

마우스 오버시 수직으로 flip 되는 아주아주 간단한 css소스 입니다. HTML FRONT BACK CSS .content{ width:500px; height:100vh; background:#333; margin:0 auto; } .circle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; perspective: 600px; } .circle .front, .circle .back{ position:absolute; top:0; left:0; width:100%; height:100%; backface-visibility: hidden; border-radius:50px;..

사이드바 모바일이나 반응형 웹에서 자주 사용하는 사이드바입니다. 사이드바는 css 만으로 동작이 되니 사이드바만 사용시에는 js파일이 없으셔도 됩니다. 아코디언메뉴는 jquery로 작업했으며 1.4.4로 작업했습니다. 사이드바 width는 70%이며 사이즈 변경시에는 .sidebar 에서 width와 left 값 둘다 변경하셔야합니다 html코드입니다. HELLO hello1 hello2 hello3 hello4 hello5 hello6 GOODBYE bye1 bye2 bye3 GOODNIGHT goodnight1 goodnight2 goodnight3 css코드입니다. .content{height:100vh; background:#ccc; margin:0 auto; position:relative;} ..

초간단 progress bar 소스입니다. Click me! .progress-area{ width:500px; height:50px; background:#e1e1e1; border:3px solid #b1b1b1; margin:30px; position:relative; } .progress{ position:absolute; width:100%; height:100%; left:0; top:0; } .progress.on{ background:#b1b1b1; animation:progress 3s linear; animation-fill-mode:forwards; } .btn{ width:200px; height:50px; background:#b1b1b1; text-align:center; lin..

이번에는 스크롤 바를 내렸을때 메뉴바의 스타일이 변하는 코드를 작성해 보았습니다. 아래의 그림과 같이 스크롤을 내렸을때 메뉴바의 높이, 로고의 크기 메뉴의 폰트크기가 부드럽게 변경됩니다. 아래는 CSS 코드입니다. 스크롤이 내려갔을때 .active 클래스를 addClass 해줍니다. 그렇기 때문에 변경되는 스타일은 .active를 포함하고 스타일을 지정해줍니다. body,html{ margin:0;padding:0; font-family:'Montserrat',sans-serif; } .container{ width:100%; height:1500px; background-image:url('bg.png'); } #header{ position:fixed; width:100%; box-sizing: bo..

간단한 마우스 오버 애니메이션을 소개합니다. 영역에 마우스가 오버가 되면 아래의 그림과 같이 둥둥 뜨는듯하면서 그림자가 퍼지는 듯한 애니메이션입니다. HTML 코드입니다. circle-box 영역에 마우스가 오버가 되면 ICON에 애니메이션이 발동됩니다. ICON CSS 코드입니다. animation : circlemove 1.5s infinite linear; (circlemove의 속성대로 1.5초동안 애니메이션이 발동되고 무한루프로 속도는 일정하게) html,body {width:100%;height:100%;margin:0px;padding:0px;font-family:sans-serif;} .container{width:100%;height:100%;background:#000;} .circle..

기본 반응형 갤러리 입니다. 1200px, 768px, 560px, 480px에 반응합니다. CSS 코드입니다. viewport는 필수! 이미지간의 간격은 li에 padding을 줘서 했고, ul에 -20px 마이너스 마진을 줘서 감싸고 있는 container에 overflow:hidden을 해서 숨겨두었습니다. html,body {width:100%;margin:0px;padding:0px;font-family:sans-serif;} ul, li{margin:0;padding:0;list-style:none} .container{width:100%;max-width:1400px;margin:0 auto;overflow:hidden;} .gallery{margin:50px -20px;box-sizing:..