AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it’s previous state and are ready to animate again if you scroll down. By setting data-aos-* attributes on your HTML elements, you can define which animation to use, what timing to use, etc. …
Tag Archives: css
CSS Only Scroll Indicator
There’s a pen embedded in this post. Visit this post on the Bram.us website, or see the Pen CSS only scroll indicator on CodePen. I was interested to see if I could make a scroll indicator with just CSS. You can! But maybe you shouldn’t. This is an interesting consequence of a bunch of hacks …
CSS vs. SVG Gradient Angle
CSS Code Review by Jonathan Snook
Some time last week Brad Frost asked on Twitter for some feedback on a bit of markup he had built: Hey web forms and BEM aficionados, anyone care to review some form markup I've been writing? https://t.co/SyACn1LZ9s — Brad Frost (@brad_frost) July 15, 2016 Jonathan Snook took the time to give Brad some feedback, which …
CSS at BBC Sport
The core CSS architecture of BBC Sport is based around three key tools: BEM OOCSS ITCSS The combination of these three tools, a long with a clear set of principles was worked really well for us. Next to those techniques, they also follow a few CSS Principles – such as the “Single Responsibility Principle” for …
Responsive Typography
Mike Riethmuller: It is possible to have precise control over responsive typography. Using calc() and viewport units you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range. The formula used is this one: @media (min-width: #{$min_width}px) and (max-width: #{$max_width}px) { font-size: calc(#{$min_font}px + (#{$max_font} – #{$min_font}) * ( …
CSS Containment
Decorative CSS Text Underline
Decorative Text Underline uses a combination of box-shadow and text-shadow to form a modest underline that preserves the element color and weaves between text descenders. Neat, yet very intensive and only works with text that is rendered onto a fixed background color (no gradients or images!). I sure do hope we can get this natively …
Mediaqueryless Responsiveness
Slides of the – highly entertaining – talk @Vasilis gave at CSS Day 2016 in which he elaborated on a few techniques he experimented with in order to get responsive-like sites without using any media queries. Some neat tricks include: Calling it “active whitespace” instead of floats getting stacked up 😛 Setting a unit-ed value …