background preloader

CSS & Sass Tita Créa

Facebook Twitter

How to Style a List with Font Awesome Icons – Code Theory. So we already know how to create really cool pure CSS social media icons using Font Awesome, but what else can we do with this awesome icon library?

How to Style a List with Font Awesome Icons – Code Theory

One really cool way to utilize the icons is by using them in place of bullets when styling unordered lists. Font Awesome is a library of hundreds of different icons and symbols that can be used for free by developers in any project. Wordpress Twenty Sixteen - Getting Rid of the Black Border - Melissa Carter Design. Créer un guide de style.

CSS Grid Layout + Flexbox

Sass Less et préprocesseurs CSS. Node.js, Gulp & npm. Apprendre les mises en page CSS. StyleStats - An evaluating tool for writing better CSS. Zoom sur l'effet parallaxe. 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.

Living CSS Style Guides & Pattern Libraries. June 4th, 2012 A number of tools have recently sprung up with the aim of generating and maintaining one’s own CSS Pattern Libraries or CSS Style Guides.

Living CSS Style Guides & Pattern Libraries

Living front-end CSS style guides can especially be quite powerful if done right. CSS Sprites: What They Are, Why They're Cool, and How To Use Them. By Chris Coyier On This article has been revised and re-written several times since its very first publication in 2007, to keep the information current.

CSS Sprites: What They Are, Why They're Cool, and How To Use Them

The most recent revision was done by Flip Stewart in January 2015. #What are CSS Sprites? Spoiler alert: they aren't fairies that write your stylesheets for you. CSS. Css - Spacing between grid cells in Zurb Foundation 4. Text Rotation with CSS. Once again, after reading somebody else's article, I felt inspired to put together an alternative example.

Text Rotation with CSS

In this case: Text Rotation. Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. 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. I am going to show you how to create a barebones CSS flyout menu.

CSS Flyout Menu Starter Kit

If you are looking for templates, check out our CSS Flyout Menus page. The following code is not meant to be a finished product for your website. Instead, I am simply trying to provide a robust starting point for designers to expand upon. The goal here is to create a structured yet flexible flyout menu that can be used in any design. 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.

Randomize Background Image. Explore CSS lengths. 50 Useful CSS Snippets Every Designer Should Have. With so many new trends advancing every year it can be difficult keeping up with the industry.

50 Useful CSS Snippets Every Designer Should Have

Website designers and frontend developers have been deeply ingrained into the newer CSS3 properties, determining the ultimate browser support and quirky hacks. But there are also brilliant CSS2 code snippets which have been unrequited in comparison. For this article I want to present 50 handy CSS2/CSS3 code snippets for any web professional. These are perfect for storing in your development IDE of choice, or even keeping them saved in a small CSS file. CSS Architecture — Philip Walton. To many Web developers, being good at CSS means you can take a visual mock-up and replicate it perfectly in code.

CSS Architecture — Philip Walton

You don’t use tables, and you pride yourself on using as few images as possible. If you’re really good, you use the latest and greatest techniques like media queries, transitions and transforms. While all this is certainly true of good CSS developers, there’s an entirely separate side to CSS that rarely gets mentioned when assessing one’s skill. CSS Zen Garden: The Beauty of CSS Design. So What is This About?

CSS Zen Garden: The Beauty of CSS Design

There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. Css. 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. With the rise of browser-based IDEs it seems web development is becoming less fixed to the desktop. Install the Compass Stylesheet Authoring Framework. Installing Ruby Compass runs on any computer that has ruby installed. For more advanced users you may want to install rvm. Setting up the ruby environment $ gem update --system$ gem install compass Looking for the next release's preview version? Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way. By Andrey Sitnik On 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. Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using the Can I Use database to determine which prefixes are needed. Postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use. Tutoriel Vidéo HTML-CSS Framework CSS Compass. 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. CSS. CSS Variables: Why Should You Care? CSS variables, more accurately known as CSS custom properties, are landing in Chrome 49. They can be useful for reducing repetition in CSS, and also for powerful runtime effects like theme switching and potentially extending/polyfilling future CSS features. CSS clutter When designing an application it’s a common practice to set aside a set of brand colors that will be reused to keep the look of the app consistent. Unfortunately, repeating these color values over and over again in your CSS is not only a chore, but also error prone. If, at some point, one of the colors needs to be changed, you could throw caution to the wind and “find-and-replace” all the things, but on a large enough project this could easily get dangerous.

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. When it comes to learning and remembering CSS, there’s no reason why you need to commit every property and class to memory when you can quickly look up anything you need to know in just a few seconds. But while search engines (read: Google) offer a quick way to search for CSS answers, it can be difficult to know which ones are actually helpful and, more importantly, up-to-date. In our recent member survey we asked you what your biggest hurdle is in learning WordPress and an overwhelming number of you said you wanted to level up your coding skills and become more proficient in HTML, CSS and PHP. With that in mind, and to help you conquer CSS, we’ve curated this selection of some of our favorite resources for learning and referencing CSS and related languages and preprocessors, such as Bootstrap, SASS and LESS.

CSS3 Box Shadow Generator - CSS3gen. Corpus. A collection of CSS things. Absolute Horizontal And Vertical Centering In CSS. Vert. + horiz. align. IMG - A Pen by Jeppe Sigaard. CSS: centering things. Styling Contact Form. Adding an Inset Shadow to an Image Using CSS3. Learn to Code HTML. Créer des menus simples en CSS. Background révélé par des images coulissantes en CSS. Utiliser des polices différentes sur votre site avec @Font-Face - Suivez le tutoriel. How To Make A Bio Dropdown Box With CSS. Le guide complet pour centrer en css. How to Center in CSS. CSS - mozilla aide développement. 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.