CCS3 only Loading Icon

2014-07-13 — Written by — 2 min read

I generally have been using loading gifs in my work most of the time to inform the user that the resources are being fetched asynchronously from the server.

Ajaxload website is perhaps one of the most used site to download a suitable gif.

In this post I will demonstrate a css3 only way to create a nice loading simulation

Basic Code

We will use nested divs to create the loading animation control ```

Position div in the center of the page using css

2013-01-27 — Written by — 2 min read

#css #how to #programming #utility #web

When I first started web programming, creating a center aligned div was one of the most common task that I saw myself doing.

since div is a block element, i.e. it takes up the full width available, and has a line break before and after it, it can easily be centered using relative styling

{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

However lately I have preferred using absolute positioning technique over relative, this works for all browsers and is best for login screens or alert messages over a translucent shim.

Cross browser drop shadow with CSS3

2013-01-23 — Written by — 2 min read

#how to #util #css

When css3 arrived, one of the goodies that I found was, the inclusion of Drop Shadow effect, namely **Box Shadow **and Text Shadow.

Here I present a cross browser utility css class which can be used for a drop shadow effect, without any image.

.shadow {
      /* For IE 8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
   /* For IE 5.5 - 7 */
   filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
   -moz-box-shadow: 3px 3px 4px #000;
   -webkit-box-shadow: 3px 3px 4px #000;
   box-shadow: 3px 3px 4px #000;
}

For cross browser text shadow effect ,I found a nice article here.

Cross browser CSS3 border-radius (rounded corners)

2013-01-22 — Written by — 2 min read

#css #how to #util

When I started programming and had to begin designing my first user interface in HTML, I was always puzzled as to why are all visual elements in HTML rectangular. I soon learned that in those days if one would want a circle to be drawn on a page, then the only way possible was using an image, the same was true for drawing elements with rounded corners.

Thankfully HTML5/CSS3 guys were listening and the latest css3 standard supports defining the corner radius of a circle, this can be used to make an element look like a circle too if you want.

Cross Browser Opacity or Transparency

2013-01-22 — Written by — 1 min read

#css #how to

Css has a very useful property called Opacity, which basically is a measure of transparency of an element.

All modern browsers Yes yes even IE has support for it.

In most browsers the value is between 0 minimum [transparent] i.e not visible to 1 maximum [opaque] i.e. completely visible

In IE the value is between 0 and 100 ,don’t ask why they just like to make us unhappy.

Here I present a helper css class which will work in all browsers.

Image Carousel

2010-06-29 — Written by — 1 min read

#programming #fun #utility #javascript #carousel #fluid #css

Here is another of many JavaScript based Image Carousel, I had seen many similar to these made in SilverLight and Flash, I came across a wonderful carousel made in SilverLight sometimes back which was very fluid in behavior and could easily be customized and configured to take various shape and form.

I have managed to port it to JavaScript, it works best on chrome or FF, hope this would be fun to play with.

Older posts →