![]() ![]() Our components need to be independent and work in any conditions. Today, in the era of components, we can’t rely just on the width of our viewport anymore. shopping-item b.A lot of people love responsive sites, and we used to make them with the help of Media Queries. Having done that, let’s now go ahead to create a 30x30 circular button and center our icon inside it. Once you download the file, you can view the source and paste the content in your HTML like this. One quick way to do that is to go to a website like fontAwesome, search for the icon you like and download the file. So, the best way to deal with an SVG file is to simply copy the content of the file and place it directly into the HTML code. However, if you want to add SVGs as the source of an image tag, there are several things you will be unable to do, like controlling the color. SVGs are perfect for icons since they look great at every resolution. ![]() SVGs come to your rescue in such scenarios! We run into problems with icons since we need to have our pages work over multiple screens with multiple resolutions. Icons are used everywhere nowadays, be it menu icons, cart icons, favourite icons, and a variety of others. This is because with rgba values we can make our shadows have an opacity which will make them more subtle and will look a lot more professional. Now, let’s look at the values box-shadow uses: /* Box shadow properties */īox-shadow: h-offset v-offset blur color Īs a bit of extra advice, the key to having nice subtle shadows is to use rgba values instead of a regular #hex rgb. Check the example below to see how effective this is: The best part is you can do it using a single property. One of the most simple yet powerful effects is box-shadow. Shadows are one of those subtle effects that will increase your quality instantly. This gives you an advantage when looking for better clients or better jobs as you deliver higher quality. You might have spent 150 hours on a project but if you work on it just an extra 5 hours adjusting the look, your effort is visible right away. One of the biggest advantages of CSS is that your design looks more professional. To achieve this, we need a combination of 3 properties: /* Avoids text being rendered outside the container */ ![]() Here, we have enough room to place a short description or even a buy button. I would rather prefer a design like the one shown below. Having the text over two lines will not always align with the design since that will leave us with no space for description. Long titles of products in an e-commerce store is a common example. We have all been there – finished our nice-looking design just to discover that when real data comes in, the text simply doesn’t fill in the space assigned to it.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |