PUBLIC MARKS from camel with tag css

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website

Drawter : dessinez, c’est intégré ! (WYSYWYG Powa!) Drawter est un générateur de code HTML et CSS en ligne qui vous permet de dessiner votre mise en page dans un canevas. Vous pouvez choisir les options de votre page comme le titre, le doctype, la langue du document, les balises que vous souhaitez pour chaque bloc présent à l’écran et pour chacune d’entre elles les propriétés et les attributs. Une fois votre maquette terminée, vous choisissez le mode de placement pour vos blocs : float: left ou position: absolute. Le site autorise les imbrications de balises pour réaliser des mises en page complexes dans une interface réactive et intuitive. N’hésitez pas à parcourir toutes les options disponibles dans les palettes d’options et amusez-vous :) Drawter : dessinez, c’est gagné ? A tester !

Les frameworks CSS ont été mentionnés la première fois dans la conférence Working in the Now (visualiser la présentation). Au final, on n’était pas loin de faire salle comble avec plus d’une vingtaine de participants à vue de nez. Une petite scéance de rattrapage s’impose ;-) Pourquoi avoir choisi ce sujet ? J’ai lu un article sur l’importance du rythme vertical l’an dernier sur Biologeek et ça m’a sensibilisé au fait qu’on pouvait rendre la lecture d’un site tout simplement en rendant prédictible la position du texte. Entre temps j’ai également lu l’excellent Transcender CSS d’Andy Clarke. J’y ai été sublimé par des présentations de sites totalement en grille. Depuis je suis devenu fan de Blueprint CSS (je crois que ça s’est remarqué lors de mon intervention ;-)). J’ai commencé à l’utiliser sur des projets personnels puis dans un cadre professionnel. J’utilisais déjà symfony comme framework PHP et jQuery comme framework JavaScript alors pourquoi pas Blueprint ? Comme le suggérait très justement Christian Heilmann dans sa présentation, l’utilisation d’outils déjà existants est nécessaire pour réduire les coûts de production. C’était déjà un bon alibi mais je les apprécie aussi parce qu’on gagne un temps fou ! On se concentre sur le code métier, pas le reste.

Même si certains motifs se détachent parfois du lot, les conventions de développement ou d’intégration restent quelque chose de très personnel. La majorité des langages, et même des framework ont des méthodes gravées dans la pierre que chacun est fortement invité à respecter. Ce n’est pourtant pas le cas pour le couple HTML/CSS, et c’est la raison pour laquelle Florent Verschelde et l’équipe d’Alsacréations ont entrepris de mettre en place un guide stylistique de l’intégration HTML. Ils ont pour cela proposé un appel à contribution sous la forme d’un questionnaire en deux parties auquel je réponds à mon tour.

Les bibliothèques Javascript — comme jQuery et la myriade de plugins qui l’accompagne — facilitent la vie des développeurs web en leur permettant de manipuler le DOM les mains dans les poches. Toutefois, il est toujours bon d’avoir quelques fonctions standalone sous la souris pour se faciliter l’intégration cross-browser ! Voici une sélection de 21 scripts pour faire face à toutes les situations (ou presque) :

Comment réaliser un bloc d'illustration avec une image et une légende qui respecterait les deux critères suivants: premièrement, le bloc doit s'adapter à la largeur de l'image; deuxièmement, le texte donné en légende ne doit jamais dépasser l'image en largeur, et passera sur plusieurs lignes si nécessaire. La solution de facilité serait de figer la largeur du bloc et de travailler toujours avec des images de mêmes dimensions. Mais les CSS nous permettent de faire preuve d'un peu plus de subtilité.

Today, I came across a great jQuery plugin that will preload your images. This file now has a permanent spot in my "resources" folder. The plugin essentially scans your CSS files and preloads all of the images within it.

Wrapper is a cross-browser compliant HTML/CSS rendering engine written in ActionScript that sits on top of your standards compliant HTML page. Wrapper eliminates cross-browser issues and makes integrating ActionScript and HTML/CSS projects possible without needing to compile. Wrappers strives to answer the most common problems web designers face without forcing them to learn too many new things. Most web sites can be created in HTML or CSS, then when you need to extend Wrapper's capabilities you can either use JSON to call functions within ActionScript or you can load compiled plug-ins. Wrapper also has built in methods within CSS to load custom fonts, display elements as any shape, and fill them with linear or radial gradient background colors. ActionScript's event model is also implemented within Wrapper's HTML. Wrapper's best features are the ones that you get for free because of how it is set up. It's like getting all the great features of the Flash Player without needing to deal with compiling and being able to create your content the same way any HTML page would be created. Wrapper is fully accessible to the search engines and integrates well with any back-end technology. Wrapper is currently released as a fully functional open source beta for Flash Player 9. Wrapper is set up as a pre-compiled plug-in but can easily be integrated into any Flex or AIR applications or even as an ActionScript framework for creation of compiled projects.

I have been geekn’ out a lot lately reading some really great articles as well as learning some new techniques. There is a little bit of everything here and if you are a web developer it will come in handy. If you are not into jQuery skip this first section, as I have been really digging into what can be done in jQuery. If you like what you see check out my Delicious feed, as I am always running across great links.

TYPOlight webCMS TYPOlight webCMS est un puissant système de gestion de contenu web spécialisé dans l'accessibilité (back office et front office) et utilise XHTML et CSS conforme W3C/WAI pour générer les pages. Il a été mis au point par Leo Feyer en 2004 et a été publié sous la Lesser General Public License (LGPL). Principales fonctionnalités de TYPOlight Voici quelques-unes des caractéristiques qui permettent à TYPOlight de se démarquer de la variété des systèmes de gestion de contenu. Si vous voulez en savoir plus, consultez la liste complète des fonctionnalités. TYPOlight * Dispositif de mise à jour automatique * Documentation multilingue * Génération de code XHTML strict et accessible * Utilisation des technologies du Web 2.0 et Ajax * Support de contenu multilingue (jeu de caractères UTF-8) * Générateur de CSS compatible multi-navigateur (compatible IE7) * Gestionnaire de fichiers intégré * Moteur de recherche avancé * Générateur de formulaire * Langages et thèmes multiples dans le back office * Front office basé à 100% sur des modèles personnalisables * Gestion de versions et d’annulation (défaire / refaire)

Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done. Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.

This emulates a feature in danga's perlbal. the ability to join multiple files together in a single request. This is a performance optimization. instead of requesting 5 seperate CSS or javascript files from your server, you can do it one request.

Les graphistes aiment de plus en plus utiliser des fenêtre modales; elles fournissent en effet un moyen rapide et efficace pour montrer des informations sans recharger une page entière. C'est facile d'utiliser et de designer. Le gros problème auquel j'ai été confonté avec tous les plugins que j'ai essayés —utilisant Prototype/Scriptaculous ou jQuery— est la personnalisation. Tous disent que vous pouvez programmer ce que vous voulez très simplement mais ce n'est pas aussi simple. La CSS par défaut fonctionne bien mais dans la plupart des cas est un mélange entre les éléments obligatoires et optionnels. Ce qui implique que vous devez être très attentif quand vous l'éditez. L'autre problème concerne les animations. C'est le pire. Je n'ai jamais trouvé un plugin permettant de redéfénir simplement les animations. J'ai essayé de résoudre ces problèmes avec mon plugin. J'ai documenté le plus possible. La CSS par défaut ne contient que les options graphiques. Sans elle, le plugin marchera parfaitement —mais sera aussi très laid. Concernant les animations, vous pouvez simplement les redéfinir de A à Z. Grâce aux fonctions d'animation de jQuery comme animate, fadeTo ou le futur enchant, c'est très simple. De plus, j'ai aujouté la possibilité de définir beaucoup de callback à différents moments durant le processus pour vous permettre de modifier les paramètres, le contenu ou exécuter ce que vous voulez.

Comme vous le savez, il est n'est pas simple de maintenir correctement des feuilles de styles. Au fur et à mesure que les pages Web évoluent, il est impossible de distinguer dans une feuille de styles les styles qui sont utilisés de ceux qui ne le sont plus. Après quelques recherche sur Google, je suis tombé sur un plugin Firefox très intéressant qui permet de générer un rapport sur les styles inutilisés dans les CSS après une analyse complète d'un site. Ce plugin s'appelle Dust-Me Selectors et est téléchargeable à cette URL : http://www.sitepoint.com/dustmeselectors/ Après l'analyse réalisée, il suffit ensuite de supprimer manuellement les styles inutilisés dans les vos CSS. Encore un plugin ultra pratique qui vient s'ajouter à mes plugins favoris : Firebug et Web Developper.

Je suis tombé il y a quelques temps sur un plug-in sympa pour jQuery qui permet de pré-charger les images des fichiers CSS (via). C'est utile dans un certain nombre de cas pour le webdev moderne. Ca m'avait plu et je voulais l'utiliser mais je me suis rendu compte qu'il ne prenait pas en compte les fichiers importés via la règle @import. J'ai donc ré-écrit le script en améliorant 2 ou 3 petites choses : * Je fais gaffe de parser seulement les CSS de type @media screen * Je fais du récursif pour choper les éventuels styles @importés (façon W3C et IE) * Je stock les règles dans un tableau pour éviter d'avoir une seule regex à appliquer sur une seule grosse chaîne, c'est plus performant

PrettyPhoto - a jQuery Lightbox clone July 13th, 2008 in Javascript | Tags: Gallery, jQuery | No Responses A new version 2.1 of prettyPhoto released. Descriptions/Titles now support html code. Usage is simple, just include the jQuery library, prettyPhoto javascript and the prettyPhoto CSS file and add rel=”prettyPhoto” to any picture you want to activate the prettyPhoto feature. If you want the images to be a part of a gallery, just add the gallery name in braket. Tested and working in Firefox 2-3 (Mac/PC), Safari 3.1.1 (Mac), IE 6-7. Uncompressed version - script: 16kb / CSS: 8kb, compressed size - script: 8kb / CSS: 3.8kb.

Quelles sont les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web? Aurélien Levy a mené une campagne de tests pour donner une réponse à ce problème récurrent pour les développeurs de sites web.

Un ensemble de nouveaux tutoriels a été mis en ligne cette semaine pour inaugurer une nouvelle thématique : L'administration de serveurs dédiés. En effet, les hébergements dédiés sont devenus monnaie courante, et il est fréquent de devoir plonger les mains dans le cambouis. Ces tutoriels ont pour but de servir de feuille de route à la mise en place d'un serveur web sous Apache assorti de PHP et MySQL, ainsi que de services mail et ftp. Des conseils en matière de monitoring, de sauvegarde et de sécurité complètent le tour d'horizon. Deux d'entre eux abordent également de façon rapide l'installation du webmail Roundcube et du panel de gestion DTC pour contrôler plus efficacement les services évoqués précédemment dans le cas d'un hébergement multi-domaines.

Aujourd'hui je vais vous montrer comment rendre encore plus agréable à l'oeil vos listes HTML ! Ce tutoriel n'a pas de but particulier à part celui de faire plaisir à vos visiteurs lorsqu'ils tomberont sur vos listes trop fashion ^^ ! De plus il est extrêmement simple à mettre en œuvre. ;)

Free CSS est un site regroupant beaucoup de ressources, toutes conçues en CSS. * des templates * des menus * des tutoriaux * des calques * etc...

Nous allons voir comment simuler le fait qu'un paragraphe est limité en nombre de caractères, il est vrai qu'avec l'utilisation de certains CMS, il n'est pas toujours évident de limiter en un certain nombre de caractères. Il existe pourtant une astuce qui permet d'afficher uniquement un certain nombre de lignes. Il suffit d'appliquer une hauteur à un bloc puis une hauteur de ligne (line-height) qui est un multiple de la hauteur du bloc (ce multiple va définir le nombre de lignes affichées). Enfin, on va appliquer, une propriété qui va permettre de masquer tout ce qui dépasse de notre bloc ; overflow:hidden;.

This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages. It's a question I often receive, so I decided to publish a very simple post which explains how to design a perfect pagination style using some lines of HTML and CSS code.

StyleMap v2 uses valid HTML, CSS and a touch of DOM scripting to produce a visual sitemap out of an unordered list (UL). The result is a functional, scalable, and above-all rapid way to produce a tree-style map for the planning stages of your project. Keep in mind that although we'll cover the details of how the sitemap works, in practice you'll only need to worry about changing the markup to match your website structure. The CSS and Javascript can then be added as they are and will take care of the rest!