Introduction to CSS

CSS transition rules, transform overflow


Not always the CSS rules work exactly as you want or implied. And often unusual problems that need to be done on CSS. This will be discussed in the article.



This property does not work with all CSS rules. The entire list of properties that you can modify using transition can be viewed at In the specification shown are defined as time-function, as well as what they are and more.


Transition No. 1

This is a very simple example, in which on mouse over is animation change the background of an element.

  1. #transition-1 {
  2. height: 50px;
  3. width: 100px;
  4. background-color: lightcoral;
  5. transition: 1s;
  6. }
  7. #transition-1:hover {
  8. background-color: lightgreen;
  9. }


I didn't have to specify what you want to animate, then animated all the possible changes.

Live demo
Read more

Positioning of elements

Vertical positioning

In all these examples, the vertical positioning will operate with only one indoor unit. If you have multiple units, you need to wrap in one.


Using absolute positioning

Feature: you Must know the height of the inner block. But this is not always possible.

  1. #outer-1 {
  2. position: relative;
  3. height: 300px;
  4. width: 300px;
  5. background-color: gray;
  6. }
  7. #inner-1 {
  8. position: absolute;
  9. height: 100px;
  10. width: 100px;
  11. top: 50%;
  12. margin-top: -50px;
  13. background-color: pink;
  14. }

Live demo
Read more

CSS3 selectors


All the CSS3 selectors, which will be discussed in the article are supported by browsers Firefox3.5 , Chrome, Safari, Opera12 (webkit). About support for Internet Explorer will be listed separately.



  • * — any element (IE6 )
  • div — elements with the same tag (IE6 )
  • #id — element with a given id (IE6 )
  • .class — element with that class (IE6 )
  • [name="value"] selectors on the attribute
  • :visited "pseudo — classes", the rest of the different conditions on the element

Selectors can be combined by recording in sequence, without spaces:

  • .c1.c2 — elements simultaneously with two classes c1 and c2 (IE6 )
  • a#id.c1.c2:visited element a with the given id, classes c1 and c2, and the pseudo-class visited (IE6 )

Live demo
Read more