Insightful post by the folks over at LogRocket on the rendering pipeline: If your site takes forever to load, chances are your users aren’t gonna wait for it to finish, even if there’s valuable content to be found there. Some studies have shown that up to 50% of users leave a page after 3 seconds […]
Tag Archives: css
CSS Perspective Text Hover
Nice 3D text effect: To make the hover effect work, each line also contains the contents of the next line. When hovering the original content slides out of view and the contents of the next line slides in, thus tricking the mind 🙂 CSS Perspective Text Hover →
Side-channel attacking browsers through CSS3 features
Ruslan Habalov and Dario Weißer found a way to read contents from an iframe, using CSS3: Accessing the DOM of an iframe that includes a cross-origin resource is forbidden by default. However, the content of the iframe was displayed in the same context as the rest of the site so we wanted to verify if […]
Demystifying the future of CSS with sparkles of JS
At the recent JSConf.be conference here in Belgium, Ibe Vanmeenen gave a very nice talk introducing Houdini. CSS as a language is at the brink of a great revolution. Once such a closed and magical language, it will open up to you and your creativity in all it's glory. CSS will become an easy to […]
Unicode Patterns with <css-doodle />
<css-doodle /> is a web component for drawing patterns with CSS. The component will generate a grid of divs by the rules (plain CSS) inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph. The limit is the limit of CSS itself. Combine <css-doodle […]
Pure CSS Francine – An 18th-Century Oil Painting Recreated with HTML and CSS
Handcrafted recreation of an 18th-century oil painting using just HTML and CSS. Here’s an analysis of it using the Chrome DevTools, as recorded by Paul Irish: Chrome only though: Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything […]
Best Practices With CSS Grid Layout
Rachel Andrew: An increasingly common question — now that people are using CSS Grid Layout in production — seems to be “What are the best practices?” The short answer to this question is to use the layout method as defined in the specification. The particular parts of the spec you choose to use, and indeed […]
Scroll to the future – CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry.
Very in-depth article on Evil Martians’ team blog on scrolling: We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry. Subjects tackled are styling of scrollbars, position: sticky, IntersectionObserver, Smooth […]
Variable Fonts, an interactive presentation
Interactive slidedeck of a talk on Variable Fonts by Scott Kellum: Advance with the arrow keys. Watch it fullscreen here.
How CSS’s display: contents; works
You might know that display: contents; does what it states it does: it only shows an element’s contents, just as if you were to remove the opening and closing tag. But what about the element’s attributes? What about the bound JavaScript events? What about … ? Ire Aderinokun digs deeper. How display: contents; works →