background preloader

CSS3 + Progressive Enhancement = Smart Design

CSS3 + Progressive Enhancement = Smart Design
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects. Among these generalized strategies, the second approach comes closest to the concept of progressive enhancement. A Quick Example Consider a basic layout done with good ‘ol CSS 2.1 and HTML 4.01. basic layout and compositionbackground, border, and font colorsfont families, styles, and transformationsbasic styles for HTML elementsdecorative graphics, link styles and so on The idea here is to begin with a nice, well-styled presentation that looks good in even archaic browsers like IE6. CSS 3 and Progressive Enhancement Do More with Less Code Sound good? Box Sizing ↑ Related:  VEILLE TECHNO*

Let’s Call It a Draw(ing Surface) You are here: Home Dive Into HTML5 Diving In HTML 5 defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. So what does a canvas look like? Invisible canvas The markup looks like this: Let’s add a dotted border so we can see what we’re dealing with. Canvas with border You can have more than one <canvas> element on the same page. Let’s expand that markup to include an id attribute: Now you can easily find that <canvas> element in the DOM. var a_canvas = document.getElementById("a"); Simple Shapes Every canvas starts out blank. Click to draw on this canvas The onclick handler called this function: function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100); } And then there’s this Every canvas has a drawing context Paths path .

Bourbon - A Sass Mixin Library treehouse : 10 Fresh Useful CSS Animation... An Analysis of Typography on the Web Typography is one of the most—if not the most—important aspects of web design. Some would argue that it takes up to 95% of web design, so why do we often neglect its importance? The readers who come to your site will often decide whether or not to stay according to your typographic choices. After all, they came here to read in the first place. In fact, even some font names suggest that classification; Futura, Optima, Times New Roman (OK, that's probably a dude), Verdana, Lucida, Georgia, Helvetica… There's no question about it, Typography is the queen. Not sure what I'm talking about? Knowing Your (sans) Serifs Before proceeding with this article, and especially if you don't have much contact with typography, I suggest you fill the gaps of your Typographic knowledge from Typedia, taking special note of Typeface classifications and the anatomy of a typeface, which will serve you well when making your own font-stacks and pairing fonts. Tightening Wisdom #1: Typefaces Relate (P.S.

An inline-block intervention Tell me the last time you used a <b> element in your markup. How about a <blink> tag? If you answered ‘today’, then this post will hopefully be eye opening for you. However, if you answered, “pffft, I don’t. So, the reason why we don’t use the <b> tag for bolded text is because we’re interested in the separation of content and style. Cool? So let’s talk about inline-block inline-block entered the web dev scene around 2008 as part of CSS2.1 and everyone loved it. What inline-block does is provide inline positioning of an element, much like a span, em, strong or a element, but also allows widths and dimensions to be applied to it. So somewhere along the way, someone decided, “hey, I don’t need floats, I can just set my elements to display:inline-block”, and the web-dev community shouted, “Yes”. Except one little problem exists. What that means is that it acts just like a span, em, strong or a element would and reacts to whitespace next to it. So here’s where inline-block bothers me. Ugh.

Using CSS Text-Shadow to Create Cool Text Effects The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects! Check out the six text effects of vintage/retro, inset, anaglyphic, fire and board game in the demo, then copy the code snippets below to use the effects in your own designs. Needless to say you’ll need a text-shadow supporting browser (Safari, Chrome, Firefox) to see them in all their glory. View the demo The text shadow CSS property is used to add shading to any text related HTML element. text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070; How it works: View the demo The neon text effect is made up of 8 levels of shading. View the demo text-shadow: 0px 2px 3px #666;

Front End Developer, Melbourne - Petr Tichy Website Deployment: Let Us Count The Ways! Deployment is moving a website from a local environment to live servers. What seems like a simple thing can actually be quite complex. There are absolutely loads of ways to go about it. They range from user friendly software and services, to more complex command line tools, to full blown systems with lots of moving parts. I'm not an expert in all this, but I've set up a few different deployment systems in my day as well as worked with a number of different ones. Going Commando If you edit files right on your server directly, you essentially have no deployment step at all. You might even using something like WebDAV to mount your remote server like a hard drive on you local computer, and use whatever local editor you like. The appeal here is strong because you get results live so quickly. Using FTP Manually One very home-grown deployment technique is to simply work locally and when you are ready, move the files to the live server with FTP software (like Transmit). The Version Control Piece

20 HTML Best Practices You Should Follow Most of the web pages you encounter is presented to you via HTML, the world wide web’s markup language. In this article, I will share with you 20 best practices that will lead to clean and correct markup. 1. Always Declare a Doctype The doctype declaration should be the first thing in your HTML documents. I would recommend using the XHTML 1.0 strict doctype. 2. The <title> tag helps make a web page more meaningful and search-engine friendly. Take for instance, the following example: <title>Six Revisions - Web Development and Design Information</title> The example above appears like the following image in Google’s search engine results page: 3. Meta tags make your web page more meaningful for user agents like search engine spiders. Description Meta Attribute The description meta attribute describes the basic purpose of your web page (a summary of what the web page contains). For example, this description: Shows up in Google’s search engine results page as follows: Keywords Meta Attribute 4. 5. <!

4design | Création & partage de ressources sur les langages du web, WordPress, le graphisme et le montage vidéo. | Page 2 Photoshop Etiquette est un site qui rassemble les bonnes pratiques à mettre en oeuvre pour produire des fichiers .psd conformes à la logique et au bon goût. Pour travailler efficacement, il est important de bien organiser ses fichiers et de les nommer correctement. Mais ce n’est pas tout : au total, Photoshop étiquette recense plus d’une centaines de points de vigilance illustrés avec des captures d’écran. Continuer la lecture de Les bonnes pratiques Photoshop pour le web design Depuis que j’ai installé Instagram sur mon téléphone mobile Android, je retarde le moment de lancer la palette des scripts de Photoshop pour récréer les filtres proposés par l’application qui s’appliquent en un clic une fois que vous avez sélectionné votre photo. Le pack de script proposé par Casey McCallister imite les 17 effets suivants : Brannan, Early Bird, Toaster, Sutro, Nashville, Kelvin, Inkwell, X-pro II, Amaro, Rise, Hudson, Sierra, Lo-fi, Walden, Hefe, Valencia et 1977.

Sencha Animator - Create CSS3 Animations with Ease The Sencha Web Application Lifecycle Management platform simplifies the challenges of managing the software development lifecycle of web applications. Now you can seamlessly design, develop, and test data-intensive web applications and deliver the right user experience, on the right screen, at the right time. Sencha Platform for Web Application Lifecycle Management The Sencha portfolio of products and services forms an integrated, modular platform for managing the lifecycle of your cross-platform web applications. Sencha products can be deployed separately or together to form an end-to-end solution. Design The Sencha platform helps you accelerate your web application development efforts with out-of-the box theming capabilities across all applications. Learn More: Ext JS | Architect | Themer Develop The Sencha platform offers powerful JavaScript and Java frameworks to help developers do their best work. Learn More: Ext JS | Sencha Test | GXT Test Learn More: Sencha Test An Open Platform Services

Tutoriels pour apprendre HTML & CSS | 4design Il existe de très nombreuses ressources pour apprendre les langages du web HTML & CSS. Bien sûr, les spécifications du W3C en la matière sont un passage indispensable, mais il ne faut pas oublier qu’il existe des tutoriels plus… didactiques. Ceux que je vous présente vous prendront par la main pour que le plongeon dans le grand bain de l’intégration web ne se transforme pas en «plat» douloureux. Learn HTML & CSS présente 10 leçons proposées par @shayhowe pour débuter avec HTML & CSS et développer votre premier site web : Un bien joli site très didactique qui donne, pour chaque rubrique, l’ensemble des éléments et des attributs à prendre en compte avec de nombreux exemples pratiques. CSS Débutant — Si vous êtes plus à l’aise avec le français, je vous invite à consulter le site de @PascaleLC où vous pourrez cultiver les standards du web : Plan de cours : Sur le même thème Check your avec le W3C 11 avril 2012 Dans "Ergonomie & Accessibilité" Le petit journal permanent de HTML5 10 août 2010

Mise en page CSS sans tableau à l'aide de div positionnés... ou pas Faire une mise en page avec deux ou trois colonnes peut se faire aisément sans tableaux. Diverses techniques sont possibles. On trouve sur le net une multitude de tutoriels de webdesign sur la mise en page fluide sans tableaux, à commencer par celui du W3C et ceux de l'excellentissime Alsacréations qui propose en outre une série de gabarits forts utiles. Ce tutoriel ne tente pas donc de réinventer la poudre, mais simplement résumer les différentes techniques possibles. Sommaire Pourquoi éviter la mise en page par tableaux ? Il ne faut pas systématiquement diaboliser la mise en page par tableaux, mais disons qu'elle a "vécu". On m'objectera qu'au delà de 3 colonnes, les choses se compliquent et qu'il y a quelques heures d'arrachage de cheveux pour arriver à faire quelque chose d'uniforme pour tous les navigateurs. Attention au DocType Haut Code (x)html Le principe est très simple : on divise chaque élément de la page par un div. En positionnement flottant Fonctionne avec : Attributs utilisés :

Related:  allistairgross