25 techniques CSS : jQuery, Mootools et d’autres ressources (partie 3)

Le 15 janvier 2009

Maitriser les css aujourd’hui devient indispensable pour créer des sites fluides, ergonomiques et légers. A moins d’être fan des sites de type craigslist.org, les fichiers css nous permettent de nous libérer de beaucoup de contraintes liées au développement web. Voici une belle pallette de sites qui démontrent la puissance des CSS (25 sites d’artistes avec de très beaux designs).

Je vous présente donc des ressources pour fabriquer des CSS simples ou bien avec des effets sous jQuery (voir 8 sites avec une excellente navigation sous jQuery), Mootools ou sans Framework particulier.

jQuery

1.

5 bouts de code simple pour débuiter avec jQuery
technique css 21
Dans cet article, vous trouverez 5 exemples de scripts simples à mettre en place pour vos formulaires.

2.

jQuery pageSlide
technique css 1
Une solution pour créer une zone qui s’affiche sur la droite, un peu à la manière d’un logiciel.

3.

Le Popup d’information de Coda
technique css 15
Affichage des bulles d’informations à la manière de Coda le célèbre programme de Mac pour les développeurs.

4.

Menu animé avec jQuery
technique css 12
Animer les éléments d’un menu à l’aide de javascript et de jQuery.

5.

Images affichées dans un panneau
technique css 18
Un script bien réalisé qui vous permettra de faire tourner des images ainsi que leurs descriptions.

6.

Galleria, un diaporama avec jQuery
technique css 16
Un diaporama réalisé avec jQuery efficace avec beaucoup de personnalisation au niveau des CSS.

7.

Faire une fenetre de login animée
technique css 20
Un excellent tutoriel pour vous montrer comment faire un panneau coulissant à l’aide de jQuery.

Mootools

8.

Diaporama avec menu et transition
technique css 13
Splendide diaporama réalisé avec Mootools qui permet l’affichage de photo et de la personnalisation.

9.

Effet de coverflow (iTunes) réalisé avec Mootools
technique css 14
Affichage fluide des photos, la présentation est exactement celle d’iTunes.

10.

Accordéon moofx (vertical slider)
technique css 17
Un script permettant d’afficher et de cacher les élements à la façon d’un accordéon.

Sites de ressources

11.

Maxdesign
technique css 2
Vous trouverez dans ce site en anglais énormément de ressources pour construire un site (navigation, menus, boutons…).

12.

Dynamicdrive

technique css 3
Un autre site de ressources en anglais rempli de bouts de code css qui vous feront gagner du temps.

13.

Styled Menus
technique css 23
Un site avec beaucoup de menus à télécharger (images, js et css) afin de diversifier vos créations.

Tutoriels pour développer des solutions professionnelles

14.

Créer des PNG
technique css 4
Le PNG est de plus en plus utilisé dans les designs car il donne plus de souplesse avec sa transparence. Voici un exemple avec des illustration de météo.

15.

Menu de navigation avancé (PRO)
technique css 5
Webdesignerwall nous offre un tutoriel pour créer des menus professionnels avec 1 seule images par menu et un effet rollover simple. Le top !

16.

Menu de navigation avancé
technique css 6
Un effet de flou sur les images en rollover. Cet effet graphique ravira tous les webdesigners.

17.

Menu en CSS pour identifier des étapes
technique css 7
Des css pour afficher distinctement des étapes lors d’un processus de vente en ligne par exemple.

18.

Affichage d’information sous forme de bulles
technique css 8
Des bulles d’information séduisantes faites à l’aide de css qui peuvent s’avérer très efficaces.

19.

Changer des listes en arbres
technique css 9
Ce genre de CSS peut être utilisé pour l’affichage de dossiers et de fichiers ou pour un organigramme.

20.

10 CSS pour vos tableaux
technique css 10
10 fichiers CSS ainsi qu’une méthode pour décorer et faire ce que vous voulez avec les tableaux.

21.

Tester le rendu d’une police
technique css 11
Comme typechart.com ce site vous permettra de tester en direct le rendu d’un style css sur l’écran.

Documentation pour mieux développer les CSS

22.

Des CSS de qualité
technique css 19
Dans cet article du blog Biologeek de David Larlet retrouvez de bonnes pratiques CSS pour faire des sites au bon design.

23.

Développement efficace avec les frameworks CSS
technique css 23
Dans cet article de l’Oncle Tom sont rassemblées la plupart des solutions pour développer à l’aide de framework CSS. A lire obligatoirement si vous faites du développement CSS.

24.

CSS testing of Selector and Pseudo selectors
technique css 24
Tests de support des sélecteurs et des pseudo-classes dans les navigateurs majeurs.

25.

Gabarits HTML et CSS simples
technique css 25
Une liste de gabarits CSS documentée d’alsacreations. Un bon départ pour vos créations de pages web.

26.

BONUS – Que cache les CSS3?
technique css 22
Dans cet article anglais vous trouverez des exemples de site qui utilisent déjà certaines des fonctionnalités des CSS3 : comme twitter, 24ways.org avec le code associé.


3 Commentaires sur "25 techniques CSS : jQuery, Mootools et d'autres ressources (partie 3)"