How to show ellipsis in CSS? Simple solution!

CSS3 on

We all would have come across scenarios where we wanted to show a certain part or section of a paragraph and then truncate the rest with an ellipsis ( … ) suffixed at the end. An ellipsis in CSS is generally used to show that there is more content, but it has been omitted. The … Read more

How to detect support for a CSS feature using @supports ?

CSS3 on

With many new CSS features being introduced regularly it has become important to check for the support of these newer CSS properties before we use them. While there are feature detection tools like Modernizr etc, not every time do we actually require to load a JavaScript file to detect a feature alone. You can do … Read more

Understanding only-of-type CSS pseudo class selector

CSS3 on

Let’s be honest, CSS sometimes can get a little tricky and confusing to understand. Especially with the onset of CSS3 and all these new CSS3 selectors and pseudo classes, it’s quite possible that many of us might still be trying to catch up with the new selectors. Well, only-of-type is one such new CSS3 pseudo … Read more

What are source maps in CSS and JavaScript?

CSS3 on

With all the optimization techniques like bundling and minification etc getting important and popular it is good that we talk about Source Maps now. Think of this, once you bundle all the CSS files you have into one single file, how do you know which part of CSS was written in which file? To make … Read more

What are CSS Preprocessors?

CSS3 on

A lot is being discussed about CSS Preprocessors in recent times. But then what are they? Is it another framework like Bootstrap? Well, the answer is No. It is not another CSS framework. Preprocessors in general are programs that take one type of data as an input and give out another type of data as … Read more

How to disable selection of text in html using CSS ?

CSS3 on

Depending on your requirement you might have to disable text selection or text highlighting in HTML using CSS or JavaScript. While there are different ways to do this, you can easily disable text highlighting using CSS. Consider a situation where you have a copy paste functionality like a coupon code etc that you want the … Read more

How to hide arrows from Number input?

CSS3 on

I am sure that by now you would have used various new input types available as a part of HTML5. Many of these input types have eliminated the requirement for JavaScript too in many scenarios. One such new input type is the Input type number. The syntax for the same is <input type=”number”> . The … Read more

How to make CSS first-child work

CSS3 on

With the onset of CSS3 a lot of new selectors were introduced. Many of these new selectors have been of a lot of help to us. The first-child selector is one such selector. Using the first-child selector, you can target the element which is the first child of its parent element. This means if you … Read more

How to auto resize an image to fit within a DIV without stretching?

CSS3 on

If you are developing a Responsive Webpage or a Fluid Web page, you would have definitely come across scenarios where you wanted to fit in a large image within a smaller DIV without distorting it or breaking the aspect ratio. Well, this can be done easily using the max-width property. Let’s assume that I have … Read more

How to use Font Awesome Icons?

HTML5 MoreOnFew

What is Font Awesome? Font Awesome is basically an Icon-Font Kit. It is a font that renders icons and is somewhat similar (though not exactly) to the windings in windows. It gives you scalable vector icons that you can customize as per your choice like changing the color, size, drop shadow and other CSS3 effects etc. Why … Read more