Critical CSS opens a page in a browser from the command line, sets the window width to a specified width and height (default is 1200 x 900), and analyzes which styles are applied to elements that fall within the visible portion of that viewport. It then writes those styles to a file that you can …
Tag Archives: css
GitHub’s CSS
I’m always interested in the development details of other products, particularly their styleguides and approach to CSS. Given my penchant for the otherwise inane CSS details, I decided to write a bit about GitHub’s CSS. Always great to see how a company organises its code. It’s an honest piece, also covering stuff that should improve. …
Icons changing colors on scroll
Quite a simple technique: use :before and :after to inject two colored panels, each taking up 50% of the height. Then lay your inverted icons on top of them, and presto. Icons Filling Effect → Icons Filling Effect Demo → If you like this, you’ll definitely like these too: Skrollr – CSS animations linked to …
Pixels are expensive
Forward to the 16:00 mark to get a good overview of how browsers go from receiving a tad of CSS to actual pixels on screen, a process known as the rendering pipeline: Recalc styles Layout Paint Composite Layers If you like reading more than watching a video, a write-up is also available: Pixels are expensive …
CSS3 Grid Layout Module, an Introduction
Warning: Experimental stuff. Demos will only work in Chrome Canary (for now) The CSS3 Grid Layout Module has changed quite a lot since it’s incarnation when it shipped with IE10. At Responsive Day Out 2, Rachel Andrew gave an easy to follow practical talk of the current implementation (as it appears in Google Chrome Canary). …
Kouto Swiss
Stylus is great, but… where’s my Compass/Bourbon? Kouto Swiss offers an answer to that as it’ll make lots of handy functions and mixins available to you. Take this Kouto Swiss provided font-face function for example: font-face( “Roboto”, “./fonts/Roboto-Regular-webfont”, normal ) Which will render into this: @font-face { font-family: “Roboto”; font-weight: normal; src: url(“./fonts/Roboto-Regular-webfont.eot”); src: url(“./fonts/Roboto-Regular-webfont.eot?#iefix”) …
color: rebeccapurple;
From now on, rebeccapurple means #663399. A great tribute to a great man and his daughter who was passed away at the age of just six. Every time Eric blogged about Rebecca’s condition and how it changed over time it tore me into pieces. This is the right thing to do, just as #663399Becca was. …
Automatic Placement when using CSS Grid Layout
Inverse trigonometric functions with Sass
See the Pen Pure CSS 3D animated icosidodecahedron (pentagonal gyrobirotunda) by Ana Tudor (@thebabydino) on CodePen. You might think that math doesn’t have a lot to do with writing stylesheets, but you can actually do some amazing things with a little math in CSS. Math (particularly trigonometry) can help you model the real world. You’ll …
Continue reading “Inverse trigonometric functions with Sass”
Good-Looking Shapes Gallery
Layouts where content hugs the boundaries of illustrations are common in print and rare on the web. One of the reasons non-rectangular contour-hugging layouts are uncommon on the web is that they are difficult to produce. They are not difficult to produce anymore. And once again I have a flashback to (the now offline) The …