25 techniques CSS pour ne pas avoir à réinventer la roue (partie 1) Les CSS permettent d’améliorer considérablement la présentation d’une page ou d’un formulaire. Beaucoup de développeurs se lancent dans des heures de réflexions et d’écriture alors qu’une technique qui a fait ses preuves sur le net est à disposition librement. Pourquoi aller chercher à réinventer la roue. Voici la première partie des techniques CSS qui peuvent être insérées sans aucun problème sur n’importe quel site. Barre de Menu Horizontale CSS Tabs 11 styles de menus différents pour habiller votre site Menu déroulant vertical et horizontal Pratique : cette une technique est assortie d’une explication en Français Un autre menu déroulant vertical Idéal si vous avez plusieurs niveaux dans votre menu CSS Based Navigation Un menu avec un très beau design Navigation Matrix Reloaded Une autre très beau menu CSS où le remplacement des images est relativement facile Tableau et Formulaire Pour peaufiner un formulaire Permet de gérer l’affichage des élements radiobutton et checkbox de vos formulaires Images.
Dynamic Page / Replacing Content. By Chris Coyier On This article is an update to this old article, which had an ugly demo and a variety of techniques in it no longer probably considered good practices. This new demo is much cleaner, up to date, and fuller featured. Because the old article was a bit of a different scope, I'll leave it alone, just refer to this one. Update January 2013: There are better practices now, detailed here. Let's say you wanted to make a website where clicking buttons in the nav would dynamically load some content. Kind of like the organic tabs thing, only the content is loaded dynamically. View Demo Download Files The HTML: It all works without JavaScript There is no excuse for the navigation of a website to be completely broken without JavaScript enabled. The navigation links to the files that contain that content, and are fully formed functional pages on their own.
This isn't really a tutorial about CSS, but if you want to peak at it, go for it. jQuery JavaScript Prereq Code Dump Share this: 100+ Massive CSS Layout Toolbox. In this article you will get access to one of the largest collections ever of CSS Tools, Tutorials, Cheat Sheets etc. It builds on previous CSS posts in tripwire magazine with the purpose of creating a one stop fit all CSS resource. Several new resources have been added. Please comment if you know a great CSS resource that didn’t make it on the list and I will add it ASAP. Advertisement Index CSS getting started and reference resources CSS Basics Large getting started guide with everything you ever wanted to know about the basics of CSS Creating a CSS layout from scratch This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout. Webdesignfromscratch, CSS Introduces most elements of we b development, including css. 10 Principles of the CSS Masters This is really essential tips from true css experts.
CSS Specificity: Things You Should Know Solving 5 Common CSS Headaches CSS is a relatively simple language to learn. Sure, anyone can write CSS.
3D Ribbon Generator - CSS3d.net. +++CSS3 Minimalistic Navigation Menu. Martin Angelov As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari).
But what difference does it make for us today? At the moment only three browsers give you the ability to animate CSS properties – Chrome, Safari and Opera, which together take up only a small part of the browser market. So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers. The XHTML The menu is organized as an unordered list. Demo.html Inside each li we have a hyperlink with a span inside it. CSS3 Animated Navigation Menu The CSS styles.css – Part 1 styles.css – Part 2 The CSS3 Transition styles.css – Part 3.
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. Instead use subset of CSS Resets like one from Eric Meyer.Not Good 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. Not Good 6. 7. 8. 9. 10. 11. 12. 13. ZONE CSS | Définition css white-space (feuille de style css) et compatiblité navigateurs | white-space et sa relation avec les balises. [CSS] Enlever les pointillés des liens - Guillaume Bizet | Blogging, Web2.0, Dotclear et Dotclear2. Coins arrondis en CSS avec une image coulissante et des div. Pour réaliser des blocs (menus ou autres) avec des coins arrondis, il existe principalement trois méthodes en CSS, qui offrent plus ou moins de fluidité et de possibilités graphiques.
Créer des coins arrondis avec une seule image, coulissante en hauteur et en largeur, permet une certaine liberté graphique et s'adapte à un design fluide. Les trois méthodes courantes pour créer des coins arrondis sont : La propriété CSS 3 border-radius ;La technique positionnant 4 images de coins à l'aide de 4 div imbriqués ;La technique de l'image coulissante en hauteur. Chacune de ces méthodes a ses avantages et ses inconvénients. Cette 4ème méthode, utilisant une seule image adaptable en hauteur et en largeur pour un design fluide, s'inspire des deux dernières pré-citées. Elle souffre aussi de quelques défauts, notamment l'éternelle imbrication de plusieurs div. Fonctionne avec : Tous les navigateurs graphiques Attributs utilisés : background margin max-width (inopérant avec IE6) padding Image de fond Code CSS. Créer des menus simples en CSS.
Dans ce tutoriel, nous allons apprendre à réaliser des menus "simples" (sans arborescence: tous les liens sont au même niveau) à l'aide des feuilles de style. Sommaire Le code HTML Comme toujours, le choix des balises html doit être guidé par la nature du contenu qu'on souhaite y placer. Dans le cas d'un menu, la question est un peu délicate, dans la mesure où il n'existe pas de balise spécifique pour désigner un ensemble de liens. Un point de vue largement répandu consiste à considérer le menu de navigation comme une liste de liens, et donc à utiliser la balise correspondant aux listes non ordonnées, <ul>. Par exemple, pour un menu comportant 5 items: <ul id="navigation"><li><a href="#" title="aller à la section 1">item1</a></li><li><a href="#" title="aller à la section 2">item2</a></li><li><a href="#" title="aller à la section 3">item3</a></li><li><a href="#" title="aller à la section 4">item4</a></li><li><a href="#" title="aller à la section 5">item5</a></li></ul> Voir le résultat.
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).
D’autres aussi un peu plus « rares » comme des générateurs de patterns, d’animations en css ou de menus. On espère en tout cas que cette liste vous sera utile ! - Parcourir la liste. Css3 Generateur | Css3.0 Generator | Css 3.0 Generateur | Css3 generateur. 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. This new feature allows us to specify an opacity value for a color. This one could make life for webdevelopers a lot easier… 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. 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. +++CSS3 Menu -- Elegant Dark CSS3 Menu Template.
Elegant Dark CSS3 Menu Template For troubleshooting, feature requests, and general help, contact Customer Support at . Make sure to include details on your browser, operating system, CSS3 Menu version, link to your page. E-mail: What's New CSS3 Menu v3.1 (Jul 3, 2012) Read more CSS3 Menu v2.3 (Feb 2, 2012) CSS3 Menu v2.2 (Dec 14, 2011) Features CSS3 Animation Menu , CSS3 Transition Menu , Mega Drop Down Menu , CSS Menu Examples , CSS3 Buttons Generator , CSS3 Menu Bar , Web Menu , HTML Drop Down Menu , CSS Drop Down Menu , Free Drop Down Menu Recent Templates See live..
See live.. See live.. See live.. See live.. See live.. See live.. See live.. See live demo.. See live demo.. See live demo.. See live demo.. See demo.. See demo.. See live demo.. css3 text inner shadow. Nouveau tutoriel: Maîtriser le positionnement CSS dans toutes les situations. Benjamin De Cock nous fait cadeau d'un très bon article sur le positionnement CSS: Maîtriser le positionnement CSS dans toutes les situations, sous-titré «Comprendre le positionnement CSS et opter pour des choix adaptés à des situations précises». Il ne faut cependant pas voir dans cet article une «bible» du positionnement CSS. Il n'est pas exhaustif et ne cherche pas à l'être. Il s'agit essentiellement d'illustrer une démarche qui consiste à faire des choix rationnels en matière de positionnement CSS. Quelle option de positionnement choisir parmi les différentes possibilités? Benjamin propose la logique suivante: Ça se discute… Comme tout parti-pris, celui-ci ne fera sans doute pas l'unanimité. (…) les solutions proposées en utilisant le positionnement absolu prennent des hypothèses très fortes qui sont en contradiction avec un site dynamique ou le contenu n'est pas maitrisé. (…) Ces contraintes me semble également difficilement gérables dans un contexte de réutilisation des CSS.
Les flottants font de la magie ! Site:forum.alsacreations.com probleme de float avec internet explorer. 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. Here's how we created it: 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 Now we apply the following rules to the preceding markup, and get the result shown in Figure 5.
Figure 5. Set a Float to Fix a Float Summary. CSS Float Theory: Things You Should Know - Smashing Magazine. Min-height sur Internet Explorer. HasLayout et bugs de rendu dans Internet Explorer 6-7. Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows, qui affecte les versions 5 à 7 incluses. Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une question de cuisine interne. Pourquoi s'en occuper, s'il s'agit de cuisine interne ? Eh bien parce que cette cuisine-là n'est pas invisible, et que ses conséquences se font sentir dans nos pages web. En effet, ce mécanisme est lié à de nombreux bugs de rendu d'Internet Explorer.
Concrètement, qu'est-ce-que c'est? Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article On Having Layout. On retiendra surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le layout, soit il ne l'a pas. Mais qui a le layout? Attribut target et standards du W3C. Fonction de l'attribut target L'attribut target a été introduit en HTML 4. C'est un attribut de l'élément a (hyperlien) permettant de désigner le cadre dans lequel la ressource spécifiée par l'hyperlien doit s'ouvrir.
Il est possible de désigner le cadre cible par son nom, ou par l'un des quatre termes réservés: _blank, _self, _parent, _top. Il semble que les cadres soient de moins en moins utilisés. Mais l'attribut target reste prisé dans un cas spécifique, l'ouverture d'un contenu dans une nouvelle fenêtre du navigateur : <a href=" target="_blank" >Le site</a> Target avec la valeur réservée "_blank" a une vie propre indépendamment des cadres. Faiblesses de l'attribut target Son exclusion des versions STRICT des normes HTML 4.1 et suivantes laisse supposer quelques faiblesses.
De l'autre coté les raisons ou circonstances justifiant l'ouverture d'un lien dans une nouvelle fenêtre ne manquent pas non plus : Etre standard en utilisant target Evolution des standards <? "target=_blank" n'est pas valide en doctype strict. Que faire ?