background preloader

Couleurs du Web

Couleurs du Web
Un article de Wikipédia, l'encyclopédie libre. Les couleurs du Web désignent les couleurs utilisées dans l'affichage des pages web, ainsi que les méthodes pour définir (par des combinaisons de teintes) et référencer (par un nom de couleur) ces couleurs. Les auteurs de pages web peuvent spécifier les couleurs des éléments qui composent un document web de plusieurs manières : par un code agglutinant les valeurs hexadécimales RGB ; par un triplet donnant ces valeurs en décimal de 0 à 255 ou par un pourcentage ; par des références Teinte Saturation Luminosité. Les premières versions de Mosaic et du navigateur Netscape utilisaient les noms des couleurs X11 comme base pour leur liste de couleurs, puisque les deux logiciels ont commencé comme applications X Window System. Codage informatique des couleurs[modifier | modifier le code] Triplet hexadécimal[modifier | modifier le code] Octet 1 : valeur du rouge Octet 2 : valeur du vert Octet 3 : valeur du bleu Accessibilité[modifier | modifier le code]

The History of CSS Resets When artists begin a new painting, they don’t immediately reach for the cadmium red and the phthalo blue. They first prime the canvas . Why? To ensure that the canvas is smooth and has a uniform white hue. Many web designers prefer to use a CSS "reset" to "prime" the browser canvas and ensure that their design displays as uniformly as possible across the various browsers and systems their site visitors may use. This is Part 1 of a three-part series of articles on the topic of CSS resets. What Is CSS Reset? When you use a CSS "reset," you’re actually overriding the basic stylesheet each individual browser uses to style a web page. The problem is that every browser’s stylesheet has subtle but fundamental differences. Some of the most common elements that are styled differently among different browsers are hyperlinks ( <a> ), images ( <img> ), headings ( <h1>through <h6>), and the margins and padding given to various elements. So which browser is right, Firefox or IE? Who Uses Resets?

Système hexadécimal Un article de Wikipédia, l'encyclopédie libre. Le système hexadécimal est utilisé notamment en électronique numérique et en informatique car il est particulièrement commode et permet un compromis entre le code binaire des machines et une base de numération pratique à utiliser pour les ingénieurs. En effet, chaque chiffre hexadécimal correspond exactement à quatre chiffres binaires (ou bits), rendant les conversions très simples et fournissant une écriture plus compacte. Étymologie[modifier | modifier le code] L'adjectif hexadécimal provient de la juxtaposition de hexa et de décimal. Pour obtenir une cohérence dans l'étymologie tout en conservant l'écriture 6+10, la documentation Bendix utilisait l'appellation sexadécimal ; mais l'appellation fut rejetée, jugée trop risquée. Écriture des entiers[modifier | modifier le code] Le système hexadécimal nécessite l'introduction de 16 chiffres, représentant les 16 premiers entiers naturels : Conversion[modifier | modifier le code] où

A Comprehensive Guide to CSS Resets This guide examines the infinite-like variety of CSS resets created by web developers and designers across the world. While almost all of these CSS resets are generally provided free for public use (many through Creative Commons licensing), it is incumbent upon you to check the terms of use before putting them to use in your projects. This guide follows Part 1, where the history of CSS resets was discussed; you’re advised to read that before this one to get the most out of this guide. This is Part 2 of a three-part series of articles on the topic of CSS resets. In putting together this guide, the 2007 collection of resets by Jeff Starr — who, as an aside, has contributed articles on Six Revisions — was used as a jumping-off point. "Hard" Reset As discussed in Part 1 of this series, the original version of the "hard" reset was by web designer Andrew Krespanis: It wasn’t long before folks added border: 0; and outline: 0; to the list of properties, giving us: Poor Man’s Reset Siolon Reset

Codage informatique des couleurs Le codage informatique des couleurs est l'ensemble des conventions permettant l'affichage ou l'impression par un périphérique informatique d'une image en couleurs, plutôt qu'en noir et blanc. Le codage se base sur la synthèse additive trichrome des couleurs. Des modules permettent, dans les programmes d'édition d'images, la détermination et la modification des couleurs par l'utilisateur avec l'un ou l'autre de ces jeux de paramètres. Principes[modifier | modifier le code] Il y a lieu de se demander quelle est la quantité d'information nécessaire à l'affichage de la couleur. Les mêmes raisons s'appliquant à chaque canal de couleur primaire (rouge, vert, bleu), on peut leur attribuer chacun un octet. Une estimation grossière des capacités à distinguer les couleurs donne environ 15 à 20 000 nuances identifiables ; en prenant comme référence le seuil de discrimination des couleurs, on arrive, dans les meilleures conditions d'examen, à un demi-million de couleurs[1]. Exemple :

Should You Reset Your CSS? By Michael Tuck This article explores the ongoing debate on whether or not web designers and web developers should reset their CSS, sharing the thoughts and opinions of several web professionals. This is a three-part series of articles on the topic of CSS resets. After discussing the rich and interesting history of CSS resets (Part 1) and going over CSS reset stylesheet options (Part 2), we will now discuss the pros and cons of using reset stylesheets here in Part 3. The Benefits of Resetting Your CSS Web designer/developer and book author Morten Rand-Hendriksen is a huge fan of CSS resets; he has advised everyone to use them as the foundation of their stylesheets. Defending the "hard reset" method, Coyier outlined two main concerns that web designers typically have against using the universal selector. The first is that it can break web browser default styles for things such as form elements, which he said was "untrue" unless you use a border:0 property in the style rule. Acknowledgements

Graphic Arts, Web Design, Page Optimization and Website Marketing Services - Art Gallery Inclure un fichier dans une page HTML sans utiliser <iframe> Si l'usage des inclusions en langage serveur n'est pas possible et si l'on tient à éviter l'usage contesté de la balise <iframe>, il est théoriquement possible d'utiliser la balise générique <object> pour inclure n'importe quel format de fichier au sein d'un document HTML. Cependant, bien que cela fonctionne parfaitement sur Firefox, tous mes essais sur Internet Explorer avaient lamentablement échoués jusqu'à ce jour. En fait, pour utiliser l'élément <object> sous Internet Explorer il faut en définir explicitement les dimensions : Merci à Xavier pour m'avoir ouvert de nouveaux horizons ;) Il reste un seul hic : pas moyen de supprimer ou cacher les vilaines barres de scroll autour de l'objet. EDIT de derrière les fagots Merci à Cassy d'avoir exhumé cette astuce et d'y avoir apporté une solution. Exemple pour page.html : c'est la page principale qui appelle l'objet <! ... puis il faut appliquer ces styles à la page fille object.php :

Web Graphics Tutorial This tutorial consists of the following lessons: This web graphics tutorial shows you how to create graphics for your website, and is designed for beginners - you don't have to know anything about graphics. It is preferable that you know how to link to an image using HTML or CSS, but that's not essential - we'll cover that later on anyway. And in case you're wondering - creating web graphics is easy! What this tutorial will show you, is how to create an image so you can upload it to a web server. The term image and web graphic is often used interchangeably on the web. You might also like to check out the GIMP tutorial. Start Tutorial →

Objects, Images, and Applets in HTML documents 13.1 Introduction to objects, images, and applets HTML's multimedia features allow authors to include images, applets (programs that are automatically downloaded and run on the user's machine), video clips, and other HTML documents in their pages. For example, to include a PNG image in a document, authors may write: <BODY><P>Here's a closeup of the Grand Canyon: <OBJECT data="canyon.png" type="image/png"> This is a <EM>closeup</EM> of the Grand Canyon. </OBJECT></BODY> Previous versions of HTML allowed authors to include images (via IMG) and applets (via APPLET). They fail to solve the more general problem of how to include new and future media types. To address these issues, HTML 4 introduces the OBJECT element, which offers an all-purpose solution to generic object inclusion. The new OBJECT element thus subsumes some of the tasks carried out by existing elements. The chart indicates that each type of inclusion has a specific and a general solution. Attribute definitions src = uri [CT]

Photoshop Tutorials — Web Graphics In this tutorial, I will show you how to create an address book icon using Adobe Photoshop. You'll start with a simple grid, take full advantage of the Snap to Grid feature, create a set of simple vector shapes, and color them using basic Layer Style attributes and some Photoshop pattern presets. Finally, I will show you how to add subtle shading and highlights using basic blending techniques and simple effects. In this Photoshop tutorial we’ll be creating a bokeh effect background that can be used in a parallax effect website design. What you’ll learn in this Photoshop Elements Tutorial: -Preparing images for the Web -Saving files for the Web Want to land clients while building your brand and network? Learn how to create a custom designed loading animated GIF using Photoshop's timeline. In this tutorial you will learn to make a beautiful Valentine’s Day card in Photoshop CS6. Image overlay pattern comes in very handy when a website has a full screen image or a video as a background.

About rel="canonical" - Webmaster Tools Help If you have a single page accessible by multiple URLs, or different pages with similar content (for example, a page with both a mobile and a desktop version), Google sees these as duplicate versions of the same page. Google will choose one URL as the canonical version and crawl that, and all other URLs will be considered duplicate URLs and crawled less often. If you don't explicitly tell Google which URL is canonical, Google will make the choice for you, or might consider them both of equal weight, which might lead to unwanted behavior, as explained below in Why should I choose a canonical URL? Why should I choose a canonical URL? There are a number of reasons why you would want to explicitly choose a canonical page in a set of duplicate/similar pages: To specify which URL that you want people to see in search results. Which is my canonical URL, according to Google? Use the URL Inspection tool to learn which page Google considers canonical. Specify a canonical page General guidelines

Create a web 2.0 business layout Hello. This is our first photoshop tutorial here on Grafpedia. You can subscribe to the rss feed to receive our next tutorials. In this tutorial i will show you how to create a web 2.0 business layout. I will use the following size for my layout : height 900 pixels, width 1000 pixels The size is not so important, but if you want to create web 2.0 layouts you need to create large websites, with a lot of empty spaces, and when you choose the text size, it should be a bigger size Choose Rounded rectangle tool, and on the top in the Control panel, you need to set the radious of rounded corners to 15 px Set your foreground color to #313538 Create a few shapes on your document With the same tool, create another white shapes like in the following image. Now i will turn the colors to white. You can see a smooth line around the white shapes. This are my settings At the top of the layout, i will create another shape with the tool : Rounded Rectangle Tool For this button, i will add a layer style.

Les sprites CSS - Alsacréations 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). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple). Les avantages des sprites CSS sont multiples : La technique des sprites CSS Principe (avec sprite)

La rivincita dei web designer: l'elogio della bellezza di dati e interfacce ~ Web Sul Campo - Web, fashion e business intelligence con poche pugnette. Partiamo da un'idea, semplice e chiara, espressa in non so quale gruppo di campioni digitali. Se non ci diamo da fare, di questo passo avremo un livello di alfabetizzazione digitale accettabile nel giro di 30/35 anni. Io ne avrò 73, probabilmente mi farò la pipì addosso (già ora quando mi scappa mi scappa) e non avrò proprio voglia di tenere uno smartphone o tablet in mano. Invece di programmatori ce n'è tanto bisogno, ve lo dico. I dati, lo strumento di conoscenza più bella che abbiamo. Sono reduce da un incontro in cui il Matteo, Digital Champion di Prato, ha parlato di OpenStreetMap e dell'importanza di descivere e raccogliere in maniera strutturate le caratteristiche dei luoghi su mappe aperte. Dopo 15 anni di sviluppo su sistemi proprietari Microsoft, sono forse la persona meno indicata per parlare della filosofia dei dati aperti: c'è davvero troppa gente che ne sa e sente la questione più di me. Sì, bella, avete letto bene. Il sito, poi.

Related: