A selection of useful CSS recipes, or what we do on bare Fridays

  • Tutorial

There is a good tradition in our web development department. Every 2 weeks we have “bare Fridays” - these are mini-conferences where we share interesting and useful knowledge accumulated during the work. Today we have accumulated quite a lot of such knowledge, and we decided to start gradually sharing it with the public in the person of the Habrasociety.

So, we present to your attention a collection of interesting and (hopefully) little-known HTML and CSS recipes. We will be glad if each of you learns something new!

Centering the block vertically and horizontally

Most often, such blocks are shifted by 50% using the top and left properties, and then are shifted to the center by negative indentation. But there is a more elegant way that not everyone knows about:

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

If the block is positioned, and not the image, you will also have to set its height and width.
This trick will not work in IE7. I hope you have not focused on him for a long time)

Output a line of text to an ellipsis

Pretty old property (works in IE 6!), However, it was officially added only to the CSS3 standard. Since its use is not often found on the network, we can conclude that not everyone knows about it.

.text-overflow {
    white-space: nowrap;       /* Перво-наперво, запретим перенос строк */
    overflow: hidden;          /* Скрываем текст, который не помещается в блок */
    text-overflow: ellipsis;   /* Уводим текст в многоточие */
    display: block;            /* Элемент обязательно должен быть блочным */

A block can be set to a width, but by default it stretches to the entire width of the parent. Accordingly, an ellipsis will begin to appear when the width of the child block exceeds the width of the parent block. This technique works for only one line.

Dependent Width Blocks

Let's say we want to add a sidebar to the site.


Moreover, the width of the content depends only on the width of the panel. How to do this without explicitly specifying the width? There is a way:

.content {
    overflow: hidden;
.panel {
    float: right;
    width: 20%;

As you can see, overflow: hidden solved all the problems.

Elliptical angles

Few know (or simply do not use in practice) that in the border-radius parameter you can specify not 4, but as many as 8 parameters, 2 parameters per angle. In this case, the first parameter sets the radius horizontally, and the second - vertically. Example:

.circle {
    border-radius: 150px/100px 100px/200px 0 0;

A bit about pseudo-elements

The: before and: after pseudo-elements will by default overlap the element to which they are added. In the case when the pseudo-element must be placed along the Z axis below the parent, a negative z-index is indicated.

Also, pseudo-elements will not work with tags that cannot contain text content. These include ,
and, oddly enough,.

for some reason picks up pseudo-elements normally.

Bonus: Pure HTML Mini Firebug

Just paste this code on the page:

Voila, everything works. Thank HTML5
The thing is practically useless, however, if you set it to a larger font size, it can do a good job during presentations. After all, few can see the tiny letters of a real firebug.

That's all for today. Thank you all for your attention! We are waiting for your comments!

Also popular now: