# CSS3

A short introduction to CSS nesting

posted in CSS3 on 2023-09-16   css nesting modern

I did use Sass and Less in the past, and one of my favorite features was the nesting. Not only me but the whole community was asking about that constantly over the years. The browser vendors heard that plea, and today, we have CSS nesting.

read more

CSSSteal - Chrome extension that extracts CSS

posted in CSS3 on 2015-09-17   css styles var section el small li element rules

We had to update some of our old pages adding new elements. This means mixing old and new code. Placing HTML markup and JavaScript in legacy pages is not that difficult. Yes, it brings some issues but they are easily solvable. However, the CSS is a whole new story. That’s why I did CSSSteal. It helps me extract the needed styles.

read more

CSS variables are here for ages

posted in CSS3 on 2014-08-13   div content font size color container css width div class footer variables

Every front-end developer that starts reading about CSS preprocessors thinks “Oh, finally variables in CSS". Indeed, the ability to create and use variables in CSS makes our code much more flexible. However, I think that there is no need to use a preprocessor to create flexible stylesheets.

read more

Simple, good looking separator made with pure CSS

posted in CSS3 on 2014-02-12   jsbin translate 95px 12px transform translate 95px line small link top solid 1px border top solid block border top display block border content display block

I'm currently working on the official site of AbsurdJS. There are a lot of code samples out there and I wanted to present them in JSBins.

read more

Select drop-down broken under Firefox

posted in CSS3 on 2013-09-27   element firefox

Firefox has problems if you use element inside a container which has CSS translate applied. To fix that you have to avoid translating and apply the following hack, targeting the element only under Firefox.

read more

SASS: interpolation in a name of variable

posted in CSS3 on 2013-08-29   bg background color interpolation header include set variable sass set styles dark include set styles arg header include bg arg header

I just answered on that question at StackOverflow. That's actually asked a lot last few months.

read more

The power of inherit or how to animate pseudo elements

posted in CSS3 on 2013-08-27   box inherit pseudo background position 15px left div doesn t top move text

Luckily, I have time to watch screencasts from various conferences. Last few weeks I'm watching videos from Fronteers2012. They are all great and it worths checking out. However, there is something which I found really interesting. It's about animating pseudo elements.

read more

CSS: common use cases and architecture at VarnaLab

posted in CSS3 on 2013-08-22   css common cases

Yesterday I made a talk about CSS common use cases and architecture. Floats, pseudo clases, animations, OOCSS, SMACSS, Atomic design and tons of other interesting stuff.

read more

SASS mixin for grid generation

posted in CSS3 on 2013-08-20   div wrapper grid sizing border box box sizing border columns mixin div div width sass

The mixins in SASS are really helpful. Here is something really short which I just start using. It's a mixin which I apply on the grid's container.

read more

CSS: Understanding first-child, last-child and nth-child

posted in CSS3 on 2013-08-16   child element nth child scope row4 markup type color styles

I like the CSS only solutions. Very often I need to select a specific DOM element. Sure I could add a new class, but it is always nice if I can do that inside my stylesheets. It just looks better and keeps my HTML markup clean. first-child, last-child and nth-child are made exactly for this purpose.

read more

SASS mixins covering media queries

posted in CSS3 on 2013-08-15   point media content media query min width break points media queries means sass mixins

These days I'm working on this little thing. It's a CSS micro framework following atomic concept. My preprocessor of choice is SASS. That's why I wrote several articles on this subject. Today's post is about media queries mixin.

read more

Two handy and advanced SASS features and their limitations

posted in CSS3 on 2013-08-13   mixin margin item reset list include extend sass items interpolation

I really like SASS and I use it a lot in my daily job. There are tons of useful features. However there are some things which I want to do, but I can't. There are limitation in the syntax and missing functionalities. Sharing what I found, I want to know if you meet those limitation and how you get around them.

read more

SASS: universal mixin for box model properties

posted in CSS3 on 2013-08-09   border left bottom mixin values border top padding margin property

I'm currently working on OrganicCSS - a micro framework based on atomic CSS concept. I'm thinking a lot for name conventions, classes and of course mixins. I decided to combine three mixins in a file called _box-model.scss. They will provide a shortcuts for margin, padding and border properties.

read more

SASS: @content directive is a wonderful thing

posted in CSS3 on 2013-08-06   button font size 20px color mixin content border font size 30px 20px text decoration size 20px text block font size display block font

I just started using SASS and I love it. A bunch of cool features, which will help me to improve my CSS coding. @content directive is one of them.

read more

SASS: differences between mixins, extends and placeholders

posted in CSS3 on 2013-08-05   awesome width height mixin body placeholders radius css sass extend awesome

I used LESS a lot. These days I decided to try SASS and to be honest it's a better choice for CSS preprocessor. It just gives me more functionalities and better control on my code. There are few instruments for architecting your CSS logic - @mixin, @extend and placeholders. However there are differences between them and specific use cases.

read more

CSS Challenge #2: Layouting

posted in CSS3 on 2013-08-03   layout width text sizing border box box sizing border padding image float left layout c layout b

The first challenge, was something which I was thinking about a lot these days. The next one is actually a well known common task, but it is still difficult. In every project we have different types of layouts. Of course there are some patterns. The idea today is to implement them with pure CSS.

read more

CSS Challenge #1: expand and center an image

posted in CSS3 on 2013-08-01   image background wrapper width div css center background size cover 200px overflow hidden height 200px overflow

That's first of (I hope) many posts with such an idea. Problems solved with pure CSS. No JavaScript.

read more

CSS: :before and :after pseudo elements in practice

posted in CSS3 on 2013-07-26   content css block text font element width code links height

By definition :before and :after are CSS pseudo elements. You can use them to insert something before or after the content of an element. There are some great articles giving the basics, but I wanted to write down a blog post for the real use cases. Or, at least, to show what I'm using them for.

read more

Get computed css styles for a given element

posted in CSS3 on 2013-06-16   queryselector h1 null document queryselector h1 getcomputedstyle document queryselector

I just found out that it is possible with pure javascript. It's supported in all the major browsers. Find more information here.

read more

CSS: The background color and overlapping rows

posted in CSS3 on 2013-05-22   element background result h1 facilisis metus feugiat tempor tincidunt erat consectetur adipiscing elit amet consectetur adipiscing sit amet consectetur dolor sit amet

The goal is to achieve a background of the text inside an inline element.

read more

CSS: transition from pixels to auto

posted in CSS3 on 2013-05-14   height css problem set content column animation slided auto

As you may know I just updated my web site. There are five columns which nicely slide up and down on a lower resolution. In other words, accordion-like navigation. Initially I made this effect with JavaScript. But there was a bug and I decided to use pure CSS. I wanted to define everything in CSS classes which to add or remove. The idea wasn't bad except the fact that every column contains dynamic content and I wasn't able to set the exact height when the column is slided down.

read more

CSS: using float property

posted in CSS3 on 2013-04-08   check pen clear float property element floating elements block floated result problem

float property is one of those CSS rules which are somehow difficult to understand. Before a couple of days I had a problem with floating divs. I solved it and decided to write an article about the solution. The article also covers some basics about floating.

read more