Wednesday, October 27, 2021
More

    Essential CSS Recipes

    Must Read

    Programmerhttp://www.improgrammer.net
    We started this site to inspire young minds to motivate and encourage them towards Programming Language. In this site you will get programming tutorials, tech, programming facts, programming fun and programming blogs.

    Hi Programmer! In this article, we provide the best collection of Essential CSS RecipesCSS3 effects like in Borders, Radio Buttons, Dimensions, Text and so on.

    Gradient Borders

    Gradient Borders
    Gradient Borders

    Nowadays you may use gradients even in borders. It is rather easy to use, just want to set pseudo-elements with lower z-index:

    All illustration you can find here. Also, there is an approach with andbackground-clipbackground-origin. Finally, in the bright future border-image estate will be supported by all browsers and solution for this will look as follow:

    Object Fit

    Object Fit
    Object Fit

    Do you remember this moment when you needed to set forbackground-size the image because it will solve a lot of problems? Now you may use whichobject-fit is supported by WebKit and will be combined with Firefox soon.

    Counters in CSS

    Not everyone knows that counteracts can be made with CSS:

    and radio button:

    check and radio button
    check and radio button

    Blend Modes

    Blend Modes
    Blend Modes

    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:

    Transition for z-index

    You may don't see but z-index supports transitions too! It doesn't develop it's value on each step so you take that it doesn't have a development. But it does!

    CurrentColor

    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 depending on their parents. Usually, we do it as follows:

    but let's do it with:currentColor

    Another code with pseudo elements:

    Advanced CSS Counters

    You can also count the identical checkboxes which were selected by the user:

    CSS Counter
    CSS Counter

    You can also build a small calculator:

    CSS counter calc
    CSS counter calc

    New Dimensions

    Not so far this world exposed some new ways to portray sizes of different objects. Here are them:

    text
    text

    • vw (viewport width) - one percent of the browser window's width.
    • vh (viewport height) - the like but for height.
    • vmin and choosevmax minimally and maximal value between vh and vw.

    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 vm instead of vmin.
    • iOS7 may have some bugs with.vh
    • vmax is not fully supported yet.

    See more:

    Learn animation using CSS3, Javascript, and HTML5

    Optimizing CSS for Internet Explorer

    Latest Articles

    More Recipes Like This