HTML

Fixed Header

Submitted by ranjit1 on
This is a webpage Design Tutorial. This is for begineers in thml and css. In this tutorial you will know how to make fixed header and nice footer. This is simple and easy to do. Hope you learn from this.

Typography Effect in CSS

Submitted by GeePee on
This project will teach you one example of typography effect using css. There are no images included in this example. What we have to do is skew each letter. The odd letter will set the transform property into 10deg skewY and the even is negative 10deg skewY. This will look like each letter is folding. Hope you learn from this simple project.

Background Blend Modes in CSS

Submitted by GeePee on
This project will teach you how to use a background-blend-mode in css. Background-blend-mode allows you to blend images and background color. We have different kinds of blend modes(multiply, screen, overlay, burn, color, darken...). Each blend modes applied will produce a stunning effect to an image. I have here an examples of all blend modes that you can use. Hope you learn from this.

Clipping Text Using Background-Clip in CSS

Submitted by GeePee on
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.

Dot Leaders in HTML/CSS

Submitted by GeePee on
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

Rotating Border in CSS

Submitted by GeePee on
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.

Sparkling Lights Animation in CSS

Submitted by GeePee on
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