CSS3 technology in action: Design examples Ryan Boudreaux highlights some beautiful examples of CSS3 design projects by some individuals who are at the forefront in tinkering with the new code possibilities. While CSS3 and HTML5 technologies are still fresh for most organizations, there are many trend-setting web developers who are taking the new tools by storm. This post will highlight several examples which utilize the full potential of CSS3 in delivering excellence in design, look, and feel. The first group includes several projects and experiments by individuals tinkering with CSS3. You can also view the examples below in a gallery format here. CSS3 Analog Clock by Paul Hayes is his quick project and experiment that works in Safari and Google Chrome. Figure A Snow Flakes by Natalie Downe utilizes examples of CSS3 animation, text-shadow, transform, and keyframes to create a page of gently falling snow flakes. Figure B Figure C Figure D Figure E Figure F Figure G Figure H Figure I Figure J
Basic Structure of a Web Page While this reference aims to provide a thorough breakdown of the various HTML elements and their respective attributes, you also need to understand how these items fit into the bigger picture. A web page is structured as follows. The Doctype The first item to appear in the source code of a web page is the doctype declaration. The doctype looks like this (as seen in the context of a very simple HTML 4.01 page without any content): <! In the example above, the doctype relates to HTML 4.01 Strict. The Document Tree A web page could be considered as a document tree that can contain any number of branches. Figure 1. If we look at this comparison, we can see that the html element in fact contains two elements: head and body. head has two subbranches—a meta element and a title. Note that there’s some symmetry in the way the tags are opened and closed. html Here’s an example of an XHTML transitional page: <! The html element breaks the document into two main sections: the head and the body. head <! body
csswizardry/CSS-Guidelines CSS : on reprend tout à zéro ! (épisode 3) Par Joe Gillespie Cet article est le troisième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages. Troisième étape : appliquer du style au texte Nous nous sommes déjà débarrassés du côté brut du noir et blanc pour le remplacer par quelque chose de plus doux, mais on peut faire beaucoup plus. La police d'écriture Nous allons commencer par le style de police, dans la mesure où c'est ce qui va apporter le plus grand changement. Ci-dessus : quelques polices courantes sur les ordinateurs Windows et Mac. Voici une indication courante de famille de polices sans-serif : font-family: Verdana, Geneva, Arial, sans-serif; Voici une famille de polices serif : font-family: Georgia, "Times New Roman", Times, serif; Remarquez que lorsque le nom d'une police contient plus d'un mot, l'ensemble doit être placé entre guillemets à l'anglaise : "Times New Roman". Ajoutons les polices sans-serif à nos styles et voyons ce que ça donne. Notre page en police sans-serif >> Les titres
Home - Scalable and Modular Architecture for CSS Menu déroulant en CSS sans javascript, compatible IE et FF tout niveau - Peut-être une réponse ? Jeudi 10 novembre 4 10 /11 /Nov 00:00 Mise à jour le 08/06/2006 22:31 Ca y'est!!! J'ai enfin réussi à adapter un menu déroulant uniquement en CSS et compatible avec Internet Explorer (IE) et Firefox (FF). L'astuce est d'écrire 2 fois le menu et sous-menu, 1 fois pour IE (caché de FF) et 1 fois pour FF (caché de IE). Ainsi quelque soit le navigateur, le menu apparaît. Si pour FF la gestion d'un menu déroulant est un jeu d'enfant, habituellement pour IE, on utilise du javascript. Toute la difficulté était de trouver une solution pour la gestion du "déroulement" du menu en CSS sous IE. Attention!! Le code CSS et HTML de ce menu n'est pas très compliqué, mais de par l'architecture du blog générée par Over-blog et sur laquelle on ne peut avoir la main, son intégration dans l'entête peut être assez complexe. Voili voilou, passons aux choses sérieuses Le menu Ci-dessous, l'exemple avec 2 boutons, vous pouvez aussi allez voir sur mon blog test son intégration dans l'entête: Les CSS Personnalisation
Pragmatic, practical font sizing in CSS One thing I’ve been thinking a lot about lately is how to build sites properly. Not what we have been told is proper, but what actually makes sense for us as developers. I recently spoke at The Digital Barn on exactly this; my talk—Breaking Good Habits—dealt with how we as developers need to solve problems not only for our users and clients, but for ourselves as well. Nicole Sullivan has laid a lot of new foundations for us in her work on OOCSS and her ‘unconventional’ but absolutely spot-on approach to building websites. Gems like the media object have seriously changed how I build websites and, if you take the time to study it for yourself, I think it might just do the same for you as well. Double-stranded heading hierarchy Another absolutely stellar nugget of wisdom she’s given us is what I call double-stranded heading hierarchy. But now we’d have: As you can see, the former is far more arbitrary and those lists of selectors can soon become unwieldy, especially over a larger project.
CSS3 Dropdown Menu While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. View Demo CSS3 Dropdown Preview The image below shows how the menu will look if CSS3 is not supported. One Gradient Image is Used A white-transparent image is used to achieve the gradient effect. The instensitiy of the gradient can be changed by shifting the background image up or down. CSS Code I’m not going to explain the CSS line by line. Update Apr 13 2010: Pure CSS Dropdown (No Image Used) The following demo used CSS gradient and IE gradient filter instead of the gradient image.
CSS examples Media types 7.1 Introduction to media types One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc. Certain CSS properties are only designed for certain media (e.g., the 'page-break-before' property only applies to paged media). 7.2 Specifying media-dependent style sheets There are currently two ways to specify media dependencies for style sheets: Specify the target medium from a style sheet with the @media or @import at-rules. The @import rule is defined in the chapter on the cascade. 7.2.1 The @media rule An @media rule specifies the target media types (separated by commas) of a set of statements (delimited by curly braces). Style rules outside of @media rules apply to all media types that the style sheet applies to. 7.3 Recognized media types The names chosen for CSS media types reflect target devices for which the relevant properties make sense. all tty
CSS Gradients for IE9 « CSS3 Wizardry This works with Desktop IE9, Desktop Firefox, Desktop Chrome, Desktop Safari, Desktop Opera, iOS, and Android. Attention! IE9 will not destroy the world, kill babies, or take away your home or job. Simply put, IE9 is the best browser Microsoft has ever released. Has it caught up to Chrome, Firefox and Safari? Shortly after the initial launch of the beta of IE9, I began testing to see what kind of support it had for all the rich and exciting features CSS3 offers for Web layout and interaction. So what didn’t make it into IE9? When I look at IE9′s support for CSS3, it appears they decided to pick the low hanging fruit: border radius, drop shadow, multiple backgrounds, etc. I have no experience working with Adobe Flash. Presently my main area of focus is the mobile Web on Android, Blackberry 6, iOS and WebOS. Here’s the page with the popup in view in Safari and Firefox: Here’s the same markup in IE9. First, here’s a CSS3 gradient used by Chrome, Firefox and Safari: That’s it. Like this:
Le CSS - Tutoriel HTML & CSS La syntaxe Un fichier CSS permet de changer radicalement l'affichage de plusieurs pages HTML. La structure d'un fichier CSS est simple (plus que celle d'un fichier HTML). Un fichier CSS est composé de plusieurs règles. Chaque règle permet de changer l'affichage de plusieurs balises HTML. Les règles ont la syntaxe suivante : Expliquons cette structure avec quelques définitions : Chaque règle CSS sert à appliquer des styles à une balise HTML, certaines balises, ou un groupe de balises ; Chaque règle d'un fichier CSS débute par un sélecteur. Pour illustrer ce que nous venons de voir, nous allons voir comment centrer le titre de niveau 1 de nos pages Web. Si maintenant nous voulons une couleur bleue pour ce même titre, nous devons appliquer une seconde déclaration (couple "propriété: valeur") pour le même sélecteur h1 : il s'agit de la propriété "color", et nous lui donnons la valeur "blue". Lier le CSS au HTML <! Le fichier style.css, quand à lui, pourra ressembler à ceci : <! Les sélecteurs <!