5 CSS Properties You May Not Know
Furkan is a software engineer and frontend developer, whose main purpose is to create best optimal experience for user but also keeping the application or project as performant as possible.
He is deeply interested on web technologies and he is building new projects in this subject. He is especially familiar with React, Vue, Node and Java. You can check out what he built on his GitHub account. There is potential ways to connect with him at the end of this summary 👇
Things he like to do; ✔ Trying to solve other people's struggles ✔ Teaching or telling some subject he know to friends or colleagues ✔ Building different kinds of projects ✔ Meeting & talking with new people ✔ Listening podcasts ✔ Playing Chess ✔ Watching drama | sci-fi movies ✔ Listening music while I travelling or trying to fix problems ✔ Researching next generation technologies like cyptocurrency, IoT, smart devices
If you want to reach out with him, here is how you can do it;
🔼 Blog: https://blog.furkanozbek.com/ 🔼 GitHub: https://github.com/afozbek 🔼 Mail: abdullah.furkan.ozbek@gmail.com 🔼 Twitter: https://twitter.com/afozbek_ 🔼 Instagram: https://instagram.com/furkan.codes/
Thanks for reading ✨
1. all property
The all property resets every other property (apart from unicode-bidi and direction) properties to their initial or inherited state.
.-reset {
all: initial;
}
2. calc property
The calc() function can be used to create values. For example: width: calc(100% - 50px) will make element full width minus 50px pixels.
width: calc(100% - 1em);
3. column-count
The column-count property specifies the number of columns an element has. column-count: 3 will spread the elements text (or inline-* elements) into 3 columns.
{% codepen https://codepen.io/gregh/pen/pRoYMv %}
4. currentColor
The currentColor keyword represents the calculated value of the elements color property.
.parent {
color: #ccc;
border: 1px solid currentColor;
}
.child {
background: currentColor;
}
5. filter
The filter property applies visual effects to elements. It comes with predefined functions like blur, brightness, contrast, sepia; and you can also apply custom SVG filters.
.-blur {
filter: blur(8px);
}
.-brightness {
filter: brightness(1.5);
}
.-contrast {
filter: contrast(250%);
}
{% codepen https://codepen.io/gregh/pen/GrJNdJ %}
