Nowadays you may use gradients even in borders. It is rather easy to use, just want to set pseudo-elements with lower
All illustration you can find here. Also, there is approach with
background-origin. Finally, in the bright future
border-image estate will be supported by all browsers and solution for this will look as follow:
Do you remember this moment when you needed to set
background-size for image because it will solve a lot of problems? Now you may use
object-fit which is supported by WebKit and will be combined to Firefox soon.
Counters in CSS
Not everyone know that counteracts can be made with CSS:
Let's make a checkbox style that won't use any images:
and radio button:
Not so far Firefox and Safari began to support blend modes legal as Photoshop does. It also works in Chrome and Opera but with flags. See an example:
You may don't see but z-index supports transitions too! It doesn't development it's value on each step so you take that it doesn't have a development. But it does!
We can use it to disclose the current color so we don't have to construct it lots of times. It can be good when working with SVG icons which change their color depend on their parents. Usually, we do it as follows:
but let's do it with:
Another code with pseudo elements:
Advanced CSS Counters
You can also count the identical checkboxes which were selected by user:
You can also build a small calculator:
Not so far this world exposed some new ways to portray sizes of different objects. Here are them:
vw(viewport width) - one percent of the browser window's width.
vh(viewport height) - the like but for height.
vmaxchoose minimally and maximal value between
The attractive thing is that they all are hugely supported by most of the modern browsers so you can freely use them. Why do we want them? That's because they make all large simpler. You don't have to specify a percentage of parent's element size and any other stuff. Just have a look:
Or you can put a beautiful popup at the center of the screen:
Also, there are some negative facts about using this feature:
- IE9 should be told to use
- iOS7 may have some bugs with.
vmaxis not fully supported yet.