Keywords: CSS, Developers, developer tricks, CSS tricks
One of the (good) side effects of being fluent in CSS is that your HTML becomes smaller – you won’t need the maximum amount of nodes to make a particular look. Also, you'll find it tons easier to form not only your websites but also your apps responsive.
In the end, you'll save tons of your time, headache and discussions with designers.
Keeping all of this in mind, we've created an inventory of 10 practical CSS tips which you'll be able to use in your daily life. We are sure you'll find their application for a lot of situations. Let’s dive right in then.
Trick 1: Adding space (When the text is too small)
After designing, it often happens that the text doesn’t fit in right in the space assigned for it.
For example the long titles of the product which leaves no space for the description below. See for example here,
There is no space to fit in other details like the buy button or the description of the product.
The trick here is tweaking around 3 properties
CSS example
Result:
Here, you have enough room for adding description and Buy Button for your customers
Trick 2: Adding shadow
It is necessary to give a professional look to your designs.
One of the simple yet elegant ways to do that is by adding shadows or the box-shadow effect.
Value box-shadow uses
Here’s how you’ll see the change
This shadow can be added using rgba values instead of a regular #hex rgb
Trick 3: SVG alignment and color
Icons are used everywhere and when it has to work in a variety of screen resolutions, you might encounter some 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 download the content file.
Then simply paste it to your Html like this
After this, create a 30*30 circular button and centre your icon inside it
And here’s the result
Trick 4: Perfecting your buttons
Buttons are the most important function that gets your customers to call an action. Buttons are present on almost every page like buying an item, adding to cart, add to favourites etc. Buttons should be made appealing by tweaking their colour, size, shadow, adding hover effect and so on.
Here are a few steps
Result:
Trick 5: Button bars
Button bars are just grouping various buttons together. This adds a good finishing to the design and also help in sorting the buttons
Remember that each button is for different purposes and should be working independently.
Lets group the buttons
Result
Trick 6: Header
Handling the header is the most critical task as it is one of the important parts of the design.
Many developers go for fixed headers as it’s easy and common. The major setback of fixed headers is faced when the page resizes, the height of the pages fluctuating and so on.
The easiest way out is to use “Flex”
Thereby the header becomes scrollable and overflow is set to auto
Solution
Result
Trick 7: Content
Content is the most important aspect of any client and their customer. So, for a developer, it’s extremely important for him to make sure that the content works properly on various devices and multiple resolutions
Limits, Margin and Padding are the crucial properties which need to be focused one.
Follow these steps
Result
Trick 8: Resize image
Many times adding images can distort the whole design. The two scenarios where image can affect the design are
- The screen is bigger than the image
- Image is bigger than the screen
This can be solved like this
Trick 9: Tooltips
Tooltips are the ways to give your design a hover effect.
When a person hovers over an element and gives more information on that element.
The major issues with using tooltips is resizing according to the content i.e adding flexibility to the tooltip
Solution
Result
Trick 10: Zoom effect
The final trick that should be up every developer’s sleeve is the ‘Hover’ effect.
Hover effect adds more visual appeal to the design and is added in the final parts of the design.
Hover effects make the app look great.
Solution
Integrating a few tips and tricks can go a long way in development.
Let us be a part of your development and you can leave the hassle of creating quality development on us and focus on building your business.
Visit us at https://www.starkflow.co/