Category Archives: CSS

Introduction to Reworkcss

Reworkcss is an easy to extend CSS processor that has some cool features I want to explore. Lets start by installing it:

1
2
3
mkdir ~/rework
cd ~/rework
npm install rework

Rework has a very simple API. It receives a string of CSS code and it outputs a rework object. You can then run plugins on this instance and finally output the result:

1
2
3
4
5
6
var rework = require('rework');
var plugin = require('plugin');

rework({source: 'style.css'})
  .use(plugin)
  .toString();

The interesting part happens on the plugins so lets look at some of the most interesting ones.

Read more »

CSS Flexbox

Today I found myself in the need to create a layout that I hadn’t done before:

Layout example

This layout would be easy if I knew the widths of the elements, but I needed it to be flexible. Another possibility that crossed my mind was using percentages but there was a requirement that didn’t allow me to do it. To understand better there are a few things about the image above that I need to explain:

  • The image has a static width
  • I want the button on the right to expand and use as much space as it needs, but not more than it needs
  • I want the center portion to use all the available space left by the image and the button

Read more »

Introduction to Compass

Compass describes itself as an open source CSS authoring framework. For me, it is a tool that helps me organize my CSS and create sprites easily.

To install compass you need to have ruby on your system, which I trust you can do by yourself. Once you have ruby installed you need to use these commands:

1
2
gem update --system
gem install compass

Next you will want to create a compass project. Go to your project folder and use this command:

1
compass create <project -name>

Read more »

Clear floating elements with CSS clearfix

When working with floating elements there is one problem web developers usually face. Since float elements are removed from the normal flow of the page, this causes some other side effects that may be seen as undesireable.

Lets begin with this HTML structure:

1
2
3
4
<ul>
    <li>One</li>
    <li>Two</li>
</ul>

Read more »

Introduction to Syntactically Awesome Stylesheets (SASS)

I have been hearing a lot about SASS lately, so I wanted to find out what the fuss is about. SASS is a meta-language for writting CSS that allows you to use variables, nested rules, etc… that helps you write less code to achieve the same results.

SASS works with a ruby compiler that can be easily download in ubuntu based distrubutions:

1
2
3
4
sudo apt-get install ruby
sudo apt-get install rubygems
sudo gem install listen
sudo gem install sass

It is possible that you will need to restart your OS after running these commands.

Read more »

Box shadows, the CSS 3 standard way

In this article I am going to explain the CSS 3 standard way of applying a shadow to an object. Using only this technique is probably not going to give the cross browser behavior that you are expecting.

The shadow object

The first thing we need to understand in order to apply shadows to an object is how the shadows are constructed. A shadow object has this prototype:

1
<shadow> = inset? && [ <length>{2,4} && <color>? ]

Read more »

Gradient background, the CSS 3 standard way

In this article I am going to explain the CSS 3 standard way of achieving a linear-gradient background. Using only this technique is probably not going to give the cross browser behavior that you are expecting.

Linear gradient

The definition of a linear gradient from W3C documentation:

A linear gradient is created by specifying a gradient line and then several colors placed along that line. The image is constructed by creating an infinite canvas and painting it with lines perpendicular to the gradient line, with the color of the painted line being the color of the gradient line where the two intersect. This produces a smooth fade from each color to the next, progressing in the specified direction.

So, to set a linear gradient for a div or another DOM element we would need to imagine a straight line that goes through the object at an specific angle touching the center of the element. Then define the colors we which at specific points in the line.

Read more »

Rounded corners, the CSS 3 standard way

In this article I am going to explain the CSS 3 standard way of achieving rounded corners. Using only this technique is probably not going to give the cross browser behavior that you are expecting.

Border radius properties

It doesn’t matter which way you specify the radius you want for your corners, the browser is going to compute it in four different properties:

1
2
3
4
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Read more »