background preloader

A complete collection of web safe CSS font stacks

A complete collection of web safe CSS font stacks
Related:  typo

5 of the Best CSS3 Font Tools Fonts have made the most dramatic visual impact on the web since graphic support was added to browsers. A few years ago, it would be impossible to find a website using anything other than Arial, Verdana, Tahoma, Times New Roman or Georgia (or, heaven forbid, Comic Sans). While there’s nothing wrong with standard font stacks, they can become a little monotonous. Internet Explorer has supported web fonts for more than a decade but it’s taken competing browsers a little longer to catch up. However, with great choice comes great responsibility. 1. If you’ve not visited Google Web Fonts, where have you been? You can download any font file but the tool also allows developers to import via an HTML link tag, CSS @import declaration or JavaScript snippet. Did I mention that it’s all free? 2. Font Squirrel is excellent — especially if you’re nervous about handing all font responsibilities to Google. Still not satisfied? 3. Just because a font can be used on the web, it doesn’t mean it should. 4.

Infobulle avec effet de transparence en CSS - Utilisez les transformations et les transitions CSS Voici un exemple de réalisation de popup avec l’utilisation de CSS. Suivez le tutoriel pour recréer cet effet. Le balisage Voici le code HTML utilisé : un simple paragraphe, composé d’un lien, lui même contenant un span. <p><a href="#">Hover Me! Mettre en forme les liens Ajoutez d’abord les styles CSS sur les liens (couleur, ombre sur texte), puis sur les liens hover et focus. J’utilise rgba pour gagner du temps, mais attention, ce n’est pas reconnu dans tous les anciens navigateurs. Mettre en forme la popup Par défaut, une popup doit apparaitre en superposition par rapport au texte, donc un positionnement absolu s’impose. On positionne : j’utilise margin pour un positionnement par rapport à sa position normale dans le flux (c’est à dire sans le position:absolute). Puis, je mets en forme... Utilisation des transformations et des transitions J’ajoute en premier lieu la transformation au span. Lors du hover (et du focus) sur le lien, je modifie la transformation du span. Effet de transparence

Adobe® Edge Web Fonts Responsive Font Size with CSS Making your font-size respond to viewport or container size should be a must to complete your responsive designs. Having a fixed font-size accross devices is not always a good idea. The key point is to get a readable font size and a comfortable line length in most viewports. CSS viewport units and media queries provide the means to implement a responsive font size. Font Size and Line Length There are lots of different views on which is the best pixel font size, or which is the minimum readable size. There's much more to font sizing than it appears. As a general rule, use the largest font-size that doesn't look disproportionate and results in lines with 20 words or less (all words count). Getting the same physical font size and the same number of words per line in all devices would happen only in a world with a single universal screen size (imagine it!). Line Height A third measurement to take into account is line height or line spacing. CSS Viewport Units The Problem with Viewport Units

Le Hollandais Volant Introduction à Canvas Depuis l’arrivée de HTML5 et de ses nouveaux éléments, les sites et applications web peuvent profiter de grandes avancées pour rendre ce média attractif : audio, vidéo et Canvas pour disposer de fonctionnalités de dessin en 2D et 3D dans le navigateur. L'élément qui nous intéresse ici est <canvas>. Il s'agit d'un espace de pixels initialement transparents, armés de JavaScript pour réaliser un bon nombre de fonctions graphiques, partant du simple tracé de courbe pour aller jusqu'aux animations et jeux vidéo. Le nombre de démonstrations existant aujourd'hui sur le web est impressionnant, il serait difficile de toutes les lister ici pour en donner un avant-goût complet des possibilités. Flash est-il mort ? De nombreux parallèles avec la technologie Flash ont été réalisés et diffusés. Voici quelques avantages de Canvas : De quels outils dispose-t-on ? Qu'en est-il de SVG ? Support navigateur Création du canvas et principes généraux Celles-ci vont toutes exploiter le même système de coordonnées :

Tom Davie | Type 2010 Blackletter This typographic poster features a photographed 3-D two-tone blackletter paper sculpture overlaid with an original graphite line drawing. ❤ Purchase Can O’ Dingbats This typographic poster is an ode to Hermann Zapf’s Zapf Dingbats. All of the elements and icons used in this piece are from that single source Paragraph Indentation Photographed in natural light, this poster is based on the typographic suggestion that paragraph indentation should be a one-em space Typographic Hype This typographic poster features a photographed 3-D letterform sculpture overlaid with an original graphite line drawing Sans Serif This educational and tongue-in-cheek poster not only defines the term sans, it also references the type classification’s historical beginning and celebrates its liberation from serif type Decorative Rule This typographic poster features a photographed die-cut card with a decorative border — and script typography with flourishes and integrated vector elements

Effets en CSS Sommaire Sommaire Dans ce tuto, je vous donnerais le code CSS et xHTML pour faire des choses que l'on fait normalement en JavaScript, comme des menus déroulants ou des lightbox. J'ai indiqué la compatibilité suivant les navigateurs. Permettez-moi de vous donner deux fichiers PDF qui sont pour moi les couteaux-suisses du codeur HTML/CSS : Ils montrent en une page la quasi-totalité des codes HTML et CSS2 :PDF sur le HTML (archive zip : 1.8Mio ; MD5 : 778bd3ea7c04408e75ecf50686d6c606)PDF sur les CSS (fichier pdf : 42Kio ; MD5 : f788c273f2ef4d1354e3c418492f1306) Ce que cette page est censé apporter, ce sont des bouts de codes, quelques explications ainsi que des exemples à chaque fois. Sauf mention contraire, les astuces visibles ici ne font appel qu'à du CSS. Compatibilité : xHTML Les menus sont souvent faits avec des listes <ul>, <li>. On fait une liste ou chaque <li> contient lui même une liste. Code : HTML Code : CSS Essayer Voilà. D'autres exemples : l'image popup Essayer le fond transparent par

Les grilles dans le webdesign "Il y a quelque chose de différent entre ce site et le mien… Il a l'air de faire plus pro et je ne sais pas pourquoi !" N'avez-vous jamais eu ce genre de remarque ? Pourtant vous utilisez Photoshop (ou autres programmes équivalents) depuis un certain temps, vous connaissez les règles typographiques et celles du web, la palette de couleur a été choisie avec soin... Pas d'inquiétude, vous n'avez sans doute pas utilisé de grille dans votre design ! Une grille, comme dans le film* ? Utilisée en imprimerie, il est tout à fait possible de transposer le système de grille dans le domaine du web. * Un film très bleu avec des motos, des combats de disques et un certain monsieur Flynn. Grilles : les bases Il existe beaucoup de grilles différentes avec autant de cas concrets d'utilisations. La majorité des grilles disposent de marges latérales, afin que l'œil puisse bénéficier d'un confort de lecture en ne "tapant" pas contre les bords de la fenêtre du navigateur. Anatomie d'une grille Exemples :

Typ.io: Fonts that go together CSS 3 transform : rotation et échelle Aujourd’hui nous allons voir deux nouveaux effets réalisés en css3. Ces effets sont des effets de transformation, un changement d’échelle (avec la propriété transform : scale) et une rotation (avec la propriété transform : rotate). Ces effets peuvent s’appliquer à toute balise. Ici j’ai choisis une liste d’images mais j’aurai très bien pu prendre un menu, un paragraphe, etc… Voici une démonstration du résultat : (c’est toujours pareil, les propriétés CSS3 ne sont pas reconnus par tous les navigateurs et donc je vous conseil de vous munir d’un navigateur récent tel que Chrome 12, Firefox 4, Safari 5 ou bien Internet Explorer 9) Et à présent voici le code à utiliser : La partie HTML est très simple La partie CSS Voilà c’est fini pour aujourd’hui, j’espère que ces petits effets pourront vous servir.

Related: