HTML

Image Rotate Using CSS

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

Interactive Tracker Boxes #2 - CSS

Submitted by Yorkiebar on

Introduction:

This is the second part of my interactive tracker boxes in HTML, CSS, and jQuery. This part will be covering styling the classes of our elements using CSS3.

Box:

The box class will be the holder of the points/trackers where the user is able to hover their mouse over in order to get responsive information about appropriate content. For this, I am going to do a simple small box with white background, and black border...

Interactive Tracker Boxes #1 - HTML

Submitted by Yorkiebar on

Introduction:

This tutorial is on how to create an interactive CSS & JavaScript (jQuery) page where the user is able to hover over certain elements of the page in order to uncover more information (such as the Bing.com search page, where you can hover over the boxes on the image to see interesting facts).

HTML:

This is the first part of this tutorial series, in which we will be creating the HTML and starting CSS for the page. We want to have a title and paragraph for each piece of information on the website, so lets create the basic HTML template first...

3D Flip Content Using CSS

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

Disable Right Click, Copy And Paste Using Javascript

Submitted by GeePee on
This project will teach you on how to disable right click, copy and paste. We can use this codes in preventing the users doing unwanted things on our page. It can protect your page content from being copied. I used my previous project Auto Scroll as an example. The right click are being disabled and there's no way the users can copy and paste the page content. Hope you learn from this.

Creating Shapes in CSS

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

Repeating Tile Background Animation in CSS

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

Image Mapping in HTML

Submitted by GeePee on
This project will teach you on how to image map using html. This is easy and simple project. Image mapping has the ability to hyperlink areas of the image to multiple destination. Just like my example, I have one image with with 6 boxes which contains different browser in each box. I set the coords of each box and link to it's preferred destination. The first 2 figures of the coords is the x, y
Subscribe to HTML