70 Must-Have CSS3 and HTML5 Tutorials and Resources CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg. Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. Many of the techniques discussed are already supported to some extent in some some modern web browsers (Safari and Firefox have the most extensive support), so you can get started right away. CSS3 Tutorials and Resources Get Started with CSS 3 – A basic guide to using CSS3. Cascading Style Sheets Current Work – Details the progress the W3C is making on the CSS3 standard. Border-image: Using Images for Your Border – A guide to the new CSS3 function for adding image borders. Overview of CSS3 Structural Pseudo-Classes – A handy reference chart of structural pseudo-classes in CSS3. HTML 5 Resources
A brief introduction to Opacity and RGBA The Opacity declaration sets how opaque an element is. An opacity value of 1 means the element is fully opaque; an opacity value of 0 means an element is not at all opaque, i.e. fully transparent. Webkit, Gecko and Opera browsers all support Opacity. The RGBA declaration allows you to set opacity (via the Alpha channel) as part of the color value. This is supported in Webkit and the first alpha of Firefox 3. The key difference between the two declarations is this: Opacity sets the opacity value for an element and all of its children; RGBA sets the opacity value only for a single declaration. Here’s an example. background-color: rgb(0,0,255); opacity: 0.5; The background color of the second div has been set to blue, and the opacity set to half. background-color: rgba(0,0,255,0.5); The background color has been set to blue, and the opacity set to half.
How To Create 3D Text using CSS3 I am very happy to see, CSS3 finally eliminates the use of Photoshop in terms of giving text shadows. I was just trying my hands on text shadows in CSS3 and thought of creating 3D text by giving multiple shadows and got something wonderful. Earlier Text Shadows were announced since the beginning of CSS2 however, the only browser that was supporting this functionality was Safari. If you talk about today’s condition, almost all the browsers except Internet Explorer are running Text Shadows successfully. I agree that we would not be able to use these shadows for clients for next few years because of cross browser compatibility however these features can help you push the boundaries of modern Web Technology today. We do have certain jQuery plug-ins available like IE CSS Shadow that can create shadowed text completely compatible with Internet Explorer. Let’s learn how we create 3D text using CSS3. HTML code written below will land up in between the body tag. Let’s Download and Tweak with it.
RGBA colors Home / CSS3 Previews / RGBA colors CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this property-name stands, for, you guessed it: alpha. So far, this has only been implemented in Safari 3, and works in the latest Firefox 3 pre-alpha’s. See the example: See the difference in the code between the first row, which uses RGBA color values, and the second, which uses RGB values: And the second one: Read here how RGBA differs from opacity.
Great Tools, Resources and Guides for HTML5 and CSS3 It is very important for web designers to update and upgrade their website from time to time to boost the effectiveness of their site and most especially to protect their business from destructive attacks done by hackers. With the development of HTML5 and CSS3 technologies, web designers and web developers are now able to improve their websites effectively and easily as these tools bring many new syntactical features. HTML5 is a better version of HTML4 that is helpful in building websites. It includes features like separate background threads to do processing, video implantation without separate plug-in or codec, canvas element to present graphics and images on the fly, can have applications to access email offline, etc. CSS3 is the latest style sheet format used for adding style to web pages in different markup languages. Here is our list of Great Tools, Resources and Guides for HTML5 and CSS3 that can help you master the new features of these new technologies. font_dragr Modernizr
40 + Générateurs de CSS De temps en temps on vous parle de générateur de css. Pour alléger un site, optimiser son code ou créer quelques éléments graphiques, les générateurs ne manquent pas. Web3mantra liste donc 40 outils de développement css pour vous faciliter la tâche. La liste est assez grande et finalement quelques services se répètent. Vous aurez donc la possibilité de choisir celui avec lequel vous vous sentez le plus à l’aise et que vous trouvez le plus efficace, approprié à vos besoins. On y trouve surtout: des générateurs de « grilles », des services d’optimisation de css et des générateurs de blocs et d’éléments (tels que les bords arrondis ou les dégradés). On espère en tout cas que cette liste vous sera utile ! - Parcourir la liste
Containing Floats (Complex Spiral Consulting) As powerful and useful as they are, floats can make for tricky layout tools. Chances are that you may have seen something like the situation shown in Figure 1, which is accomplished with just two div elements, each with a floated image inside it. Figure 1. That's not right! This is probably not what the author had in mind, but given the styles used, it's the correct layout. That's all it takes. This is not a bug. Understanding the Problem So when in the name of all that's good and right would authors want floats to stick out of their containing elements? Figure 2. <p> ...text... The practice of flowing text around an image goes back a long, long time. Figure 3. So now we can see why it's important that floats stick out of their containing elements. Figure 4. That's something designers would never have accepted. A Clear Solution If floats are to be used in creating non-table layouts, then there needs to be a way to make their containing elements stretch around them. Figure 5. Figure 6.
blockquote (HTML element) Description The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs (which you’d mark up using nested p elements). The W3C recommendation states that web page authors should not type quotation marks in the text when they’re using blockquote—we can leave it to the style sheets to take care of this element of presentation (just as it should be when the q element is used for short, inline quotations). By default, most browsers’ basic built-in style sheets render blockquote content with left and right indentations, as shown in Figure 1. Note that XHTML allows the blockquote element to contain only other block-level elements (script element is also allowed). Figure 1. Example The example below is a quote from an as yet unidentified source who despairs about the stupidity of stock photography: Use This For … Compatibility
Tips to Write Better CSS Code CSS is a language that is not difficult to master, but if you use it for a large project, it can be very difficult to manage if you do not follow a defined approach while writing CSS code. Here are few tips that will help you write better and easy to manage CSS code. 1. Don’t Use Global Reset Using global reset to remove default margin and padding from all HTML elements is a strict no-no. Not only it is slow and inefficient way but you’ll have to define margin and padding for each element that needs it. Better 2. Though CSS hacks might be useful to maintain consistent look of the website over older browsers like IE6, but they can be problematic for newer versions of IE as newer versions like IE8 do support CSS standards to a good level and using hacks might break out the layout. For information on conditional comments, refer to the quirksmode article on CSS Conditional Comments 3. 4. 5. You can combine multiple CSS selectors into one if they have common style definitions. Not Good 6. 7. 8.