background preloader

Créer des menus simples en 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. 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> Remarquez l'identifiant placé sur la balise <ul>. Capture d'écran du résultat: On va donner une bordure, une couleur de fond et une couleur de texte aux éléments <li>: Related:  CSS & Sass Tita CréaPPE Comunity17

Animations en jQuery - enrichissez vos pages web Voici venir le chapitre le plus fun de ce cours : les animations. jQuery propose par défaut une série de fonctions d'animation et de transition qui permettent d'animer des éléments du DOM. Les effets (effects) sont des animations prédéfinies, on en a déjà utilisé un dans les chapitres précédents : fadeOut, qui permet de faire disparaitre un élément avec un fondu. Il existe différents effets que je vous invite à tester : Tester/ressources/exemple/cours-jquery/ch4_exemple1.html Exemple 1 Quelques effets jQuery Les effets que vous avez vus ci-dessus sont simples et pratiques, mais on peut encore faire mieux avec jQuery et la fonction animate(). Cette fonction prend en paramètre un ensemble de propriétés CSS, et elle va se charger de faire une animation linéaire pour chacune de ces propriétés, entre leur état actuel, et l'état défini dans ses paramètres. Petit exemple : j'ai une div carré situé en haut à gauche de la page : Ici j'y ajoute une animation avec les propriétés CSS left et top. Exemple 2

Background révélé par des images coulissantes en CSS Encore un tutoriel sympa de Dudley Storey : créez des images coulissantes révélant un background, en pur CSS, grâce à clip-path et transform / translate. Un effet simple, construit astucieusement comme toujours! Par Dudley Storey D’une manière générale, il est préférable de ne pas toucher à l’intégrité d’une photographie mais il est possible de partager une image pour révéler un contenu caché. La plupart des méthodes utilisent deux images, mais nous allons voir qu’il est bien plus efficace de le faire en utilisant CSS : Ma version utilise deux copies de la même image — ce qui a peu d’impact sur le temps de chargement car les navigateurs ont l’intelligence de mettre une copie en mémoire cache et de l’utiliser lorsqu’on fait appel à elle à nouveau. <figure><figcaption>Born To Run</figcaption><img src="road-to-nowhere.jpg" alt><img src="road-to-nowhere.jpg" alt></figure> Les deux images sont placées à l’intérieur de <figure> : Puis chacune est divisée en deux avec clip-path :

Introduction et Installation - Le Guide WordPress Le Guide WordPress: tutoriel, astuces, plugins et hébergement Div et CSS : une mise en page rapide et facile Tout au long de cet exercice, nous allons utiliser deux fichiers : index.html : contiendra tout notre code HTML. style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises <head> et </head> : Définissons tout d'abord les propriétés de base de nos blocs. Dans notre fichier CSS : Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align). Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page Nous alons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs : Bandeau : 600 x 50 px - couleur : #00CCFF Contenu : 600 x 400 px - couleur : #FFCC00 Pied de page : 600 x 50 px - couleur : #33FF99 Mais, mais, mais !!!

Cacher/Afficher un div avec du "style" ! [ Scripts des membres ] De ridertahiti - le 01-07-2010 modification pour cacher les autre div avant d'ouvrir le div cliqué moi j'ai mis comme argument sur ma fonction (lien, taille,image) image c'est l'image que je clique comme j'ai fait plusieurs déroulement function Suite(lien,taille,image){ if(image == 1) { var objet = document.getElementById('popup'); var objetold = document.getElementById('popup2'); if(objetold.style.display == "block"){ objetold.style.overflow = 'hidden'; objetold.style.display = "none"; objetold.style.height = "0"; } } if(image == 2) { var objet = document.getElementById('popup2'); var objetold = document.getElementById('popup'); if(objetold.style.display == "block"){ objetold.style.overflow = 'hidden'; objetold.style.display = "none"; objetold.style.height = "0"; } if(objet.style.display == "none" || ! var hFinal = taille; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !) objet.style.height = hActuel + 'px'; timer = setInterval(fct,40); //Toute les 40 ms

Utiliser des polices différentes sur votre site avec @Font-Face - Suivez le tutoriel @Font-Face est compatible avec les navigateurs : IE 5+ / Chrome / Firefox / Opéra / Safari Quelle méthode utiliser pour changer la police d’un site internet ? Vous avez 3 solutions pour ça. La première c’est sIFR qui permet d’afficher les polices grâce à un script,(JS) . sIFR n’est pas très utilisé en réalité parce qu’il est lourd à gérer et ne permet pas toujours d’arriver au résultat attendu. La seconde passe par les police cufons, il utilise lui aussi le Java pour arriver à ses fins, il est plus répandu mais ils affichent un code souvent apparemment lourd, et même si les spécialistes du référencement assurent que cela n’affecte en rien l’optimisation du texte, il est rassurant de savoir qu’une méthode est acclamée par tous les développeurs: @Font-Face! Cette méthode consiste à “encoder” la police souhaité au format web, puis d’aller donner les informations à votre site, en les appelant dans votre fichier CSS. Je vous ai perdu en route ? Patientez 2 min et voilà ! Exemple: remplacer par

CSS3 – Créer un slideshow automatique et contrôlable Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier. Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010. Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Cependant, le code commenté reste – je l’espère – accessible. Avant propos La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images. Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Les défauts des versions précédentes

Exemple de menu fixe en CSS solution avec "padding-top" Cette mise en page illustre la façon d'obtenir un menu fixe en haut, avec un bloc défilant dans la partie basse et ce, quel que soit le navigateur affichant la page. Quand on scinde une page en plusieurs blocs dont les défilements verticaux (ascenseur de droite) sont indépendants, on parle de "pseudo-frames". Cette page a été testée et s'affiche correctement sur : Leçon 7: L'identification et le regroupement d'éléments (class et id) Parfois, on veut appliquer un style spécial à un élément ou à un groupe d'éléments particuliers. Dans cette leçon, nous étudierons comment utiliser les attributs class et id pour définir les propriétés d'éléments sélectionnés. Comment donner à un titre particulier une autre couleur que celle des autres titres du site Web ? Comment regrouper les liens en différentes catégories et donner à chacune un style spécial ? Le regroupement d'éléments dans une classe Supposons que nous ayons deux listes de liens vers les différents cépages utilisés pour des vins blancs et des vins rouges. <p>Cépages de vins blancs :</p><ul><li><a href="ri.htm">Riesling</a></li><li><a href="ch.htm">Chardonnay</a></li><li><a href="pb.htm">Pinot Blanc</a></li></ul><p>Cépages de vins rouges :</p><ul><li><a href="cs.htm">Cabernet Sauvignon</a></li><li><a href="me.htm">Merlot</a></li><li><a href="pn.htm">Pinot Noir</a></li></ul> Afficher un exemple Pour y parvenir, nous répartissons les liens en deux catégories. Résumé

How To Make A Bio Dropdown Box With CSS After I released the most recent Theme Lab redesign, I had a number of comments on the “bio dropdown” box I have up in my navigation bar. I coded it with just a few lines of CSS along with a background image. In this CSS tip post, I’ll go over how you can have a similar hover effect on your own sites. The Example In this example, I’ll be using a text widget in the Twenty Eleven theme, the new default as of WordPress 3.2. Basically, once you hover over the div that contains the widget, a “hidden” div will appear which will be our bio dropdown box. Note in the picture to the left, the gray bio box will not appear unless you hover the div containing the “Bio Hover” heading. The Selector It’s not that important to have a unique CSS selector to style the div you want to put your bio dropdown box in. Although in the case of Twenty Eleven, we could get away with just styling the “aside” class, chances are you only want a bio dropdown box on one of your divs anyway, so we’ll get more specific.

Créez votre thème WordPress de A à Z at Fran6art.com, blog d'un webdesigner spécialiste WordPress Update du 5 Octobre 2011: les tutoriels ont beau datés de 2007, ils sont en cours de modifications pour y ajouter les fonctionnalités des dernières versions de WordPress. Quoi qu’il en soit, ils sont toujours d’actualité et ont été mis à jour plusieurs fois. Peut-être que vous aimeriez créer votre propre thème pour votre blog et que vous ne savez pas trop comment vous y prendre ? Et bien, dans les semaines qui vont venir, je vais vous expliquer les différentes étapes à suivre, pas à pas, pour que n’importe qui (ou presque) puisse créer son propre thème. Quoi qu’il en soit, quelques petits prérequis seront nécessaires. On va évoquer les différentes étapes et aborder aussi bien le design que l’intégration d’un thème sur WordPress. Je ne dis pas que la méthode que je vais présenter est la meilleure mais en tout cas, elle est celle que j’utilise ! « Stay tuned! Articles déjà en ligne: Leçon #1: Installer WordPress en local sur votre ordinateur Leçon #2: Pourquoi créer son propre thème ? Fran6

Related: