Yesterday evening I was working on some documentation pages. The page layout is quite classic, as it consists of a content pane on the left and a sidebar navigation on the right. Looking for a way to make the page less dull I decided to add a few small things to it: Smooth Scrolling when […]
Tag Archives: css
Firefox 72: Individual CSS Transform Properties
New in Firefox 72 is the ability to individually define CSS Transform Properties. You can now separately define scale, rotate, and translate CSS properties, instead of having to chuff them all into one single transform property. The translate, rotate, and scale properties allow authors to specify simple transforms independently, in a way that maps to […]
SVG Properties and CSS
There’s a good deep dive into SVG Properties and CSS on CSS-Tricks: SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner […]
CSS-Only Multiple Choice Quiz
Matthew Somerville: I followed a link to one of those Guardian end-of-year quizzes on my phone, and had answered a few questions before realising that it was working entirely without JavaScript (I have JavaScript disabled on my phone). I found this very impressive, well done whoever worked on that, and so I thought I would […]
Understanding positioning in CSS
Chen Hui Jing: Everything on the web is a box. The positioning algorithms used to calculate the position of a box on the page is determined by the position and float properties. I’ll try my best to explain this in a way that makes sense. But first, let’s look at them individually. Good introductory post […]
Print to CSS – Magazine layouts recreated with CSS Grid
Just like Jules Forrest before, Dan Davies has recreated some magazine layouts using CSS Grid: I’m a huge fan of magazine layouts, the use of typography, the structures, just the general look. I also love CSS Grid and as part of my learning, I have been looking at magazines for inspiration so I decided to […]
RTL Styling 101
Ahmad Shadeed created this extensive RTL reference. Over 292 million people around the world speak Arabic as their first language. Arabic is my native language, and I sometimes build websites that need to support both left-to-right (LTR) and right-to-left (RTL) styles. Be sure to read the section on CSS Logical Properties too, as that will […]
The unseen performance costs of modern CSS-in-JS libraries in React apps
Aggelos Arvanitakis, writing for the Web Performance Calendar 2019 edition: Besides some of the great advantages CSS-in-JS boasts over traditional CSS, it may still create performance issues in certain apps. In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on […]
Smoother & sharper shadows with layered box-shadows
If you try to capture the subtleties of a real shadow with box-shadow then, well, you’re pretty much out of luck. The box-shadow CSS property isn’t exactly built to encourage expressiveness. But with a simple CSS technique, we can expand our range of options. If we use layered box-shadows we can get more fine-grained control […]
How the CSS :is() selector will simplify things
One of the selectors in CSS Level 4 is :is(). It is the successor to :any() and :matches() (which are supplanted by :is()): The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for […]