css3


How to optimize the image use in HTML and CSS3?

By: Deepu Balan on 09/29/14 11:22 AM No Comments »
You’ll hardly find a website that doesn’t use images. One can’t overlook the fact that we’re living in a digital era, and thus, adding images help to increase engagement rate on your site. There are some stats that will further illustrate why adding images to a site is so important. According to a few sources, articles with images get 96 percent more views while a press release gain 45 percent views and so on. Plus, around 67% of consumers say that image-quality is very important for choosing and purchasing a product from an e-commerce site. So, now that you’ve become […] Continue Reading...

Pure CSS – HTML accordion using Details & Summary elements

By: Deepu Balan on 06/11/12 11:14 PM No Comments »
Have you ever dream of being able to create an accordion or toggle widget purely using HTML and CSS? Yes it is possible to create a nice looking and easily configurable accordion widget purely using the power of HTML5. No need to load any external javascript plugins or libraries. Gone are the days when you had to depend on javascript plugins to create interactive accordion widgets. HTML5 – CSS3 duo together is shaping up to be an exciting technology of all time, which can make impacts on almost all areas of webdesign such as animations, user interaction, gaming, geolocation, 3D […] Continue Reading...

Notify: Pure CSS notification bar using :target pseudo class

By: Deepu Balan on 02/14/12 12:09 AM 19 Comments »
For quite some time now, I have had this little idea of a CSS based notification bar floating in my head… and was wondering, would there be a way to create it purely using CSS. Finally I decided to spend some time this weekend, and the time spent on it was well worth it. Yes it’s all driven by the CSS3 magic. Absolutely no javascript or jquery was used in the making of this notification bar. I tried a third party service called hellobar for some days in my blog to display a notification bar, It’s indeed a good option […] Continue Reading...

Pure CSS DropDown Menu using :target pseudo class

By: Deepu Balan on 06/17/11 11:24 PM 49 Comments »
Today, CSS3 has become a buzzword of modern web designers and developers around the globe. With its ground-breaking features, CSS3 has made a profound impact on the web designer community by making the lives of web designers easier and fun filled. Here in this post I am going to explain such a cool CSS3 feature called :target Pseudo Class. By playing around and experimenting with the :target pseudo class, I have developed a cool looking pure CSS dropdown menu. This menu is developed wholly using CSS and HTML, no images or javascripts used. Hence it is easily customizable for anyone […] Continue Reading...

Text-overflow CSS3 property explained – Pure CSS solution to get ellipsis

By: Deepu Balan on 11/27/10 9:54 PM 27 Comments »
The introduction of CSS3 brings revolutionary changes to the day-to-day life of web designers. There are so many crazy new features that CSS3 has in store for us. Things which were usually done with complex javascript code can now be easily done with CSS3. One such feature is known as Text-Overflow. Sometimes through the web design process we may have to clip some dynamic text before it’s being wrapped to the next line of a fixed width box. At the same time we want to provide a visual hint to the user that some text-clipping has been occurred and the […] Continue Reading...

RGBa vs Opacity: The Difference Explained

By: Deepu Balan on 03/29/10 12:02 AM 32 Comments »
To be able to effectively handle the alpha transparency or opacity of a particular element purely using CSS/HTML was the dream of any web designer. Because, with alpha transparency or opacity they can make visually more beautiful and easily maintainable websites with less effort. Now with CSS3 we can achieve these using properties such as RGBa and Opacity. What is RGBa? In addition to RGB (Red Blue Green) CSS3 has introduced a new feature to color setting, which is called RGBA. RGBA stands for Red Blue Green Alpha. Here “A” in this property name stands for “Alpha”. This additional feature […] Continue Reading...