Magazine Internet

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

Publié le 15 janvier 2009 par David Marchesson

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é.


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

LES COMMENTAIRES (1)

A propos de l’auteur


David Marchesson 144 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog

Magazine