background preloader

How to Create a Contact Form using HTML5, CSS3 and PHP

How to Create a Contact Form using HTML5, CSS3 and PHP
Personally, I feel it is important to be aware of the [positive] impact HTML5 will have on forms and the way they will function in years to come. Realistically, we can’t implement all of the new features today, but you don’t want to be lagging behind the rest of the industry when these features finally become widely supported. Having said that, this tutorial will be focusing on the new HTML5 features that are already supported by all the major browsers, or that at least employ graceful degradation for the browsers that are still trying to play catch up. 1. The Design First of all, this is not a Photoshop tutorial. 2. Now we have a design to work towards, we’re going to form the structure of the contact form using HTML5. Doctype Okay, now we’ve got our blank PHP document, let’s start with the appropriate doctype, which is a lot simpler in HTML5 than previous versions to say the least! <! Yep, that’s right. Just to compare, here’s the doctype for XHTML; <! Structure <! That’s right. The Form 3. <?

Build Internet 50 New Useful CSS Techniques, Tutorials and Tools - Smashing Magazine Advertisement These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing! In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. CSS Techniques Now Playing: transitions and animations with CSSTim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. CSS3 range slider, checkbox + radio buttonA demo of HTML input elements made with CSS3. The Simpler CSS GridWhy restrict your layout so that it can fit into this 960gs?

Bolt Bolt is designed to be flexibly sized and responsive, and to progressively enhance. Base classes concentrate on layout techniques, and optional vertical rhythms and horizontal grids are included. Bolt does not give you any colour. Bolt prefers CSS over JavaScript. Bolt's classes come with behaviour attached. Events are delegated, so there are no plugins to call to make these interactive elements work. <a href="#time">Time is an illusion. Try it: Time is an illusion. Lunchtime, doubly so One page website Once in a while, something new shows up that has the power to shake the world and stimulate all people to keep moving instead of stay still, this quote applies for practically every instance in life and business. A while ago, Nike released an astonishing website named “Nike Better World” to support all the athletes around the world; the design itself was brilliant and it generated a lot of positive reviews, but the real breakthrough came thanks to the navigation system that these guys made, a fantastic vertical Parallax system. On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS. View Demo Download Source This tutorial is a practical exercise, created with the only intention of explore the functionality behind the “Nike Better World” website, all the credits belong entirely to Nike. How does it work? Understanding the “Nike” effect Step 1: Insert the HTML Step 2: Working with jQuery

blog › [Bases de CSS3] transition et animations Avant de commencer le tutoriel, ile me semble important de rappeler la structure du langage CSS, chose que je n'ai pas faite dans l'article précédent. Voici donc un petit schéma explicatif : h4>Transition Compatibilité : Firefox (-moz-), Chrome et Safari (-webkit-), Opéra (-o-). Cette propriété CSS3 permet de manière simple de créer une transition entre deux états d'une ou de plusieurs propriétés, par exemple un changement de couleur ou de largeur. transition : [propriété cible] [durée] [fonction] [délai]; transition-property : [propriété cible]; // none | all | propriété cible transition-duration : [durée de l'animation]; // Xms | Xs transition-timing-function : [fonction]; // voir ci-dessous transition-delay : [délai de lancement de la fonction]; // Xms | Xs transition-duration est la valeur permettant de spécifier le durée de l'animation en secondes (1s, 2s, ou 3s par exemple) ou en millisecondes (100ms, 200ms ou 300ms par exemple). linear - animation standard linéaire.

The Incredible Em & Elastic Layouts with CSS Almost a year ago, Ty Gossman over at Stylegala asked me to write an article about elastic layouts. The best I could do was a quick email between work. I always meant to come good on that. This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm. What is an Elastic Layout? An elastic layout scales with users’ text size. More accurately, an elastic interface scales with browser text size—commonly a default of 16px—which users can change if they wish. Elastic design uses em values for all elements. They are calculated based on the font size of the parent element. See the elastic layout example. For other live elastic examples, visit Dan Cederholm’s beautiful and elastic SimpleBits, or resize text on this site. Introducing Em, the Elastigirl of CSS The em is a unit of measurement in typography. Getting Started N.B.

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials 1911 shares 8 Must-have Cheat Sheets for Web Designers and Developers As a web designer or developer, it’s nearly impossible to remember multiple programming languages, frameworks, and keyboard shortcuts to various applications. This is where cheat sheets can be a life saver. Most cheat sheets are designed to be printer friendly, so you can have them laying around on your desk as quick reference cards. Read More 2705 shares Photoshop CS6 Cheat Sheet Photoshop is one of the preferred tools of web designers, and like any other tool that is used over and over, it’s important to optimize one’s workflow by using keyboard shortcuts.

24 Best CSS3 Animation Demos and Tutorials Today we are showcasing a post on CSS3 Animation featuring some of the best and most awesome functions. CSS3 is full of amazing features that you can take advantage of that you may not know about. That’s why we are going to go over some of those CSS3 features that are less explored. Some of these CSS3 Animation effects you will find below may not be visible to you if you are using the Firefox browser. Display social icons in a beautiful way using CSS3 The example works with all -webkit based browsers (Safari and Chrome), but also in Firefox 4. More on Display social icons in a beautiful way using CSS3 Advertisement 3d animation using pure CSS3 The perspective property is what we need to create the 3d effect. More on 3d animation using pure CSS3 Colorful Clock Make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year. More on Colorful Clock Colourful rating system with CSS3 We’re going to do a relatively simple jQuery tutorial. jQuery DJ Hero

Don’t use ID selectors in CSS | screwlewse.com Posted on: July 28, 2010 / Lately I have been testing out performance among css styles and I found that some of my very smart friends, started asking,”why aren’t you testing using IDs for the unique sections of the page?”. This wasn’t a hard answer: The element is not re-usable on that page.This is the begining of a downward sprial into specificityUsually, IDs refer to something very specific, and abstracting would be toughAny performance gains picked up by using id, is negated by adding any other selector to the left fo that id Lets delve into each of these issues at more length The element is not re-usable on that page: IDs are programmer’s equivalent to singletons. This is the beginning of a downward spiral into specificty: There are two main ways of overriding in css. The cascade: (anything further down the css, can overwrite the previous css rules)Specificity: the idea of creating weight by using weighted selectors. Above is real code from one of my own work from 2005. On the other hand:

LESS « The Dynamic Stylesheet language

Related: