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

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 ! <!

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. Pure CSS Slide Up and Slide Down If I can avoid using JavaScript for element animations, I'm incredibly happy and driven to do so. They're more efficient, don't require a JavaScript framework to manage steps, and they're more elegant. One effect that is difficult to nail down with pure CSS is sliding up and down, where the content is hidden when "up" and slides in when "down". The reason it's difficult is because you may not know the content height. After playing around with different CSS properties, I've found a way to make a pure CSS sliding effect. The HTML The effect really only requires one element, so we'll stick to that: <div class="slider">Some content here.... Add as much content as you'd like. The CSS Before we get into the trick, let's set the few obvious properties: overflow-y and the CSS animation properties: So now the fun: the trick we'll use to make the height play nice is the max-height property. Not Perfect So there comes the case where the height of the element could be 100px or 100000px.

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

Using CSS animations This is an experimental technologyBecause this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes. CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints. There are three key advantages to CSS animations over traditional script-driven animation techniques: They’re easy to use for simple animations; you can create them without even having to know JavaScript. Configuring the animationEdit To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. animation-delay ExamplesEdit

CSS Filters CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have a look at how CSS filters work and how you can quickly create elements that are beautifully filtered! There are many CSS filters to choose from: grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, and invert. The following CSS snippet will blur an element: Multiple filters are separated by spaces, so we could also add grayscale and opacity values to the blur: Let's get crazy with hue-rotate as well: If static filtering isn't enough for you, CSS filters also animate with @-webkit-keyframes: Expect a performance hit with heavy CSS filter usage; be sure to heavily test your site wherever filtering is used.

Related: