Cool CSS Tricks

Hi @all,

So this week I come up with a new Blog “Cool CSS Tricks”. So, in this i will cover my personal used CSS Tricks which saved me all the times.

So without any further delay, let's get started.

This time we will start this with our Hope “J-Hope”

Cool CSS Tricks :

Magic SetUp : Even if we didn't apply any CSS, still a default CSS is applied to the HTML. Sometimes, actually in my case all the times, I don't need that default CSS to my HTML. So in order to remove this I will override this with my Magic Setup CSS which is :

* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

Adding … when text become too Long : Sometimes we want that instead of showing all the Text, it just shows three dots. This can be achieved as :

/* This avoids the text being rendered outside the container */
overflow: hidden;

/*This  avoid the text going to multiple lines */
white-space: nowrap;

/* This Sets the ... once the text overflows */
text-overflow: ellipsis;

Use a CSS preprocessor: There are lots of preprocessors of CSS, but my personal favourite is SCSS. This makes the use of CSS much easier while using Bootstrap with it .

Adding a shadow:

One of the biggest advantages of CSS is that your design looks more professional. 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. This gives you an advantage when looking for better clients or better jobs, as you deliver higher quality. Shadows are one of those subtle effects that will increase your quality instantly.

One of the most simple yet powerful effects is box-shadow. The best part is you can do it using a single property. Like :

/* Box shadow properties */
box-shadow: h-offset v-offset blur color;
/* Box shadow example */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

Resize Images to Fit a div Container :

One can resize an image to fit a div container using the height, width, and object-fit properties.

<!-- HTML --!>
<img class="image" src="imgpath or url" />

/* CSS */

.image {
 height: 100%;
 width: 100%;
 object-fit: contain;
 }

So that's it for today's blog. I will come with a new Blog next Week.