Category Archives: CSS

HTML5 Progress Bar

HTML5 Progress Bar will be used to minimize the html coding. <progress> tag is used to make progress bar. Below is the progress bar syntax and example. The parameter max is the maximum value for the progress bar and parameter value is the percentage out of maximum value.     [code type=html] <progress value=”40″ max=”100″></progress> [/code]… Read More »

Best 5 CSS Table Design

Table design will be a primary object, when data are displayed in list (using table). It is easy to list the values from database using HTML Tables. Here is some of the Table design. Table design will be a primary object, when data are displayed in list (using table). It is easy to list the… Read More »

Category: CSS

Disable Selection of Particular area using CSS3 Property user-select

CSS3 allows to disable the selection of particular area using user-select property. This property will be useful in websites, which doesn’t wants user to copy particular content by selection. We can copy the unselectable area by other means, but its a primary step to disable particular area selection.   User-select CSS3 Code [code type=css] -webkit-user-select:… Read More »

Category: CSS

Loading Effect Using CSS3

Loading effect using css3 tutorial is given below. Before css3, loading effect can be done only by Macromedia flash or GIF image. By using css3 animation property, we can do this effect easily   View Demo   .box1– outer circle .box – inner circle How this works .box1(outer circle) rotates slowly in anti clockwise direction… Read More »

Category: CSS

Label for Radio Button Using HTML CSS

Label for Radio Button Using HTML CSS will makes look and feel of a radio button much better. This task is done with id and for. ID of the radio and its coresponding lable’s for value should be same. Here is the tutorial and demo link   View Demo   HTML [code type=html] <html> <body> <input… Read More »

Category: CSS

Best 4 Portfolio Design Using CSS3

Already we have discussed a single portfolio design and here is the tutorial for best 4 Portfolio Design Using CSS3. View Demo PORTFOLIO DESIGN – 1 HTML [code type=html] <div class=”outer”> <div class=”inner”> <img src=”” /> <div class=”caption”>Business Card Design for Vydoha</div> </div> </div> <div class=”outer”> <div class=”inner”> <img src=”” /> <div class=”caption”>Business Card Design… Read More »

Moving Image Effect Using CSS3

Moving an image using css animation effect will make website as more attractive. Here is the tutorial for moving image effect using css3 animation. View Demo SYNTAX animation:  animation-name |  animation-duration |  animation-iteration-count animation-name  –  animation name, we have to define property of this animation name animation-duration  –  speed of the effect animation-iteration-count – Number… Read More »

Category: CSS

Portfolio Design Using CSS3

Design of a portfolio page is an important thing. Portfolio design is like sering our designs to viewer in our best way. Here is the simple portfolio design using css3.   View Demo   How This Portfolio Design Works   HTML Code [code type=html] <div class=”outer”> <div class=”inner”> <img src=”” /> <div class=”caption”>Marriage Invitation Card… Read More »

Simple Pricing Table Using CSS3

Pricing Table will be used when there are more than one product/tariff.  Important advantage of pricing table is, we can compare with other tariffs. Here is the tutorial and code for simple pricing table using css3.     View Demo   Below code will do the whole process, i.e., when we hover specfied box will… Read More »