Adaptive Images in HTML HTML5 Please - Use the new and shiny responsibly Transitions CSS3 Beaucoup d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript. Grâce aux dernières évolutions du langage et au module CSS3 Transitions, il est désormais possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) La spécification est le document qui définit de manière claire, précise et univoque le langage. Les spécifications des CSS 3 sont découpées en modules. Le module qui nous intéresse est nommé CSS Transition Module. La spécification relative au module est disponible à l'adresse suivante : Remarque : Les moteurs récents implémentent la spécification. Principe de base Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché : Exemples concrets
Revised Font Stack | A Way Back Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts. “… font stacks are ultimately design factors, and should be scrutinized as such.” Baskerville, Garamond and Palatino have already been used a few times to create font-stacks that inspire. I’ve selected 10 popular typefaces, serif and sans-serif, each from the survey. MicrosoftTahoma, Verdana, Segoe, sans-serif;Microsoft.com will be (in most cases) rendered in Verdana on Mac, and in Tahoma on Windows. Times New RomanIf we look at the above snapshots taken from Sushi & Robots’ about page, we will find that Palatino and Georgia have different x-height (and weight) than Baskerville and Garamond. I’ve created a font-stack for each typeface while considering the font share table statistics.
CSS3 test Dans la grande lignée des tests Acid ou de HTML5test, il y a désormais le CSS3 test, qui permet de donner une idée du support des propriétés de CSS3. Les résultats annoncés pour les principaux navigateurs sont les suivants, mais peuvent varier selon les configurations. Ils sont donc à prendre avec des pincettes : Chrome Canary, WebKit nightlies, Firefox Nightly : 64% Chrome, IE10PP4 : 63% Firefox 10 : 61% Safari 5.1, iOS5 Safari : 60% Opera 11.60 : 56% IE9 : 39% Note : seules les propriétés reconnues par les navigateurs sont testées, cela n'implique pas qu'elles soient correctement implémentées.
Initiation au positionnement en CSS Pour éviter l'usage inconsidéré des tableaux de mise en page, l'utilisation correcte de chaque élément (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS est dorénavant indispensable. Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des balises (faussement nommées "calques" en général), ce qui les rend souvent peu compatibles et peu pratiques. Cet article en deux parties explique comment positionner les éléments en CSS de façon optimale. Résumé et pense-bête. Voici les principaux points à retenir de cet article : Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionnés, ... grâce aux styles CSS. Les balises de bloc et les balises en-ligne Ce chapitre sur la structure des balises est primordial, vous devez auparavant avoir consulté le tutoriel sur les bloc/en-ligne. Voici un résumé pour les lecteurs pressés les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot).
Merging Realities: Skeuomorphic Design Infographic Auditory skeuomorph This type of skeuomorphism can be easily illustrated with audio effect that imitates that sound of the camera shutter while you are taking pictures with your cell phone. You know that there is no mechanical shutter in your device but it does exactly the same sound like its real life analogue. Visual skeuomorph Visual skeuomorphism refers to using various textures (wooden, metallic, paper etc.) which will emulate design of things from the real world. Skeuomorph design stands between minimalistic and functionally-oriented designs. Spoke patterns Various spoke patterns in automobile hubcaps and wheels resembling earlier wheel construction (wooden spokes or wire spokes). Leather grain Artificial leather grain on items that traditionally used leather but now use plastics, such as car dashboards and books. Nonfunctional pockets Nonfunctional pockets in clothing. Cork textures Cigarettes with the paper around their filter printed to look like cork. Flame-shaped light bulbs Familiarity
CSS Débutant : tutoriels sur les CSS3 Réaliser des coins arrondis Arrondir les coins est sûrement l'un des effets graphiques les plus recherchés par les webdesigners. Pour cela, on a longtemps utilisé des images avec plus ou moins de bonheur et de facilité pour obtenir l'effet recherché. Tous les navigateurs récents permettent à présent d'arrondir les coins de cadres, d'images, de tableaux etc. avec une facilité déconcertante. Créer des ombres sur les boites et du texte Ombrer des boites ou du texte sans images c'est possible ! Voici les explications, illustrées de quelques exemples, de réalisations d'ombres en CSS. Images multiples dans un même background La propriété background-image n'acceptait, en CSS 2.1, qu'une seule image. Les CSS3 permettent des background multiples, et maintenant que même Internet Explorer (version 9) l'implémente, pourquoi s'en priver ? Réaliser des fonds en dégradé sans image On peut maintenant s'en passer grâce à de nouvelles valeurs de background : linear-gradient et radial-gradient. Les Media-Queries
Downloads- 978 Grid System for Web Design Introduction Welcome to 978.gs. This website is owned and operated by Brothers Roloff, LLC. By visiting our website and accessing the information, resources, services, products, and tools we provide, you understand and agree to accept and adhere to the following terms and conditions as stated in this policy (hereafter referred to as 'User Agreement'). This agreement is in effect as of Jan 22, 2011. We reserve the right to change this User Agreement from time to time without notice. Responsible Use and Conduct By visiting our website and accessing the information, resources, services, products, and tools we provide for you, either directly or indirectly (hereafter referred to as 'Resources'), you agree to use these Resources only for the purposes intended as permitted by (a) the terms of this User Agreement, and (b) applicable laws, regulations and generally accepted online practices or guidelines. Wherein, you understand that: a. b. c. d. e. f. g. h. i. Limitation of Warranties Governing Law
Div et CSS : une mise en page rapide et facile Tout au long de cet exercice, nous allons utiliser deux fichiers : index.html : contiendra tout notre code HTML. style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises <head> et </head> : Définissons tout d'abord les propriétés de base de nos blocs. Dans notre fichier CSS : Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align). Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page Nous alons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs : Bandeau : 600 x 50 px - couleur : #00CCFF Contenu : 600 x 400 px - couleur : #FFCC00 Pied de page : 600 x 50 px - couleur : #33FF99 Mais, mais, mais !!!
rlightbox – a jQuery UI mediabox Table of Content Announcement rlightbox development is discontinued at the moment. Maybe If I have more time and feel like it I will resume the work on the project. Anyway I encourage you to share it, fork it and whaterver you feel like. News February 4, 2012 – new 1.1.1 point release fixes issue #5 October 14, 2011 – new stable version 1.1 has been released. About rlightbox is a jQuery UI mediabox that can display many types of content such as images, YouTube and Vimeo videos. Features Sets Set is a group of images, Youtube, Vimeo, or Flash swf videos, or a mix of them all. YouTube support rlightbox supports playing YouTube videos. Vimeo support rlightbox supports playing Vimeo videos. Flash swf video support rlightbox also supports playing standard swf videos. Panorama Panorama is a way to display part of a full-sized image on the screen. Panorama mode is available when the icon with four arrows pops up at the top left corner of the widget. Live Re-size ThemeRoller ready! Keyboard Navigation Other
css Zen Garden Nivo Slider - The world's most awesome jQuery & WordPress Image Slider jQuery & WordPress Image Slider The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. The jQuery plugin is completely free and totally open source, and there is literally no better way to make your website look totally stunning. Beautiful Transition Effects The Nivo Slider makes displaying your gallery of images a beautiful experience, by using amazing transition effects ranging from slicing and sliding to fading and folding. Simple and Flexible Setup The Nivo Slider was designed to be as simple to setup and use as it could possibly be. Small, Semantic & Responsive The Nivo Slider is also designed to have as small an impact as possible on your page load times, so the packed version only weighs 15kb. Free to Use & Abuse The Nivo Slider jQuery plugin is open source and released under the MIT license. Powerful & Simple Slider Creation The Nivo Slider WordPress plugin makes it super easy to create and manage multiple sliders on your WordPress sites.
3 erreurs à éviter en matière d’approche rédactionnelle Cet article traite des erreurs qu’on peut faire en matière d’approche rédactionnelle sur le web. Il s’agit de 3 idées reprises dans le livre d’Isabelle Canivet, « Bien rédiger pour le web ». Alors qu’Isabelle s’arrête à seulement une courte énumération d’erreurs, moi je vais plus loin dans l’analyse afin d’expliquer et argumenter ses propos. Bien évidemment, cette interprétation est subjective, vous pouvez avoir d’autres idées et d’autres avis. N’hésitez pas à me laisser vos commentaires et à partager avec mes lecteurs les erreurs que vous avez pu voir lors de vos expériences professionnelles, ainsi que vos interprétations. Prendre un rédacteur et ajouter “web” derrière sans le former Cela peut paraître logique, et pourtant il existe encore des rédacteurs qui se disent rédacteurs web pour la simple raison qu’ils savent bien écrire et qu’ils ont une jolie plume. Définition du « Rédacteur web » « Le rédacteur web produit des contenus rédactionnels adaptés au web.