Cross Browser HTML5 Progress Bars In Depth Update (March 9, 2012): I have updated this document to include styling information for Internet Explorer 10. Screenshots of HTML5 progress bars with different styles applied. Details given below. As a web application developer, progress bars are great when you want to show the user that some action is happening, especially when it can take a long time. They can be animated (like the one in Gmail does when it shows the user how long it is going to take for it to load and initialize), or static (like some shopping cart applications have to show the user how many pages it will take to check out an order). The HTML: Simple The HTML for a Progress bar is dead simple: <progress max="100" value="60"><strong>Progress: 60% done. Note that the HTML inside the <progress> tag is the fallback for browsers that do not support it. Note that: A progress bar can also have an “indeterminate” state, which happens when there is no value attribute. <progress max="100"><strong>Progress: 60% done. That’s Too Basic!
The CSS 3 Flexible Box Model This article about the Flexible Box Layout was written by Jérémie Patonnier, French open Web enthusiast. The flexible box model CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space. You can see the specification here. This box model is similar to the one used by XUL (the user interface language used by Firefox). Usually the flexible box model is exactly what you need if you want to create fluid layouts which adapt themselves to the size of the browser window or elastic layouts which adapt themselves to the font size. In this article, all my examples are based on the following HTML code: Distributing boxes: so what? By default, the traditional CSS box model distributes boxes vertically depending on the HTML flow. Horizontal or vertical distribution Reversed distribution Explicit distribution And what about flexibility? Box sizing
How to Create CSS3 Ribbons Without Images In my last post, Pure CSS3 Speech Bubbles Without Images, we saw how the :before and :after pseudo-elements could be used to create different effects. In this post we’ll use similar techniques to create a variety of ribbons. Ribbon effects are in vogue. Most designers use positioned images, but we’ll create them without using border effects and a single h2 tag: <h2>My Heading</h2> Let’s give this a little style and make it overlap the containing element: In this example, our #page has 50px of padding and a 1px border. Now we need to create the folded part of the ribbon which goes ‘behind’ the page. It’s looking great and that might be all you need. That’s nice, but what about a folded-back ribbon effect on the left-hand edge? The border color of the pseudo-elements much match the background color of the h2 since it actually appears above the title. Please see the demonstration page for an example which shows all three ribbon styles. Who needs Photoshop?!
Textarea Auto Resize On a current project, I was trying to find a way to auto-resize a textarea according to some content that would be loaded in dynamically via Ajax. I didn’t know the height of the content and the textarea element doesn’t resize naturally like other HTML elements, so I needed to update the height of the element with JavaScript each time the content changed. It seemed like a simple task. Using a Hidden Clone Element A <div> element will naturally stretch to fit the height of its content (assuming no floats or absolutely positioned elements are involved). Grab the content loaded into the textareaCreate an invisible clone divGive the clone the same width and typographical properties as the textareaPlace the content into the cloneGet the height of the cloneApply the height of the clone to the height of the textarea The Code One of the keys to this solution is the CSS. First here’s the CSS for the textarea: Here is the CSS I’ll be applying to the hidden clone element: What About IE6-8? Bugs?
Switching from Sass to Stylus - retype Switching technologies is a tricky thing, especially if you have already a lot of code. We had rewritten our css framework - which internally is called "BRICKS" - from pure css to sass in order to use some features like mixins, variables, conditionals, etc. in late 2009. We started development of GRADETY based on this and have built a lot of sass files on top of that, which all would have to be changed again if we should decide to now opt for stylus. We did it anyway and - so far - it works great. Stylus is an expressive, dynamic, robust css pre-processor developed by TJ Holowaychuck. It is in many ways similar to Sass - which made the switch easy - but built specifically for node.js. h1 font-size 30px color #d3d3d3 text-transform uppercase h1 font-size 30px color #d3d3d3 text-transform uppercase headline_mixin() .headline // define the mixin headline_mixin() font-size 30px color #d3d3d3 text-transform uppercase // use the mixin .headline headline_mixin() headline_mixin($siz=30px, $col=#d1d1d1)
Simulate Realism with CSS3 16th February, 2010 Tom Kenny Tutorials CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so. However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Polaroids – View Demo Despite not being around today, polaroid images are still iconic and because of this is still a great way to display photos. A subtle shadow gives the impression that is sitting on a flat surface and by scaling and increasing the size and positioning of the shadow on a hover state we can create the illusion that it has been raised slightly from the surface. Buttons – View Demo Why do buttons exist in web design? The recessed border also uses CSS3 gradient to get the full effect.
[challenge] Build your infographics in HTML5 and CSS3 I challenge you to create a beautiful CSS3/HTML5 infographic :) See at the end of the article for more infos. I see a lot of infographics around here, and most of them could be built only with web technologies (HTML5 + CSS3 + SVG). src: 12345; Most of the infographics we see are beautiful, but sooooo static. Interactive content You can change the style/content of an element if the user interact with it: :hover effects, fold/unfold on click, buttons to decide what to draw and select options (select a country, choose how to sort, ...), etc. Live data With an image, you're just showing a "snapshot" of your data at a certain time. Animations Make it move! Make it sexy Well, it's obvious, your infographic must be beautiful. Side effects Your infographic will be accessible (copy/paste!) Want to give it a try? Here is a random list of free data sets.
How to recreate the new e-bay site scrolling effect In this tutorial we will try to recreate the scrolling effect you’ve seen on the new e-bay site. We’ll create a simple responsive one-page site presenting the beauty and benefits of lavender. No javascript needed – we will use only css. Step 1 – Prerequisities We will need 3 background images, that will stretch to full page width. Step 2 – Html The markup is simple. <! Step 3 – basic css The wrapper class is defined as follows. Since we want each section and the header to behave responsively, we’ll use only percent units. The value of 4.16667% corresponds to 50px when the wrapper has its maximum width. You’ll find the complete stylesheet in the download files. Step 4 – the scrolling effect We don’t use any Javascript, our scrolling effect is obtained purely with css. We just have to assign the background image to each section Step 5 – last tweaks Since background-attachment:fixed is not supported in mobile Safari we’ll add the following media-query And that’s it! Terms of use :
Embellishing Your Google Map with CSS3 and jQuery Interactive maps are neat. It’s not hard to get a basic map embedded on your page, but Google provides a rich and easy to use API for embedding and decorating maps on your web page, so there should be no excuse for boring default maps. In this article I’ll share a technique I used recently to spice up the “Places to shop and eat” map on Vegan Melbourne, using a combination of the Google Maps API, jQuery animation, and some newer CSS effects. There are two options for creating a Google map overlay: KML, or custom javascript. For the other option, Google provides an API to add placemarkers and other features in real time to a map. The Basics To get started, we need to load up jQuery and the Google Maps API library. <! That doesn’t show a map yet, it just gets everything ready with the right libraries loaded and a div to place the map into. Every page with a map on it will need to start by actually creating a map object. From here, we can place various items on to the map. Behaviour Protips
The amazing powers of CSS Yesterday at the office, we were coming up with strange and magical CSS tricks. Take this one for instance, it makes empty links very visible: Check out the live example at jsFiddle You can also style absolute links differently from relative links: Check out the live example at jsFiddle If you want to have a different style for links pointing out of your domain, you can use the :not() selector. Check out the live example at jsFiddle Just to remind you that you’re not limited to styling links, here’s how to make all PNG images inverted: Moving on from attribute selectors, did you know that you can make the document head visible, along with the other elements there? Or that you can use the awesome power of CSS attr-function to fill in the :after and :before content? Check out the live example at jsFiddle Note that attr() reads in the attribute values of the matching element, so if you use it for #foo:before, it reads the attributes from #foo.
holmes.css - CSS Markup Detective What does it do? The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as: Missing required attributes on tags, such as name attributes on inputs (lots of these) Potentially improvable markup, such as links with href="#" Deprecated and Non-W3C Elements - see W3C.org's article on obselete tags Non-W3C Attributes - as above, just the most important ones since there are MANY Thanks to Anthony Mann, holmes now displays an informative error message when you hover over the element. How do I use it? Simply download a version of the CSS, minified or normal (with docs), and include a stylesheet link to it on your page. In terms of configuration, such as changing the flag colours: go nuts! Why should I use it? Remember too that these are just guidelines: if something is flagged but you can't change it for a good reason, don't worry about it :) Also use a validator if you want to be 100% sure. Browser Support