#CSS3
-
CSSSteal - Chrome extension that extracts CSS
posted in CSS3 on 2015-09-17 css, styles, var -
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 comments
-
CSS variables are here for ages
posted in CSS3 on 2014-08-13 div, content, font size -
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 comments
-
Simple, good looking separator made with pure CSS
posted in CSS3 on 2014-02-12 jsbin, translate 95px 12px, transform translate 95px -
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 comments
-
Select drop-down broken under Firefox
posted in CSS3 on 2013-09-27 element, firefox - Firefox has problems if you use <select> 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 comments
-
SASS: interpolation in a name of variable
posted in CSS3 on 2013-08-29 bg, background color, interpolation -
I just answered on that question at StackOverflow. That's actually asked a lot last few months.
read more comments
-
The power of inherit or how to animate pseudo elements
posted in CSS3 on 2013-08-27 box, inherit, pseudo -
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 comments
-
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 comments
-
SASS mixin for grid generation
posted in CSS3 on 2013-08-20 div, wrapper, grid -
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 comments
-
CSS: Understanding first-child, last-child and nth-child
posted in CSS3 on 2013-08-16 child, element, nth child -
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 comments
-
SASS mixins covering media queries
posted in CSS3 on 2013-08-15 point, media, content -
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 comments
-
Two handy and advanced SASS features and their limitations
posted in CSS3 on 2013-08-13 mixin, margin, item -
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 comments
-
SASS: universal mixin for box model properties
posted in CSS3 on 2013-08-09 border, left, bottom -
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 comments
-
SASS: @content directive is a wonderful thing
posted in CSS3 on 2013-08-06 button, font size 20px, color -
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 comments
-
SASS: differences between mixins, extends and placeholders
posted in CSS3 on 2013-08-05 awesome, width, height -
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 comments
-
CSS Challenge #2: Layouting
posted in CSS3 on 2013-08-03 layout, width, text -
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 comments
-
CSS Challenge #1: expand and center an image
posted in CSS3 on 2013-08-01 image, background, wrapper -
That's first of (I hope) many posts with such an idea. Problems solved with pure CSS. No JavaScript. read more comments
-
CSS: :before and :after pseudo elements in practice
posted in CSS3 on 2013-07-26 content, css, block -
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 comments
-
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 comments
-
CSS: The background color and overlapping rows
posted in CSS3 on 2013-05-22 element, background, result -
The goal is to achieve a background of the text inside an inline element.
read more comments
-
CSS: transition from pixels to auto
posted in CSS3 on 2013-05-14 height, css, problem -
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 comments
-
CSS: using float property
posted in CSS3 on 2013-04-08 check, pen, clear -
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 comments