Canvas Rider. 12 Jquery & CSS3 resources and tutorials (+ 18) Two things a web designer needs are inspiration and knowledge about all the aspects of the "web process". New technologies are constantly being revised and renewed. We all know CSS3 by now, it's very powerful and if mixed with the awesomeness of Jquery and HTML 5, the results can be mind-blowing. Today we leave you with 12 resources, and then some, so you can use on your projects and give them that extra awesome twist.
Enjoy! HTML5 Custom Data Attributes (data-*) Have you ever found yourself using element class names or rel attributes to store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler? If you have, then I have some exciting news for you! If you haven't and you're thinking, Wow, that's a great idea! I implore you to rid your mind of that thought immediately and continue reading. Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. These new custom data attributes consist of two parts: Attribute Name The data attribute name must be at least one character long and must be prefixed with 'data-'. Attribute Value The attribute value can be any string. Using this syntax, we can add application data to our markup as shown below: <ul id="vegetable-seeds"> <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li> <li data-spacing="30cm" data-sowing-time="February to March">Celery</li> <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li></ul>
CSS Media Queries & Using Available Space. We've covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that. The CSS media query syntax for calling an external stylesheet is like this: You may be familiar with the media attribute, normally being "screen" or "print" or even a comma separated list, like "screen, projection". Likewise, you can use more advanced CSS media queries like: You may use as many media queries as you would like in a CSS file.
Example Let's say we have a fluid width design where the sidebar is 35% of the width of the page. In our example sidebar, we are going have a list of names of the Super Team which function as email links. Types. Full Page Background Image | Progressive. Cut the Rope. Media Queries. Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.
Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. Status of This Document This section describes the status of this document at the time of its publication. A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. Table of Contents 1. I.e. these are identical: 3.