background preloader

Bring Your Forms Up to Date With CSS3 and HTML5 Validation

Bring Your Forms Up to Date With CSS3 and HTML5 Validation
Let's look at how to create a functional form which validates users' data, client-side. With that done, we'll cover prettying it up using CSS, including some CSS3! First we want to conceptualize what our form is going to look like and how it is going to function. For this example, let's create a simple contact form that asks for the following information from the user: Name Email Website Message We want to make sure the user is entering the information correctly. Let's get an idea of what we want our form to look like by creating a rough mockup. As you can see, the following elements make up our form: Form Title Required fields notification Form labels Form inputs Placeholder text Form field hints Submit Button Now that we've specified which elements make up our form, we can create the HTML markup. Let's create our basic HTML markup from the form concept we created. Up to this point, our HTML file will still appear blank in the browser. Let's add some typographic styles to our form elements: Related:  html5 cssCSS3

Building HTML5 Form Validation Bubble Replacements -Telerik Developer Network I’ve written and spoken about HTML5 form validation over the last few years, and one of the most common questions I get is about bubbles. By bubbles I mean the UI controls browsers display validation errors in. Below you can see Chrome’s, Firefox’s, and IE’s implementations: For whatever reason, we developers (or more likely our designer colleagues) have a deep-seated desire to style these things. So what’s a developer to do? Warning: Don’t go down the path of building a bubble replacement lightly. Suppressing the Default Bubbles The first step to building a custom UI is suppressing the native bubbles. <form><input required><button>Submit</button></form><script> document.querySelector( "input" ).addEventListener( "invalid", function( event ) { event.preventDefault(); }); </script> The invalid event does not bubble (no pun intended), so if you want to prevent the validation bubbles on multiple elements you must attach a capture-phase listener. Building alternative UIs Wrapping Up

Splash and Coming Soon Page Effects with CSS3 CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations. We'll experiment with animation sequences and how to bring some life to some simple elements. View demo Download source CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations. We’ll experiment with animation sequences and how to bring some life to some simple elements. The cute shoe photos that we are using in the first demo are by lovely Amira Almajid and you can find the set here. Please note that the animations will only work in modern browsers that support them. In order not to bloat the tutorial, I’ve omitted the CSS vendor prefixes but you’ll find them in the downloadable files. Example 1 Please note, that I added a longer delay for this example to give some time to load the images. The Markup Ok, now the exciting part: the CSS! The CSS Example 2

CSS Transitions: A Simple Way To Delight Your Visitors We all want our designs to be functional and usable. We want visitors to easily complete tasks and find what they want. We’d also like to delight them and make their experience enjoyable and memorable.CSS3 transitions are an easy way to begin creating that delightful experience. I’ve built a demo of a navigation bar with and without transitions applied. Mouse over the menu items to see the difference transitions can make. With every post about css3 something needs to be said about browser support. Without IE support you might think that transitions aren’t ready for prime time just yet, but this is one area where you can safely use css3 even if it won’t work across all browsers. In his book CSS3 For Web Designers, Dan Cederholm points out that we can divide the visual experience on websites into two categories: critical — branding, usability, accessibility, layoutnon-critical — interaction, visual rewards, feedback, movement How to Use CSS3 Transitions transition-property transition-duration

HTML5Pattern HTML5Pattern is a source of regularly used Input-Patterns. If you know a new or a better pattern, then please leave a comment. Thank you! Pattern Support Firefox 4+ & Chrome 5+ & Opera 9.6+ & MSIE 10+ Your Browser Firefox 17.0 does support Input-Patterns. Please do not use a pattern for email validation. You can directly edit the above text, by clicking on it. To add a new case, you have to press Alt+Enter. You can save or send the pattern by just copying the link. Have fun!

How To Create a Pure CSS Polaroid Photo Gallery Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling. View the Demo Check out the demo to see what we’ll be building. Remember, because we’ll be using a couple of CSS3 properties, users with IE won’t see the complete effect, but fully supporting browsers such as Firefox and Safari will be treated to the whole experience. Start work by sourcing your images. Next, set up the basic page structure with a container centered on the page. Semantically lay out the collection of images in an Unordered List element, and wrap each image with an anchor to create a clickable link. Now we get start work on the CSS to style up the gallery. Give the images the Polaroid effect by adding a few styles to the anchors. To really add realism to the design, use the CSS3 box-shadow property to add some shading to the photos.

The HTML5 meter Element | CSS-Tricks The following is a guest post by Pankaj Parashar. Pankaj has written here before, last time about the progress element. Fitting indeed then to write again about the very related meter element. They are different both functionally and semantically, so read on! As defined by W3C, The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate. If you are like me, the above spec wouldn't make much sense until we dive deep into the implementation. Similar to its sibling - the progress element - a meter element must also have both a start tag (<meter>) and an end tag (</meter>). Content model The meter element uses the phrasing content model which means it can contain the text of the document, along with the elements that mark up that text, but there must be no (additional) meter element among its descendants. Attributes 1. 2. 3.

Grungy Random Rotation Menu with jQuery and CSS3 In this tutorial we are going to create a great menu with some content area that slides out. We use the grunge style because we want it to look a bit messy: the menu items are going to have a random rotation using the CSS3 property “transform”. So, when we load the […] View demoDownload source In this tutorial we are going to create a great menu with some content area that slides out. The content area is going to be visible in the beginning, but slide out and back in everytime another menu item is clicked. Please note that the rotation effect will not work in IE or any other browers that does not support standa..ehm CSS3 yet. The Resources Let’s first start with the images that we need for this tutorial. I used the first one which can also be directly found here: And background image for the menu items can be found here. The Markup The CSS The JavaScript

Dive Into HTML5 Introducing HTML5 - Bruce Lawson, Remy Sharp HTML5 continues to evolve, browsers are implementating at break-neck speed and HTML5 web sites spring up like flowers after rain. More than ever, you need to get acquainted with the powerful new possibilities in web and application design. That’s why we’ve crafted a second edition of this book to help you stay on top of current developments. This book shows you how to start adapting the language now to realize its benefits on today’s browsers. - new semantics and structures to help your site become richer and more accessible - applying the most important JavaScript APIs that are already implemented - using and controlling native multimedia - how to build more intelligent web forms - implementing new storage options and web databases, including both WebSQL and IndexedDB - how geolocation works with HTML5 in both web and mobile applications And this new edition adds: - even more detail on canvas, geolocation and offline storage options - ways to use HTML5 now in older browsers