Even More CSS Tricks! (Pt. 1)

From my previous blog I’m going to quote myself the same intro so you have an idea why I’ll be mentioning CSS once again. “CSS is something I continue to struggle with on a daily basis. But I’m not the only one who struggles with something like this, I see through discord many people have an issue with it. It’s very useful as we all know to style our applications and make something so dull look immaculate. We all like a shiny new toy instead of a plain old one that we have had for years and years. CSS is something similar to that shiny new toy, you can create beautiful UI also known as User Interface.” — My previous CSS blog.

So with that out of the way, Clamp is something that I found recently and is super cool, W3 schools defines clamp as “CSS Function clamps a value between an upper and lower bound. Clamp() enables selecting a middle value within a range of values between a defined minimum and maximum.” What this means is that when you enlarge a window or make it smaller the text or border of what the clamp holds is going to get bigger or smaller!

So with this small example we see here that the first value is actually the minimum property, so we want the font size to be at least 10px. The middle property is the regular width which we have at 7. Finally the max width is 14px, so this will stop at 14px when enlarging a window, while making a smaller window, the font will shrink to 10px. Fairly simple!

I wanted to make a short size blog that was really simple and easy to read for anyone beginner or intermediate! Something that’s helped me within one of my projects using a menu for a job I currently work at named Rooster’s. We have all types of clients and sometimes the older ones have a tougher time seeing small print so this is a perfect example to use clamp for when they want to enlarge a screen, they could read it more efficiently. Thank you so much for spending any time at all reading my blogs be on the look out for when I find another cool CSS function, until then; Thank you and keep coding on!