background preloader

CSS/CSS3

Facebook Twitter

A Complete Guide to Grid. CSS Grid Layout is the most powerful layout system available in CSS.

A Complete Guide to Grid

It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items). This article was ported over from Chris House's guide, by Chris himself, who is keeping both up-to-date. CSS Grid Layout (aka "Grid"), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.

CSS has always been used to lay out our web pages, but it's never done a very good job of it. There are two primary things that inspired me to create this guide. My intention with this guide is to present the Grid concepts as they exist in the very latest version of the specification. Firefox 52+ supports CSS Grid out of the box. Desktop. Create Your Own @font-face Kits.

Fonts

Responsive. Media Queries Are Not The Answer: Element Query Polyfill. Responsive Web design has transformed how websites are designed and built. It has inspired us to think beyond device classifications and to use media queries to adapt a layout to the browser’s viewport size. This, however, deviates from the hierarchical structure of CSS and characterizes elements relative to the viewport, instead of to their container. Extensive use of media queries might be the answer for today, but it is not a viable long-term solution. Media queries do not allow for reusable modules that adapt based on their containers’ size. What Is Responsive Web Design? Responsive Web design is not limited to a set of technologies; rather, it is a different approach to designing and building websites. “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.”

Media Queries Are Not The Answer: Element Query Polyfill.

Parallax

HSLColorPicker. Apprendre les mises en page CSS. Créer une grille CSS responsive. Build more with less. CSS Front-end Frameworks with comparison - By usabli.ca. Une vidéo d'arrière-plan sur toute la page en HTML et CSS. How to Create CSS3 Speech Bubbles Without Images.

I remember my creating my first image-less speech bubble many years ago.

How to Create CSS3 Speech Bubbles Without Images

It required a long-winded JavaScript function to inject elements into the DOM, some horrendous CSS, looked fairly awful, and didn’t work well in IE5. CSS3 is starting to change our lives for the better. It’s now possible to create a great looking speech bubble which works in all browsers, uses a single HTML element, a few lines of CSS3 code, no images, and no JavaScript whatsoever… To ease you in gently, let’s examine the HTML.

Vertical align anything with just 3 lines of CSS. With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height.

Vertical align anything with just 3 lines of CSS

The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc. So, to vertically align anything we write:

Animations

Hiding elements and CSS animations. Following the last article about CSS animations using Javascript, let's see how we can apply this to something closer to a real life situation than a bouncing ball.

Hiding elements and CSS animations

Animating the disapearance of an element in a list, for example. Something to make the situation below a bit smoother: At the moment, the element removal is pretty abrupt: click the button, boom it's just gone. Simply removing an element from the DOM does not bring the smoothest visual experience. 10 Packs d'icônes gratuites et de qualité à télécharger.

Unfolding the Box Model: Exploring CSS 3D Transforms. Adaptive Backgrounds, un arrière-plan assorti avec jQuery. CSS animations and Javascript. Usualy, to animate CSS properties with Javascript, you'd use a tweening library to progressively transition their values.

CSS animations and Javascript

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. Only animatable properties will be taken into account, though. 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. Rabbit by Beard Chicken.

Flexbox

A collection of best front-end frameworks with comparison. 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.

Design web : Est-ce la fin de Photoshop? Cinq constats et quatre approches alternatives

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.

Percentage Loader, une ravissante barre de progression avec jQuery et 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.

SASS

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

Le merdier du “stacking context” en CSS (aka “pourquoi mon z-index marche pas bordel de merde” ?)

Ce n’est pas un bug, c’est comme ça que c’est supposé fonctionner. 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. However, a commonly recommended method is to place them in alphabetical order, with the prefixless version last. Gérer les débordements de contenus grâce à CSS.

Sommaire.

Gérer les débordements de contenus grâce à CSS

CSS Flip Animation. You've all asked for it and now I've added it: Internet Explorer support!

CSS Flip Animation

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

CSSrefresh - automatically refresh CSS files. 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.

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. When you’re creating a website or an application from scratch, you may need a collection of patterns helping you building thing up. Make a stopwatch using CSS3 without images or javascript.

Style Metro/Win8

CSS3 Flexbox Layout module. Knacss. Bootstrap. LESS. 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. 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.