One of the main reasons the emergence of CSS3 has been so hotly anticipated is the fact that, in combination with HTML5, it will pose a genuine alternative to technologies such as Flash. With CSS3 and HTML5, you will ultimately be able to create animated, interactive multimedia applications that will be accessible to users regardless of whether Flash is supported in their environment - great news if you're developing Web apps for iOS or for mobile users in general. In this tutorial we will create a simple...
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...
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...
With HTML5 and JavaScript, you can implement native drag and drop functions within the Web browser. This is one of the emerging HTML5 tools that promises to make websites more interactive without relying on additional technologies such as Flash. In this tutorial we will create a simple page with images the user can drag and drop into designated areas. Create an HTML5 Web Page ... Create an HTML file for your drag and drop function. Use the following basic outline, with sections for JavaScript and CSS...
The HTML5 Server-Sent event model allows you to push realtime data updates from the server to the browser. In this tutorial we will work through the process, with the EventSource object handling received data and writing it to the page. We will use HTML5 and JavaScript at client side, with PHP at server side. With existing models such as AJAX, the code in a Web page would continually ask the server to supply new data, but the onus was on the client to request the information. With Server-Sent requests, you...
With CSS3, developers and designers can utilize an enhanced range of options for Web page backgrounds. New options include the ability to use multiple background images, to specify size properties for background images, and to define background origin and clipping in terms of the CSS box model. In this tutorial we will work through various options using these new techniques, demonstrating the CSS syntax for each one. Create a Page ... Create a Web page with a single element and an area for your CSS declarations...
HTML5 offers lots of significant advantages to developers, but browser support is still pretty low. There's no reason not to start inserting HTML5 functions into sites now, as long as you take the necessary steps to check for browser support and provide alternative content for everyone else. In this tutorial we'll go over the basics of using HTML5 and JavaScript to exploit the enhanced storage facilities on offer. With HTML5 you can store more data - and store it more efficiently. The two main data storage...
With CSS3, you can transform the appearance of Web page elements. The skew transform allows you to skew a particular element or group of elements, by supplying a number of degrees to skew along the X and Y axes. Your code needs to be tailored to the specific browsers supporting CSS3 and you do, of course, need to remember that not all browsers support these properties yet. The CSS3 skew transform can execute as the user interacts with your pages, and you can optionally include a transition within the effect....