CSS3 Gradient Buttons Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). What Is So Cool About These Buttons? Pure CSS: no image or Javascript is used. Preview The image below shows how the button will display in different browsers. Button States normal state = gradient with border and shadow styles. hover = darker gradient active = gradient is reversed, 1px down, and darker font color as well. General Styles For The Button The following code is the general styles for the .button class. For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3. Color Gradient Styles The code below is the CSS styling for the orange button. For more details on CSS gradient, read my article Cross-Browser CSS Gradient. How To Use My Buttons?
Language Features | Less.js Extend is a Less Pseudo-Class which merges the selector it is put on with ones that match what it references. Released v1.4.0 In the rule set above, the :extend selector will apply the "extending selector" (nav ul) onto the .inline class wherever the .inline class appears. The declaration block will be kept as-is, but without any reference to the extend (because extend isn't css). So the following: Outputs Notice how the nav ul:extend(.inline) selector gets output as nav ul - the extend gets removed before output and the selector block left as-is. Extend syntax The extend is either attached to a selector or placed into a ruleset. Example: It can contain one or more classes to extend, separated by commas. Extend attached to selector Extend attached to a selector looks like an ordinary pseudoclass with selector as a parameter. If a ruleset contains multiple selectors, any of them can have the extend keyword. .big-division, .big-bag:extend(.bag), .big-bucket:extend(.bucket) { } nth expression
css Zen Garden: The Beauty in CSS Design linear-gradient - Créez un dégradé linéaire en CSS La fonction linear-gradient permet de créer un dégradé linéaire. Elle prend 3 valeurs, dont 2 sont obligatoires : direction du dégradé (optionnel) couleur de départ couleur de fin La direction du dégradé par défaut est to bottom dans la nouvelle syntaxe (C’est où le dégradé va !). Dégradé rouge/bleu du haut vers le bas background: linear-gradient( red, blue); Dégradé rouge/bleu de la droite vers la gauche background: linear-gradient( to left, red, blue); background: linear-gradient( right, red, blue); La syntaxe préconisée à l’heure actuelle est la suivante, sachant que le module concernant les dégradés est arrivé en CR (les préfixes devront être enlevés bientôt), et que par conséquent les navigateurs supporteront la dernière déclaration : background: -webkit-linear-gradient( right, red, blue);background: -moz-linear-gradient( right, red, blue);background: -ms-linear-gradient( right, red, blue);background: -o-linear-gradient( right, red, blue);background: linear-gradient( to left, red, blue);
How to design a sexy header for your site using CSS Yesterday I received a lot of positive messages about the new template of my site. Expecially for the new header (in particular the green bar on top of the page). Some of my readers asked to me to dedicate a post about how to realize a similar "graphic composition", so I decided to publish a post with the "process" I use in general to design graphical sections for my web sites.First approach: be simple. The most important rule is: be simple. - Logo layer - Navigation bar - Green site introduction section Each element has a fixed width but how navigation bar and site introduction section fit the page size. Another solution to avoid container layers is applying a background picture to the <body> section using css, but I prefer working with pure layer instead of images to have more control on the design. Design the header with Photoshop A good practice is trying to design first your header in Photoshop to have an idea about how it will look. ... and CSS code is: It's all!
Les préfixes vendeurs en CSS Afin de permettre le développement progressif et l'implémentation des modules CSS, les éditeurs de navigateurs (vendors) ont la possibilité d'introduire le support de propriétés spécifiques. Cette manière d'opérer est recommandée par le W3C depuis CSS 2.1 et valable pour les versions suivantes. Ces "propriétés propriétaires" doivent être préfixées d'un tiret et d'un code correspondant au moteur les exploitant : -o- pour Opera -moz- pour Gecko (Mozilla) -webkit- pour Webkit (Chrome, Safari, Android...) Le tout doit être suivi du nom de la propriété souhaitée ou anticipée. Ainsi, la fameuse propriété border-radius destinée à arrondir les angles des boîtes sans utiliser d'images ou de techniques alternatives s'est vue introduite par : -moz-border-radius sous Gecko (2.0 à 3.6) -webkit-border-radius sous WebKit Opera 10.5 l'a implémentée directement sans préfixe, puis suite à sa finalisation, l'ont fait également Safari 5.0, Chrome 5.0, Firefox 4.0 et Internet Explorer 9.
CSS gradients for all web browsers, without using images One thing that is quite nice is that we now have the ability to create gradients in our pages just from CSS code, and without the use of any images. Syntax options and web browser support The good news is that there is web browser support for CSS gradients in Firefox, Safari, Google Chrome and Internet Explorer (Opera will most likely add it soon too). The bad news is that, for a couple of reasons, the implementation in each web browser is different from the other. In IE’s case, it’s because it’s based on their ancient approach that stems form IE 5.5. For WebKit-based web browsers (like Safari and Google Chrome), they were the first ones to suggest it, based on the approach for canvas, but this was later changed by the CSS WG, and the new syntax is now the one implemented in Firefox (and I guess this syntax will later make into WebKit-based web browsers as well). So, as of now, we have have CSS gradients support for: Firefox 3.6Safari 4Google ChromeIntenet Explorer 5.5 Examples 01. 02. 13.
-moz-appearance - CSS « CSS « Référence CSS « Extensions Mozilla Résumé -moz-appearance est utilisée par les navigateurs Mozilla pour afficher un élément en utilisant les styles natifs d'une plate-forme suivant le thème du système d'exploitation. Valeur initiale : aucune S'applique à : tous les éléments Héritée : non Pourcentages : N/A Valeur calculée : comme spécifiée Syntaxe -moz-appearance:valeur d'apparence Valeurs none Aucun style spécifique n'est appliqué (défaut). button L'élément est rendu comme un bouton. button-small L'élément est rendu comme un petit bouton. checkbox L'élément est rendu comme une case à cocher, incluant uniquement la partie réelle de la case à cocher. checkbox-container L'élément est rendu comme un contenant pour une case à cocher, qui peut inclure un effet d'illumination de l'arrière-plan sous certaines plate-formes. checkbox-small dialog L'élément est rendu comme une boîte de dialogue, ce qui inclut la couleur d'arrière-plan et toutes autres propriétés. listbox menuitem menulist menulist-button
Ten CSS tricks you may not know 1. CSS font shorthand rule When styling fonts with CSS you may be doing this: font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif There's no need though as you can use this CSS shorthand property: font: bold italic small-caps 1em/1.5em verdana,sans-serif Much better! 2. Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. <p class="text side">... Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. 3. When writing a border rule you'll usually specify the color, width and style (in any order). If you were to write just border: solid then the defaults for that border will be used. 4. Lots of web pages have a link to a print-friendly version. So, your page header should contains links to two CSS documents, one for the screen, and one for printing: 5. <h1>Buy widgets</h1>
♥ Manifique bouton en CSS et HTML : Tuto Compatibilité : En CSS, certains scripts ne sont pas compatibles avec tous les navigateurs. Voici la liste des navigateurs compatibles : Manifique bouton en CSS Les boutons par défaut en HTML sont souvent modifiés par les graphistes afin de donner une personnaliser le site et le rendre moins commun Etape 1 : le code HTML Il faut utiliser les tag <a> avec la balise span à l'intérieur. <a href="#" class="button"><span class="add">Add to your bookmark</span></a> Vous pouvez repliquer cette structure pour tout les boutons nécessaires sur votre site : Et la balise <a> est le contenaire du bouton et une "classe" au sens CSS avec une balise span qui contient les propirétés de couleur de fond et l'icone à appliquer au bouton. Exemple : <a href="#" class="button"><span class="delete">Delete this bookmark</span></a><a href="#" class="button"><span class="user">Add to friends</span></a> Etape 2 : Le code CSS Voici le code CSS qui définie la couleur de fond, taille, hauteur.... Un exemple est disponibile ici