Usage Examples | MaxImage 2.0 Caution: This example is meant for expert users. Remember, with FillElement you can often accomplish an offset scheme very easily... just set your containing element where you want the images to be displayed. Because the first rule of Maximage 2.0 is to try to remain hands off and out of your way, the built in support for offsets have been dropped with version 2.0. This doesn't mean they aren't possible. With a little elbow grease they can still be accomplished (and are better). What I am doing with the below code is creating curtains / offsets that live in front of the slideshow. Once we have our curtains up, the slideshow is still resizing to the full window and we want to have it maximize within the viewable area... our window size minus our offsets. View Example
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). 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)
Concevoir un système de LazyLoading en jQuery » Shakup Le principe du « lazy loading » est simple : faire en sorte que votre navigateur charge uniquement les images qui sont visibles par l’internaute. Il est, en effet, inutile de charger l’ensemble de votre page si votre visiteur ne compte pas parcourir l’intégralité de celle-ci. Et cela est d’autant plus valable si votre page fait 3 kilomètres de long et possède des dizaines d’images. En mettant en place ce système, vous augmenterez à la fois l’expérience utilisateur (page chargée plus vite) mais vous économiserez également votre bande passante. Le concept Pour mettre en place notre système de « lazy loading », nous allons jouer sur les balises <img>. Par défaut, les images seront des pixels transparent de 1×1 pixel.Ces images possèderont la classe lazyL’adresse de l’image réelle sera stockée dans un attribut data-src Voilà donc à quoi devront ressembler les images de nos pages : Le Javascript La fonction principale de notre plugin se nommera lazyload(). $(window).scroll(lazyload); lazyload();
Eric Meyer's css/edge Please note that none of the demonstrations in css/edge are intended to work in Navigator 4.x. I say this not to denigrate that browser, but instead to spare you any frustration you might otherwise feel. This site exists to explore the cutting edge of HTML+CSS design, and Navigator 4.x is, at four years and counting, just too old to keep up with most things that will be done here. Again, there's nothing wrong with Navigator 4.x, but you probably don't want to use it in this area. Consider it a friendly warning. Welcome to the edge What is this? Expanding our horizons For the last seven years, we've been pushing Web design further and further down the same path. Like tables, there is another highly limiting structure that's composed of rows and cells: a prison. css/edge is intended, first and foremost, to be as relentlessly creative with CSS as we have been practical all these years. Inclusion Criteria Copyright
Semantics - Dive Into HTML5 You are here: Home ‣ Dive Into HTML5 ‣ Diving In his chapter will take an HTML page that has absolutely nothing wrong with it, and improve it. Parts of it will become shorter. Parts will become longer. All of it will become more semantic. Here is the page in question. The Doctype From the top: This is called the “doctype.” Microsoft came up with a novel solution. This idea spread like wildfire, and soon all major browsers had two modes: “quirks mode” and “standards mode.” In his seminal work, Activating Browser Modes with Doctype, Henri Sivonen summarizes the different modes: Quirks Mode In the Quirks mode, browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s. (You should read the rest of Henri’s article, because I’m simplifying immensely here. Now then. That happens to be one of the 15 doctypes that trigger “standards mode” in all modern browsers. This is the HTML5 doctype:
css float image flottante floatleft : image flottante gauche dans paragraphe Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mauris. floatright : image flottante droite dans paragraphe Nullam erat. paragraphe entre images avec Clear: both; Ce paragraphe contient une image flottante à droite et une image flottante à gauche. Ce paragraphe en rouge a un "clear : both" et de ce fait se placera en dessous des deux images et pas au milieu. Floatleft et tableau sans cellules Il est tout à fait possible de faire croire au visiteur qu'il est en présence d'un tableau bien structuré... Vignette et <p> Code HTML : <p class="floatleft">vignette 01</p> <p class="floatleft">vignette 02</p> <p class="floatleft">vignette 03</p> ... vignette 01 vignette 02 vignette 03 vignette 04 vignette 05 vignette 06 Vignette et <div> Code HTML : <div> <div class="vignettediv">vignette 01</div> <div class="vignettediv">vignette 02</div> ...
pngquant — lossy PNG compressor DevDocs/HTML HTML, which stands for HyperText Markup Language, is the most basic building block of a webpage and used for creating and visually representing a webpage. It determines the content of a webpage, but not its functionality. HTML adds "markup" to standard English text. Hyper Text refers to links that connect Web pages to one another, making the World Wide Web what it is today. By creating and uploading Web pages to the Internet, you become an active participant in the World Wide Web once your site is online. The articles here provide reference materials for web development. HTML Reference In our extensive reference, you'll find the details on each element and attribute that makes up HTML. References Block-Level Elements HTML (Hypertext Markup Language) elements are usually "block-level" elements or "inline" elements. CORS Enabled Image CORS Settings Attributes Controlling Spell Checking in HTML Forms Firefox 2 introduces spell checking support to text areas and text fields in web forms.
Internet Explorer for Mac the Easy Way: Run IE 7, IE8, & IE9 Free in a Virtual Machine If you’re a Mac user that requires the usage of Internet Explorer under Mac OS X, you’ll find your choices are generally as follows: run IE on top of Mac OS X with Wine which can be slow and buggy, dual boot Windows and Mac OS X which is a nuisance because it requites rebooting, or use virtualization with something like Parallels, VMWare, or VirtualBox. Virtualization is generally the best method because you can run IE and other Windows apps directly atop OS X, but some of the VM software is expensive and you still need a Windows license key, right? Wrong! Run Internet Explorer 7, 8, 10, & 11 in Mac OS X the Easy & Free Way We’re going to walk you through how to install Internet Explorer 7, 8, 9, 10, and 11 in a virtual machine running Windows, directly in Mac OS X – for free. Notes: the admin password for all of the IE VMs is “Password1″ without the quotes. Installation size per IE Virtual Machine is about 11GB, to install all Windows VM’s it will take about 48GB of disk space.
CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Regrouper les images en sprites — Compass, sauvez l'intégrateur ! — Introduction à Compass — piouPiouM’s dev Compass rend bien des services dans un domaine habituellement long, rébarbatif et — il faut le dire — prise de tête à gérer manuellement : la génération d’images en sprite. Regrouper ses images en une seule est une bonne pratique lorsque l’on vise à améliorer les performances Web d’un site. Les sprites permettent en effet de réduire le nombre de connexions HTTP ouvertes par le navigateur, ce qui contribue à réduire les temps de latence lors de l’attente des réponses du serveur et, de ce fait, à réduire le temps de chargement de la page web. Usage basique Basiquement, un sprite se génère en 2 étapes : on importe toutes les images (au format PNG obligatoirement) d’un répertoire puis on inclut les autant de classes CSS qu’il y a d’images. @import "icon/*.png";@include all-icon-sprites; Notez que le nom icon du répertoire des images est repris dans le nom du mixin en charge d’inclure les classes CSS automatiquement générées par Compass. Les dimensions sont ainsi bien précisées : Super.
Bienvenue sur la ZONE CSS | ZONE CSS - Les css et leurs relations avec les balises HTML et XHTML (définitions css V4.0)