webdesign/CSS 썸네일형 리스트형 Sass : @import -> @use / @forward Stop using @import with Sass | @use and @forward explained style.scss > @use 'abstracts/fonts'; body { font-size: fonts.$font-size; } @use 'abstracts/fonts'; body { font-size:fonts. $font-size; } the reason for this is it prevents collisions between different variables if you have different variables with the same name. it used to be that you could easily overwrite one by accident, you can't do .. 2022. 1. 23. 02:12 더보기 performance / transition evernote 4 CSS - 1 퍼포먼스 높이기 css animation : the performance monitor / transition 🌈 Animating with CSS Transitions - A look at the transition properties transition: all; X transitions are CPU intensive. link .box { width:300px; height: 300px; background:red; transition-duration:1000ms; transition-property:background, transform; } .box : hover { background:blue; transform:rotate(45deg); } transiti.. 2022. 1. 20. 23:47 더보기 A fixed aspect ratio 5 More Must Know CSS Tricks That Almost Nobody Knows 06:09 - Aspect Ratio aspect-ratio:16/9 https://caniuse.com/?search=aspect-ratio "aspect-ratio" | Can I use... Support tables for HTML5, CSS3, etc CSS3 object-fit/object-position Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches .. 2022. 1. 18. 05:03 더보기 CSS in JS : Don’t use runtime CSS-in-JS if you care about the load performance of your site Real-world CSS vs. CSS-in-JS performance comparison Real-world CSS vs. CSS-in-JS performance comparison I took the real app and convert it from Styled Components to Linaria to compare the app performance of CSS-in-JS and normal CSS. Continue reading if you want to know how it went. pustelto.com Don’t use runtime CSS-in-JS if you care about the load performance of your site. Simply less JS = Fast.. 2022. 1. 15. 02:15 더보기 CSS : fix Errors - 3D mouse hover flickering 아래 속성을 가진(Y축으로 자전) 엘리먼트를 감싸는 wrapper 엘리먼트에 솔루션 속성을 적용해야함 transform: rotateY(90turn); // .site-wrap, // .site-body, // .hero-circle-wrap .hero-wrap { // backface-visibility: hidden; transform: translate3d(0, 0, 0); } .hero-wrap 에 솔루션 속성 줌(특정 위치의 래퍼에 속성 적용하면 상위 래퍼에는 적용할 필요 없는 듯..), hero-circle, olayer-bling가 유발하던 flickering 에러 같이 교정됨 😭🤦🏻♀️ wrapper에 트리거를 사용해 GSAP pin을 적용한 경우 GSAP 애니메이션이 먹지 않음 http.. 2022. 1. 8. 04:37 더보기 CSS : 3D card effect / tilt.js https://micku7zu.github.io/vanilla-tilt.js/ http://gijsroge.github.io/tilt.js/ youtube : Javascript Mousemove 3D Parallax Tilt Effect using Vanilla tilt.js | 3D Tilt Hover Effects youtube : 3D profile card on hover by vanilla tilt.js Awesome 3D ANIMATION Javascript Tutorial! by Dev Ed https://github.com/developedbyed/3d-card-effect 크롬 에러 교정 : (사파리는 아래 교정 없이 잘 돌아감) body에서 /* perspective: 1000px; .. 2022. 1. 7. 23:15 더보기 tailwind https://tailwindcss.com/docs/installation Installation: Tailwind CLI - Tailwind CSS Documentation for the Tailwind CSS framework. tailwindcss.com Don't use Tailwind for your Design System Hard to maintain It’s error prone to remove one of the classNames from the list, is a similar situation when you want to remove an unused CSS class in an append only stylesheet. They can collide and override wi.. 2022. 1. 5. 18:28 더보기 CSS : 3d 3D CSS - lighting, animations, and more! https://css-tricks.com/how-css-perspective-works/ 3D Animated Product Card Using Only HTML & CSS https://3dtransforms.desandro.com/perspective transform: perspective(400px); .panel--red { /* perspective function in transform property */ transform: perspective(400px) rotateY(45deg); } .scene--blue { /* perspective property */ perspective: 400px; } .panel--.. 2022. 1. 3. 23:57 더보기 이전 1 2 3 4 5 ··· 7 다음
