background preloader

CSS & Sass Tita Créa

Facebook Twitter

Apprendre les mises en page CSS. Ce site vise à vous apprendre les bases de CSS utilisées pour structurer n'importe quel site web.

Apprendre les mises en page CSS

Ce site s'adresse aux personnes ayant une base (notions de sélecteurs, de propriétés et de valeurs). Le CSS ou Littéralement Cascading Style Sheets (feuilles de style en cascade), est un langage déclaratif simple pour mettre en forme des pages HTML ou des documents XML. Le langage CSS permet de préciser les caractéristiques visuelles et sonores de présentation d'une page Web : les polices de caractères, les marges et bordures, les couleurs, le positionnement des différents éléments, etc. Le terme de "Cascading" Style Sheets sous entend qu'il est possible de définir un style pour une page HTML puis, à l'intérieur de cette même page, de fournir des informations plus précises ou différentes pour présenter certains éléments plus distinctement. Des CSS dynamiques grâce au langage LESS.

Vous avez toujours voulu utiliser des variables, des fonctions, ou encore faire de l'héritage avec le langage CSS ?

Des CSS dynamiques grâce au langage LESS

StyleStats - An evaluating tool for writing better CSS. Revue : Prepros - Geek'n'Lady. Et bonjour !

Revue : Prepros - Geek'n'Lady

Comme vous le savez maintenant, je suis une adepte de Sass. Mais qui dit Sass (ou même Less), dit compilation. Très sincèrement, ça m’embêtait de devoir à chaque fois lancer cmder et de demander à Ruby d’écouter les dossiers de mes sites et de les compiler. D’une part parce qu’en tête en l’air que je suis, j’oublie à chaque fois la commande, d’autre part parce que… j’aime quand les choses sont simples et rapides ! Au boulot, aucun problème pour compiler nos sites en Less étant donné que je suis sur un Mac avec CodeKit (oui je sais, coder sur Mac c’est le mal mais je n’ai pas vraiment le choix !) Il s’agit d’un logiciel gratuit qui possède également une version payante. Prepros est le compagnon de vos projets SASS - Seemios Blog. Prepros est un petit logiciel qui va vous faciliter la vie, surtout si vous ne supportez pas la ligne de commandes.

Prepros est le compagnon de vos projets SASS - Seemios Blog

Zoom sur l'effet parallaxe. Après avoir abordé les arrière-plans extensibles (full background) nous allons continuer avec l'effet parallaxe.

Zoom sur l'effet parallaxe

Cet effet graphique étant facile à comprendre et à mettre en place, vous allez pouvoir créer rapidement un site original. CSS Flexbox live > test display: flex. Methods for Controlling Spacing in Web Typography. If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups.

Methods for Controlling Spacing in Web Typography

Then you may have tried explaining to me the pains of cross-browser compatibility and how different browsers render fonts differently from one another. In response, I likely would have sent you an image file that contains the content instead to make sure everything looked the same in all browsers. Yes, I was one of those designers. Web fonts have come a very long way since then and we now have tools to tweak the way fonts render in browsers. Some have been around for quite a while. There are still plenty of situations today where adjusting fonts is needed to ensure the best legibility despite having all these fancy tools. Getting one exact headline to look right Take the following headline using Abril Fatface from Google Fonts:

10 Best CSS Code Generators for Web Developers. Web developers are always looking for shortcuts to save time in their routine.

10 Best CSS Code Generators for Web Developers

Many great dev tools ease the process, and it’s now easier than ever to jump in and get a finished product quickly. Digging Into Sass - A Guide. A while ago Thoriq Firdaus wrote a great article about getting started with Sass which showed you how to install and use this highly useful CSS preprocessor language (you might want to check it out, you know, to get started).

Digging Into Sass - A Guide

In this article I thought I’d give you a bit more insight into what you can do with Sass and how developers use it every day to create better and more modular CSS code. Skip ahead to the section you want: Recommended Reading: Using Bootstrap 3 With Sass. 11 Mixin Libraries For Sass Designers Should Get. If you use Sass in your development workflow, you know the importance of mixins.

11 Mixin Libraries For Sass Designers Should Get

When you see some things that are written repeatedly and tediously in CSS, that’s where mixins can help you prevent repetitive work. Bourbon - A Lightweight Sass Tool Set. Install the Compass Stylesheet Authoring Framework. Installing Ruby Compass runs on any computer that has ruby installed.

Install the Compass Stylesheet Authoring Framework

For more advanced users you may want to install rvm. Setting up the ruby environment $ gem update --system$ gem install compass. Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way. The following is a guest post by Andrey Sitnik, the creator of the Autoprefixer tool, a "postprocessor" for handling vendor prefixes in CSS. Why use this instead of your preprocessor or another tool? Many reasons. Andrey will explain. Tutoriel Vidéo HTML-CSS Framework CSS Compass. Sur le site Kaelig.fr > Sass Reference. Syntax There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS3. This means that every valid CSS3 stylesheet is a valid SCSS file with the same meaning.

Playground CSS & HTML > Dabblet. CSS Shorthand Guide : paramètres multiples e.g. font ou background. Sunday Oct 23 2005 Ok. Let's set the record straight. There is no official guide for each and every CSS shorthand property value. So let's work together and put one together shall we? Center div. Kaelig.fr > Sass Reference. CSS. CSS Variables: Why Should You Care? Toutes les définitions des propriétés feuilles de style css (définitions css V4.0) A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources. CSS3 Box Shadow Generator - CSS3gen. Use this CSS3 box shadow generator to quickly generate box shadow CSS for your project. Your browser does not support the CSS3 box-shadow property. You can still use this tool to generate the CSS3 rule, but you won't be able to see the results.

<div class="error_msg">Please enable Javascript to use this page.

Node.js, Gulp & npm

Sass: Sass Basics. Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Corpus. A collection of CSS things. Absolute Horizontal And Vertical Centering In CSS. We’ve all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now!

But actually (spoiler alert!) Absolute centering only requires a declared height*1 and these styles: I’m not the pioneer of this method (yet I have dared to name it Absolute Centering), and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of a particular article2. There, Simon3 linked to this jsFiddle4 that blew every other method out of the water (the same method was also mentioned by Priit5 in the comments). Vert. + horiz. align. IMG - A Pen by Jeppe Sigaard. CSS: centering things.

See also the index of all tips. Centering lines of text The most common and (therefore) easiest type of centering is that of lines of text in a paragraph or in a heading. CSS has the property 'text-align' for that: renders each line in a P or in a H2 centered between its margins, like this: The lines in this paragraph are all centered between the paragraph's margins, thanks to the value 'center' of the CSS property 'text-align'. Centering a block or image. Styling Contact Form. How do I style contact form? This is a common question on the support forum. Contact Form 7 doesn’t provide any customization for styling.

Editing CSS style sheets is the best method to style contact forms. In this article, I’ll show you some important steps for styling your contact forms. If you know about CSS, my explanation is simple. Which Style Sheet Should I Edit? Any style sheet is okay, but I recommend editing your theme’s main style sheet. Adding an Inset Shadow to an Image Using CSS3.

Learn to Code HTML. KNACSS/03-grilles.md at master · raphaelgoetter/KNACSS. Créer des menus simples en CSS. Dans ce tutoriel, nous allons apprendre à réaliser des menus "simples" (sans arborescence: tous les liens sont au même niveau) à l'aide des feuilles de style. Sommaire. Background révélé par des images coulissantes en CSS. Encore un tutoriel sympa de Dudley Storey : créez des images coulissantes révélant un background, en pur CSS, grâce à clip-path et transform / translate. Un effet simple, construit astucieusement comme toujours! Par Dudley Storey D’une manière générale, il est préférable de ne pas toucher à l’intégrité d’une photographie mais il est possible de partager une image pour révéler un contenu caché. La plupart des méthodes utilisent deux images, mais nous allons voir qu’il est bien plus efficace de le faire en utilisant CSS :

Utiliser des polices différentes sur votre site avec @Font-Face - Suivez le tutoriel. @Font-Face est compatible avec les navigateurs : IE 5+ / Chrome / Firefox / Opéra / Safari. How To Make A Bio Dropdown Box With CSS. After I released the most recent Theme Lab redesign, I had a number of comments on the “bio dropdown” box I have up in my navigation bar. Le guide complet pour centrer en css. How to Center in CSS. Sass Guidelines. CSS - mozilla aide développement. Cascading Style Sheets (CSS) est un langage de feuille de style utilisé afin de décrire la présentation d'un document écrit en HTML ou en XML (on inclut ici les langages basés sur XML comme SVG ou XHTML).

CSS décrit la façon dont les éléments doivent être affichés, à l'écran, sur du papier ou sur autre support. CSS est l'un des langages principaux du Web et a été standardisé par le W3C. Ce standard évolue sous forme de niveaux (levels), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et CSS3, qui est découpé en modules plus petits est en voie de standardisation. The Future Generation of CSS Selectors: Level 4. Liens utiles. CSS3 Generator - By Peter Funk & Eric Hoffman. 30 Free Intuative CSS Snippets. Code Snippets. Un guide qui a du style ! Pattern Libraries - Getting Started. A List Apart: Style Guide. Living CSS Style Guides & Pattern Libraries. CSS Sprites: What They Are, Why They're Cool, and How To Use Them.

CSS. Css - Spacing between grid cells in Zurb Foundation 4. Text Rotation with CSS. ZONE CSS - Les css et leurs relations avec les balises HTML et XHTML (définitions css V4.0) Pompage.net - Inline-block est-il un substitut aux floats ? Apprendre CSS : cascade, héritage et spécificité. CSS Flyout Menu Starter Kit. Sélecteurs css - Tais toi et code. Les sélecteurs CSS 2 et 3. Créer un menu vertical latéral en css II - Copier coller. Livre Sass et Compass avancé, optimiser ses feuilles de style – Éditions Eyrolles. Sass Reference. Randomize Background Image. Explore CSS lengths. 50 Useful CSS Snippets Every Designer Should Have.

CSS Architecture — Philip Walton. CSS Zen Garden: The Beauty of CSS Design. Css.