background preloader

HTML5 Snippets

HTML5 Snippets
rounded button with gradient A simple shadow with CSS shapes, this is resizable and tiny. A lifted corner drop shadow, taken from This snippet will get your current geo location displayed on a google map Taken rom Paul Hayes: 3D Cube using CSS3 Transformation, more information here Glowing text using just two lines of CSS.

Related:  html5 cool stuff + code

the html5 switch Depending on who you talk to, you should have been using HTML5 months, nay years ago; or it's something you might be using in 2022. As usual the truth is somewhere between the glib extremes. There's no one-size-fits-all answer to questions of platform choice: you have to consider the benefits for your own scenario. But with HTML5 I'd say if you haven't switched yet, for most people it's probably time - there's a form of "switching" that will work for you.

Bulletproof @font-face syntax Let me introduce you to the best way to do your @font-face definitions: This is the Fontspring @font-face syntax. I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses. How to create slick effects with CSS3 box-shadow Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop's Blending options. But now, since CSS3 "hit the charts", you don't need Adobe's design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. View demo box-shadow property Thebox-shadow property allows you to add multiple shadows (outer or inner) on box elements.

The Ultimate HTML 5 Cheat Sheet Designing websites can be quite a jungle sometimes since, with time, the number of languages at our disposal has gotten so much greater. Way back when things were new and the Internet only had a couple of million websites (if you could even call them that comparing them to today’s media experiences), HTML was the only language that you needed to master in order to put up a text site to showcase yourself. Well, it was a heck of a lot simpler back then, but since then, the flora of languages to use has grown to what would take you about a library to learn. So which one should you choose if you want to be sure to grab the most inner core functions of the Internet?

Simple Table CSS3 Premium Pixels is an excellent design resource run Orman Clarke. He publishes slick photoshop files every few days, including this Simple Table design. For a little challenge I decided to turn his Photoshop file into actual code using CSS3 and a bit of JQuery. You can see a demo here or download the code (feel free to use in your own projects, no attribution necessary). The goal was to have a cross browser compatible version that looked good in Chrome, Firefox, IE8, IE7, and IE6. Internet Explorer doesn’t support CSS3 rounded corners, gradients, or shadows, but it is still nice and functional. Fokus - Emphasized text-highlighting using JavaScript It's that time of the year again! In late 2010, having spent five great years working at Fi, I was determined to change up my professional life. After interviewing with Qwiki and accepting the position of Lead Interactive Developer it was decided; I was moving to San Francisco! It took a good few months of hard work to sort out all of the practicalities but it was definitely worth it now that I'm here. Fortunately I've still been able to keep this site updated and worked on a variety of projects and experiments throughout the year.

Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius By Henrik Helmers Introduction Previous articles have covered the basics of CSS3 transitions and 2D transforms and CSS3 borders, backgrounds and box-shadows; refer to those articles if you need to read up on the basics of using these properties. This article takes things further, showing how to use these properties to create beautiful UI elements without the use of any images, JavaScript or Flash. This last line highlights the real beauty of CSS3 — many of its features are designed to save you time otherwise spent creating and updating graphics in Photoshop. It makes techniques such as drop shadows and animated UI elements accessible to web developers and designers without scripting smarts or mad Photoshop skills.

HTML5 elements in Internet Explorer without Javascript Huh? Section element? I don't see no stinkin' section element. You must be mistaken, pal. What? No, I don't believe in them. How To Create Loading Spinners Using CSS3 Animations Giving feedback to the visitors is a massive part of the user experience, if the user clicks a button they would expect to see something happen. An example of this is uploading an image to a website, it may take some time for the server to upload the image, but when the user clicks the upload button they would expect the page to do something. If the page doesn’t give any feedback that the image is currently being uploaded, the visitor could get impatient and either repeatedly click the upload button or navigate away from the page before the upload is complete, for this reason you should always give feedback to your visitors. A common approach is to use a spinner graphic which is either done with a gif image or with Javascript. But in this tutorial you are going to learn how you can create this same effect by using just CSS3 animations.

20 Awesome HTML5 Website Templates Which Are Free A lot had been share about HTML5 on the Internet, as it’s one of the latest trending topics.. It is considered as the next big thing. HTML5 is another stepping stone to make the web experience more enjoyable and gratifying for its users. A lot of people out there are trying to learn as much about HTML5 as they possibly can, because it’s going to come loaded with a bunch of new features that webmasters can employ to make their website that much better. That’s another reason why so many people out there are looking for HTML5 templates that they can use on their blogs and websites.

Easy HTML5 Template I’ll be the first to admit that when I see a default template like HTML5 Boilerplate, it brings about a swirl of emotions. On the one hand, I’m ridiculously intimidated by the incredible amount of knowledge and experience that’s been collected into one place for the benefit of front-end developers. So much so, that I wonder what I’m even doing in this industry, because it reminds me of how far behind I am.

CSS Font and Text Style Wizard CSS Font and Text Style Wizard Welcome to the CSS Font and Text Style Wizard, brought to you due to the popularity of the HTML and CSS Table Border Style Wizard. Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. Understanding HTML5 Content Models Earlier this week we looked at the new text-level and structural semantic elements html5 provides. Today I want to continue and talk about content models in html5, specifically the new outline algorithm for creating hierarchy. Once again much of the content below comes to me via Jeremy Keith‘s book HTML5 for Web Designers, which I highly recommend. Unfortunately some of what we’ll look at below isn’t yet supported by browsers. Some of it will be, but not all.

Related:  Code Snippets for Webintensities