CSS Animated Hamburger Icon 모바일 메뉴 버튼 호버 및 클릭시 변형되는 애니메이션 효과 입니다. 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 CSS animated hamburger icon ... codepen.io 👉🏻다운로드 CSS animated hamburger icon ... codepen.io

👉🏻 text 줄 간격 표현하기 안녕하세요 TriplexLab 입니다. 이번 시간에는 css로 text 줄 간격 표현하기에 관해서 2가지를 살펴보도록 하겠습니다. 일단 test를 위해서 임의 text를 html에 넣은 상태입니다. css 탭에 가서 보시면 주석으로 설명을 넣은 상태입니다. text 한 줄로 표현하기와, text 여러 줄 표현하기 대해서 살펴보도록 하겠습니다. 👉🏻참고 링크 작업하실 때 다음과 같은 링크를 참고하시어 지원해야 하는 브라우저에 맞게 적용하시면 됩니다. "-webkit-box-orient" | Can I use... Support tables for HTML5, CSS3, etc caniuse.com "-webkit-line-clamp" | Can I use... Support..

🌊 wave keyframes로 만들기 안녕하세요 TriplexLab입니다. 오늘은 css에서 animation사용해서 wave를 직접 만드는 것을 소개하겠습니다. ✍️ wave_custom 코드 @keyframes wave{0%{margin-left:0}100%{margin-left:-3056px}} @keyframes swell{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-30px,0)}} .inner .tit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ocean { width: 100%; position: fixed; botto..

💡 CSS에서 데이터 속성 사용하기 안녕하세요 TriplexLab 입니다. 오늘은 css에서 데이터 속성 사용는 방법에 관해서 살펴보도록 하겠습니다. HTML 문법 HTML 태그에 data-로 시작하는 속성을 사용해서 어떠한 데이터든 몰래 담아놓을수 있습니다. ... CSS 에서 접근하기 data- 속성은 순 HTML 속성이기 때문에 CSS에서도 접근할 수 있습니다! 다음과 같이 접근해서 데이터 값을 가져올수도 있습니다. (유용하게 사용할수 있을것 같네요ㅎㅎ) article::before { content: attr(data-columns); // 3 } article::before { content: attr(data-index-number); // 12314 } article::before { con..

개인 블로그 다크모드 적용하기 안녕하세요 TriplexLab 입니다 :) 오늘은 티스토리 개인 블로그에 다크모드를 적용하는 방법에 대해서 알아 보도록 하겠습니다. // 다크 모드인 경우 @media (prefers-color-scheme: dark) { body { background-color: #1e1f21 !important; color: #fff !important; } .cover-masonry ul li a { color: #fff !important; } .cover-masonry ul li .excerpt { color: #fff !important; } } 위 코드는 css 상에서 운영체제가 선호하는 색상 테마가 다크모드인지 감지해서 다크모드 일때만 해당 코드를 실행해주는 것 입니다. 저..