background preloader

Menu Slides avec CSS3 - Créer des blocs dépliables animés en CSS3

Menu Slides avec CSS3 - Créer des blocs dépliables animés en CSS3
Attention : Un bug étrange a été détecté sous Chrome/Safari sur Mac. Observez-vous cela ? Dans cet exemple, on utilise les transformations CSS afin de faire subir une rotation aux liens contenus dans les éléments de liste (li). <div class="menu"><ul><li><a href="">Home</a><div><h3>Home</h3><p>Bienvenue sur le site CSS3Create</p></div></li><li><a href="">News</a><div><h3>News</h3><p>Pleins de news sur CSS3 et sur HTML5</p></div></li> ... Réglage de la taille d’un li et application de la transition sur la taille. 0.15s correspond au retardement de la transition, afin d’éviter un déclenchement trop rapide de chaque slide. overflow:hidden permet d’éviter le débordement des éléments masqués. Ensuite au :hover, la taille des li est modifiée en utilisant les transitions CSS. L’effet de transition fonctionne avec le moteur Webkit (Safari-Chrome) , le moteur Gecko 2.0 (Firefox 4) et Opéra11+. Voir aussi : Menu avec slider effet transition Related:  CSS3Principes

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

Slider Galerie photos en CSS3 - Créer une galerie photo avec défilement automatique sans Javascript Utilisation des animations CSS pour réaliser cet effet. L’animation totale dure 20s : 14% d’affichage de photo, 2% de slide vers la photo suivante et 4% pour revenir sur la première photo. Note : n’oubliez pas d’ajouter tous les préfixes sur les @keyframes. L’effet réalisé dans cet exemple est assez simple. Aller plus loin avec cet article : Slider Galerie photos "en boucle" en CSS3 Les transformations 3D en CSS3 L’une des innovations majeures apportées par le CSS3 est la capacité à “transformer” des éléments. Ces transformations, qui peuvent être effectuées en 2D (sur la plan de la page) ou en 3D, permettent d’enrichir l’expérience utilisateur avec de tout nouveaux types d’effets visuels. Les transformations combinées avec les transitions permettent en effet d’animer des éléments HTML en effectuant des rotations, des transitions ou des changements d’échelle. Nous allons aujourd’hui appliquer ces transformations dans l’espace grâce aux transformations 3D du CSS3 ! Ce tutoriel a été rédigé par Vincent De Oliveira, enseignant et développeur à l’ENSG. Introduction Vous avez déjà entendu parler des transformations en CSS, qu’elles soient 2D ou 3D? Quelles différences entre la 2D et la 3D sur le web? Pour l’affichage d’un site web à l’écran, nous travaillons en 2D: axe X : positif vers la droite de l’écran,axe Y : positif vers le bas de l’écran. Quels navigateurs sont compatibles? Les rotations Matrice

Une police personnalisée CSS3 avec @font-face ou Google Font L’utilisation de polices personnalisées a toujours été un problème pour les développeurs et les webdesigners. Une image de texte est affichée correctement par tous les navigateurs, tandis q’un vrai texte peut être référencé et sélectionné. Il est à présent possible grâce à la propriété @font-face d’embarquer des polices sur son site, et que celles-ci s’affichent correctement même si l’utilisateur n’a pas la police installée. Avant toute chose il est important de savoir quels navigateurs implémentent la fonctionnalité @font-face… A tous les coups ça ne va pas marcher sur Internet Explorer ! Eh bien si ! Le @font-face simple Commençons tout d’abord par le cas simple qui fonctionnera correctement sur tous les navigateurs modernes. Ce bout de code un peu particulier ne sert pas à appliquer un style à un élément, mais à déclarer une police. Une fois la police déclarée, elle est utilisable comme n’importe quelle autre police : Et c’est tout ! @font-face ultra compatible Haha effectivement !

Menu déroulant en CSS3 avec transition et max-height Menu déroulant en CSS3 avec transition et max-height Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 52 989 fois. Il y a quelques temps déjà, Lea Verou proposait d’utiliser la propriété max-height afin d’effectuer des animations sur un élément sans toucher à la propriété height. Démonstration Le sujet du menu déroulant est très sensible. Un bout de HTML Le code HTML est assez classique, il s’agit d’imbriquer des listes non-ordonnées. <ul id="menu"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Level 1.1</a></li> <li><a href="#">Level 1.2</a></li> </ul> </li><li><a href="#">Menu 2</a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3</a></li> <li><a href="#">Level 2.4</a></li> </ul> </li><li><a href="#">Menu 3</a> <ul> <li><a href="#">Level 3.1</a></li> <li><a href="#">Level 3.2</a></li> <li><a href="#">Level 3.3</a></li> </ul> </li> </ul> Place au CSS

Des images rondes en CSS3 Avec le CSS3, on peut faire des choses qui nécessitait autrefois l'utilisation d'un logiciel de design (type Photoshop ou Gimp). Par exemple comment rendre une image ronde? Nous allons voir comment le faire tout d'abord avec une technique qui ne marche que sous chrome et safari et ensuite une technique qui fonctionne sur tous les navigateurs modernes (Firefox, Opera, Safari, Chrome et IE9). le principe est relativement simple, il suffit d'utiliser la propriété border-radius CSS3 (et ses équivalents pour les navigateur : -moz-border-radius, -webkit-border-radius). Vous noterez tout de même que sous Firefox, Opera et internet Explorer 9, la première technique ne fonctionne pas. A partir de cette exemple, on peut ainsi décliner cet exemple avec d'autres propriétés CSS La technique la plus compatible reste encore de mettre l'image au niveau du div dans la propriété css background mais au niveau référencement c'est un manque à gagner.

CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. CSS: Centrer un objet Centrer des lignes de texte Le plus fréquent (et donc) le plus facile des types de centrage est de centrer des lignes de texte dans un paragraphe ou dans un titre. CSS possède la propriété 'text-align' pour cela: Chaque ligne d'un P ou d'un H2 est centrée entre les marges, comme ceci: Les lignes à l'intérieur de ce paragraphe sont toutes centrées entre les marges du paragraphe, grâce à la valeur 'center' de la propriété CSS 'text-align'. Centrer un bloc ou une image Quelquefois, ce n'est pas le texte qui doit être centré, mais le bloc dans son ensemble qui doit l'être. Cet étroit bloc de texte est centré. C'est également la façon de centrer une image: placez-la dans un bloc spécifique et appliquez lui la propriété margin. L'image suivante est centrée: Centrer verticalement CSS niveau 2 ne possède pas de propriété pour centrer des objets verticalement. L'exemple ci-dessous montre comment centrer un paragraphe à l'intérieur d'un bloc qui possède une certaine hauteur donnée.

CSS Zen Garden: The Beauty of CSS Design SlideToggle : simplifiez vous la vie pour afficher et masquer un élément - BlogYann BlogYann Dans la série jQuery simplifie moi la vie, voici la méthode .slideToggle. Voir la démo Imaginez que vous avez un div monBloc que vous voulez masquer ou afficher en fonction du clic sur le lien displayBloc <a id="displayBloc" href="#">Contenu masqué</a><div id="monBloc">Lorem Ipsum</div> Plutôt que de s’amuser à appeler une fonction afficheMasque sur l’évènement onclick du lien pour un résultat sans animation comme ci-dessous : function afficheMasque(){ if(document.getElementById('monBloc').style.display=='none'){ document.getElementById('monBloc').style.display='block'; }else{ document.getElementById('monBloc').style.display='none'; }} Utilisez slideToggle pour obtenir la même chose avec une animation. $(document).ready(function(){ $("#displayBloc").click(function () { $("#monBloc").slideToggle("slow"); });}); La vitesse d’apparition/disparition du bloc est déterminée par ‘fast’ ou ‘slow’ ou être spécifié en millisecondes. N’oubliez pas d’inclure l’appel à jQuery dans la balise HEAD. ShareThis

In Pieces - 30 Endangered Species, 30 Pieces. Slideshow en CSS3 Un slideshow automatique grâce aux keyframes Je vous ai fait débuter par le plus complexe avec le concept de :target, juste pour vous faire souffrir ;) Vous allez vraiment apprécier cette technique un peu plus simple qui consiste à laisser tourner l'animation en la faisant passer par différentes étapes. Notre CSS va ensuite définir une animation par images-clefs. Dans un premier temps nous annonçons l'utilisation des keyframes. Une autre manière d'écrire cette même animation serait celle-ci: Cette syntaxe permet de gagner en place en regroupant les points d'étape. Ne pas oublier les préfixes pour chaque navigateur (@-moz-keyframes , @-webkit-keyframes, etc.) - Il est aussi possible de remplacer 0% et 100% respectivement par from et to. - Il est également possible d'utiliser des valeurs en pourcentage pour left. Continuons en réattribuant les styles précédemment utilisés à notre slide : Puis les styles concernant l'élément qui défile dans son conteneur : Voir l'exemple

Responsive design : définition, fonctionnement, ressources et tutoriels Si vous vous intéressez de près ou de loin au webdesign ou à l’intégration, vous n’avez pas pu échapper au dernier terme à la mode : le “responsive web design”. Cette avancée technologique est également une nouvelle philosophie de création de site. Voici un article pour définir ce qu’est le “responsive web design” et expliquer quels en sont les points-clés (puis plein de liens, de tutoriels et de ressources super cools aussi !). Le “responsive web design” est né suite à un besoin grandissant. Le problème est qu’on ne peut pas – ou du moins ce ne serait pas très pratique – développer autant de versions d’un site qu’il y a de résolutions différentes. Définition du responsive web design Cette évolution des techniques de webdesign, d’intégration et de développement se base sur un objectif simple : un même site doit pouvoir s’adapter lui-même aux différentes résolutions d’écrans… et donc son contenu aussi ! Voici 2 exemples pour illustrer des webdesigns crées de façon “responsive” : La typo 1.

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...) -ms- pour Microsoft (Internet Explorer) -khtml- pour KHTML (Konqueror) 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 Quelques inconvénients font surface : Recommandation d'usage courant

Related: