Fall in love with CSS, with these features!!
In the world of javascript, interactive websites and apps most of the developers forgot how beautiful and useful CSS is. For most of the developers now CSS is the least favorite skill. Why? Because
It just do beautifying, has no logic, and no data manipulation power. CSS used only to change font-size, color, padding etc it can’t do anything more than this.
These are the reasons most of the developers gives. But today I am going to share few new features of CSS3 which will make you fall in love with css all over again.
All the code demos are here : https://github.com/Neha/css3-demos
The videos of all the below features are available here.
1. CSS Filters
Applying filters on pictures on Instagram and Prisma are fun. Imagine having same feature implemented by CSS… Would be Fun? Hell yeah!! You said it and W3c listen to you. Presenting you CSS Filters more than 8 filters from invert, hue, blur etc you can use them in your css and play with them. Browser support is not so limited. You can use fall backs for filters too. Here is the sample code.
2. CSS Variables
One of the biggest missing feature in CSS was variables. We used to hate when we have to copy-paste same value and change it at so-many places. The most exhausting was when multiple developers are working on single css file and same red is not consistent in your style sheet. But now thanks to CSS native variables — write once, reuse always!!
3. CSS Mixins
Love CSS Variables? You will love Mixins more.
Hate to repeat same block of code again and again? Love SASS/LESS mixins features? Now, no need to move to pre-processors anymore for mixins. CSS3 has native Mixins — @apply rule.
4. CSS Grids
Ditch the floats, ditch the flex-box and say bye-bye to RWD frameworks. The future of web page structure is here — CSS Grids. CSS Grids let’s you create the 2D structure only by CSS. CSS Grids let’s you divide your page into ROWS and COLUMNS. Not only this is comes with lot of features which let you control the — content of the grids, grid on the page, max-min-height/width, control of content and most amazing is it comes with new unit fr which brings the magic of responsiveness in your page. No more playing around with complex HTML structure, % width/height. Just use CSS grid and you are good to go.
https://github.com/Neha/css3-demos/tree/master/cssGrids
5. CSS Calc()
Hate to do the calculation of Divs without padding, border? Hate to get into % calculation of columns? Well, now leave all the maths calculation to your CSS as it comes with new property — calc(). All you need to do is just throw the values, variables you want to get calculate and it will do all calculations by itself. Isn’t it impressive? Now, if you are not good in maths no worries CSS is still your game!!
Do you have more to add in this list? Do let me know in comment section.
