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.

Separation, Abstraction, and Cascading in CSS | LispCast TLDR: LESS and Sass (and similar solutions) have saved CSS for three reasons: separation, abstraction, and cascading. While I welcome them, CSS still has other problems which I believe can be solved. I propose some solutions. Introduction A lot is said about LESS and Sass, and for good reason. But when people talk about why they are so great, they miss the main point. In this essay, I will try to put into words (and some pictures) what my intuition tells me as a developer and programming language enthusiast to clarify why CSS is innately unmaintainable, does not satisfy its own design goals, and why LESS and Sass make a bad language more bearable. Zero Degrees of Separation Way back when, people used HTML tables to style their pages. Those were the days of font tags and tables. Then CSS came along, and people talked a lot about separation of content from presentation. Your styles were still tied to the structure of the document they were styling. HTML and CSS are separate but not equal.

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

All you need to know about CSS Transitions CSS3 transitions bring simple and elegant animations to web applications, but there’s a lot more to the spec than first meets the eye. In this post I’m going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions. Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU. Browser support CSS transitions are supported in practically every version of Firefox, Safari and Chrome. Webkit based browsers (Safari and Chrome), still require -webkit prefixes for animations and gradients, but these are soon being removed. Applying transitions A simple way of applying transitions is with CSS pseudo-classes, such as :hover. When the :hover pseudo-class is activated, the height will be transitioned linearly from 100px to 200px over a period of 2 seconds. Transitioning gradients Clipping

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.

Live Tools - Des outils de génération d'UI en CSS3 / HTML UI Live Tools est un site web proposant 4 générateurs d'éléments d'interface: Boutons, formulaires, icones et ribbons en CSS3. Voici un site web qui va rendre grand service à ceux qui n'ont pas forcément la fibre graphique dans le sang ! ui Live Tools est un service proposant 4 générateurs: Générateur de boutonsGénérateur de formulairesConstructeur d'icônesGénérateur de ruban / ribbon A chaque fois, de nombreux paramètres sont disponibles pour personnaliser le style, les couleurs, ... Générateur de boutons CSS3 Le générateur de bouton est complet, vous pouvez personnaliser les couleurs des différents états, avec des transitions CSS3... Générateur de formulaires design CSS3 Même principe mais pour les formulaires. Il ne s'agit pas là d'un générateur de formulaires avec validateurs etc, mais un générateur de formulaire design. Générateur d'icones Le générateur d'icones permet de créer à la main, pixel par pixel à la souris. Générateur de rubans CSS3 Site Officiel

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

Related: