CSS3 : 9 morceaux de code prêts à l'emploi Comme bien souvent dans notre métier, ce que nous souhaitons faire a déjà été fait, Je vous propose ici, une petite sélection de "snippets" CSS3, ce sont des portions de codes réutilisables à utiliser dans vos projets. Il peut arriver qu'on recherche à réaliser quelque chose en CSS3 bien que ce langage soit encore assez "jeune", j'entends par là, très peu utilisé / utilisable dans des projets de grande envergure (compatible IE). Comme bien souvent dans notre métier, ce que nous souhaitons faire a déjà été fait, alors pourquoi réinventer la roue ? Je vous propose ici, une petite sélection de "snippets". Bien qu'il s'agisse de codes dit réutilisables, il faudra très certainement repasser dessus afin de faire quelques ajustements pour qu'ils correspondent à vos besoins N'oubliez pas que certaines propriétés CSS3 utilisés dans ces snippets, ne sont pas comprises par tous les navigateurs et que certaines nécessitent l'utilisation de préfixes. Effet feuilles superposées n°1 Démo | Source Démo Démo
Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the Ian Lunn Design Limited Store and purchase a commercial license. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial Commercial License Purchase | Read full license Extended Commercial License Purchase | Read full license
CSS3 – Effet parallaxe (sans JavaScript) Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3. C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel. J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations. Démonstration Place à l’explication ! Concept Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre. <!
110 CSS Menu Collection of HTML and CSS menu with little JavaScript: accordion, circular, dropdown, fullscreen, horizontal, mobile, off-canvas, side, toggle and sliding. Demo and download code (*zip). Update of November 2016 collection. New 8 items. Slide Accordion Menu Slide accordion menu with HTML, CSS and JavaScript. Swanky Pure CSS Drop Down Menu Pure CSS drop down menu. Accordion Menu Simple accordion menu with HTML, CSS and JavaScript. Accordion Drop Down Menu HTML, CSS accordion menu with jQuery. Side Accordion Menu HTML, CSS, jQuery sidebar accordion menu. Vertical Accordion Menu Using jQuery And CSS3 A sleek vertical accordion menu for your next website/app. Only CSS3 Dropdown Menu CSS3 dropdown menu with vibrating effects. Flat Vertical Navigation A simple flat vertical navigation with multi animated drop down menu. A simple flat vertical navigation with a simple dropdown menu. Circular Menu Rotating circular menu. Rings Navigation Concept Circular Navigation Concept Simple Radial Menu Radial Menu
80+ Free CSS3 HTML5 Menu Tutorials [updated] HTML5 and CSS3 have both revolutionised web design and we all see more powerful and functional websites using these two languages.HTML5 and CSS3 have many advantages like faster loading times,greater functionalities and more flexibility.You can apply to any website very easily. In today’s post we have collected free CSS3/HTML5 menu tutorials and plugins.This is a really huge list.Enjoy..!! [UPDATED - jQuery Menu Tutorials Added] How to Create a CSS3 Dropdown Menu View Tutorial and Demo Orman Clark’s Vertical Navigation Menu: The CSS3 Version View Tutorial and Demo Pure CSS3 LavaLamp Menu View Tutorial and Demo HTML5/CSS3 Gray Navigation Menu View Tutorial and Demo How to Build and Enhance a 3-Level Navigation Menu View Tutorial and Demo CSS3 Minimalistic Navigation Menu View Tutorial and Demo Colorful CSS3 Animated Navigation Menu View Tutorial and Demo Making a CSS3 Animated Menu View Tutorial and Demo Create a stunning menu in CSS3 View Tutorial and Demo Flat Turquoise Vertical Dropdown Menu Sidr mmenu
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.
#130: First Moments with Grunt There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors. Optimize images. Run tests. Grunt is perfect for reining all this in. In this screencast we cover getting Grunt up and running on a simple project. Relevant Links: Make sure you've done first: Install NodeGrunt site: getting startedMy Grunt Boilerplate - which does what we did in this screencast plus more stuff.Grunt plugins we talked about: Uglify, Sass, Watch Note: I know I'm a Grunt newb. Download Video File
Menu horizontal en CSS - CSS Debutant Les menus sont logiquement des listes à puces. Oui, mais voilà, si on veut un menu horizontal, on ne voit pas bien comment faire devenir une liste verticale en liste horizontale... Et bien si ! Fonctionne avec : Tous les navigateurs graphiques Attributs utilisés : background-color border-color ; border-style ; border-width color float height list-style-type padding text-align ; text-decoration width Code (x)html <ul><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item plus long</a></li></ul> Ce code html va donc être stylisé afin d'obtenir un menu horizontal, soit sous forme de boutons simples sans images, soit avec des images de fond qui changeront au survol de la souris par effet rollover. Mise en forme de boutons CSS simples Le principe est donc de transformer cette liste à puces verticale en liste (sans puces) horizontale. Chaque item (li) devra néanmoins être légèrement écarté de son voisin, on va donc déclarer une marge droite à 2 pixels (margin-left:2px).
Modèle de boite CSS Résumé Le modèle de boîte CSS définit les boîtes rectangulaires qui sont générées pour les éléments de la structure HTML. En CSS une boîte est constituée de 4 valeurs : margin les marges extérieures border les bordures padding les marges intérieures width le contenu Par défaut, la longueur totale du modèle de boîte et l’addition des valeurs du padding, des borders et de la propriété width. L’évolution box-sizing La propriété box-sizing est issue de la spécification CSS3. Elle est utilisée pour modifier le modèle de boîte par défaut qui est utilisé pour calculer la largeur et la hauteur des éléments. Elle accepte 3 valeurs : content-box C’est la valeur par défaut. padding-box Les propriétés width et height sont calculées en additionnant le padding et le contenu, mais pas le border. border-box Les propriétés width et height incluent le padding, les border, mais pas la marge extérieure. Exemple de la valeur : border-box Facilitez-vous la vie
12 nouvelles ressources jQuery et CSS Quoi de mieux pour booster votre esprit créatif web que de bons plug-ins utiles pour vos futures créations ? Webdesigner Trends vous propose 12 ressources récemment sélectionnées sur le web. C’est parti ! Pour cette sélection, j’ai décidé de ne pas m’arrêter à une utilisation précise. ElementTransitions.js Faisant suite à un article de Codrops sur les transitions de pages, elementTransitions.js est un répertoire de transitions originales basées sur jQuery et CSS3. Tabulous.js Un plugin d’onglet jQuery moderne, tout simplement. Intro.js Idéal pour une application web, le plugin Intro.js vous permet de faire une rapide visite guidée de votre interface pas à pas. Souvenez-vous de l’âge d’or de la tendance des menus sticky au scroll. Effeckt.css Une collection d’effets de transitions et d’animations en CSS. Mmenu Un plug-in tendance pour créer un menu sur mobile avec une seul ligne de JS. Swiper Swiper est un gros slider destiné aux mobiles et tablettes. Toolbar.js CSS Checkbox Superbox Tooltipster