background preloader

HTML EMAIL BOILERPLATE v 0.4 updated 5/12

HTML EMAIL BOILERPLATE v 0.4 updated 5/12

Initializr - Start your HTML5 project in 15 seconds! Email Client Market Share and Popularity - October 2014 Animated Tag Cloud: TagCanvas | HTML5 & CSS3 TagCanvas is a open source javascript class which will draw and animate a HTML5 canvas based tag cloud. It has support for text +images and can be shaped as a sphere, hcylinder or vcylinder. The resource has so many settings for maximum customization and works even in IE (thanks to ExplorerCanvas). TagCanvas in IE The canvas element is not supported by Internet Explorer versions up to and including version 8. At the time of writing you must use the latest trunk version of ExplorerCanvas, as the current version in the project downloads area does not have the required text output support. Compatibility: All Major BrowsersWebsite: Author: Admin We hope, We will become the best, creative and inspiring community for web and graphics.

mgeraci/Less-Boilerplate .gradientV4(#F2F1CB, #F0CED6, 33, #CED3F0, 66, #D2F0CE); hover to see compiled code background: #e2f1cd; background-image: -moz-linear-gradient(top, #f2f1cb, #f0ced6 33%, #ced3f0 66%, #d2f0ce); background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f1cb), color-stop(0.33, #f0ced6), color-stop(0.66, #ced3f0), to(#d2f0ce)); background-image: -webkit-linear-gradient(top, from(#f2f1cb), color-stop(0.33, #f0ced6), color-stop(0.66, #ced3f0), to(#d2f0ce)); background-image: -o-linear-gradient(top, #f2f1cb 0%, #f0ced6 33%, #ced3f0 66%, #d2f0ce 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f1cb, endColorstr=#d2f0ce); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f1cb, endColorstr=#d2f0ce); background-image: linear-gradient(top, #f2f1cb 0%, #f0ced6 33%, #ced3f0 66%, #d2f0ce 100%); .gradientH4(#F2F1CB, #F0CED6, 33, #CED3F0, 66, #D2F0CE);

Crash Course: Building an Email Newsletter If you’ve spent your career dealing with web standards — and enjoyed watching the progressive disappearance of those creaky, old, legacy browsers — your first contact with email newsletter building might be a little painful. You are going to need to throw out a lot of your web design golden rules to get the compatibility you’ll need with email clients. In fact, while in 2013 the Standard Web Project Team had been able to say “Our Work Here is Done”, the road to email standards still appears to be very long indeed. You can see an example of how email clients render the same content looking at Email Standard Project Acid tests. In the screenshot below, you can see how the same mail appears in Apple Mail and Gmail: Email design does require you to reinvent some of your skills. So, let’s start by summarizing the main points of email design to give you the widest cross-email-client compatibility: Email building workflow Set up a prototype In this phase you’ll want to create a design that:

Initializr – Un générateur de templates basé sur HTML5 Boilerplate Trouver son code couleur HTML ! Les couleurs avec du CSS sont les mêmes que celles avec un code HTML. Pour faire référence à d'autres couleurs, vous devrez utiliser le code hexadécimal. Vous pouvez choisir votre couleur en cliquant ici : <-- Cliquer ici Il existe des couleurs nommées normalisées : Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs : Il est possible d'avoir l'ensemble des couleurs de l'arc en ciel :) avec une sa valeur hexadecimal : Couleur HTML et CSS En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style. color: Gestion de la couleur du texte letter-spacing: Espace entre les lettres text-align: Alignement d'un texte text-decoration: Habiblement d'un texte A savoir : Dans ce chapitre, la notion d'héritage est appliquée. Couleur d'un texte ou une phrase en CSS Espace entre les lettres Alignement d'un texte Ce texte est aligner à gauche.

yepnope.js | A Conditional Loader For Your Polyfills! 9 plugins jQuery pour réaliser des effets de parallaxe Tendance désormais bien ancrée dans le paysage du webdesign, le défilement parallaxe (ou scrolling différentiel) est une technique qui consiste à donner une impression de profondeur à travers des portions de décors défilant à vitesse variable. Voici une liste non exhaustive de 9 plugins jQuery pour mettre en place des effets de parallaxe sur votre site web. Superscrollorama, successeur de l’excellent Scrollorama, permet de réaliser de superbes animations et effets parallaxes lorsqu’on scroll sur une page web, notamment grâce aux transformations CSS3. Seulement quelques lignes de code pour un scrolling original et amusant. 2. jParallax jParallax est un plugin jQuery qui permet de mettre en place facilement un effet de parallaxe sur un groupe d’éléments HTML. 3. Curtain.js est un plugin jQuery permettant de réaliser une page web avec un défilement parallaxe des différentes sections sous forme de « panneaux ». 4.

Related: