background preloader

Menu CSS 3 animé

Menu CSS 3 animé
Nous allons voir aujourd’hui comment créer un menu en CSS3 avec une petite animation. Bien évidemment vous devrez avoir un navigateur qui prend en compte les attributs du CSS3 sinon vous ne verrez pas les animations. Je vous laisse voir le rendu sur la démo ou bien télécharger les fichiers sources : Le principe de ce menu animé entièrement en CSS3 est très simple. On ne se sert que de l’attribut transition du CSS3. On donne certaines valeurs aux balises a qui sont dans les li du menu. Bien évidemment on précise les attributs transitions pour chaque navigateur le temps que le CSS3 soit validé pour tous les navigateurs avec seulement l’attribut « transition ». Voici le code HTML pour ceux qui ne veulent pas télécharger les fichiers sources : Le code css : Comme d’habitude, n’hésitez pas à me donner des retours ou à poser vos questions. Mots clés : css / css3 / html / transition

http://www.webdesignweb.fr/web/menu-css-3-anime-1035

Related:  HTML - CSS - PHPCSS3DéveloppementHTML5 - CSS3Principes

Système de Gestion-Affichage de Nouvelles PHP - Système de Gestion-Affichage de Nouvelles (Articles, Actualités... Les transitions et animations CSS Introduction Depuis toujours, les concepteurs web ont tenté de styler et de dynamiser des pages HTML terriblement monotones. À la fin des années 90, un simple effet de survol ne peut pas être réalisé facilement : l’utilisation de JavaScript est inévitable, mais impose de connaître la programmation. L’arrivée des pseudo-classes dynamiques au sein de CSS (:hover, :focus, :active…) a alors facilité l’opération et permis de s’affranchir de scripts souvent lourds. CSS3 : @font-face, vous avez demandé une police de caractère non standard ? Vous êtes ici > CSS Débutant | CSS3 | Déclarer une police de caractère non standard avec @font-face Longtemps, longtemps, le webmestre s'est lamenté de ne pouvoir utiliser qu'un petit nombre de fontes pour ses sites web. Arial, Helvetica, times new roman... c'était d'un triste !

CSS 3 transform : rotation et échelle Aujourd’hui nous allons voir deux nouveaux effets réalisés en css3. Ces effets sont des effets de transformation, un changement d’échelle (avec la propriété transform : scale) et une rotation (avec la propriété transform : rotate). Ces effets peuvent s’appliquer à toute balise. Ici j’ai choisis une liste d’images mais j’aurai très bien pu prendre un menu, un paragraphe, etc…

Animations CSS Cette fonction est expérimentalePuisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification. Les animations CSS sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (keyframes en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.

Réaliser une galerie d'image facile avec Php et MySQL - Web Info Bazar Article lu 13 900 fois Bonjour à tous! Nous allons voir ici comment réaliser une galerie d’image avec Php et une base de donnée MySQL. Les images de la galerie seront cliquables et redirigeront vers une page contenant l’image concernée ainsi que les descriptions de celle ci. Méthode Daisy : les CSS feuille à feuille Bienvenue chez vous ! C’est le bazar, n’est-ce pas, dans votre code CSS ? Le CSS ? C’est une vraie galère dès qu’on doit y revenir, dès qu’on repasse derrière quelqu’un d’autre et même quand on doit replonger dans son propre code après longtemps... et ce n’est vraiment pas aisé de coder à plusieurs mains, en équipe.

[DIY] Panneau d'affichage style aéroport full CSS Le 24/08/2013 par lobodol Dans informatiqueFacile13 Feb 2014 Bonjour à tous, aujourd'hui je vous propose un tuto orienté webdesign, puis-ce qu'il s'agit de réaliser un panneau d'affichage style aéroport. 1. >➤ Police en CSS : Famille de police, taille, couleur... ☀ La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. font-family: Famille de police font-size: Taille de votre police de caratère font-style: Gras, italique, oblique... font-variant: Variante de police font-weight: Taille de la police A savoir : Dans ce chapitre, la notion d'héritage est appliquée. (voir notion d'héritage sur ce lien Les noms de familles contenant des espaces doivent etre mis entre guillemets: font-family: "Trebuchet MS", Verdana, Geneva, Arial;

Comment fonctionne la propriété CSS z-index La propriété z-index permet de préciser l'empilement de certains éléments d'une page, c'est-à-dire sur l'axe vertical. Elle permet par exemple d'indiquer que pour deux éléments A et B partiellement ou totalement superposés, A sera placé au dessus de B ou inversement. Mais l'utilisation de cette propriété comporte quelques pièges. Il y a deux informations principales à retenir : Pagination page par page Attention, depuis PHP 5.5.0, certaines extensions SQL sans doute utilisées dans ce tutoriel peuvent être obsolètes et seront supprimées dans le futur, vous devez donc adapter les codes! Exemples ici. Voici un petit bout de code près à l'utilisation, permettant d'effectuer une pagination et de choisir le nombre d'élément à afficher par page. La pagination peut se faire de 2 façons: Page par page (Page : 1-2-3-4-5) <<Page précédente - Page Suivante>> Cette option est à définir à la variable $navigation.

Créer une grille CSS responsive Les grilles CSS, à quoi ça sert ? La plupart des sites Internet ont un gabarit « générique ». Par exemple, un blog va avoir un corps et une barre latérale. Une grille CSS va vous permettre de gérer ce gabarit très facilement. L’idée c’est de partager votre site en un nombre défini de colonnes. Créer un design d’article de blog avec une date flottante en HTML et CSS Aujourd’hui, nous allons s’atteler au design d’un élément particulier d’un blog : le billet. Je vous propose de reproduire pas-à-pas le design ci-dessous. Jolie, hein ? CSS Bootstraps et autres réjouissances - Gagnez du temps pour vos intégrations HTML / CSS N’avez-vous jamais entendu cette célèbre phrase qui dit « Pourquoi toujours tenter de réinventer la roue ?« . Telle une vielle rengaine, mais pourtant si vraie ! Stop, arrêtez de répéter vos styles CSS et travaillez plus intelligemment. Pour vos projets web, travaillez mieux et commencez sur une base solide.

Related:  menu