public marks

PUBLIC MARKS from camel with tag css

November 2007

October 2007

FAQ xHTML/CSS - Qu'est-ce que le HasLayout, et comment l'utiliser?

Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows. Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une question de cuisine interne. Malheureusement, ce mécanisme est lié à de nombreux bugs de rendu d'Internet Explorer.

Moonfall: CSS with variables

by 1 other
What is Moonfall? A program to generate CSS, either dynamically as a cgi script, or run from the command line. Used in its simplest way- you get variables in css. Used in its most advanced way- you can write a powerful Lua script to create and modify CSS.

How To: Optimize Your CSS Even More - PaulStamatiou.com

Over the summer I wrote a post called 5 Ways to Speed Up Your Site that went through some basic tips for getting your site to load faster. I mentioned enabling gzip compression in WordPress and using services that remove the whitespace from your CSS, effectively “compressing” it. Now, I’ll go a bit more in-depth with a simple, yet powerful, PHP method of compressing your CSS.

jQuery.ifixpng - png transparency for windows ie versions below 6

by 10 others (via)
As you know IE versions below 6 do not support png transparency. This plugin designed to fix that problem by applying appropriate filters to user specified elements, while keeping all element tags intact. Plugin works well with both img elements within the DOM and css properties specified externally. • It is chainable. • Unlike some other png hack solutions, it does not replace/hide any of your html tags. • You can revert applied changes using .iunfixpng(). • Extremely easy to use!

September 2007

Styling File Inputs with CSS and the DOM // ShaunInman.com

by 8 others
File inputs are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

Eat Your Greens: Adding a magnifier to images with CSS and JavaScript

by 4 others (via)
Voici un script qui vour permettra de mettre en place un zoom sur un image. Perosnnelement, je trouve le résultat très sympa et pratique. Il faut évidament ne pas oublier d'avoir l'image en deux résolutions, une basse pour la miniature et une plus élevée pour le zoom.

Traduction : Architecture des CSS - pouipouidesign v.7 ... et pourquoi pas ? ©2007

by 15 others (via)
Grâce au support presque universel des standards par les navigateurs modernes, nous nous tournons de plus en plus vers les CSS pour une gestion de haute volée de la présentation. Plus nous nous appuyons sur les CSS, plus les fichiers CSS grossissent et se complexifient. Ces fichiers soulèvent aussi des défis de maintenance et d'organisation. Loins sont les jours où l'on créait un fichier CSS unique pour y coller des règles au fil des besoins. Au fur et à mesure que nous construisons de nouveaux sites, il devient nécessaire de passer un peu de temps à planifier l'organisation et la structure des CSS.

Mettre en page un formulaire - Antoine's blog

by 3 others
e plus en plus, les formulaires deviennent un point crucial dans la conception d'un site internet. La question revient souvent, comment mettre en page un formulaire, de manière propre et accessible ? La réponse n'est pas simple, diverses écoles s'affrontent dans la façon de mettre en page les formulaires. J'en ai choisis une, que je juge être la meilleure. Les formulaires, depuis l'avènement du Web 2.0, deviennent non seulement de plus en plus omniprésent mais également de plus en plus complexe. De nouveaux éléments sont venu s'ajouter au fil des années, telle que des petites icônes permettant d'afficher l'état du champ (souvent, on rencontre "En cours de validation", "Champ valide" et "Champ erroné") ainsi que des messages d'aide ou d'erreur.

CJO - css and javascript optimizer[WebInventif]

CJO va vous aidez mettre de l’ordre dans tout ça ! Css and Javascript Optimizer va vous permettre: * de rassembler tout vos fichiers javascript en un seul et unique fichier js * de rassembler tout vos fichiers css en un seul et unique fichier css * de compresser à la volée vos fichiers css et js * de forcer et régler la durée de mise en cache de vos fichiers Et tout ça en à peine 3 lignes de codes !

Livre Transcender CSS - A. Clarke - Sublimez le design web ! - Librairie Eyrolles

Alors que le Web évolue pour intégrer de nouveaux standards et que les derniers navigateurs ouvrent de nouvelles voies créatives, l'art du design web est aussi en pleine mutation. Cependant, rares sont les designers web également expérimentés en programmation. Résultat : ils ne peuvent exploiter pleinement toutes les ressources à disposition, car balisage sémantique et CSS sont un frein à leur élan créatif. Andy Clarke a su identifier les difficultés auxquelles sont confrontés ces designers web à la sensibilité plus graphique que technique ; il propose ici aux artistes du Web une approche progressive afin de conjuguer créativité, fonctionnalité et accessibilité dans la conception de leurs sites. Pour cela, les CSS offrent un cadre indispensable, mais il s'agit de s'en affranchir pour les transcender. Dans cet ouvrage révolutionnaire, unique en son genre, vous découvrirez comment implémenter des designs originaux, tout en mettant à profit les possibilités créatives du balisage et des feuilles de style. Vous apprendrez à mettre en place un nouveau workflow, construire des prototypes, utiliser efficacement des grilles, visualiser les balises, etc. Vous "transcenderez" CSS, qu'il s'agisse d'employer les derniers navigateurs prenant en charge la troisième version de cette norme, de collaborer efficacement avec les membres de l'équipe, ou bien plus encore.

ruzee.com - Steffen Rusitschka » Blog Archive » Ellipsis or “truncate with dots” via JavaScript

by 2 others (via)
Une petite fonctionnalité sympa accessible via javascript et css qui vous permet de tronquer des textes présents dans une div. La propriété est présente d'office dans ie (le texte est tronqué et ... sont ajoutés à la fin) mais firefox et safari ont besoins d'un peu d'aide pour y arriver. Moi je toruve ça sympa, surtout lorsque l'on a pas envie d'utiliser PHP pour arriver à nos fins.

August 2007

YAML Builder | A tool for visual layout development of YAML based CSS layouts

by 18 others (via)
On n'arrête dans le progrès dans le monde des éditeurs et des frameworks css. Après blueprint et Yahoo!Grinds, voici le YAML Builder basé sur le fameux Yahoo!Grinds. Alors je ne sais pas si celà va déboucher un jour sur le framework ultime (celui qui par exemple gère les mises en page en 100% full screen méga trendy) mais en attendant, ça se développe tout doucement...Et ce n'est pas sans faire plaisir au feignants des layouts (ou aux découragés des compatibilités...). Anoter que le lien que je propose vous enverra directement vers l'éditeur en ligne.

Placer un pied de page en bas de page - Antoine's blog

by 4 others
Un des calvaires des développeurs Web est de placer un footer en bas de page. Il existe différentes solutions, je vous en propose une nouvelle constituée au fil du temps et de mes recherches. Ce n'est certes qu'une solution de plus qui a, je trouve, l'avantage d'être à base de CSS uniquement et de rester globalement simple.

O'Reilly — Affichage évolué de photos avec CSS et JavaScript

by 1 other
De nouveaux modules de présentation d'images fleurissent sur le Web. Lorsque vous cliquez sur une miniature, le site s'estompe pour laisser place à une version « plein écran » de la photo. Nous allons implémenter un tel effet dans une application JavaScript de très petite taille… réutilisable au sein de tout site Web.

XRAY :: for web developers

by 15 others (via)
XRAY est un bookmarklet, c’est-à-dire un petit morceau de Javascript que l’on peut ajouter facilement à son navigateur et qui fournit des fonctionnalités supplémentaires. Dans le cas de XRAY, vous allez pouvoir inspecter par son intermédiaire un élément d’une page web et recueillir ainsi tout un tas d’information (positionnement, dimension, hiérarchie, …) à son sujet. Si vous utilisez déjà l’extension Firebug, il ne vous sera pas très utile. Sauf dans un cas. En effet, et à l’inverse de Firebug, XRAY est capable de fonctionner dans Internet Explorer !

Bordures uniquement entre des éléments - css - nanoum blog

by 1 other
Si l'on veut créer une bordure uniquement entre les éléments d'une liste par exemple (ni avant le premier, ni après le dernier) l'utilisation du sélecteur first-child permet de le faire facilement. On définit une bordure pour les éléments de la liste et à l'aide de first-child, on supprime la bordure du premier élément. Le problème est que first-child n'est pas reconnu par tous les navigateurs, notamment internet explorer. Pour réaliser la même chose, on peut alors donner une classe spécifique au premier élément de la liste pour en supprimer la bordure. Cette solution n'est pas toujours utilisable, lorsque l'on travaille avec un CMS ou une équipe de développeurs par exemple et que l'on n'a pas un contrôle complet sur le code généré. Plutôt que chercher à cibler le premier élément pour en supprimer la bordure ou l'image de fond, on peut essayer de "masquer" la bordure indésirable. La propriété clip qui permet de définir la zone d'affichage peut être une solution, mais elle nécessite l'utilisation de position absolue ce qui n'est pas toujours pratique. Une autre piste est l'utilisation des marges négatives.

A CSS standard for HTML rendering

by 6 others
Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.

Scalable CSS Buttons Using PNG and Background Colors

by 2 others
know, it’s been a lot of articles lately about CSS buttons. But I simply felt the need to write about something that has not yet been covered in the latest button-trend: Dynamic CSS Buttons using PNG, transparency and background colors that degrades nicely and supports full scalability. With full scalability I mean it should resize in all directions according to the font size and content.

Rediscovering the Button Element

by 15 others
Creating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button. As is, the input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari). The solution for most is to use image inputs and create the damn things ourselves. And it’s unfortunate, because then we’re reduced to the tedious tasks of opening up Photoshop every time we’re in need of a new button. What we need is something better—something more flexible and meant for designers. Lucky for us, the solution already exists and all it needs is a little love. My friends, let me introduce you to my little friend : the "button" element.

July 2007

IE PNG Fix

by 1 other
Fix png sur ie

camel's TAGS related to tag css

accessibilite +   accessibilité +   ajax +   blog +   bookmarklet +   bouton +   box +   browser +   build +   button +   cache +   center +   cheat sheet +   clear +   code +   color +   compress +   compressor +   control +   corners +   cours +   design +   dom +   edit +   faq +   file +   firefox +   fixe +   flash +   float +   fluide +   footer +   form +   formulaire +   framework +   free +   generator +   gestion +   google +   grid +   guide +   hack +   html +   icon +   ie +   image +   images +   javascript +   jQuery +   layout +   list +   livre +   memo +   menu +   min-height +   mysql +   navigation +   openweb +   optimisation +   optimize +   pagination +   php +   picture +   plugin +   png +   poo +   position +   preload +   programation +   rating +   reference +   ressources +   sample +   script +   search +   select +   server +   shadow +   shell +   site +   sitemap +   standards +   table +   tabs +   template +   templates +   tips +   tools +   transparent +   tutorial +   tutoriel +   validation +   vertical +   w3c +   web +   webdesign +   webdev +   wrapper +   xhtml +   xsl +