Blog, Freebies | Icojam - sweetest free & premium royalty-free stock icons Cosmo mini is a free version of Cosmo icons and includes 1566 icons in 40×40 sized pixel-perfect PNG + “testdrive” icons in PSD, AI, CSH, SVG, 60×60 sized PNG. All icons are monocolored and divided into following categories: Baby, Basic, Building, Culture, Devices, Documents, Education, Finance, Food 1-3, Holiday, Layout, Medicine, Mobile, Multimedia, Navigation, Player, Symbols, Transport, User, Weather, Work, Furniture, Appliance. License: These icons are free to use in any kind of commercial or non-commercial project unlimited times.Ammount of icons: 1566Sizes: 40×40File Types: .pngTestdrive file types: PSD, AI, CSH, SVG, 60×60 sized PNG. If you need vector and hi-res version of these icons you can buy them on Creative Market: Cosmo icons.
Le Web c’est pas en 72 dpi, coco! Pour fêter ma présence sur ce blog — youloulou, foule en liesse! — je vous propose de dézinguer un mythe du petit monde de l’informatique et du graphisme. Ce mythe dans sa plus simple expression: Le print c’est en 300 dpi, et pis le web c’est en 72 dpi. Et donc, ça c’est faux. Densité des pixels d’un écran: à vos calculettes! Petit exercice pratique: nous allons calculer ensemble la densité de pixels d’un écran. Sur cet écran, 1 mm correspond à un peu moins de 4 pixels.On aura un résultat différent sur d’autres écrans. Pour notre exercice, prenons par exemple l’écran de mon iMac (insérez ici un troll de votre choix). Sa diagonale est de 20 pouces (à peu près, c’est probablement une valeur arrondie).Sa définition native est de 1680 pixels en largeur, et 1050 en hauteur. Pour savoir quelle est la densité de pixels de mon écran, je peux diviser la longueur de la diagonale en pixels par cette même longueur en pouces, et j’obtiendrai un résultat en pixels par pouce. Chaque écran est différent
Ce que vous avez toujours voulu savoir sur CSS Aujourd’hui, c’est un fait: tout le monde connaît et utilise CSS. Et c’est tant mieux! Cependant, bien que le langage en lui-même soit plutôt simple, certains aspects peuvent sembler encore obscurs. Cet article fait suite à une présentation que j'ai donnée lors de la Kiwi Party 2013, puis lors des MSTechDays 2014. CSS, c’est simple «Le langage CSS, c’est très simple». Ne vous cachez pas, je vous vois… On s'est tous déjà dit: <td>CSS Sucks</td>! La cascade CSS Le C de CSS signifie Cascading (cascade en français), ça tout le monde le sait. les feuilles Author: les devs webles feuilles User: les utilisateursles feuilles UA: les styles navigateurs (modifiés éventuellement par les réglages des utilisateurs) La cascade CSS applique alors un poids à chaque déclaration en suivant cet ordre: récupération de toutes les déclarations CSS pour le média cibletri des déclarations suivant cet ordre UAUserAuthorAuthor ! On remarque que les styles utilisateurs ! Spécificité des sélecteurs Les valeurs CSS
Typo & Web Ce support de cours n’est qu’un survol du livre Typo & Web de Aurélien Foutoyet [All for Design] que je vous engage vivement à acheter. Rappels La lisibilité Définition lisible (adj.) 1.dont les caractères écrits sont faciles à lire. 2.digne d’être lu. 3. 1800 : expérience d’Anisson “Dans les années 1790 il fit composer puis lire deux pavés de textes dans le même corps, l’un en Didot, l’autre en Garamond. 1843 : expérience de Leclerc Le lecteur devine plus qu’il ne lit.La moitié d’un mot suffit pour en comprendre le sens.Même effacé, un mot peut être deviné en fonction de ceux qui le suivent et le précèdent.La partie supérieure des mots est suffisante pour pouvoir comprendre le sens d’un texte. 1886 : world shape model de James Catell L’unité de lecture serait le mot et non la lettre.La silhouette des mots semble jouer un rôle dans la reconnaissance de ces derniers. texte tiré de Mallarmé — Intervalles et espaces vides 1905 : expérience de Javal 1962 : expérience de Richaudeau Lisibilité sur le web
lorempixel - placeholder images for every case Tombez pour SMACSS | @nicoespeon Petit tour d'horizon sur ces guidelines qui feront de vous un bûcheron du CSS, un vrai. Timber ! SMACSS est un ensemble de conseils et de lignes de conduite élaborés par Jonathan Snoovvk et dont le but est de vous permettre d’organiser votre CSS de manière claire et intelligente. Le premier principe réside dans la catégorisation : on distingue et regroupe les règles CSS par affinité logique afin de structurer son code (base, layout, module, state, theme). Le second principe relève de la convention de nommage : ne pas utiliser des ID quand une classe fait très bien l’affaire, nommer les classes de manière à faire ressortir la logique qui s’y cache, … Le troisième principe consiste à découpler le HTML du CSS : garder chaque module indépendant du contexte HTML dans lequel il se trouve, utiliser les sélecteurs d’enfants à bon escient, … Avec ces 3 principes, SMACSS vous permet de poser des bases solides pour un CSS de qualité, made in Canada ! Principe et intérêts Les 3 grands principes de SMACSS
Les codes de la Typographie #1 - Structure et vocabulaire de la lettre - typographie Pour ce mois d'avril, nous allons réaliser un dossier complet sur la Typographie. Essentiel dans la réalisation d'un logo ou d'un slogan elle peut véhiculer des messages puissants et différents selon ses formes. Dans ce premier numéro nous allons compre Définitions : Caractère : Désigne une lettre. 1 - Capitale : Appellé grossièrement Majuscule, il existe deux type de capitales : Les grandes ( 1a ) utilisées en début de phrase et les petites ( 1b ) avec la hauteur et la graisse des minuscules. 2- Minuscule ou Bas de case : Lettre de hauteur moyenne, pouvant posséder des parties scendantes et descendantes. 3 - Barre ou traverse : Partie horizontale des lettres 4 - Diagonale ou branche : Représente les parties obliques d'une lettre 5 - Ligne de base ou ligne de pied : Ligne sur laquelle les lettres sont alignées 6 - Hauteur du X ou hauteur courante : Hauteur des lettres bas de case ne contenant aucune ascendante et descendante. 11 - Empattement : Cela représente le pied du Fut ( Montant ).
HTML Templates News or Magazine This template puts a focus on bold images, perfect for a magazine style site with eye catching content. Your stories are easy to find with large feature blocks. See Demo Real Estate or Travel Big thumbnails with a space for captions and descriptions along with an informative header make this the perfect template for real estate or hotel booking. See Demo Ecommerce Homepage Building an online store? See Demo Agency Bring your work to the forefront with this sleek template that's perfect for agencies or freelancers. See Demo Blog w/ Sidebar Large images, an easy to navigate layout, and versatile sidebar will help you get your blog up and running. See Demo Blog Single Column This sleek, minimal approach can help your blog stand out by putting content front and center. See Demo Portfolio Show off your work and highlight what you do with this grid style thumbnail layout. See Demo Product Page Highlight your new product and educate potential customers with this classic template. See Demo
Conventions CSS • Conseils et bonnes pratiques Accueil → La plupart du temps, j'utilise simplement des classes délimités par des traits d'union (ex. .foo-bar, pas .foo_bar ou .FooBar), mais dans certaines circonstances, j'utilise la notation BEM (Block, Élément, Modifieur). BEM est une méthode pour nommer et classifier vos sélecteurs CSS de façon à les rendre beaucoup plus strict, transparent et informatif. La convention de nommage suit ce modèle : .block {}.block__element {}.block--modifieur {} .block représente le niveau supérieur d'une abstraction ou d'un composant. .block__element représente un descendant de .bloc puisqu'il contribue à former .bloc dans son ensemble. .block--modifieur représente un état ou une version différente de .block. Une analogie du fonctionnement de la méthode BEM : .personne {}.personne--femme {} .personne__main {} .personne__main--gauche {} .personne__main--droite {} Ici, nous pouvons voir que l'objet de base que nous décrivons est une personne, et qu'un autre type de personne pourrait être une femme.
Home Les sprites CSS Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Les avantages des sprites CSS sont multiples : Des sites à fort trafic (Youtube, Google, Facebook, Amazon, ...) exploitent cette technique sur des pages que vous consultez tous les jours : Inconvénients
Bonnes pratiques en CSS : BEM et OOCSS Des années durant, j'ai intégré des sites Web et développé des applications JavaScript sans ressentir le besoin d'une méthodologie pour nommer les classes CSS. Puis, les projets grossissant, le code CSS est devenu douloureux… L'épineux sujet du nommage en CSS est loin d'être fermé. Depuis le début de la décennie, plusieurs auteurs majeurs ont partagé leurs recherches. Ils ont apporté un regard nouveau et sont allés à contrecourant, en rupture avec ce qui faisait jusqu'alors consensus. Sommaire Je me suis d'abord tourné vers OOCSS (Object Oriented CSS), un ensemble de bonnes pratiques initiées par Nicole Sullivan (Stubbornella). Le concept de OOCSS est de repérer des « objets CSS », c'est-à-dire des « patterns visuels » qui se répètent, et de définir ainsi des classes réutilisables. OOCSS met en avant deux principes : Le principe de séparation de la structure et de l'apparence ; Le principe de séparation du conteneur et du contenu. Mais OOCSS correspondait imparfaitement à mon besoin. Aïe.
17 Useful & Fresh Tools for Web Designers Don't Forget to participate in a contest where you can win an amazing e-Commerce template from TemplateMonster. Despite the fact that there is a huge plethora of web tools that are available for the web developers and designers to help them with their work, designers and developers always need some fresh tool that can expedite their work flow. A useful tool is just like a blessing for the designer and for the web developer as well. Having good tools and useful resources make web development easier and save time as well. Mailrox A web application to quickly build bulletproof HTML emails. BootMetro Simple and complete web UI framework to create web apps with Windows 8 Metro user interface. Spritebox Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. Tiny Fluid Grid The happy & awesome way to build fluid grid based websites. Sequence.js Sequence is the jQuery slider plugin with infinite style. TiltShift Jarallax Favicon 0to255