Jolie série d’icones gratuites (mais pas libres) :
Freebie : Free Vector Web Icons (91 Icons) - Smashing Magazine
►http://www.smashingmagazine.com/2011/12/29/freebie-free-vector-web-icons-91-icons
Étiquette typographique (anglo-saxonne) // Mind Your En And Em Dashes : Typographic Etiquette - Smashing Magazine
►http://www.smashingmagazine.com/2011/08/15/mind-your-en-and-em-dashes-typographic-etiquette
An understanding of typographic etiquette separates the master designers from the novices. A well-trained designer can tell within moments of viewing a design whether its creator knows how to work with typography. Typographic details aren’t just inside jokes among designers. They have been built up from thousands of years of written language, and applying them holds in place long-established principles that enable typography to communicate with efficiency and beauty.
Mastering Photoshop Techniques : Layer Styles - Smashing Magazine
►http://www.smashingmagazine.com/2011/08/12/mastering-photoshop-techniques-layer-styles
Use #HTML5 in #WordPress TwentyTen - TwentyTen Five - The HTML5 WordPress theme :)
►http://www.twentytenfive.com
Moi je suis plutôt #SPIP mais le concept semble intéressant en tout cas :-)
Il existe une version html5 de Zpip aussi. Ensuite le html5 pour le html5 ne me semble pas une perspective fascinante. La plupart des éléments vraiments novateurs ne sont pas fonctionnels dans les navigateurs.
Thème WP HTML5/CSS3 ET responsive webdesign : ►http://www.smashingmagazine.com/2011/06/07/free-html5-css3-wordpress-3-1-theme-with-responsive-layout-yoko
Naturellement comme souvent ils disent que c’est gratuit mais ne donnent pas d’info sur la licence.
On peut alors sans trop de soucis considérer par défaut que c’est une licence « Créatif Grande Gueule » non ? :D
(petit coup de pub pour un ami au passage : ►http://alias.codiferes.net/wordpress/index.php/creatif-grande-gueule
#CGG
@vlentz
Pour les infos de licence c’est toujours dans le fichier style.css pour les thèmes WP... Et dans le cas précis, comme presque toujours, c’est la GPL v2 comme demandé par les dev de WP... Avant de faire des remarques mesquines il vaut mieux savoir de quoi on parle.
The Medium Is The Message - Smashing Magazine
►http://www.smashingmagazine.com/2011/07/04/the-medium-is-the-message
“The medium is the message” as a phrase sums up a much deeper communication theory, which is that the medium through which we choose to communicate holds as much, if not more, value than the message itself. At first, this concept might seem vague and indeed a lot to grasp. But I can honestly say that understanding the meaning behind these words revolutionized the way I approach Web design; not from a technical or procedural standpoint, mind you, but from a fresh mental perspective that provided clarity on how to approach and design for the Web.
Free #HTML5/CSS3 #WordPress 3.1 Theme With Responsive Layout: Yoko - Smashing Magazine
►http://www.smashingmagazine.com/2011/06/07/free-html5-css3-wordpress-3-1-theme-with-responsive-layout-yoko
Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color
Il se prend un peu la tête, l’article d’A List Apart :-))
Les images qui deviennent moches, c’est ça:
►http://seenthis.net/messages/18251
Donc:
img {
max-width: 100%;
-ms-interpolation-mode : bicubic;
}
En fait, le principal défaut des images fluides, c’est que tu te retrouves à balancer des images grand format affichées en petit sur les mobiles, c’est-à-dire justement dans la situation où :
– potentiellement la bande passante va te coûter bonbon ;
– la connexion est la plus lente.
Il faudrait donc un mécanisme qui permette de charger des images différentes selon la situation. Mais je n’ai rien trouvé de convaincant pour l’instant.
Ten Oddities And Secrets About #JavaScript - Smashing Magazine
►http://www.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript
JavaScript. At once bizarre and yet beautiful, it is surely the programming language that Pablo Picasso would have invented. Null is apparently an object, an empty array is apparently equal to false, and functions are bandied around as though they were tennis balls.
This article is aimed at intermediate developers who are curious about more advanced JavaScript. It is a collection of JavaScript’s oddities and well-kept secrets. Some sections will hopefully give you insight into how these curiosities can be useful to your code, while other sections are pure WTF material. So, let’s get started.
Innovative Techniques To Simplify Sign-Ups and Log-Ins - Smashing Magazine
►http://www.smashingmagazine.com/2011/05/05/innovative-techniques-to-simplify-signups-and-logins
There are many ways to design sign-up and log-in forms. Most designers are familiar with the conventional ways. But understanding and applying a few innovative techniques could make your forms simpler and more efficient to fill out. In this article, we’d like to present a couple of new ideas that might be useful for your next designs.
C’est ce que je me suis dit
J’aurais bien mis @SPIP mais il n’existe pas. Qui pourrait endosser ce rôle ? (un collectif, un rss…)
Showcase of Creative Navigation Menus: Good and Bad Examples
►http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples
Good navigation is the main cornerstone of an effective website. In practice, however, it’s often a tough challenge to come up with a meaningful, unambiguous way to organize, arrange, and display content to users; and it’s often not much easier to find a visually interesting solution either. The wide adaption of JavaScript libraries like jQuery is making it increasingly easy to add various kinds of sleek animations to navigation design. For instance, many recent promo websites are essentially single page websites with an array of animation effects used to make navigation a smoother and richer user experience.
How To Use CSS3 Pseudo-Classes
►http://www.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes
CSS3 is a wonderful thing, but it’s easy to be bamboozled by the transforms and animations (many of which are vendor-specific) and forget about the nuts-and-bolts selectors that have also been added to the specification. A number of powerful new pseudo-selectors (16 are listed in the latest W3C spec) enable us to select elements based on a range of new criteria.
The Font-Face Rule And Useful Web Font Tricks
►http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks
The possibility of embedding any font you like into websites via @font-face is an additional stylistic device which promises to abolish the monotony of the usual system fonts. It surely would be all too easy if there was only one Web font format out there. Instead, there’s quite a variety, as you will get to know in this article.
This quick introduction to @font-face will lead you towards a guide through the @font-face kit generator. If you want to make Web use of your already licensed desktop fonts, read up on how to embed them from your own server. Topped up with some helpful tips, tricks and workarounds, this article will hopefully provide some useful insights.
Technical Web Typography: Guidelines and Techniques
►http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques
The Web is 95% typography, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now — reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs?
Unfortunately, for every person who is obsessed with even the tiniest details of typography, a dozen or so people seem to be indifferent. It’s a shame; if you’re going to spend time writing something, don’t you want it to look great and be easy to read?
Technical Web Typography: Guidelines and Techniques - Smashing Magazine
►http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques
The Web is 95% typography, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now — reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs?
Unfortunately, for every person who is obsessed with even the tiniest details of typography, a dozen or so people seem to be indifferent. It’s a shame; if you’re going to spend time writing something, don’t you want it to look great and be easy to read?
Technical #Web #Typography: Guidelines and Techniques - Smashing Magazine
►http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques
How to choose a font face
How to choose a font size
Using a grid
Working out the measure
Vertical rhythm and baseline grids
Choosing a typographic scale
How to use proper quotes
How to use proper dashes
How to use proper ellipses
How to hang punctuation
Dealing with images in grids
(via @RealET)
Using HTML5 To Transform WordPress’ TwentyTen Theme
►http://www.smashingmagazine.com/2011/02/22/using-html5-to-transform-wordpress-twentyten-theme
Last year, WordPress launched arguably its biggest update ever: WordPress 3.0. Accompanying this release was the brand new default theme, TwentyTen, and the promise of a new default theme every year. Somewhat surprisingly, TwentyTen declares the HTML5 doctype but doesn’t take advantage of many of the new elements and attributes that HTML5 brings.
The #Font-Face Rule and Useful Web Font Tricks - Smashing Magazine
►http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks
Most browsers won’t show any text before all Web fonts are imported. Firefox, however, displays the text using a system font and renders the text again, when the embedded Web fonts are completely loaded. This technique results in a “flash of unstyled text” that sometimes leads to side-effects. Web designers can control this behaviour by using #Google’s Webfont Loader.
Des trucs de fou // CSS : Innovative Techniques and Practical Solutions - Smashing Magazine
►http://www.smashingmagazine.com/2011/02/16/css-useful-coding-techniques-and-design-solutions
The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward
Les démos sont très chouettes, notamment ►http://www.is-real.net/experiments/css3/wonder-webkit ou ►http://www.matthamm.com/box-shadow-curl.html
#mal_de_mer avec ce #css #3D
j’aime bien ►http://manufacturaindependente.com/colorfont
et ça pas mal pour les légendes dans les galeries ?
►http://www.elated.com/articles/smooth-fading-image-captions-with-pure-css3
@baroug, tu as aussi des transitions et des transformations CSS 3D sur la version iPad de Flip-Zone ►http://www.flip-zone.com, dans l’onglet « Populaires » :
►http://www.twitpic.com/40z8r5
L’animation en haut de page, c’est entièrement en CSS (et un poil de jQuery pour gérer l’interactivité).
Moi, c’est ça qui me bluffe :
►http://net.tutsplus.com/tutorials/html-css-techniques/build-a-kickbutt-css-only-3d-slideshow
Et l’apparition des diagonales et des cercles :
►http://cssglobe.com/post/9392/angled-content-mask-with-css
►http://css-tricks.com/triangle-breadcrumbs
►http://cssglobe.com/post/9435/pure-css3-post-tags
Et l’effet néon associé Comic sans offre de belles perspectives !
►http://line25.com/wp-content/uploads/2010/text-shadow/demo/index.html
The Bright (Near) Future of CSS
►http://www.smashingmagazine.com/2011/02/11/the-bright-near-future-of-css
In this article, the focus is on what’s coming: styling techniques you’ll use in the immediate and near-term future. From styling HTML 5 elements to rearranging layout based on display parameters to crazy selection patterns to transforming element layout, these are all techniques that you may use tomorrow, next month, or next year. With partial browser support, they’re all on the cutting edge of Web design.
This article is an excerpt from Eric Meyer’s recent book Smashing CSS2, published by Wiley in cooperation with Smashing Magazine
#css #html5 #webdev #Eric_Meyer
Useful Web Services, Tools and Resources For Web Designers ►http://www.smashingmagazine.com/2011/02/08/useful-web-services-tools-and-resources-for-web-designers #webdesign #smashingmagazine