Going Nuts with CSS Transitions I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site. Laying the foundations First we are going to make our images look like mini polaroids with captions. Here’s the markup: <div class="polaroid pull-right"><img src=".. You’ll notice we’re using a somewhat presentational class of pull-right here. The actual polaroid effect itself is simply applied using padding, a border and a background colour. The box-shadow property takes four values: three lengths and a colour. The colour value can be given in any format recognised by CSS. Rotation For browsers that understand it (currently our old favourites WebKit and FF3.5+) we can add some visual flair by rotating the image, using the transform CSS 3 property. -webkit-transform: rotate(9deg); -moz-transform: rotate(9deg); transform: rotate(9deg); Rotations can be specified in degrees, radians (rads) or grads. Animation Let’s go nuts. Here’s our new markup: Throwing polaroids at a table
webdev.stephband.info Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
Responsive Web Design: 5 Handy Tips Tutorial by Matt Doyle | Level: Intermediate | Published on 17 February 2012 Categories: Learn how to improve your responsive website layouts with 5 useful techniques: Hiding content, collapsing content, scaling images, responsive images, and type resizing. In my previous article Responsive Web Design Demystified, I explained the concepts behind responsive web design, and showed how to build a simple responsive layout from the ground up. In this article, you learn five additional techniques that will help you build great responsive layouts. Here's what you'll learn in this article: How to hide non-essential content on smaller screens Creating collapsible blocks of content to make the best use of mobile displays Scaling images in proportion to the available screen width How to create responsive images that are optimised for different screen sizes and network speeds, and Resizing type according to browser width. Ready? Hiding content Let's look at an example. Collapsing content collapse Summary
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;
How To Build an Animated Header in jQuery Home > CSS, Front End Development, HTML, Javascript > How To Build an Animated Header in jQuery Why not give a little flair to your header. This tutorial will show you how to animate your header’s background image using jQuery to give your website that little extra something. What We Are Building We are going to build a header that animates it’s background. How it’s Going to Work The header background image is going to be super tall. Now that we have our background image, we will also need to create a shadow overlay image. After that it’s just a matter of animating the background image with jQuery so it scrolls. Getting Started The first thing we’re going to need is the HTML in place. Here is the HTML: The CSS We aren’t going to do anything too difficult here. Center the website Give the header a height and a background image Style and position the text within the header Create a shadow overlay Give basic style to the header and navigation bar. Here is the CSS: The jQuery Here is the jQuery:
The ultimate responsive web design roundup Responsive design is the new darling of the web design world. It seems that not a week goes by that there aren’t new resources for doing it, opinions about how to do it or even whether to do it at all, and new sites that make beautiful use of it. It can quickly get overwhelming trying to keep up with it all. Here we’ve compiled a list of more than seventy resources for creating responsive designs. Included are articles discussing responsive design and related theories, frameworks and boilerplates for responsive layouts, tools for testing your responsive designs, techniques for resizable images, and a whole lot more. Then, to top it all off, we’ve collected a hundred of the best responsive designs out there right now to inspire you and give you some real-world ideas. Articles and Publications Below are a number of high-quality articles talking about responsive design and the techniques that go into it. Responsive Web Design Responsive Web Design Book Big vs. Responsive by Default Context FitText
8 Useful CSS Tools Writing better CSS is something all web designers and developers should strive for, and thankfully there are some useful tools out there to help do just that. For this post, we’ve rounded up a collection of new tools to help you with your CSS. From learning new CSS3 properties, to making your code more efficient, there’s bound to be a few tools here you will find useful. CSS3 Patterns Gallery CSS3 Patterns Gallery lets you browse various CSS3 patterns as thumbnails or fullscreen and grab the code so you can use them on your own site. PrefixMyCSS PrefixMyCSS helps you save time by letting you write your properties one way. Layer Styles Layer Styles is a HTML5 app for creating CSS3 in a intuitive way. Sencha Animator Sencha Animator is a desktop app to create CSS3 animations for WebKit browsers and touchscreen mobile devices. The Web Font Combinator The Web Font Combinator was created in order to preview web font combinations. CSS Pivot CSS Lint CSS Prism
Spritely.net Loi de Fitts Un article de Wikipédia, l'encyclopédie libre. §Le modèle[modifier | modifier le code] Mathématiquement, la loi de Fitts a été formulée de plusieurs manières différentes. où T est le temps moyen pris pour effectuer le mouvement ;a et b sont des paramètres pouvant être déterminés empiriquement par régression linéaire ;D est la distance séparant le point de départ du centre de la cible ;L est la largeur de la cible mesurée selon l'axe de mouvement ; L peut également être considérée comme la tolérance de la position finale, étant donné que le point final du mouvement peut tomber dans la fourchette de plus ou moins L/2 du centre. À partir de l'équation, on voit un compromis « vitesse-précision » associé au pointage, où les cibles les plus petites ou éloignées nécessitent plus de temps pour être atteintes. §Notes et références[modifier | modifier le code]
Using The Best Ampersand Available I really like one of the typographic tricks Mark Boulton makes in his "Better Typography" presentation. (Slideshow of the presentation here. Around slide #109) He suggests "using the best ampersand available". This just means that on some typefaces, the ampersand character can be a little lackluster and it can make a big improvement in style and readability to swap it out for another typeface. His (great) example is from SimpleBits: Now that's a nice looking ampersand. Then apply styling to the class. Check out some simple examples of how this can make text more pleasing: I should mention that the excellent wp-typogrify plugin automatically adds this span/class to ampersands on your WordPress blog, which is pretty slick and just one of it's many nice features. Share On
A jQuery responsive images plugin to help ease the transition | Jquery Picture Goban Club – Responsive Web Design par Ethan Marcotte : une traduction française Le Web Design Réactif par ETHAN MARCOTTE Le contrôle qu’exercent les designers au sein du média imprimé et qu’ils désirent souvent retrouver au sein du virtuel est simplement le produit d’une limitation de la page imprimée. Nous devrions accepter le fait que le Web n’a pas les mêmes contraintes, et concevoir en fonction de cette flexibilité. John Allsopp, « Le Maître du Web Design ». Commentant son métier, l’Anglais Christopher Wren affirmait avec un brin d’ironie que « l’architecture vise l’éternité ». Le domaine du Web est une tout autre dimension. Mais l’environnement change, peut-être plus vite qu’on ne le souhaiterait. J’ai récemment rencontré des entreprises ayant pour projet de créer un « site web pour iPhone ». Une base flexible Prenons un exemple de mise en page. Aucune mise en page, qu’elle soit fixe ou variable, ne peut s’adapter de façon homogène à un contexte autre que celui pour lequel elle a été conçue. Devenir réactif C’est la voie du progrès. media queries Allons de l’avant
jQuery Masonry css3-mediaqueries-js - css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library) css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support. UPDATE: Google discontinued the downloads section. Usage: just include the script in your pages. (And you should combine and compress with other scripts and include it just before </body> for better page speed - but you already knew that). Write your media queries like you would for browsers with native support. Note: Doesn't work on @import'ed stylesheets (which you shouldn't use anyway for performance reasons). Happy media querying!