HTML/CSS

  • Submitted by: 
    This project will teach you how to create a simple tooltip using raw css code. When image is hover, the car model will immediately appear on each image. Feel free to edit or do what you want in this project. You can position your tooltip anywhere in the image by setting up the margin property. Hope you learn from this project.
  • Submitted by: 
    This project will is an example on how to create a gradient patterns using pure css. This includes horizontal, vertical, angled, angle 135 stripes. This is cool css tricks that you have to learn. We can use this in our website's background. Hope you learn from this.
  • Submitted by: 
    This project is cool and simple for a web design. We can use it in our comment box or other part or your page you think this effect suits best. What we need in order to create a folded corner is set the border-with, border-style and border-color property. It's up to you how you will design this box or what color you will be using. You can also add some box-shadows to enhance the appearance of a...
  • Submitted by: 
    In this project, you will learn how to animate a 3D cube rotating using CSS. This is pure css with no javascript code has been included. In my example, I used it as an information of film showing or it can also be used in displaying ads. The cube is rotating continuously on it's certain speed(depending of what speed you want to set). Try this. It's a cool animation. Hope you learn from this.
  • Submitted by: 
    This project will teach you how to animate a photo banner using css. There is no javascript code or jQuery plugin included. A simple yet interesting to learn project. This is like a image slider but we usually used a javascript or jQuery code. This time we can use css animation. Images are sliding from right to left continuously. Hope you learn from this.
  • Submitted by: 
    This project will teach you how to create basic shapes of SVG. SVG(Scalable Vector Graphics) is an XML-based vector image for two dimensional graphics which also support animation. I have here first an example of the basic shapes. Consider this as a steps in learning SVG. Hope you learn from this.
  • Submitted by: 
    This project will teach you how different effect on hover using CSS. No javascript or jQuery codes used. With just few lines of css codes, you can be able to have these effects. I have here two examples of effect when hovered, blur and grayscale. We have to use the transition property in order to do this. For blur effect, we have to set blur to 5px. And for grayscale, we have to set grayscale to...
  • Submitted by: 
    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.
  • Submitted by: 
    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...
  • Submitted by: 
    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.

Pages