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. <? Related:  HTML + CSS

Building a Circular Navigation with CSS Transforms A tutorial on how to create a circular navigation using CSS transforms. View demo Download source In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique. Like I mentioned, there’s going to be some basic math involved, along with CSS transforms to create these styles. I also want to mention that credit for the original technique goes to Ana Tudor. So, without further ado, let’s get started! The Markup We’re going to be building a navigation, so we’ll start with a regular navigation structure. The icons we’re using in this demo are from Font Awesome. The Math Behind the CSS Transforms The best way to explain the math is to use a visual explanation instead of a written one. First let’s go over what a “central angle” is. 180deg / 6 = 30deg 360deg / 6 = 60deg And so on.

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?

Menus Menus are vertical by default. Minimal default styling and low-specificity selectors make them easy to customize. By default, menu items take up 100% of the width of their container, so you may want to limit the menu width or set the menu to display:inline-block. To create a horizontal menu, add the pure-menu-horizontal class name. <div class="pure-menu pure-menu-horizontal"><a href="#" class="pure-menu-heading pure-menu-link">BRAND</a><ul class="pure-menu-list"><li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li><li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li><li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li></ul></div> Selected and Disabled Items Mark a selected list element by adding the pure-menu-selected class to the list element. Dropdowns We recommend enabling submenus via JavaScript to enable accessibility. Even with JavaScript in place, you still might want to display submenus on hover.

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.

Responsive Column Layouts Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I’m going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. View Demo Responsive Column/Grid The Inconvenience of Using The First & Last Classes Normally we would add a .first or .last class to clear the margin space and float in the grid. Using nth-of-type The :nth-of-type(An+B) expression makes it very easy to clear the float and margin without having to add .first or .last class. .grid4 .col:nth-of-type(4n+1)= target every 4th .col element, starting from the first.grid3 .col:nth-of-type(3n+1)= target every 3rd .col element, starting from the first.grid2 .col:nth-of-type(2n+1)= select every 2th .col element, starting from the first Making it Responsive With Media Queries Changing From 4-column to 3-Column Making all columns Fullwidth (see demo)

Responsive Web Design: What It Is and How To Use It Advertisement Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course. In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The Concept Of Responsive Web Design Ethan Marcotte1 wrote an introductory article about the approach, “Responsive Web Design992,” for A List Apart. Transplant this discipline onto Web design, and we have a similar yet whole new idea. Adjusting Screen Resolution

html - Sliding An Entire Web Page Css-only Lavalamp-like Fancy Menu Effect This time let’s get inspired by the sliding menu effect, also known as the Lavalamp effect (ex. here). We’ll recreate it with pure css – using css3 transitions and the general sibling combinator selector. Below we’ll discuss three simple examples (make sure to see the demo first). Step 1 – Prerequisites We use a Unica One google web font. Step 2 – HTML For each of the three examples the html is the same. <div class="nav ph-line-nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a> <div class="effect"></div></div> The general sibling selector uses a tilde character combinator (E ~ F) and matches elements that are siblings of a given element. Step 3 – CSS – all examples Let’s start with the styles that are common for all three examples. The crucial part of the lavalamp-like effect happens here : When the mouse is over one of the < a > elements, the div.effect moves smoothly toward its middle. Step 4 – Into the details (1) Step 5 – Into the details (2)

Responsive Webfont Icons One of the major problems we face in responsive design is how to create icons that scale to the interface, not just for physical dimensions, but based on screen size and number of pixels per inch. Generally, images are used to add the icon inline using the img tag. Another common technique relies on a grid of the different icons and states — a CSS sprite — saved in a bitmap format, typically GIF or PNG. However, the more you scale these images up or down to respond to the context, the more the icon will appear distorted as the bitmap image’s anti-aliasing becomes increasingly apparent. Even worse, sprite-based icons can not be reliably or easily scaled. I think this why many designers and developers often avoid icons in their design, despite the fact that icons can be amazingly effective at communicating complex ideas in a limited space. To create responsive designs with scalable icons, I recommend replacing bitmap image icons with vector-based webfonts. Why Webfonts How Webfont Icons Work

Related: