background preloader

HTML5/CSS3 Cheatsheet

HTML5/CSS3 Cheatsheet
Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently (early 2011) usable across a number of web browsers, chief among them Firefox, Safari, Chrome, Opera and the upcoming IE9. For many of the CSS3 examples, older versions of Internet Explorer are the lone holdout with a limited number of workarounds, however these features degrade gracefully and may still be useful on new projects as long as this limitation is kept in mind. Please note: With the exception of SVGWeb, no Internet Explorer workarounds have been included on this page - most of the examples will therefore not work in IE6, IE7 or IE8. And if you want to discuss any of the code below or leave a correction or suggestion, you can leave comments below. Thanks! Updates Rounded Corners Lorem ipsum dolor sit amet, consectetur adipiscing elit. Rounded Corners Redux: Circles Box Shadows Gradients Linear Gradient Angled Linear Gradient Angled Linear Gradient with Color Stops Text Shadows Border Images Column Layout Related:  Projet

CSS Hacks Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it's best to know what your options are and weigh the consequences appropriately. The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences. In-CSS hacks Up One of the drawbacks of conditional comments is that they require changes to the HTML source. Easy selectors Most in-CSS hacks deal with selector bugs. IE 6 and below * html {} IE 7 and below *:first-child+html {} * html {} IE 7 only *:first-child+html {} IE 7 and modern browsers only html>body {} Modern browsers only (not IE 7) Recent Opera versions 9 and below

Author Code LESS Is More: Make Your CSS Coding Easier with LESS Home : Articles : LESS Is More: Make Your CSS Coding Easier with LESS Tutorial by Matt Doyle | Level: Intermediate | Published on 18 May 2011 Categories: This tutorial introduces LESS, a dynamic stylesheet language that makes it quicker and easier to write CSS. In recent years, CSS has matured into a very powerful way to style web pages. This is great, but one drawback is that CSS stylesheets are becoming longer, more complex, and harder to manage. For this reason, various dynamic stylesheet languages are starting to spring up. In this article you'll learn how to use LESS, an increasingly popular dynamic CSS language that you can use to streamline your CSS coding, saving you time and effort. What is LESS? LESS is a dynamic stylesheet language that extends the standard CSS syntax. The standard LESS compiler is written in JavaScript, so you can just include it in your web pages along with your LESS stylesheet. LESS is easy to understand, install and use. Installing LESS in your web page .

Apprendre le HTML5 – Tutoriel Complet Tutoriel complet pour apprendre le HTML5 – Quelque soit votre niveau, ce cours est fait pour vous. Que vous débutiez dans la création de site internet ou que vous maitrisez déjà le xHTML et / ou le HTML 4.01, découvrez toute la puissance du HTML5. Chaque chapitre est rédigé de façon concise et compréhensible par tous. Ils sont divisés en thèmes consultables indépendamment suivant votre niveau et vos connaissances. Chaque point détaillé est inclus dans un exemple concret et certains sont accompagné de démo consultable en ligne. L’ensemble du cours – en constante évolution - est accessibles à tous quelque soit votre niveau : Un problème, une suggestion ou une remarque : Poser votre question ou venez en discuter sur notre forum. Maintenant que vous savez à quoi ressemble le HTML5 et ce qu’on peut faire avec, passons aux choses sérieuses. Voici les bases des langages de développement web HTML et CSS. Le HTML et le CSS sont deux langages complémentaires. [cadrePTQ]

Internet Explorer box model bug The difference in how width is interpreted between the W3C and Internet Explorer box models The Internet Explorer box model bug refers to the way in which earlier versions of Internet Explorer handle the sizing of elements in a web page, which differs from the standard way recommended by the W3C for the Cascading Style Sheets language.[1][2] As of Internet Explorer 6, the browser supports an alternative rendering mode (called the "standards-compliant mode") which solves this discrepancy. However, for backward compatibility reasons, all versions still behave in the usual, non-standard way by default (see quirks mode). Internet Explorer for Mac is not affected by this non-standard behavior. Background[edit] The Cascading Style Sheets (CSS) specification describes how elements of web pages are displayed by graphical browsers. Before HTML 4 and CSS, very few HTML elements supported both border and padding, so the definition of the width and height of an element was not very contentious.

Apprendre HTML5, CSS3 pour créer un site web À travers de nombreux exemples pratiques et cas concrets, Alsacréations vous propose de découvrir toutes les possibilités offertes par la conception web aux normes, HTML, XHTML, HTML5, les feuilles de style CSS et CSS3, le Web mobile, l'accessibilité, PHP, JavaScript, jQuery, etc. Tutoriel : Guide pas à pas Article : Document d'analyse ou de référence Astuce : Court stratagème toujours utile Cette page présente une sélection de nos ressources. Comprendre le positionnement en CSS Consolidez et élargissez vos connaissances des différents schémas de positionnement CSS actuellement utilisés ou avant-gardistes (flux, positionnement absolu, fixé, relatif, flottement, inline-block, modèle tabulaire). Alsacréations est également un organisme de formation agréé qui propose des enseignements web à Paris et Strasbourg : HTML et CSS (tous niveaux jusqu'à expert), Web mobile, jQuery, accessibilité numérique, Wordpress.

CSS-Tricks A.K.A The "Clearfix" hack. Just apply a class="clearfix" to the parent element. This is an improved version of the original, and documented here. Updated by Jeff Starr to be cleaner, based on the fact that nobody uses IE for Mac, which is what the backslash hack was all about. Updated again... Of course if you drop IE 6 or 7 support, remove the associated lines. Update August 2012: I'd say for the most part these days (if you only need IE 8 and up) this is fine:

Graphic design, PSDs & Free Icons for Download | PSDBlast.com Internet Explorer and the CSS box model One of the differences between Internet Explorer and standards compliant Web browsers that cause a lot of trouble for CSS beginners is the CSS box model. Since the box model is what browsers use to calculate an element’s total width and height, it is quite understandable that different browsers producing different results can be both confusing and frustrating. How the CSS box model works has been explained by others many times already. Nonetheless I still see questions related to the CSS box model on forums and mailing lists, and frequently encounter sites that expect browsers to use Internet Explorer’s non-standard way of calculating box dimensions. If you already know how the different box models work and how to handle Internet Explorer, there is nothing new for you here. The CSS box model diagram Here is a simple diagram showing how the dimensions of an element are related in CSS: The W3C Box model The IE Box model total width = margin-left + width + margin-right IE versions 1. 2. 3. 4.

Related: