Quick Tip: Detect CSS3 Support in Browsers with JavaScript
Isn't it fun that we get to play with the latest CSS techniques, like shadows and transitions? There's only one problem: how do we compensate, or more importantly, detect the browsers that do not support them? Well, there's a few solutions. In this tutorial and screencast, though, we'll create a JavaScript function that will accept a CSS property name as its parameter, and will return a boolean, indicating whether or not the browser supports the passed property. Prefer a Video Tutorial? Step 1 Let's begin by determining how we want to call our function. That should be the final function call. Step 2 Next, we'll construct the supports() function. Why aren't we making supports equal to a standard function? Step 3 To test whether or not the browser supports specific properties, we need to create a *dummy* element, for testing. As you're probably aware of, there are a handful of vendor-prefixes that we can use, when working with CSS3 properties: -moz-webkit-o-ms-khtml Step 4 Step 5 Step 6 Step 7
Interactive Guide to Blog Typography
The majority of websites are composed of a bright, usually white background and dark text. Then there's the small minority of the web: dark websites, colorful websites. Why is the bright background used by the majority of websites? Utilitarian Motivation The common use for small caps is for abbreviations longer than 2 letters, such as CSS , HTML and WYSIWYG excluding AM , PM , BC and similar. Research shows that consumers with a utilitarian motivation find a low-arousal environment more pleasurable than a high arousal one. Hedonistic Motivation Hedonism is defined as the pursue of pleasure, especially the pleasure of our senses. Example outside the web: nightclubs.
Typograph – Scale & Rhythm
This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you can play upon it. Choosing sizes Don’t compose without a scale. Of course, good typesetting requires something more than selecting a series of font sizes, just as music consists of something more than choosing notes. Vertical Tempo Most pages of continuous prose pulse with a particular vertical rhythm, established by the lines of its main words, sentences, and paragraphs. For this, Bringhurst suggests another rule of thumb: Add and delete vertical space in measured intervals. Size and rhythm make each other interesting. Sizing up the <body> The first step: establish the size of the main text. Here, it pays to work with the grain. Declare <body> font-size using % The em
Conseils pour une bon titre d'article sur le Web
Étiquettes : lisibilité, principes formels, principes rédactionnels C’est quoi un titre d’article qui marche? On vous propose un inventaire des différents genres de titres qui marchent pour vos contenus Web. Pour trouver un bon titre d’article, il faut savoir ce que vous cherchez. Il existe deux grandes catégories de titres : Les titres directsLes titres indirects Les titres directs Ex. : Tout savoir sur l’écriture pour le Web Leur sens est littéral. Les titres indirects Ex. : En mal d’appât ? Ils exploitent une voie « oblique ». Dans ces deux catégories, on distingue des sous-catégories, telles que: Les titres impératifsLes titres « à la une »Les titres sous forme de questionLes titres « Comment… »Les titres « X bonnes raisons de »Les titres « témoignage » Les titres impératifs Ex. : Mettez de l’ordre dans vos titres ! On se souvient des pub Vittel « Buvez, éliminez » … Dans vos titres impératifs, le premier mot sera généralement un verbe qui encourage l’utilisateur à agir… Alors, convaincus ?
20 Fresh Free HTML5 And CSS3 Website Templates And Tutorials | Bloggermint
HTML5 is an advanced version of HTML supported by all major browsers. HTML5 has bought us incredible ways to add videos, audios by minimizing the lookup of external source. Frankly not all browsers support all functions of HTML5 but I believe we can see many website and blog switching to HTML5 this year and of course its the future. Recently I have been into lots of HTML5 works and during those time, I found some free website templates that won’t suck. Other resources about HTML5 and CSS3 How to create a HTML5 contact form Detect geolocation on web browser using HTML5 CSS3 Tutorials: Box Shadow effect CSS3 Tutorials: Rounded Corners 1. (Tutorial Included) 2. 3. 4. 5. 6. 7. 8. 9. (Tutorial Included) 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. If you want a custom HTML5 template for your blog or website, contact me.
A Closer Look At Font Rendering
Advertisement The Web font revolution that started around two years ago has brought up a topic that many of us had merrily ignored for many years: font rendering. The newfound freedom Web fonts are giving us brings along new challenges. While we cannot change which browser and OS our website visitors use, understanding why fonts look the way they do helps us make websites that are successful and comfortable to read in every scenario. Now that we have a great choice of fonts that can be used on websites, it becomes clear that the translation of a design into pixels is not something that happens naturally or consistently. This article presents the mechanisms of type rendering, how they were developed, and how and why they are applied by the various operating systems and browsers—so that when it comes time to choose a font for your next project, you know what to look out for to ensure the quality of the typography is consistently high. Rendering Strategies Rasterization Grayscale Rendering iOS
Modularscale
Comment utiliser une fonte «non-standard» sur un site Web
Il est de notoriété publique que l'usage des fontes sur le Web est limité à une poignée de fontes non pas standardisées, mais suffisamment répandues pour pouvoir être utilisées sans trop de risques. Et cela pour une raison très simple: la police de caractères que l'on souhaite utiliser doit être présente sur le système de l'utilisateur pour être utilisée par le navigateur. Quand @font-face tombe à l'eau CSS 2 (publié en 1998) comprenait un mécanisme qui autorisait les auteurs de pages web à proposer une fonte au téléchargement, fonte qui serait ensuite utilisée dans la page. la plupart des fontes disponibles sont protégées par le droit d'auteur et ne peuvent pas être redistribuées, y compris comme fonte «intégrée» à un site web; les fontes rajoutaient un poids conséquent aux pages (jusqu'à plusieurs centaines de Ko); les développeurs des navigateurs étaient peu enclins à affronter les deux problèmes ci-dessus (surtout le premier). Quand @font-face revient Google Web Fonts Font Squirrel
