:doodle { @grid: 1x80 / 100% 8rem; position: absolute; top: 60px; left: 0; z-index: 0; } @keyframes slide-in 0% { transform: translateY(-100%); } 100% { transform: traslateY(0); } } :hover { opacity: 1; } transition: opacity .2s ease-in-out; animation: slide-in .25s ease-in-out; opacity: @pick(.06, .12, .18, .24, .3, .36); background: @pick(var(--doodle-1, #7492E6), var(--doodle-2, #8f72C3), var(--doodle-3, #9C66B3), var(--doodle-4, #BA4D95), var(--doodle-5, #DC3C75)); height: @rand(15%, 100%); margin: 0 .2rem;

👀 Sign up for email newsletter or use this RSS feed to get notified of new blog posts!🔥

css

Posts about css

CSS Pseudo Classes

Learn everything you need to know about the Pseudo Classes in CSS

CSS Combinators Selectors

Learn everything you need to know about the Combinators Selectors in CSS

CSS Basic Selectors

Learn the basics things about Selectors in CSS