CSS tweaks

Floating number of cells in the row


What is unknown is the number of cells in a table row, or the number of cells varies from row to row, but they must all fit in a certain width. In this article I will tell and show an example of creating such table.


The trick

Determination of how many cells in a row, and the application of unique rules to them, is done in CSS using pseudo-selectors (:nth-of-type and :nth-last-of-type). That is why will work only on IE9 .

Next the example code, when cells can be 1,2,3 or 4.

Live demo
Read more

Change the appearance of standard elements

Change in standard HTML elements

Very often, the design Department requests to make custom input elements. A lot of options, I made some non-standard, because they are without images and with interesting effects.


Almost all the examples are written using the technology of the anchor tag label, tag input using standard HTML (supported since IE7). Yes, there is a feature and this is the purpose of the same id tag for input and label. But usually it does not cause problems.



First I decided to show how you can make custom checkbox, which will normally be displayed even in IE9 (but not lower, as IE versions do not support rounded corners border-radius).

The "tick" is made using two pseudo-elements :before and :after. Each element has its rounded side.

Live demo
Read more

How to hide button in CSS


The article was written at the request of my friend, who turned and told that now the Internet is impossible to find simple things, namely, hiding the download button (or any other) using CSS from being accidentally pressed.


This example is described in the article will not help You to hide the link from the robots involved in the parsing of the pages, as it is written in the attribute href of tag a in its pure form. However, this kind of protection from random users press the button "Download". The task was set that way, so I decided.


What are the options to display buttons/block?

I made 2 versions of the show:

Live demo
Read more

Gradient boundary element

This article will describe the technique of overlay on the border (frame) of any gradient.


The positioning of the element with the gradient

1) On many sites indicated that the property z-index , you can specify both positive and negative values, but in fact the browsers in their own way to implement negative values. Sometimes very unexpectedly.

Variants of the gradient overlay on the border actually, I tried several but settled on one. He's not the most ideal, and even in some browsers (Chrome 33 and less Stock Android 2.3 and less, Firefox for Android), it is buggy.

Why? Because of the above browsers consider that a negative z-index (-1 or less) you need to render at the last turn.

However, it works fine even on the browsers, if the layer with negative z-index , there are no complex items. For example, <video>, <audio>, <embed>, <object>, <canvas> , and others.

Live demo
Read more

The basic set of CSS properties

This article will list a set of CSS properties required in each project.

As always, all as described in the article can be viewed at Demo, and download the file.


Reset CSS

Is a set of properties to allow HTML elements to the same species in all browsers.

Live demo
Read more

Cunning use of CSS

This article will describe the techniques of displacement and hiding elements with CSS, under certain conditions, as well as some features of the behavior of the blocks, and selectors.


The offset margin-top block-heir

For the next example let's take 3 of the block (the block with the class pink-block inside a block with a class of gray-block)

  1. .green-block {
  2. height: 100px;
  3. width: 150px;
  4. background-color: green;
  5. }
  6. .gray-block {
  7. height: 100px;
  8. width: 120px;
  9. background-color: gray;
  10. }
  11. .pink-block {
  12. height: 50px;
  13. width: 50px;
  14. background-color: pink;
  15. }

To begin with, that often have to do a negative margin-top of an heir, and he begins to shift parent. For example,

  1. #margin-1 .pink-block {
  2. margin-top: -30px;
  3. }

Live demo
Read more