5 Tools For Integrating HTML5 Video in Your Website This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here. No matter where you sit in the HTML5/Flash debate, the fact is, more and more mobile or low-powered devices are being shipped either without or with very minimal support for Flash video. While it's great that video hosting services like Vimeo and YouTube support HTML5 and that solutions for larger sites are available from places like Encoding.com and Brightcove, that still leaves users who want to host their own video content — but don't necessarily use a platform like Brightcove — in a bit of a predicament. Fortunately, there are a number of great free tools available that will let you serve video via HTML5 and also support Flash, in the event that a visitor's browser doesn't support HTML5 (or in some cases, the video codec being used with your HTML5 code). Here are a few of the solutions currently available that we particularly like: 1. 2. 3. 4. 5. Your Picks
CSS3 Solutions for Internet Explorer - Smashing Magazine Advertisement Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user. But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. In that case, I’ve collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use). Opacity / Transparency I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. The Syntax You really only need the second line, which works in all versions of Internet Explorer. The Demonstration This is the same element without the opacity settings. The Drawbacks Box Shadow
Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Advertisement In Modern CSS Layouts, Part 1: The Essential Characteristics1, you learned that modern, CSS-based web sites should be progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich. Now that you know what characterizes a modern CSS web site, how do you build one? Here are dozens of essential techniques and tools to learn and use to achieve the characteristics of today’s most successful CSS-based web pages. Just as in the previous article, we’re not going to be talking about design trends and styles; these styles are always changing. You can jump straight to: CSS3, the newest version of CSS that is now being partially supported by most browsers, is the primary thing you need to know in order to create modern CSS web sites, of course. There are too many CSS3 techniques to cover in a single article, let alone an article that isn’t just about CSS3! CSS3 Visual Effects Semi-transparent ColorAids in: progressive enhancement, efficiency
Using CSS3 Transitions, Transforms and Animation How to Make an HTML5 iPhone App By Alex Kessinger You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn. I don’t want to say that you should give up on the objective: you can get it eventually. You can create a native app that lives with all the other apps, and for the most part, it’s going to be a pitch-perfect imitation. You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript. I’ll show you how to create an offline HTML5 iPhone application. Offline? What am I talking about when I say "offline"? The app should be as functional as it can when it is offline, just like normal native mobile apps. This is a tutorial specifically for iPhones but most of these techniques apply to all phones that have HTML5-capable browsers. Prework About the App Application Cache <!
Efficiently Rendering CSS I admittedly don't think about this idea very often... how efficient is the CSS that we write, in terms of how quickly the browser can render it? This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices. Let's cover some of the big ideas they present, and then discuss the practicalities of it all. Right to Left One of the important things to understand about how browsers read your CSS selectors, is that they read them from right to left. ID's are the most efficient, Universal are the least There are four kinds of key selectors: ID, class, tag, and universal. #main-navigation { } body.home #page-wrap { } .main-navigation { } ul li a.current { } ul li a { } * { } #content [title='home'] When we combine this right-to-left idea, and the key selector idea, we can see that this selector isn't very efficient: #main-nav > li { } Even though that feels weirdly counter-intuitive...
Dive Into HTML5 Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks In recent years, screen resolutions are getting both bigger (large monitors) and smaller (in the mobile sense), as such, a static or fixed web layout may no longer be deemed completely viable. Maybe its time to change. Liquid, fluid and elastic layouts, have as many supporters as fixed layouts, despite what ever your feelings are on these styles of layouts, having some knowledge on adapting a site to liquid or elastic would most definitely be a plus in your arsenal. In this article you will find a collection of starter and basic fluid/liquid and elastic layouts, CSS frameworks and some useful tools to help you with your next project. Tiny Fluid Grid Inspired by the 1kb Grid, the Tiny Fluid Grid is a super simple fluid layout generator. Gridinator – Fixed, Elastic and Fluid Layouts The concept for GRIDINATOR is to allow for easy creation of custom, grid-based layouts. CSS Layout Generator – Fixed and Fluid Layouts Variable Grid System PageColumn.com Layout Generators – Fixed and Liquid
50 New Useful CSS Techniques, Tools and Tutorials - Smashing Mag Advertisement Over the last years we’ve got a pretty good understanding of what CSS does, how it works and how we can use it for our layouts, typography and visual presentation of the content. However, there are still some attributes that are not so well-known; also, CSS3 offers us new possibilities and tools that need to be understood, learned and then applied in the right context to the right effect. In this round-up we present fresh useful articles about less-known CSS 2.1 and CSS3 properties as well as an overview of recently published CSS techniques, tools and tips for designers and web-developers. Please stay tuned: next week we will present the second part of this article, featuring fresh CSS3 techniques, tools and resources. Learn About Obscure CSS Properties The Little Known font-size-adjust PropertyEver wanted to use fallback fonts on your CSS with different aspect ratios without them looking huge (or tiny)? Useful CSS Techniques Useful CSS Tools, Tips and Advice CSS 3, Please!
Hardboiled Web Design by Andy Clarke CSS3 Gradient Buttons Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). What Is So Cool About These Buttons? Pure CSS: no image or Javascript is used. Preview The image below shows how the button will display in different browsers. Button States normal state = gradient with border and shadow styles. hover = darker gradient active = gradient is reversed, 1px down, and darker font color as well. General Styles For The Button The following code is the general styles for the .button class. For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3. Color Gradient Styles The code below is the CSS styling for the orange button. For more details on CSS gradient, read my article Cross-Browser CSS Gradient. How To Use My Buttons?
7 New Essential CSS 3 Techniques Revealed | tripwire magazine There are several new and exciting functions and features being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc… This article presents 7 New CSS3 techniques that every web designer and developer should be aware of. CSS3 for sure will leads to greater flexibility and make effects that was previously complex and difficult to create much easier. Advertisement Be aware that CSS3 features are not yet accessed directly in most browsers and in some it is not even implemented at all, ex. Border Radius: Create rounded corners There are many ways to create rounded corners on boxes. The good news is that W3C has offered some new options in CSS3. See working example here. Anti-aliased Rounded corners with JQuery The “Curvy corners” script was originally developed by Cameron Cooke, I (Mike Jolley) have since modified it for use in JQuery. jQuery Canvas Rounded Corners jQuery Corners Tutorials:Rounded Corners Border Image Text-shadow box-sizing
Hack for CSS3 Supporting Browsers Hack for CSS3 Supporting Browsers Posted By Estelle Weyl on April 6, 2010 Implementing CSS3 features in your CSS file can be complex. You have to make sure that the CSS you’re feeding to FF3.5+, Chrome, Opera and Safari are not being read by FF2, IE6, IE7 and IE8. selector:nth-of-type(1n) To target all browsers that support CSS3, and hide from the IEs, simply add :nth-of-type(1n) to your selector. In the above example, we’ll end up with white text on a white background, with the letters being defined by the drop shadow. :nth-of-type(1n) basically means “every”. For example, I have a row of images with captions going across a page. The images look fine in IE, but look cool in FF3.6 Do make sure that the new CSS3 property is generally supported before using this hack. About The Author Estelle Weyl My name is Estelle Weyl.