HTML/CSS

This project will teach you how to clip text using background-clip in css. First we have to set background-clip into text, set the text-fill-color into transparent so the background image will display. Put a background image and animate. In my example, I have a text LIFELINE which has a background image of a lifeline and slide the image from left to right. Hope you learn from this.

This project will teach you how to create a dot leaders using html/css. Dot leaders is used to connect items across a gap of variables. We can also used other symbols like dash, arrows etc, but what we mostly used is dots. The tricks in doing this is we fill the full width of the page with dots and the spans(where we put the strings) are put on top. We set also the background of the span into

This project will teach you how to animate gradient colors in CSS. This is simple and easy to do. It has no transition property in css. I only added some jquery plugin which makes the gradient to slides. Hope you learn from this.

This project will teach you how to create a rotating border using pure css. There are different tricks on how to do this. First, we have to create four div's and set a border-bottom to 5px dashed. It will create a dashed lines. Form lines to a square. Animate lines to linear with a duration of 6 seconds infinite. Hope you learn from this.

This project will teach you how to animate like a sparkling light using pure css. First we have to create a glowing light. You can use box-shadow property to make your object look like it's glowing. Then we have to set the animation-duration and animation-iteration-count. In my example, the duration is 1.5 seconds and iteration-count is infinite. Try this animation and I'm sure you'll enjoy

This project will teach you how to customize a scrollbar using css. We can use this on webpage that has a large content. Scrollbar can be customize based on our preferred design. Scrollbar has different structures like button, track, thumb etc. Buttons can be clicked to increment or decrement the selection(mine has set to none). Track is the area where you can move the thumb. And thumb which is

This project will teach you how to use clip-path property in css. Clipping or clip-path property allows you to display a portion of an image inside the path or a shape. We can create different shape like, rectangle, circle and polygon but I have here an example of circle and polygon. It is easy program. Try it yourself. Hope you learn from this.

This project will teach you some technique on how to create a custom search box using html/css. It has a little javascript codes to change the search button image on mouse hover and onmouseout. It also change the background color of the textfield on focus. Hope it can help you in your future project.

This project will teach you how to expand textarea when clicked using html/css. With a few lines of codes in css(most important is the transition property), you can easily include this effect in your project. We can use this effect in creating a comment box. Hope you learn from this.

This project will teach you how to create an automatic numbering using css/html. This is very useful for those websites that need to have a numbering specially when we get our data or information on the database. This is the easy and simple way to do create a numbering. Hope you learn from this simple project.