CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3
Web Font Specimen
CSS3 Shadows
CSS3 nous apporte des brides du côté obscur de la force en proposant de gérer des ombres diverses et variées directement depuis votre feuille de styles : blocs et textes sont concernés avec également la combinaison de plusieurs ombrages pour obtenir des effets avancés. Les ombres portées prennent aujourd’hui une place importante dans le web design et permettent la mise en exergue d’éléments importants, ou l’ajout d’une touche de profondeur dans vos graphismes. Il est possible de dire adieu aux images superflues uniquement destinées à la réalisation d’ombres portées ; adieu à la soupe de <div>, <span>, et autres structures en tableau pour réaliser des effets graphiques riches. Deux types d’ombres existent en CSS : les box-shadow, les ombres ajoutées aux éléments de type bloc, les text-shadow, les ombres ajoutées au contenu textuel. Il est évident, comme tout effet graphique, que l’utilisation des ombres doit être faite avec parcimonie et ne pas gêner l'utilisateur. Syntaxe de box-shadow
CSS maintenables
Kaelig Deloumeau-Prigent (252 pages, Éditions Eyrolles / Design web, ISBN-13: 978-2212134179) Encore un nouveau livre sur CSS me direz-vous ! Certes, mais celui-ci capte enfin un public différent. Il se pose en quelque sorte comme un chaînon manquant entre les livres de CSS purement dédiés aux designers et les autres plus techniques. Le sous-titre de l'ouvrage ("avec SASS et Compass") porte à confusion d'entrée de jeu, car... il ne s'agit pas d'un livre sur SASS et Compass. Le reste de l'ouvrage traite plus généralement (et heureusement selon moi) de bonnes pratiques, de conventions, d'outils et d'astuces. Mon ressenti sur ce livre est extrêmement positif : pour moi, il s'agit ni plus ni moins du livre que j'attendais depuis très longtemps dans le domaine des CSS; thème déjà très souvent traité mais rarement voire jamais dans un contexte de production et de bonnes pratiques. Sommaire
CSS - Feuille de style - Cours CSS - Cascading Style Sheets
Developer Network
CSS3Pie, styles CSS3 pour Internet Explorer
CSS3 pointe son nez apportant son lot de propriétés de mise en forme très pratiques. Certaines fonctionnalités de CSS3 ont aujourd’hui un bon support dans les versions récentes des navigateurs (Firefox, Chrome, Safari, Opera… mais aussi Internet Explorer 9 et le futur IE10), mais bien entendu pas dans les anciennes versions d’Internet Explorer qui restent très présentes sur le marché. Comment gérer cette situation? Sommaire Dans l'astuce « Utiliser CSS3 aujourd'hui, outils et ressources » sont proposés un certain nombre d'outils permettant de pallier le manque de compatibilité des anciennes versions d'Internet Explorer avec les standards CSS3. Qu'est-ce que CSS3 Pie ? CSS3 Pie a pour but de rendre quelques styles CSS3 compatibles avec les versions 6, 7, 8 et 9 d'Internet Explorer. un simple fichier *.htc une propriété css behavior. Un fichier *.htc ? En pratique, voici ce qu'il suffit de faire. Bien entendu toutes les propriétés CSS3 ne sont pas prises en charge… Styles pris en charge
rowanmanning/pigeon
Créer un volet coulissant en CSS3 avec :target et transition
Alors que CSS3 continue son chemin dans les validations, les réécritures et la prise en charge par les navigateurs, il y a des choses qui commencent à être plutôt bien implémentées par la plupart de ces derniers. La pseudo classe :target et la propriété transition - que nous avons déjà mis à l'épreuve dans ce long tutoriel sur la création d'un slideshow en CSS3 - vont être nos armes pour ce tutoriel. Qu'allons-nous produire ? Le but de ce tutoriel est de créer un volet caché dans un coin de la page que nous allons pouvoir révéler en cliquant sur un lien. la démonstration Structure de base Il va nous falloir une structure HTML (vous vous en doutiez, j'imagine). <div id="volet"><p>Lorem Elsass ipsum réchime amet sed bissame so libero. Une division, des paragraphes pour le contenu, et un lien pour l'action, nous n'aurons besoin de rien de plus ici. Styles de base Les styles proposés ici ont été mis à jour récemment pour correspondre au support navigateur. Passons à notre code CSS. Et voilà !
Asynchronous UIs - the future of web user interfaces
It's an interesting time to be working on the frontend now. We have new technologies such as HTML5, CSS3, Canvas and WebGL; all of which greatly increase the possibilities for web application development. The world is our oyster! However, there's also another trend I've noticed. Speed matters; a lot. Amazon: 100 ms of extra load time caused a 1% drop in sales (source: Greg Linden, Amazon).Google: 500 ms of extra load time caused 20% fewer searches (source: Marrissa Mayer, Google).Yahoo! Yet, despite all this evidence, developers still insist on using the request/response model. A good example of the problem is Gmail's 'sending' notification; how is this useful to people? As developers, we should optimize for the most likely scenario. The solution I've been working on this problem, specifically with a MVC JavaScript framework called Spine, and implementing what I've dubbed asynchronous user interfaces, or AUIs. The key thing to remember is that users don't care about Ajax. The result
