One of the (good) side effects of mastering CSS is that your HTML will be smaller – you won’t need the maximum number of buttons to create a particular look. In addition, you will find it much easier to create not only your websites but also your responsive applications.
In the end, you will save a lot of time, effort and discussions with designers.
Keeping all of this in mind, we’ve created a catalog of 10 useful CSS tricks that you can use in your daily life. We are sure that you will find their application in many situations. Let’s dive into it then.
Tip #1:
Additional (when the text is too long)
After designing, it often happens that the text does not fit in the specified space.
For example, a long product title doesn’t have enough room for the description below. See example here,
No space to insert other details like buy button or product description.
The trick here is to tweak about 3 properties
CSS example
Here you have enough room to add description and buy button for your customers.
Tip #2:
add shadow
It is necessary to give your creations a professional look. One of the simple yet elegant ways to do this is to add a shadow or box shadow effect.
use box-shadow value
This is how you will see the change
This shadow can be added with rgba values instead of the usual #hex rgb.
Tip #3:
SVG alignment and coloring
Icons are used everywhere and when it needs to work in various screen resolutions you can run into problems.
That’s when SVG comes to your rescue.
The easiest way to deal with an SVG file is to go to a website like fontawesome and select the appropriate icon you like and then download the asset file.
Then just paste it in your Html
Then create a 30*30 round button and center your icon inside.
Tip #4:
Perfect your buttons
Buttons are the most important function that allows your client to invoke an action. Buttons are present on almost every page like purchase, add to cart, add to favorites, etc. Buttons should be made attractive by adjusting their color, size, shadow, adding hover effect, etc.
Tip #5:
button bar
Button bars simply group different buttons together. This adds a nice finish to the design and also helps to categorize the buttons
Remember that each button has a different purpose and must work independently.
Tip #6:
in your mind
Managing the title is the most important task as it is one of the important parts of the design. Many developers choose a fixed title because it is simple and popular. The main obstacle of fixed headers is encountered when the page resizes, the page height fluctuates, etc.
The simplest solution is to use “Flex”
So the header is scrollable and the overflow is set to auto.
Tip #7:
content
Content is the most important aspect of any client and their customers. So for developers, it’s extremely important for them to make sure that the content works well across multiple devices and multiple resolutions.
Boundaries, margins, and padding are important properties that need to be targeted.
Tip #8:
Resize images
Many times adding images can distort the entire design. Two scenarios where visuals can affect design are
The screen is bigger than the picture.
The picture is bigger than the screen.
Tip #9:
Tooltips
Tooltips are a means of creating hover effects for your designs.
When someone hovers over an item and provides more information about the item.
The main problems with using tooltips are resizing to fit the content i.e. adding flexibility to the tooltip
