CSS
Get flash to fully experience Pearltrees
Typetester – Compare fonts for the screen
Due to variety of extensions for Firefox available, some extensions could break some Typetester’s functions. Please do report troubles . If possible, provide a list of installed extensions. * Even though the application should work on any system which allows installation of the listed browsers, it's advisable not to run it on a system with processor 1Ghz or lower. ** Some advanced functionality (like color-picker or client system font-list) might be missing in some browsers. However, all settings can be adjusted respectively.
Font Squirrel | Create Your Own @font-face Kits
Usage: Click the "Add Fonts" button, check the agreement and download your fonts. If you need more fine-grain control, choose the Expert option. EOT compressed with LZ compression. File sizes are often smaller than WOFF. Special thanks to Richard Fink and Philip Taylor for creating the excellent EOTFast app. If the font has the features, this will allow you to "flatten" the selected features into your font file.
Google's 174 web fonts in one convenient downloadable tarball for your Photoshopping enjoyment - Axon Flux // A Ruby on Rails Blog
Google’s Font Directory and API for web fonts could have a transformative effect on how we read the web. The only problem is, Google has made it very difficult to download all of the actual font files. Web designers must be free to experiment with these new fonts, to sketch, comp and get to know these typefaces in browser and non-browser applications.
Les feuilles de style destinées à l’impression (CSS print ) sont un moyen économique de proposer une version imprimable de vos documents en ligne, mais elles ne produisent pas toujours le résultat escompté. Voici un inventaire des soucis les plus fréquents, accompagné de quelques conseils qui vous permettront de mieux gérer ces difficultés. Proposer une version imprimable reposant uniquement sur une feuille de style pour le media print appliquée à la page affichée par le navigateur offre plusieurs avantages immédiats : Il n’est plus nécessaire de générer côté serveur une version HTML spécifiquement destinée à l’impression ; La feuille de style pour le média print est généralement rapide à créer, dès lors que les styles pour l’affichage sont réservés à ce dernier par la précision du media screen ;
Maîtriser l'impression CSS - Openweb.eu.org
Parce que les tableaux avaient du bon… L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients. Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet. Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align .
Mise en page CSS avancée grâce à la propriété display - Alsacréations
Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités. Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et CSS3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...). Avant de nous lancer dans le vif du sujet, rappelons certains points essentiels. Le premier d'entre-eux est que CSS3 est toujours en état de brouillon pour une grande partie.
Osez HTML5 et CSS3 ! - Alsacréations
Cool Tools and Toys for Web Developers John , the lead developer (ok, pretty much the only developer) of Style Master is an avowed hacker. He loves exploring and experimenting with the latest features in browsers. Here's a collection of tools for web developers he's put together to help you analyse and debug your sites (and other people's sites as well), play with CSS3 features (bleeding edge browsers recommended) and more. XRAY works in Safari, Firefox and Internet Explorer. It helps you visualize the layout of your page.
Style Master CSS Editor for Windows and Mac OS X
Les fonctionnalités CSS3 avec Internet Explorer - Ma Revue Web
Malheureusement, il n’est pas surprenant de voir qu’Internet Explorer, même dans la version 8 du fureteur, ne supporte toujours pas la majorité des nouvelles fonctionnalités qu’offre le CSS3. Vous trouverez, dans le billet suivant, des solutions afin de rendre plusieurs des nouvelles fonctionnalités compatibles avec les différentes versions d’Internet Explorer (6,7 et 8). Opacité/Transparence
On this post I am exploring radial implementation, radial-gradient() and repeating-radial-gradient() . Notice that there is also linear gradient which is most likely be used more often than the radial. Using CSS gradients in a background lets you display smooth transitions between two or more specified colors; this lets you avoid using images for these effects, thereby reducing download time and bandwidth usage.
WebKit Radial Gradients (Circle gradient) « Jukka-Pekka Keisala
Ever since all the articles showcasing the new features in HTML5 and CSS3 started appearing around the web, I have had the idea of building a website layout without any images. With all the advancements in HTML5 & CSS3 (compared to previous respectable specs) it wouldn’t be too hard to create a decent-looking website that wouldn’t have to rely on images for the layout elements. In the image above, you can see the contents of the folder containing our finished demo page – as promised: no images. We have an HTML page with our “advanced” markup, a CSS file containing the CSS3-powered styles and a folder containing some fonts that we are going to embed using @font-face .
Build a HTML5/CSS3 Website Layout Without Images – Part 1 | Onextrapixel - Showcasing Web Treats Without A Hitch
La question des dimensions idéales d'un site est souvent posée. Les résolutions d'écran varient généralement de 800x600 pixels à 1280x960 pixels, en passant par 1024x768. Quelle est donc la résolution à privilégier ? Quelle est la dimension idéale pour un site web ? Les sites web étant conçus avec des éléments graphiques (la plupart du temps) non vectoriels, ceux-ci n'adoptent pas le même rendu selon la résolution de l'écran du visiteur, notamment en terme de répartition horizontale. Faut-il centrer ?
Prévoir un site pour toutes les résolutions - Alsacréations
Tag HTML - Balise <BUTTON> Bouton
Le type submit valide le formulaire dans lequel il est contenu. Il est équivalent à la fonction javascript submit(). Le type reset efface tous les champs renseignés dans le formulaire (la fonction javascript équivalente existe également). Enfin le type button équivaut à un bouton classique.Introduction 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).
Rediscovering the Button Element
Le bouton est un élement indissociable des formulaires et peut également servir à rendre un lien plus visible. Créer une interface ergonomique ou compréhensible avec des boutons de type Submit est souvent un tâche ardue pour le webdesigner. En effet l'affichage des boutons connait un problème d'uniformité selon le navigateur et les systèmes d'exploitation (ci-dessous les différentes formes d'un bouton suivant les configurations utilisateurs). Cette solution est facile à mettre en place mais je vois 2 inconvénients: les moteurs de recherche lise le texte et non les images.
Créer des boutons images avec les CSS et l’élément button
exemples sites
hacks ie6