Nice pen by Ana Tudor in which you can see how the angle set for a CSS Gradient and set for an SVG Gradient differ: . At a 45° angle you can clearly see exactly what the difference between the two is. CSS vs. SVG gradient, same angle (interactive, responsive) →
Tag Archives: css
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 …
CSS for Software Engineers for CSS Developers
Modern Layouts: Getting Out Of Our Ruts
Video (filmed at An Event Apart) and slides from “Modern Layouts: Getting Out of Our Ruts” by Jen Simmons: In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems we all settled into a handful of patterns and …
universal.css
The only .css file you’ll ever need, following the most recent CSS methodologies where you define just about everything in separate classes. Usage is really easy: Take any CSS rule you want to apply, replace : by -, and dots by -dot-, and you get the name of the corresponding universal css classname. For instance, …