HTML5 is the new DHTML - The Easy Designs Blog In a recent post, Adrian Roselli ranted a bit about the awkward position we are in with regard to HTML5. Here’s a taste: The trend continues where I speak to clients, vendors, young developers fresh out of college, and even the teachers/professors who instruct them and they don’t understand that HTML5 and CSS3 aren’t the same specification. I have repeatedly shown an HTML 4.01 site with CSS3 to explain that they are each distinct specifications which can be applied in different combinations of different versions. It’s true: For all intents and purposes, “HTML5” has become a meaningless catch-all marketing phrase defining a platform rather than a specification. This all probably started with the fact that “HTML5,” as a spec, was always more than a markup language. So yeah, from the beginning “HTML5” has been a bit of a misnomer, but the final blow to HTML5’s usefulness as a term—to me at least—came in the form of Apple’s “HTML5 Showcase.” Ok, so what’s the problem with all of this?
Textarea Auto Resize On a current project, I was trying to find a way to auto-resize a textarea according to some content that would be loaded in dynamically via Ajax. I didn’t know the height of the content and the textarea element doesn’t resize naturally like other HTML elements, so I needed to update the height of the element with JavaScript each time the content changed. It seemed like a simple task. After doing a search to see what types of plugins and scripts were floating around to do this, the examples I found seemed a little overly complex. While most solutions seemed to incorporate some complex math calculations, I thought of a better way. Using a Hidden Clone Element A <div> element will naturally stretch to fit the height of its content (assuming no floats or absolutely positioned elements are involved). The Code One of the keys to this solution is the CSS. First here’s the CSS for the textarea: Take note that I’ve added a separate class with overflow: hidden, to prevent scrollbars from appearing.
Using the HTML5 Geolocation API Knowing the location of your users can help boost the quality of your website and the speed of your service. In the past, users had to actively input their location and submit it to a site, either by typing it, using a long drop-down list, or clicking a map. Now, with the HTML5 Geolocation API, finding your users (with their permission) is easier than ever. Figure 1 shows a website using geolocation to determine the location of a user, represented in latitude and longitude. Figure 1 Showing a User’s Location with the Help of Geolocation Imagine how useful your site could be if it provided online timetables for all public transportation in a particular city. Scenarios for Using the Geolocation API Here are 12 simple scenarios that illustrate how a website can accommodate users and customize their experience by taking their location into account. Public transportation sites can list nearby bus stops and metro locations.Late night out? How Geolocation Works Three Simple Functions
Simulate Realism with CSS3 16th February, 2010 Tom Kenny Tutorials CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so. However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Here are a few examples of how CSS3 can improve the web. Polaroids – View Demo Despite not being around today, polaroid images are still iconic and because of this is still a great way to display photos. A subtle shadow gives the impression that is sitting on a flat surface and by scaling and increasing the size and positioning of the shadow on a hover state we can create the illusion that it has been raised slightly from the surface. Buttons – View Demo Why do buttons exist in web design?
Using HTML5 to Determine User Location Geolocation is one of the most exciting features offered by HTML5. Using some relatively simple JavaScript code, you can create Web applications that determine various aspects of the user location, including longitude, latitude and altitude plus more. Some Web applications can even provide navigation functionality by monitoring the user position over time, integrating with map systems such as Google Maps API. As with all HTML5 functions, you cannot yet rely on browser support. Where browser support exists, it varies in depth and consistency. Essentially, you need to provide alternative functionality for users whose browsers do not fully support HTML5. In this tutorial we’ll run through the basics of establishing user location. HTML5 Web Page Use the following code to create an outline for your HTML5 page: We will place the JavaScript Geolocation functions in the page head script section and some basic HTML elements for testing and demonstrating the functionality in the body section.
How to recreate the new e-bay site scrolling effect In this tutorial we will try to recreate the scrolling effect you’ve seen on the new e-bay site. We’ll create a simple responsive one-page site presenting the beauty and benefits of lavender. No javascript needed – we will use only css. Step 1 – Prerequisities We will need 3 background images, that will stretch to full page width. Mine are about 1800px x 1200px. Step 2 – Html The markup is simple. <! Step 3 – basic css The wrapper class is defined as follows. Since we want each section and the header to behave responsively, we’ll use only percent units. The value of 4.16667% corresponds to 50px when the wrapper has its maximum width. You’ll find the complete stylesheet in the download files. Step 4 – the scrolling effect We don’t use any Javascript, our scrolling effect is obtained purely with css. We just have to assign the background image to each section Step 5 – last tweaks Since background-attachment:fixed is not supported in mobile Safari we’ll add the following media-query And that’s it!
Open Source HTML5 Charts & Graphs – Flotr2 Flotr2 is an open source library for HTML5 canvas charts and graphs which is a fork of the popular flotr without the dependency of Prototype JS framework and has many improvements. The library is framework independent and has support for line, bar, candle, pie and bubble charts. There are lots of customization options offered like the ability to define titles, subtitles, colors, labels on/off and so many others for each and every possible variable. Flotr2 outputs are interactive, they can be set to respond to the actions of the user. And, they can be extended with plugins (there are already several ones that can add interactions, new decorations, etc.). Charts and graphs work in all major browsers (including IE6) and they are mobile compatible.
The amazing powers of CSS Yesterday at the office, we were coming up with strange and magical CSS tricks. Take this one for instance, it makes empty links very visible: Check out the live example at jsFiddle You can also style absolute links differently from relative links: Check out the live example at jsFiddle If you want to have a different style for links pointing out of your domain, you can use the :not() selector. Check out the live example at jsFiddle Just to remind you that you’re not limited to styling links, here’s how to make all PNG images inverted: Moving on from attribute selectors, did you know that you can make the document head visible, along with the other elements there? Or that you can use the awesome power of CSS attr-function to fill in the :after and :before content? Check out the live example at jsFiddle Note that attr() reads in the attribute values of the matching element, so if you use it for #foo:before, it reads the attributes from #foo.
23 Useful Online HTML5 Tools Are you aware that HTML5 is captivating the web by leaps and bounds? This new language is used for displaying the content on net. One can also add in audios, videos, various fonts, web graphics, drag and drop, animations to make your pages more colorful and informative. The online sprite tool box compresses your image and puts your image in a sprite. The pattern generator tool is good for web designers to make header backgrounds and pages. The online HTML5 Tools audio maker tool brings in new features of the audio. Sketch in 3D With Animating Lines on HTML5 canvas Spritebox – Create CSS from Sprite Images font dragr – Drag and drop font testing Patternizer – Stripe Pattern Generator Tool XRAY: look beneath the skin Automatoon- Easy Animation For The Web HTML5 Audio element maker SVG to HTML5 Canvas Converter Rendera – Online HTML5 Editor CanvasLoader Creator HTML5 File Upload with Progress Making a Beautiful HTML5 Portfolio Create a Stylish Contact Form with HTML5 & CSS3 HTML 5 Outliner