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. Related:  HTML/CSScréation site dreamweaver

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.

Un système de notation en quelques lignes de CSS Afficher 5 étoiles les unes à côté des autres, puis les faire se colorer en fonction de la note que vous souhaitez donner à une création, une vidéo, un article,… C’est parfois prise de tête, sprites CSS et autres systèmes de masque. Je vous propose plus simple ! Nous allons faire ça en HTML et CSS, juste pour le fun, ça vous dit ? Voir la démonstration Un bout de HTML Nous allons simplement créer un groupe de lien dans une div, mais le principe est assez semblable quelle que soit votre structure. <div class="rating"><! Les commentaires sont là pour conserver l’indentation et éviter le white-space. On commence par un petit problème : on doit inverser le sens des étoiles (liens), la première permet de donner 5 étoiles (meilleure note), la dernière 1 étoile (moins bonne note), mais vous allez comprendre ensuite pourquoi. Une portion de CSS Donnons quelques styles de base à notre système d’étoiles. transition c’est pour la petite touche d’animation en CSS3, mais c’est optionnel. Le code CSS final :

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 ? Exemples Pour avoir un aperçu de ce que l'on veut obtenir, voici quelques exemples utilisant ce principe : Simon & Comet Flavors me Piz'za-za Le point commun de tous ces sites est la mise en avant de leur background : il est fixe et c'est la pièce maîtresse de leur design. Le principe Comme vous venez de le remarquer, ce n'est pas qu'une simple image de fond qui s'adapte à la fenêtre : il n'y a aucune déformation, le ratio est toujours conservé et lorsque la fenêtre est vraiment étroite le fond est recadré. On est donc loin de ce résultat simpliste qui se contente d'étirer l'image à 100% de son conteneur. Préparation de l'image de fond Après enregistrement, l'image est prête à l'emploi ! <!

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

Du Retina et HD pour votre site web : image-set, picture et srcset Retina, ou la haute définition de manière plus générale pour les images de nos sites web pose un problème relatif. En effet depuis la sortie du premier Mac Book Pro à écran Retina (et avant pour certain), la question qui revient le plus souvent est : doit-on boycotter Retina, ou au contraire y accorder de l’importance ? Je fais partie des gens indécis sur la question, et du coup cette position me va très bien pour écrire cet article, car j’en attends vos réactions. Pour moi la HD, comme la 3D, fait partie de l’avenir de l’image, que ce soit au ciné, la télévision ou un écran d’ordinateur. C’est comme le son multicanal (plus connu sous le nom de son surround), aujourd’hui ça vous ferait bizarre d’aller au cinéma avec un son mono. Voici les problèmes que j’ai pu relever, a priori, en pensant à l’intégration d’images HD : Je ne dis pas que cette liste est exhaustive. Un design nickel chrome Je n’ai pas mis de majuscule à « chrome » dans le titre, mais j’aurais presque pu. Démonstration en ligne

draGGradients -- create custom css radial-gradients dragging your mouse draGGradients is as a simple tool to generate and customize multiple css3 radial gradients. I get back an old project that uses a multiple gradient jpg image as a background and started to generate the same image in css-only. Instead of code only this image I finished doing this little stuff. Hope you enjoy it! Toggle main controls (also pressing ESC key) to customize, add and arrange each point generator. Basically the tool works generating radial-gradients from each draggable point, and you could control: - The main color. You could also add, delete and arrange each point from the same section. In the bottom left menu, you could: - Toggle points. You could also create a pen with the generated gradient, clicking on the Codepen logo. This simple and little tool was made with ❤ by @elrumordelaluz

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

HTML5 : l’élément progress, avancement d’une tâche - Veille technologique L’élément progress en HTML5 permet de visualiser l’avancement d’une tâche. C’est un élément encore assez méconnu mais qui peut être pratique dans quelques cas où vous avez besoin de permettre à l’utilisateur de visualiser une évolution ou un stade précis dans un processus. Voyons comment l’intégrer et styler cet élément. Quelques exemples d’utilisation Avant de nous lancer dans du code, voici quelques idées ou exemples d’intégration d’un tel élément dans votre code. Progression dans le remplissage d’un formulaire,Progression dans le remplissage d’un profil utilisateur,Progression du chargement d’un fichier,Niveau d’avancement de votre refonte/construction de site web,État de complétion d’une tâche, quelle qu’elle soit. Le W3C définit cet élément comme : […] représentant l’état d’avancement d’une tâche. […] L’utilisation pour quelque chose qui ne définit qu’une jauge est inappropriée. À quoi ressemble progress ? Faisons simple et utilisons ce morceau de code. Amusez-vous bien ! Compatibilité

Related: