본문 바로가기

webdesign

VS : Emmet snippets Emmet Documentation HTML All unknown abbreviations will be transformed to tag, e.g. foo → . link link:css link:print link:favicon link:touch style script script:src img a a:link a:mail br hr SYNTAX Child: > nav>ul>li Sibling: + div+p+bq Grouping: () div>(header>ul>li*2>a)+footer>p (div>dl>(dt+dd)*3)+footer>p Multiplication: * ul>li*5 Naming and numbering: $ ul>li.sample$*5 h$[title=topic$]{Headl.. 2022. 1. 13. 04:31 더보기
swiper script https://swiperjs.com/get-started Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com https://unpkg.com/browse/swiper@7.4.1/ UNPKG - swiper swiperVersion:... unpkg.com Uniqlo page link 2022. 1. 11. 22:33 더보기
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 더보기
Detect Internet Explorer and display a message https://stackoverflow.com/questions/14544816/detect-internet-explorer-and-display-a-message Detect Internet Explorer and display a message I have been looking around and cannot find what I am looking for I want to display a warning to IE users that my website does not support IE nor will it ever try to and that you should get a better stackoverflow.com Conditional HTML comments will work for det.. 2022. 1. 2. 22:08 더보기
golden ratio Golden Ratio Theory | Basics for Beginners [ 0 , 1 , 1 , 2 , 3 , 5 , 8 , 13 , 21 , 34... ] the golden ratio was derived from the Fibonacci sequence. a sequence in which the next number in the sequence is a total of itself and the previous number, starting at 0. golden ratio / golden spiral / golden circles the reason this is important is because it determines a rate of growth that is first of al.. 2021. 11. 19. 21:24 더보기

티스토리툴바