background preloader

CSSrefresh - automatically refresh CSS files

CSSrefresh - automatically refresh CSS files
Related:  CSS/CSS3

Animated 3D Flipping Menu with CSS CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet 3D CSS flip card, and much more. Today's we'll create a simple but awesome 3D flipping menu as featured here! The HTML The HTML structure consists of a list with links, as you would expect from a navigation menu, however there are a few extra SPAN elements to aid the 3D effect: <ul class="block-menu"><li><a href="/" class="three-d"> Home <span aria-hidden="true" class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span></a></li><li><a href="/demos" class="three-d"> Demos <span aria-hidden="true" class="three-d-box"><span class="front">Demos</span><span class="back">Demos</span></span></a></li></ul> The CSS The animation centers around transitions and transforms.

CSS Flip Animation You've all asked for it and now I've added it: Internet Explorer support! Annoyingly enough, the change involves rotate the front and back elements instead of just the container. Skip to this section if you'd like the Internet Explorer code. IE10+ is supported; IE9 does not support CSS animations. CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. Quick note: this is not the first tutorial about this effect, but I've found the others over-complicated. The HTML The HTML structure to accomplish the two-sided effect is as you would expect it to be: There are two content panes, "front" and "back", as you would expect, but also two containing elements with very specific roles explained by their CSS. The CSS CSS Flip Toggle CSS Vertical Flip

Create a Trendy Retro Photo Effect Purely with CSS I’ve done plenty of retro photo effect tutorials in the past, but they’ve all been done using Photoshop. After playing around with some cool new CSS3 features I managed to create a pretty decent looking retro style image effect using just CSS. With the help of CSS gradients and filters, let’s take a look at how a cool vintage photo effect can be created directly in the browser. This little technique uses a mix of CSS gradients and filters to combine various colour overlays to create that typical old school analogue photo effect. Currently CSS filters only work in Webkit browsers (Safari, Chrome), but it won’t be long until this fun little tip can be put into practice across all browsers. In order to create a retro photo effect, we first need a photo. In the CSS add the above code to instantly create a cool retro effect on any image. The CSS begins with a box-shadow rule using the values inset 0px 0px 100px rgba(0,0,20,1);.

Basic Ready-to-Use CSS Styles This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements. View demo Download source Today we are going to dig a little bit more into process development. You can also build classes of classes to custom things to suit your needs. This way the .custom class by itself has no point but if you apply it to a .my-class element, you can tweak a little bit the .my-class styles. Now you got the basic idea, let’s have a look at those patterns, starting with the block-level elements. Note that there are no vendor specific prefixes in this tutorial, but you can find the prefixed styles in the CSS. Block-level elements You are creating an image gallery and want to give some subtle styles to the pictures? The Markup For this whole section, I took an a division with the class “block-level” and added the additional classes to it. The Basic CSS Shadows Links

CSS3 Flexbox Layout module Vous connaissez certainement le modèle de boîte classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte distinct, que l’on appellera “le Modèle de boîte flexible”. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Au sein de ce schéma, on ne raisonne plus en “block” ou “inline”, ni même en float ou autres types de boîtes “classiques” CSS, mais en “Modèle de boîte flexible”, dont les quatre possibilités principales sont : Note : ce tutoriel a été initialement rédigé en octobre 2010. En action ! Flexbox (le modèle de boîte flexible) se fonde schématiquement sur une architecture de ce type : Démonstration display: flex Compatibilité Standardisation

Gérer les débordements de contenus grâce à CSS Sommaire Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants. Préambule J'ai une mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression. Puisque - heureusement - il n'est plus possible de fixer la taille, voici un point sur les différentes techniques modernes permettant de canaliser les caprices de vos contributeurs… overflow: hidden : circulez, y'a rien à voir ! La propriété CSS2 overflow a été conçue pour administrer les débordements d'éléments au sein d'un bloc. A l'heure actuelle, le peu de valeurs prises en charge par cette propriété la rend quelque peu abrupte : soit le contenu est tronqué et masqué (valeur hidden), soit de laides barres de défilement apparaissent (valeur scroll ou auto). Voici comment mettre en œuvre cette propriété : Exemple (HTML) : Partie CSS : Compatibilité Conclusion

Public service announcement: time to update your CSS3 If you use experimental CSS on your sites, demos, articles or tools, there is a certain amount of maintenance required to keep on top of changes. With a number of recent changes in the browser world, now is the time to revisit and update your code. Read on to find out what may need updating. Reorder your prefixes There is no specific order that you should place your prefixed properties. Opera recently added support for -webkit- prefixes for a limited number of CSS properties. -webkit-property -moz-property -ms-property -o-property property This also has the benefit that it looks relatively neat, and its easy to spot if you have missed one once you are used to using this scheme. This is one of the least critical updates to make in this post, but can prove to be useful. Remove redundant prefixes A number of commonly used CSS3 properties have been available without prefix for quite a while now, such as border-radius. box-sizing Recommended usage: box-shadow border-radius border-radius: value;

Le merdier du “stacking context” en CSS (aka “pourquoi mon z-index marche pas bordel de merde” ?) C’est une règle en CSS que beaucoup de designers connaissent, mais la première fois qu’on s’y frotte on se sent très con: on ne peut pas appliquer z-index à un élément dont le parent possède déjà un “stacking context”. Ce n’est pas un bug, c’est comme ça que c’est supposé fonctionner. Qu’est-ce qu’un “stacking context” ? On appelle “stacking context” l’état d’un élément que le navigateur garde en mémoire pour effectuer le rendu de cet élément dans la page. Chaque fois que vous utilisez une propriété comme z-index, opacity ou transform sur un élément dans un fichier CSS, le navigateur recalcule le “stacking context” pour savoir si il met maintenant cet élément devant ou derrière les autres à la même position que lui. Et du coup, j’ai pas compris le début, c’est quoi déjà le problème ? Si vous faites un truc qui change le “stacking context” d’un élément, vous ne pouvez appliquer z-index sur aucun de ses enfants. Ainsi si vous avez un HTML comme ça: Et que vous faites ça dans votre CSS:

Percentage Loader, une ravissante barre de progression avec jQuery et HTML5 Percentage Loader est un plugin jQuery léger (10Kn minified) qui permet d’afficher une superbe barre de progression circulaire via HTML5. Facilement mis en place, le widget propose plusieurs options pour contrôler le chargement du loader. Un widget orienté design Percentage Loader est avant tout un widget, c’est-à-dire que le script jQuery par défaut ne se charge pas d’animer la progression du loader, mais il propose des options et méthodes qui le permettent, le tout avec un design soigné via l’élément HTML5 canvas ; il faudra ajouter votre propre couche jQuery pour contrôler le déroulement du chargement. Il est possible d’exécuter plusieurs loaders simultanément. Installation du loader Commencez par inclure jQuery et Percentage Loader. Ensuite, vous définissez un élement HTML quelconque. Puis vous faites appel au plugin avec un sélecteur de votre HTML. Options et exemple d’animation C’est le paramètre de callback onProgressUpdate qui va nous permetter d’animer la barre de progression.

Design web : Est-ce la fin de Photoshop? Cinq constats et quatre approches alternatives La multiplication des appareils mobile introduit le besoin de développer des sites présentant une mise en page adaptative. Dans ce contexte, une question se pose avec encore plus d'insistance qu'auparavant : Photoshop est-il encore le bon outil pour créer le design graphique d'un site? Pour tenter d'y répondre, je propose un recensement des principales problématiques liées à l'utilisation de Photoshop pour le design web, ainsi que quelques pistes de solutions. D'abord, voici cinq constats quant à l'utilisation de Photoshop (ou pour tous les autres éditeurs de fichier bitmap) dans le contexte d'un design graphique Web. Photoshop permet d'imaginer des effets difficile voir impossible à créer en HTML « [Photoshop composition] can become sink holes of developer time leading to brittle, buggy code and time misspent on elements of dubious importance. » Edward O'Riordan Le classique des classiques : Photoshop offre des possibilités infinies, alors que le Web a des limites. 1. 2. 4. Conclusion

Menu fixe avec un effet de slide en CSS3 Aujourd'hui nous allons apprendre comment rendre la navigation de vos utilisateurs plus facile en créant un menu fixe toujours visible. Mais pour que ce menu ne gène pas le contenu de chaque page, on masquera la moitié des images utilisées pour le menu. Les images ne s'afficheront entières qu'au survol de la souris. Pour commencer, nous allons écrire le code HTML nécessaire à la navigation en utilisant le tag <ul> pour créer une liste. Chaque item de la liste contient un lien (tag <a>) et chaque lien contient une image. Comme l'exemple ne porte que sur une seule page, les différents liens sont des ancres qui renvoient vers des id d'éléments sur la même page. La partie la plus importante de cet article concerne le code CSS car il va nous permettre de fixer le menu ainsi que de lui appliquer le style voulu. Tout d'abord nous allons écrire le code qui permettra de créer la barre de navigation fixe en utilisant la classe CSS nav.

Les transitions en CSS3 Je pense que nous sommes au point sur le principe, voyons maintenant comment on le met en œuvre. Voici les propriétés que nous allons voir dans la suite de cet article : Sans oublier la propriété raccourcie : transition qui regroupe celles sus-citées. Firefox a besoin d'une version préfixée (-moz-transition-*) et ce depuis la version 12. Idem pour Chrome et Safari (WebKit oblige), préfixe (-webkit-transition-*) depuis la version 20 pour Google et 5.1 pour Apple. Enfin, Opera, pour qui il faut le préfixe -o depuis la version 12. Pour des raisons de clarté et de lecture, les exemples ci-dessous ne seront pas préfixés. Entrons dans le vif du sujet avec ceci : Bon, ici, rien d'extraordinaire ; une petite page en HTML 5 avec un <title> « très recherché » et un bloc gris arrondi grâce à la propriété CSS3 border-radius avec du texte ombré par text-shadow. Essayez, vous verrez ! Hop hop hop ! Allez, on décortique pour que vous compreniez bien l'utilisation de ces propriétés. Voici lesdites options :

CSS animations and Javascript | Rhumaric, pixel distiller Usualy, to animate CSS properties with Javascript, you'd use a tweening library to progressively transition their values. But this uses precious UI thread time and CSS3 brings in CSS animations, which run off the UI thread. Performance improvement sounds good, so let's have a look at how they play along with Javascript! A quick intro to CSS animations CSS animations are based on keyframes that define the style of the animated element at different stages of the animation. You define the set of keyframes for a specific animation using the @keyframes rule. You can notice that keyframe position in the animations are defined in percent, not time units. Triggering an animation Triggering your animation with Javascript is as simple as setting the appropriate CSS animation property on your element, using the style Javascript property, or a class, whichever you prefer. That's already a good deal of control over your animations in Javascript. Javascript generated keyframes Wrapping it up

Adaptive Backgrounds, un arrière-plan assorti avec jQuery Adaptive Backgrounds est un plugin jQuery qui permet d’assortir le background de votre site avec les images que vous aurez préalablement définies : la technique consiste à extraire la couleur dominante de l’image et de l’appliquer sur l’arrière-plan de son élément parent. Des couleurs en harmonie Le plugin cible toutes les images qui possèdent l’attribut data-adaptive-background, attribut personnalisé HTML5 qui permet de stocker une donnée associée à la balise HTML courante. Une fois la couleur dominante récupérée, le script applique la propriété CSS background-color sur l’élément parent de l’image. Deux options sont disponibles pour modifier le sélecteur d’image (par défaut data-adaptive-bacground=’1′) et le sélecteur de l’arrière-plan (par défaut le parent le plus proche), ainsi qu’un événement déclenché lorsque la couleur dominante de l’image est trouvée, qui retourne la couleur principale, ainsi que la palette de couleurs contenue dans l’image. Mise en place du script

Related: