Home > Tags > HTML
Page 6

Rotating Web Page Elements Using The CSS3 Rotate Transform

With CSS3, you can rotate Web page elements by a specified number of degrees, clockwise or anti-clockwise. With a small amount of HTML and JavaScript code in conjunction with CSS declarations, you can also animate these rotations. In this tutorial we will work through the process of rotating an image element by varying amounts as well as animating the function, initiating the rotation on user interaction with the page. Create a Page Save a new HTML file in your chosen editor, using the following outline...
Read more

Creating Bulletproof Email Buttons

Regardless of the social media networks that are popular at the time, email marketing will always be the number one way for a company or organization to connect with customers or clients. But, the average internet user has 2.3 email addresses and sends and receives an average of 112 emails a day. So what does that mean? That means your emails need to be clean, lean and quick to digest. With that in mind, I'm going to show you a great button replacement technique that will limit the number of images your email...
Read more

PHP Ad Tracker: Entering Ad Banner and Client Data

In our last session, we showed how to list the ad banner data and client data.  In this session, we will examine the form that allows administrators to enter ad banner data. First, we include the class_ads.php file and instantiate the ads class: <?php require_once("class.ads.php"); // instantiate ads class $oAds = new ads; Next, we assign a value for the $id variable by suing the setID function in the ads class: // check for id if ($id) { // assign unique id $oAds->setId($id); } If the form has posted...
Read more

PHP Ad Tracker: Site Administration Ad Banner Data Form

If you have read any of the other posts in this series you know that we have done quite a bit with our PHP ad tracker. In this session, we will look at the HTML form that calls these actions. First, we create the HTML table that will hold the form header: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td><b>Developer Drive Advertisements Administration</b></td> </tr> Next, we specify the operation (add/edit/delete/deactivate) for this...
Read more

Using Custom Attributes in HTML5

Custom attributes are among the most significant additions for HTML5, and can play a major role in semantic Web development. In this tutorial we'll go through a practical example of creating and accessing HTML5 custom data attributes, including the necessary JavaScript functions. It was possible before HTML5 to add your own attributes to HTML elements and access them using JavaScript, but if you've ever tried it you'll know you can forget about getting your markup to validate. HTML5 provides the...
Read more

Implementing Drop-Down Menus with CSS3

CSS3 allows developers to implement a variety of visual and interactive functions most of us would previously have turned to JavaScript for. In this tutorial we will implement a drop-down menu, with background images featuring a gradient and rounded corners, all defined purely in CSS3 code. Our list will be structured using embedded lists in the HTML code, with top-level menu options appearing above their sub-menus, which we will display when users hover the mouse over the top level item. Here is...
Read more

PHP Ad Tracker: Listing Ad Banners and Clients

In our last session, we finished writing the PHP class file that would control all the ad banner functions.  This week, we look at the presentation layer for the administration of these functions. The ads_list.php page lists the current banner ads.  First, we must include the class file so that the page can instantiate the class call the functions: <?php require_once("class.ads.php"); // instantiate ads class $oAds = new ads; Next, we fill the $aAds array with the data from the ads table and get...
Read more

Parallax Scrolling: An Introduction

Anyone who has played, watched friends play, or briefly saw video games that were released in the 80’s and 90’s is familiar with parallax scrolling. Think of games like Mario Bros, Streets of Rage, Kung Fu, Turtles in Time, or the original parallax scrolling game, Moon Patrol.  Parallax scrolling is when there are multiple layers of images all moving at different speeds, causing a 2D image to have a 3D-like effect. Why am I talking about retro video games on a web development site?  Well, the simple...
Read more