CSS UL LI - Horizontal CSS Menu Second Picture is devoted to original tutorials about 3D graphics, Photoshop, Photography and Web Design. 31.10.2008 Category: Web Design In this tutorial we're going to create a professional horizontal CSS menu. First we are going to create a HTML list by using Unordered List (ul) and List Item (li) elements. Then we are going to style the list with CSS (Cascading Style Sheets) into the form of a horizontal navigation menu like in Picture 1. Picture 1. Previous knowledge about some basic HTML and CSS is required. ul (Unordered List) li (List Item) a (Anchor / Link) This is a CSS tutorial so I'm not going to go through the creation of the graphics used in this tutorial. HTML List (ul li) With Links Let's start by creating a list with links in HTML: <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> Picture 2. UL CSS Styling First I change the background color to black.
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
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. 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. <nav><ul><li><a href="index.php">Home</a></li><li><a href="about.php">About</a></li><li><a href="contact.php">Contact</a></li></ul></nav> #jQuery JavaScript The JavaScript is the fun part here! #Prereq #Code Dump
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);
Slide Down Box Menu with jQuery and CSS3 In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left […] View demoDownload source In this tutorial we will create a unique sliding box navigation. We will be using the jQuery Easing Plugin and some beautiful photos by tibchris. The Markup For the HTML structure we will be using an unordered list where each menu item will contain the main link item and a div element for the submenu: <ul id="sdt_menu" class="sdt_menu"><li><a href="#"><img src="images/1.jpg" alt=""/><span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link">Portfolio</span><span class="sdt_descr">My work</span></span></a><div class="sdt_box"><a href="#">Websites</a><a href="#">Illustrations</a><a href="#">Photography</a></div></li> ... If there is no submenu, the div can simply be left out. The CSS
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 Sprites2 - It’s JavaScript Time A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It’s high time to revisit the CSS Sprites technique from four years ago, and see if we can’t interject a little bit of movement of our own. The examples below demonstrate inline CSS Sprites2, the technique we’ll be covering in this article: Enter the jQuery#section1 We must note the non-trivial extra kilobytes that the library will add to your initial page loads. As for other JavaScript libraries? Basic HTML and CSS setup#section2 So far so good. Example 1: Basic CSS Sprites setup. The theory#section5
-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
How to Code an Overlapping Tabbed Main Menu | Codepal Main navigation menu is that part of a website design that makes the whole site look lively and complete. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu. There are various styles and techniques of creating a tabbed navigation menu and one of them is the tabbed overlaying or overlapped style in which each tab appears to be lying over the other and hence giving the whole menu a very realistic feel. While designing my site, I went through lots of inspirations and tutorials. One of them was this tutorial called Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it! ” Now if I do say so myself these tabs look awesome, and the reason they do is because they overlap. So I tried coding one into html and after I succeeding thought of sharing it with you all. Step 1.Gearing Up Step 2. Align the tabs vertically using grids as shown in the image above. Step 3.
♥ 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