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. 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

http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html

Related:  CSS & Sass Tita CréaklmpPPE Comunity17

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.

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 :

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.

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. 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 :

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.

Information et systèmes d'information A. Définition Le système d'information (SI) est l'ensemble des informations circulant dans l'entreprise et des moyens (humains, matériels, méthodes) mis en œuvre pour les gérer. Recherche wordpress theme avancée 33 Tutoriels Créer un thème avancé avec Wordpress 1h46 | par Grafikart Créer un widget Wordpress 33min | par Grafikart Installer Wordpress en Local Rotation d’un menu en CSS3 - Créer ce menu rotatif avec les Animations CSS Etape 1 : Gérer les transformations On utilise tout d’abord les transformations CSS pour gérer la rotation avec transform : rotate(angle). La rotation se fait par rapport à un axe qui n’est pas le centre de l’élément avec transform-origin : x y ;. Voici le code HTML utilisé :

CSS - mozilla aide développement Cascading Style Sheets (CSS) est un langage de feuille de style utilisé afin de décrire la présentation d'un document écrit en HTML ou en XML (on inclut ici les langages basés sur XML comme SVG ou XHTML). CSS décrit la façon dont les éléments doivent être affichés, à l'écran, sur du papier ou sur autre support. CSS est l'un des langages principaux du Web et a été standardisé par le W3C. Ce standard évolue sous forme de niveaux (levels), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et CSS3, qui est découpé en modules plus petits est en voie de standardisation. La référence CSS Une référence exhaustive destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.

Comparatif de stockage en ligne : Google Drive vs Dropbox vs. Onedrive Les applications permettant de stocker ses données en ligne se font de plus en plus nombreuses et le pionnier de la catégorie, Dropbox, peut se faire des cheveux blancs devant la concurrence. Aujourd'hui, il existe une bonne dizaine de solutions, avec chacune leurs avantages et leurs inconvénients. Nous en avons retenu 3 qui nous paraissent tenir le haut du pavé: Dropbox, Google Drive, et OneDrive, voyons lequel règne en maître.

Related: