An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Amazing CSS Tips & Tricks
Wanna know how to use modern CSS features to write clean code by using some stunning CSS tricks? You have just landed at the right place!
A Tip For Beginners
Here's a quick tip for those who have just started to learn CSS - DON'T use Bootstrap or Tailwind! No doubt they are great tools to get a nice-looking UI quickly but using these will mean that you'll be missing on CSS fundamentals. I have personally done this mistake & oh boy did I regret it.
Grid is Great
Unlike flexbox which only deals with individual columns & rows, Grid allows you to think about the big picture. When you set an element to display: grid;
you can then define its children as a bunch of columns & rows. Have a look at the amount of code we have eliminated by using grid instead of flexbox in the image below.
Click here to read more about CSS Grid Layout
CSS Debugging
We often use Chrome developer tools for debugging our code (including CSS) but you'll be surprised to know that Firefox developer tools are much superior especially when it comes to CSS. On inspecting an element in Firefox, you'll have a break-down of the box-model like you have in Chrome but you can also edit properties on it directly, for instance changing the padding or margin and it will also give you a breakdown of all the properties that are influencing the box-model. Not only this, Firefox also provides really nice graphics for flex & grid layouts.
Image Filters
It's fun to play around with images in CSS, but did you know that we can apply amazing effects to those images. In fact CSS allows using lots of filters on the images to help developers play with the graphics without changing it in Photoshop. Lets have a look at some of the filters:
.image img { max-width: 300px;}.blur { filter: blur(5px);}.grayscale { filter: grayscale(100%);}.brightness { filter: brightness(150%);}.saturate { filter: saturate(200%);}.invert { filter: invert(100%);}.huerotate { filter: hue-rotate(180deg);}
I have much more to write and share with you guys but it's getting a little long, so comment below if you want part 2 of Amazing CSS Tips & Tricks.
Original Link: https://dev.to/tarandeep_singh/amazing-css-tips-tricks-1jl0
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To