background preloader

Une taille de police en fonction de la largeur d’écran

Une taille de police en fonction de la largeur d’écran
J’ai souvent eu l’occasion à travers mes divers projets Web mobile (responsive), d’avoir à réduire la taille des polices de titre car même un simple mot ne passait pas en largeur. Pour éviter d’avoir une césure sur chaque mot du titre, le plus simple était de s’autoriser une réduction approximative du corps. (approximative… façon de parler). Je vous propose des solutions relative. CSS3 à la rescousse Il existe une unité encore peu connue car prise en charge par nos navigateurs depuis peu de temps, il s’agit des unités relative au viewport. Pour résumer, nous allons proposer un corps de texte qui dépend de la largeur de la fenêtre du navigateur. Très bien, mais que représente une unité de vw, par exemple ? Prenons un exemple plus parlant. Mon corps de texte aura un équivalent de 10% de la largeur de mon viewport, à savoir la largeur de la fenêtre de votre navigateur. Il vous faudra donc recharger la page sur la page de démonstration à chaque redimensionnement de la fenêtre du navigateur.

Complete list of HTML entities Complete list of HTML entities with their numbers and names. Also included is a full list of ASCII characters that can be represented in HTML (i.e. printable characters). ASCII Characters (Printable) Only printable characters are displayed as control characters (0-31) shouldn't be present in HTML pages since they have no visual representations. ISO-8859-1 Characters Full list of supported ISO-8859-1 characters. ISO-8859-1 Symbols Full list of supported ISO-8859-1 symbols in HTML. Math Symbols Full list of all supported math symbols in HTML. Greek Letters Full list of all supported greek letters in HTML. Miscellaneous HTML entities List of miscellaneous HTML entities. Walker on the Moon Light Font - Free Cufon and CSS Web Fonts @font-face Library Create your own collection and download Create your own collection and download Now we supporting @font-face web fonts and cufón Sign up and share your fonts with the worldthe largest font library more than 16 thousand fonts Walker on the Moon Light FONT 4 Style Ajout De L'Utilisateur : Rua Télécharger Walker on the Moon Light for MAC/WINDOWS/LINUX Generate Cufón Fonts Walker on the Moon Light Cufón Paquet Generate @Font-Face Web Font Walker on the Moon Light @Font-Face Paquet 0Partager Walker on the Moon Light Walker on the Moon Commentaires Faire un DON We need your support: please donate to help us to improve our website and to translate it

Using CSS animations You can get additional control over animations — as well as useful information about them — by making use of animation events. These events, represented by the AnimationEvent object, can be used to detect when animations start, finish, and begin a new iteration. Each event includes the time at which it occurred as well as the name of the animation that triggered the event. We'll modify the sliding text example to output some information about each animation event when it occurs, so we can get a look at how they work. Adding the CSS We start with creating the CSS for the animation. Adding the animation event listeners We'll use JavaScript code to listen for all three possible animation events. const element = document.getElementById("watchme"); element.addEventListener("animationstart", listener, false); element.addEventListener("animationend", listener, false); element.addEventListener("animationiteration", listener, false); element.className = "slidein"; Why? Receiving the events

Normes d'impression 01Les normes d'impression Les métiers de l’imprimerie ont défini des standards pour homogénéiser les fichiers à imprimer. Voici quelques vérifications qu’il est ESSENTIEL d’effectuer systématiquement AVANT d’envoyer votre fichier. 02Formats des fichiers Les fonds perdus : vous devez ajouter à la taille de tous vos documents 2 mm. Cette démarche est très importante car lorsque votre document est imprimé, les côtés sont coupés au format final mais cette étape n’est pas infaillible et la découpe peut entamer légèrement sur le document ou, au contraire laisser un liseré blanc. Exemple de fonds perdus pour un fichier au format final A4 portrait (210 mm x 297 mm): Largeur = 214 mm (210 mm + 2 mm + 2 mm) Hauteur = 301 mm (297 mm + 2 mm + 2 mm) (Il faut ajouter 2 mm de fonds perdus sur les quatres côtés du fichier). Les marges : vos textes doivent être décalés de 3 mm à l’intérieur du format fini, afin de ne pas risquer qu'un caractère soit coupé au massicotage. 03La qualité des fichiers A. B. C.

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do By Chris Coyier On June 13, 2011 It's pretty amazing what you can do with the pseudo elements ::before and ::after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here's a whole bunch of those amazing things. A roundup, if you will. #Give you multiple background canvases Because you can absolutely position pseudo elements relative to their parent element, you can think of them as two extra layers to play with for every element. #Expand the number of shapes you can make with a single element All of the shapes above and many more can be created with a single element, which makes them actually practical. Here's an example of a six-pointed star: #Show URL's of links in printed web pages #Clear floats #Simulate float: center; #Label blocks of code with the language it is in #Create an entire icon set

Typographie : Anatomie de la lettre | Blog Lignes et Formations Le caractère typographique est une forme dessinée, construite. Comme nous, il a un squelette. Le vocabulaire qui décrit les différentes parties de la lettre renvoie parfois au corps humain ! Eh oui, les lettres ont un corps avec une taille, un œil, une silhouette. La taille du corps représente la taille du caractère et s’exprime en points. Certaines lettres ont des jambages, en référence étymologique à la jambe, comme le p, f, g, q, b… Une ascendante (ou hampe, montante) est la partie supérieure d’une lettre bas-de-casse qui s’élève au-dessus de l’œil, de la ligne médiane. La hauteur des minuscules ou «hauteur d’œil», comme son nom l’indique, est la hauteur des bas de casse sans ascendantes ni descendantes, comme x, a, c, e, m, n, o, r, etc. L’œil (pluriel : œils) est la partie supérieure du caractère en relief, qui reçoit l’encre. La panse ou rondeur pourrait renvoyer à l’expression « se remplir la panse ». En rouge : contreforme ou contrepoinçon 2 exemples pour visualiser l’empattement :

nůn - Fondamentaux - Typographie : historique, vocabulaire et familles de caractères Pour faire court De mutations en mutations, la typographie s'est transformée au fil des siècles et des millénaires. Les premiers systèmes de communication étaient de nature pictographique-idéographique, c'est à dire basés sur la représentation d'un mot ou d'une idée sous forme figurative ou faiblement abstraite. Les signes ont ensuite progressivement évolué avec des différences importantes selon les régions du monde, pour arriver en France à un système d'écriture basé sur l'alphabet latin (alphabet vient de Alpha et Beta, les deux premières lettres de l'alphabet Grec) dont les signes (les lettres) représentent les phonèmes de notre langue, c'est à dire ses sons. En 2006, Françoise Briquel-Chatonnet a proposé la chronologie suivante pour les écritures alphabétiques : Anatomie de la lettre La typographie utilise beaucoup de termes qui permettent de décrire avec une grande précision la partie de la lettre dont on parle. Mesure de la lettre (taille du corps) Le jargon Familles de caractères

Related: