HTML/CSS

This project project will teach you how to animate a loading spinners using css. This is very useful for those website which has a big content to indicate that the server still loading for pages. This is pure css without any javascript codes or jQuery plugin. Hope you learn from this.

This project will teach you how to create continuously changing colors animation using CSS3. We have to define individual keyframes at percentage points(0% is the starting and 100% is the ending) or we can use from/to keywords. We also have to set the background-color. On the 0% is blue , 25% is red, 50% is green, 75% is purple and then 100% is blue. The colors will continuously change every

This project will teach you on how to rotate an image using CSS. No javascript code or jQuery, just pure CSS. In my example, I have a blade image with transparent background. With the use of @keyframes animation in css, the image rotate like a windmill. This is very easy to do with just a few lines of codes. Hope you learn from this.

This project will teach you how to create a text effect using CSS. I have here two examples, the 3D effect and neon light effect. This is easy to do and pure css. It used various layers of text-shadow to create these effects. Hope you learn from this.

This project will teach you how to animate a 3D effect flip content using css/html only. No javascript code or jQuery plugin needed. Once the user hover over the image, the image flip to back and the information of the image appear. This is very cool animation and simple to do. Hope you learn from this.

This project will teach you on how to create a different shapes using CSS. We can create shapes in our web page without including images. This is simple but very useful. This is for the newbie in programming. I have here an example of triangles(left, right, up, bottom), circle, quarter circle and half circle. Hope you learn from this.

This project will teach you on how to animate a repeating tile background using CSS keyframes. Using the css keyframes, tiled images will animate like a falling snow as seen on my example. It is depend on your style if you want to animate it from the right. Feel free to modify this project according to your preference. Hope you learn from this.

This project will teach you on how to animate object with a floating effect using CSS keyframes. In my example, I have a background image of a levitating man. Using the @keyframes, the man moves like he is really floating. Then the shadow below suddenly fades as the man comes up. Hope you learn from this.

This project will teach you how to create image reflection using CSS. This is easy and simple but an interesting one. First, you must have an idea dealing with the CSS because there are some CSS codes included in this project that are more advanced. Hope you learn from this.

This project will teach you some animations using the CSS3 and jQuery. In my example, I used my previous project Comment Box. When the user wants to delete comments, the box will be animated using hinge effect. You can try this with your present project. This is easy and cool animation. Hope you learn from this.