background preloader

CSS: Familles de polices

CSS: Familles de polices
Familles de polices Après la couleur, la propriété font est certainement l'une des plus importantes pour un document. Cette page ne contient pas "d'astuce" sur les polices de caractères mais montre l'étendue des variations que CSS autorise sur les polices. Puisque toutes les polices ne sont pas disponibles sur tous les ordinateurs (il y en a des milliers et la plupart ne sont pas libres de droits), CSS fournit un mécanisme de repli. Le tableau ci-dessous montre divers exemples de polices (votre navigateur peut ne pas toutes les connaître). Styles des polices La plupart des polices ont des styles différents à l'intérieur d'une même famille, typiquement un style gras et un style italique, souvent également un style gras-italique, moins souvent un style 'minuscule', et dans quelque cas des versions extra-fines/extra-grasses ou étendues/condensées. Le tableau ci-dessous montre différents styles. Related:  Fontsoutils personnalisation WP

21 familles de polices prêtes pour le Web Font Tester est un comparateur de polices en ligne très pratique pour choisir quelle famille de polices (« font stack ») utiliser sur le Web. Son auteur y publie également une liste de 21 familles « web safe » prêtes à l’emploi : elles assurent un rendu homogène sur les différentes versions de Windows, Mac, Linux, etc. Voici un échantillon de chacune : font-family: Arial, Helvetica, sans-serif; Portez ce vieux whisky au juge blond qui fumeABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 font-family: 'Arial Black', Gadget, sans-serif; font-family: 'Bookman Old Style', serif; font-family: 'Comic Sans MS', cursive; font-family: Courier, monospace; font-family: 'Courier New', Courier, monospace; font-family: Garamond, serif; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; font-family: 'Lucida Console', Monaco, monospace; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-family: 'MS Sans Serif', Geneva, sans-serif; font-family: Symbol, sans-serif;

slides.html5rocks.com In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley.

95 typos gratuites et indispensables pour vos designs C’est souvent un sacré casse-tête de trouver la typo idéale pour un projet. Il faut dire que les possibilités ne manquent pas ! Dans la foule de typos qui existent, comment faire rapidement le tri entre celles qui apporteront une véritable valeur ajoutée à vos designs et celles qui vous feront uniquement perdre votre temps ? Nous avons voulu vous donner un petit coup de pouce en commençant à faire le tri pour vous ! 1. par Shrenik Ganatra 2. par Veronica di Biasio 3. par Adilson Gonzales de Oliveira Jr. 4. par Simon Stratford 5. par Slava Kirilenko 6. par Jean Wojciechowski 7. par Osama El Khalfaoui 8. par Atipo 9. par Matthias Henri 10. par Pier Paolo 11. par Free Goodies for Designers 12. par Krisjanis Mezulis et Gatis Vilaks 13. par Ion Lucin 14. par Timo Kuilder 15. par Axel Bizon 16. par Lucas Almeida et Dmiti Goloub par Titus Prod 18. par Antonio Rodrigues Jr. 19. par Mikrojihad Inc. 20. par Filiz Sahin 21. 22. par René Bieder 23. par Cute Punk et Flou 24. par Tyler Finck 25. par Boris Bonev 26. 27. 28.

MOOC: comment choisir sa plate-forme? A moins que vous n’enseigniez dans un établissements prestigieux, vous pouvez d’ores et déjà faire une croix sur Coursera ou edX. Vous aurez beau être le meilleur pédagogue du monde, cela n’y changera pas grand chose car les plates-formes américaines sont avant tout dans une logique de marketing. Coursera et à plus forte raison edX cherchent à se construire une image de marque, et la pédagogie n’est pas leur première préoccupation (tout au moins pour Coursera). Ceci dit, cela n’engage à rien de contacter ces plates-formes: Daphne Koller, la fondatrice de Coursera, s’est fait une spécialité d’apprendre à refuser poliment ce genre de demande. Des établissements français réputés se sont déjà heurtés à des refus catégoriques. Si cela peut servir de consolation, Coursera a de grands défauts, comme le fait de devenir propriétaire des contenus postés au même titre que l’enseignant. Nous sommes restés jusqu’à présent dans une approche LMS très orientée xMOOC.

13 choses à faire avant de changer son thème WordPress Si vous utilisez WordPress alors vous avez probablement changé de thème au moins une fois. Si vous ne l'avez pas encore fait et que c’est une première, alors c’est encore mieux! La beauté de WordPress est qu'il rend très facile les changements de thème. Cela peut se faire (en théorie) en quelques clics de souris. Mais changer de thèmes dans de bonnes conditions nécessite un minimum de préparation. Dans cet article, je vais vous proposer une liste des choses à faire AVANT de changer son thème WordPress. 1/ Prenez des notes sur votre thème actuel Nombre d'utilisateurs WordPress surfent sur le web pour trouver des solutions à leurs problèmes. Vérifiez donc vos fichiers de thème et notez tous les bouts de codes supplémentaires que vous y avez ajouté. 2/ Soyez prudent avec vos barres latérales Les widgets de la barre latérale sont vraiment faciles à utiliser et de facto un grand nombre d'utilisateurs les utilisent pour personnaliser WordPress. 3/ Quid de votre suivi ? 4/ Sauvegardez !

20 Thèmes WordPress qui pourront impressionner vos visiteurs 4inShare Il semblerait que ce soit bon, le printemps arrive ! Ahhh les barbecues ne sont plus très loin, encore un peu de patience (si vous en avez déjà fait un, interdiction de me le dire, je risque d’être jaloux…). Bon, arrêtons de parler météo et gastronomie et revenons à WordPress. Dans l’article précédent, je vous avais parlé des changements qui allaient survenir sur WP Themes Pro. Besoin d'un thème WordPress français ? Tout d’abord, le nouveau nom a été choisi Autant vous dire que ce fut un véritable casse tête. J’en profite d’ailleurs pour remercier tous ceux qui m’ont aidé à réfléchir et Nicolas Richer en particulier. Quand je révèlerai le nouveau nom, je vous expliquerai comment je m’y suis pris pour le trouver. Deuxième chose, le thème WordPress a été sélectionné Cette recherche du thème idéal a été longue et fastidieuse (enfin, je ne pense pas vous apprendre quelque chose en disant ça!). Ne comptez pas sur moi pour vous dire quel thème j’ai choisi pour l’instant.

HTML5 Please - Use the new and shiny responsibly Get Comic Neue Changer la taille d'une image sans perte de qualité Les deux notions importantes ajout et suppression de pixels bien saisies (| Voir : Changer la définition d’une image |), regardons comment maintenant on peut tout de même arriver à une très bonne qualité d’image si on souhaite changer la taille de l’image (l’agrandir ou la diminuer) sans pour autant laisser le calcul du programme de retouche d’image prendre le dessus. Voir aussi : On veut surtout pas réduire notre image de cette façon là : Réduction de la taille de l’image avec Photoshop (rééchantillonage coché) Mais plutôt réduire la taille de notre image de cette façon là : Réduction ou agrandissement de la taille de l’image avec Photoshop (rééchantillonage décoché) Rmq : Lorsqu’on parle ici de taille, il faut avoir en tête la notion de la taille de l’image que celle-ci a une fois imprimée. | Voir : Taille de l’image à l’écran || Voir : Définition – résolution taille des images pour Internet | Rappelons que ce qui « définit » une image ce sont : sa définition, sa résolution et sa taille.

htaccess WordPress : comment configurer et optimiser ce fichier clé pour votre site Vous vous demandez comment créer des redirections, protéger vos fichiers ou bannir une adresse IP de votre site WordPress ? Si c’est le cas, vous avez sûrement croisé le nom de « fichier .htaccess » lors de vos recherches. Un fichier .htaccess (contraction de « Hypertext Access ») est un fichier de configuration d’Apache. Voici comment le configurer et l’optimiser pour améliorer votre site Internet ! Pourquoi est-il important ? Votre fichier .htaccess WordPress vous permet par exemple de protéger un répertoire par mot de passe, d’interdire un accès à des ressources, de créer des redirections, entre autres usages. Il joue donc un rôle important dans la sécurisation et l’amélioration des performances de votre site. Notez que vous pouvez avoir plusieurs fichiers .htaccess. Avertissement : Sauvegardez bien le contenu de votre fichier .htaccess d’origine avant de faire vos modifications. Où trouver le fichier .htaccess de votre installation WordPress ? Et sur Mac ? <FilesMatch "^. <Files ~ “^.*.

16 sites pour trouver des illustrations vectorielles gratuites - Pour tout designer / webmaster / auto entrepreneur web qui se respecte, le problème des images pour créer un site est récurrent. Il existe une multitude de sites pour trouver des photos stock, mais beaucoup sont malheureusement payants. Il existe heureusement quelques alternatives, qui feront l'objet d'un billet ultérieur Pour ce qui est des illustrations vectorielles, ou vector files, le problème devient un peu plus épineux. Faites chauffer les bookmarks ! Snap2Objects, propose des silhouettes de personnages, ainsi que bien d'autres ressourcesLogoTemplater : des illustrations pouvant servir de base à un logoDesigners Revolution : pas mal de packs IllustratorTHePixlPusherCreatSK8Vibr8Bros : pas mal de badges / stickersFree LogoTypes, pour retrouver les logos des grandes marques en format vectoCoolVectorsVector4Free, des vectoriels dans pas mal de catégoriesGoMediaZineGarcya.usDezignus une mine d'or. J'espère que vous trouverez votre bonheur dans cette liste.

html tables · guides Summary In this article we will cover how to use HTML tables correctly. Introduction “Ack!” In web design tables are a good way to organize data into a tabular form. Back in the Jurassic Age of the Internet before CSS was popularised as a method of separating the presentation from structure of the HTML, tables were used as a way to lay out web pages — to create columns, boxes, and generally arrange the content. The most basic table Let's start with the semantic HTML code required to render a basic table — this particular example compares recent volcanic eruptions in the Pacific region of North America: <table><tr><td>Volcano Name</td><td>Location</td><td>Last Major Eruption</td><td>Type of Eruption</td></tr><tr><td>Mt. This code renders roughly like so: Let’s start by breaking down the HTML markup used in the above code: <table></table>: The <table> wrapper element is necessary to indicate to the browser that you wish to arrange the content in a tabular fashion. Adding some more features

Related: