background preloader

CalculetteEm

CalculetteEm

http://pxtoem.com/

Related:  ResponsiveTOOL DEV

TypoEm Ce tutoriel présente l'unité em et la démarche à suivre pour l'utiliser à bon escient, ainsi que quelques conseils pour vous aider à assurer autant que possible la lisibilité du texte sur votre site… et donc à en améliorer la qualité générale. Pour concevoir un site web dont le texte sera lisible par tous, quelle que soit la configuration matérielle ou les besoins spécifiques de l'utilisateur, il faut permettre le redimensionnement du texte. Cela implique l'abandon des tailles de texte en pixels, et l'utilisation d'unités relatives, qui ont deux caractéristiques principales : contrairement aux tailles indiquées en pixels, elles permettent l'agrandissement du texte « à la volée » (après le chargement de la page), même avec les réglages par défaut d'Internet Explorer pour Windows ; elles se basent sur la taille du texte par défaut indiquée par l'utilisateur dans les préférences de son navigateur.

Pseudo-classes - CSS : Feuilles de style en cascade Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe :hover, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple). Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec :visited ; le statut du contenu avec :checked ; la position de la souris :hover). Note: À la différence des pseudo-classes, les pseudo-éléments peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément. Syntaxe

Comment identifier la police de caractère utilisée sur une image En visionnant des affiches, logos ou même des infographies, il arrive parfois que les typographies utilisées nous interpelles sans que l’on soit capable de la reproduire. L’idéal serait de pouvoir identifier la police de caractère automatiquement et justement, il existe un service en ligne gratuit pour cela. Amis webmasters et autres amateurs de typographie donc, je vous invite a tester WhatTheFont. Le principe est simple, il suffit d’uploader l’image (2 MB maxi) avec les caractères pour lesquels vous souhaitez connaitre la police ou spécifier une URL si l’image est en ligne. Le service se charge ensuite d’identifier la police et vous envoie les liens où vous pouvez la télécharger.

CSS Shapes, une introduction L'article de Sara Soueidan paru dans A List Apart a fait le buzz dernièrement. Sara présente ici avec clarté ce qui sera l'avenir des formes et du design dans CSS. Par Sara Soueidan Des rectangles dans des rectangles, telle est depuis toujours la structure de nos pages web. Les fondamentaux du Responsive Web Design Prenons deux exemples simples. Le premier pourrait être ces vitres qui s'opacifient en fonction de la luminosité extérieure. Ou encore ces murs-miroirs où plus nous nous approchons, plus ils nous semblent se déformer.

Srcset et size L’attribut srcset L’attribut srcset, est un attribut pour les balises images qui permet de résoudre les problèmes que pose l’intégration de site responsive avec des images. Cet attribut vient en corrélation de l’attribut src habituel d’une image et permet de spécifier une liste d’image à afficher selon certain critère. Cela ressemble étrangement au média queries, mais la façon de penser est un peu différente. En effet une média querie vas dire : utilise ceci quand la taille du conteneur est moyenne, alors que srcset vas dire dire : cette image est de taille moyenne. en pratique cela donne ce morceau de code : Se lancer dans Sass Qui a encore peur aujourd'hui de Sass et des préprocesseurs en général ? David Demaree nous montre dans cette introduction claire et complète la simplicité et l'utilité de Sass. Indispensable, vraiment. Par David Demaree La simplicité de CSS est depuis toujours l’une de ses caractéristiques les plus agréables. Les feuilles de style CSS ne sont au fond que de longues listes de règles, chacune consistant en un sélecteur et quelques styles à appliquer.

Classification Vox-Atypi Un article de Wikipédia, l'encyclopédie libre. En typographie, la classification Vox-Atypi permet de classer les polices de caractères en douze grandes familles. Inventée par Maximilien Vox en 1952, elle a été adoptée en 1962 par l'Association typographique internationale (ATypI). Créer un sitemap - Centre d'aide Search Console Cette page explique comment créer un sitemap et l'envoyer à Google. En savoir plus sur les sitemaps Créer et envoyer un sitemap : Déterminez quelles pages de votre site nous devons explorer, ainsi que la version canonique de chaque page. Choisissez le format de sitemap que vous souhaitez utiliser.

Un arrière-plan extensible intelligent Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord. Comment fait-on ? Nous allons présenter ici deux méthodes parmi celles qui sont possibles : une entièrement en CSS , une autre basée sur jQuery.

Related:  transfert 3code css a essayerà classerfreackjoeOutilsDevCreate Fonts OnlineCSS3 toolsOutilsOutilsOutils