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
Les transitions en CSS3 – Mouseover et Mouseout sans JavaScript
Manière un peu originale d’aborder les transitions, j’ai lu un article en anglais il n’y a pas longtemps qui proposait d’étudier les transitions sur l’événement hover en CSS. Par défaut, la transition sur cet événement comme on a l’habitude de l’utiliser nous propose des effets équivalents au «mouseover» comme au «mouseout». Nous allons voir assez simplement comment diviser en deux les effets de transitions pour proposer un effet au survol différent de l’effet de transition au moment où la souris quitte l’élément. Les propriétés CSS 3 demandent un préfixe pour les navigateurs (-moz-, -webkit-, etc.) que je n’ai pas précisé ici. Rappel sur transition en CSS 3 Pour créer une transition en CSS 3, vous aurez besoin de plusieurs informations, dont : l’effet recherché (et sa correspondance en propriété CSS), la durée et éventuellement le scénario. Je ne vais pas refaire un article complet sur les détails de ces propriétés, il y en a un très bien fait sur Alsacréations.com par Antoine Cailliau.
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.
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
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.
5 alternatives à Notepad++ pour Mac
Notepad++ est sans aucun doute le meilleur éditeur de code source pour Windows. Le problème, c’est qu’il n’existe pas pour Mac ! Débarqué récemment sur Moutain Lion, il m’a fallu quelques temps pour retrouver mes bonnes vieilles habitudes. 1. Certainement l’une des meilleures solutions gratuites, TextWrangler se démarque avec quelques options comme : une interface agréable qui vous permet de travailler en plein écran, une organisation des fichiers en cours d’édition dans une barre latérale, des couleurs différentes en fonction des balises. 2. Logiciel gratuit qui propose une interface simple grâce à une navigation par onglets et plus de 60 langages de programmation. 3. gedit L’éditeur de texte officiel de l’environnement GNOME qui supporte aussi les caractères Unicode, la surbrillance pour divers langages de programmation, un outil de recherche et de remplacement, la création automatique de fichiers de sauvegarde. 4. 5. Et vous, quelle alternative à Notepad++ utilisez-vous sur Mac ?
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
Adobe Edge Web Fonts
