rssed

Articles & Experiments by Roman Komarov

Posts

The Shrinkwrap Problem: Possible Future Solutions 🔗

There is one old, yet unsolved, CSS problem: shrinking containers to fit the content when it automatically wraps. While not intentional, anchor positi [...]

Scroll-Driven State Transfer 🔗

In my fourth article about scroll-driven animations, I explore how we can transfer the state of one element to a completely different place on a page [...]

New Blog: blog.kizu.dev 🔗

I did create a new work-in-progress blog where I would post random things. I wanted to create a more personal space for a while, and it would allow me [...]

Position-Driven Styles 🔗

After solving the fit-to-width text, stuck state for sticky elements, and scroll shadows, I wondered: how many other items from various CSS wishlists [...]

Fit-to-Width Text 🔗

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will [...]

Cyclic Dependency Space Toggles 🔗

Over the past few years, I wanted to be able to select a value from a list in CSS by toggling a single custom property. We have the “space toggle” for [...]

Future CSS: Wishes Granted by Scroll-driven Animations 🔗

Stuck state for sticky headers? “Proper” solution for scrolling shadows? Highlighting the currently shown sections in a Table of Contents? All these t [...]

React Hook Component 🔗

After 16+ years of experimenting with CSS & HTML, I am a bit tired. Time flies, and new technologies emerge. What would you say if, from now on, I wil [...]

Future CSS: Anchor Positioning 🔗

Anchor positioning might be one of the most exciting features coming to CSS. It is currently available under an experimental flag in Chrome Canary, an [...]

Obscure CSS: Restoring Visibility 🔗

One of the things I love about CSS is how some of the properties hide a lot of depth inside. For that reason, `visibility` was always one of my favori [...]

Obscure CSS: Implicit List-Item Counter 🔗

A few years ago I wanted to share one little-known CSS feature — a built-in `list-item` counter for ordered lists. But then there were a few browser i [...]

A Bit of Performance 🔗

I was digging into some of the performance issues during my work for a few weeks, and I thought that it can be interesting to see how those could be a [...]

My Grid Layout 🔗

My site’s design came through a lot of iterations, including the latest complete rewrite and a partial redesign, but its layout is something I used fo [...]

Implementing Algolia Search 🔗

For a new site update I have implemented a site-wide search, and in this article, I would write about the solution I have used for this, as well as wo [...]

Grid Projection Naming 🔗

CSS Grids specification contains a lot of different things. And, for some of them, there exist multiple ways of how you can achieve them. In this arti [...]

My Site, Version 14.0 🔗

A New version, new tools, new techniques, new everything — I had a lot of fun in rewriting and re-coding my site, and I think there could be some inte [...]

Variable Order 🔗

Is it possible to sort some data using only HTML and CSS? The answer is “Yes”, and in this article you would see one experimental way to achieve this [...]

Counters and Stones 🔗

HTML&CSS-only gomoku game? Binary logic in CSS via counters? So many combinators, Edge stops to understand what is even going on? All of this and a bu [...]

Flexible Overflow 🔗

Flex display mode allows us to create a lot of interesting interactions. In this article I’ll show how to use it to implement a responsive block which [...]

Bemto-Components 🔗

Working within a React stack and using Styled Components, I found out that I still miss a lot of aspects of BEM. This lead to me starting a new side-p [...]

Keyboard-Only Focus 🔗

After playing a lot with HTML & CSS, I present you with a very robust and practical solution to one of the most annoying problems: keyboard-only focus [...]

Label-to-Input States 🔗

Sometimes there are very unusual mechanics hidden deep in the interactions of HTML and CSS. In this article I show one of those — the nuances of how H [...]

Controlling the Specificity 🔗

Specificity is one of the most unique and complex aspects of CSS. And right now, the only way to control it are to add stuff to it. But what if we cou [...]

Conditions for CSS Variables 🔗

CSS variables are very powerful, and they allow to do a lot of interesting things. But there are no native conditionals that we could use in CSS with [...]

Styling inline code 🔗

When I was working on my site’s new version, I tried to think more about how everything should look and read typography-wise. And one of the things I [...]

The New Version of This Site 🔗

Around one and a half month ago, on June, 23rdGo to a sidenote, I published a new version of my site. Once again. It is rather hard to remember which [...]

Nested Links 🔗

The problem HTML specification has a lot of different restrictions. And I have my doubts about the feasibility of many of those. One example which I s [...]

Battle for Baseline 🔗

The best solution for inline blocks were, well, inline-blocks. I used to like them because you could solve a lot of tasks with them. But they’re not i [...]

New Stylus Features 🔗

Not so long ago I became a maintainerGo to a sidenote for Stylus CSS preprocessor. At the end of the last week, we released a new version — 0.41.0 — w [...]

Updated Jekyll 🔗

Not that long ago Jekyll become that big — version “1.0” was released. There are a lot of stuff in the changelog: there are new features, there are a [...]

Application shortcuts 🔗

Here is one workflow thing I use all the time and I want to share — using keyboard shortcuts to switch between applications. I’m talking not about tho [...]

Blog 🔗

Hello! As I wrote in a post on the relaunch of my site, the main goal for the new version was to ease the process of adding new entries. However, beyo [...]

Rotated text 🔗

Once I already shared this solution on the birdsite, but this time I’m going to write a bit more on it. The task is to get the text rotated by 90 degr [...]

Markdowning YAML for Jekyll 🔗

While I’m struggling to write a lengthy article, here is a small one, on a little Jekyll trick I use. In Jekyll you need to use YAML front matter to a [...]

Jekyll 🔗

In a post on site relaunch I told I’ll write a lot of articles on Jekyll. That’s the first post in the series, an introduction. I won’t write on how t [...]

Correct Cursor on Active Elements 🔗

Every active element must have a set cursor on hover. And it should be cursor:pointer in most cases. By active elements I mean links, buttons, selects [...]

Restarting kizu.ru 🔗

Hi there! That was a long way and I think I’m somewhere near the end — I’m relaunching my site. I can’t remember how many versions of it were there wh [...]

bemto 🔗

Oh hi. I created this thing — bemto — some mixins for Jade that makes it easy and fun to write the code in BEM notation. I really love writing code in [...]

Legends and Headings 🔗

One day in the last December, I tried to find out what we can do with the legend element. I wanted to move it in the fieldset’s frame, and didn’t want [...]

Scrolling shadows 🔗

Here’s an old idea, but recreated with pure CSS. Originally, I had an extra wrapper and two extra pseudo-elements on it. Later I decided to rewrite th [...]

Multi-directional hover 🔗

Try to hover this block from different directions /* Multi-directional hover by @kizmarh */ .b-block { position: relative; display: inline-block; ove [...]

CSS3 convex polygons 🔗

Using, overflow:hidden and visibility:hidden for wrappers with visibility:visible on a last shild, we could do almost any convex masks which would be [...]

Custom CSS3 controls 🔗

/*_*/ .b-radio-label { cursor: pointer; } .b-radio-input:checked+.b-radio-wrap.b-radio-label { cursor: default; } /* Slider -------------------------- [...]