CSS
[CSS]배경 그라데이션 애니메이션
background: linear-gradient(40deg, rgb(199, 121, 208), rgb(75, 192, 200), #2b3074); -webkit-animation: huerotator 10s infinite alternate; animation: huerotator 10s infinite alternate; @keyframes huerotator { 0% { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); } }
마우스 호버시 대각선으로 보더 생기는 css효과
See the Pen mouse hover effect - border diagonal by hoyashu (@hoyashu) on CodePen.
CSS를 통한 fade-in toTop
.qna .a { opacity: 0; transform: translateY(100px); transition: all 1s; transition-timing-function: ease-out; transition-delay: 1s; } .qna[data-effect="show"] .a { opacity: 1; transform: translateY(0); }
scss 미디어 쿼리 v2
// map holding breakpoint values $breakpoints: ( mobile : 0px, tablet : 680px, desktop: 960px ); // mixin to print out media queries (based on map keys passed) @mixin media($keys...){ @each $key in $keys { @media (min-width: map-get($breakpoints, $key)){ @content } } } .section-ptb { padding-top: 130px; padding-bottom: 130px; // pass the key(s) of the media queries you want to print @include med..
scss 미디어 쿼리 v1
// Breakpoints $breakpoint-mobile: 320px; $breakpoint-tablet: 758px; $breakpoint-desktop: 1024px; @mixin mobile { @media (min-width: #{$breakpoint-mobile}) and (max-width: #{$breakpoint-tablet - 1px}) { @content; } } @mixin tablet { @media (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1px}) { @content; } } @mixin desktop { @media (min-width: #{$breakpoint-desktop}) {..