Avec ce tuto sur les propriétés CSS 3 telles que box-shadow, vous allez apprendre à réaliser un Accordéon full CSS3 avec un effet de slide vertical descendant. Au cours de cette formation css (en vidéo), nous aborderons les points suivants :

  • text-shadow
  • box-shadow
  • les préfixes -webkit-, -moz-, -o-
  • transitions
  • border-radius

Vous pouvez tester cet accordéon et je précise que les fichiers sources sont livrés avec le tuto !

Jetez un oeil à ces autres tuto CSS 3

Afficher des vidéos en Responsive DesignAfficher des vidéos en Responsive…
Dans ce tuto CSS en vidéo, nous verrons comment nous pouvons…

Créer une galerie d'images avec pagination sur WordPressCréer une galerie d'images…
Dans ce tuto WordPress, nous allons voir comment ajouter une…

Débuter en HTML5 - CSS3 - Javascript - Tome 1Débuter en HTML5 - CSS3 -…
Cette formation fait partie d'une série sur la programmation…

Créer un Sticky menu qui reste visible à tout instantCréer un Sticky menu qui…
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, nous allons voir…

Créer un site web avec un slider d'images en full pageCréer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…

Menu déroulant intelligent en full CSS 3Menu déroulant intelligent…
Avec ce tuto CSS 3, apprenez à réaliser un menu déroulant…

Ajouter une bulle d'info enrichie à votre siteAjouter une bulle d'info enrichie…
Dans ce tuto jQuery en vidéo, nous allons voir comment créer…

Intégrer et Développer un site Web ecommerceIntégrer et Développer un…
Voici une formation complète dédiée à l'intégration et…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto CSS 3 de 33 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

bpdesign , Formateur

Utilisateur adobe photoshop depuis plus de 10 ans, je suis très sensible au monde du Webdesign. Aujourd'hui auto-entrepreneur dans la création de site internet j'enseigne également en Technologie de l'information et de la communication à l'université Claude Bernard Lyon 1 en Licence Professionnelle.

En savoir plus sur bpdesign


Témoignage des clients de bpdesign

Très bon formateur ! Clair et précis c'est parfait

Formateur génial, un des meilleurs.

Un très bon formateur, des tuto vidéo de qualité et des explications claires, précises et simples ! Je suis désormais bpdesign sur twitter et attends avec impatience ses divers projets en cours de réalisation ! :) A recommander !

Très bon tuto!

Bravo très bon Tuto sur la création d'une page contact. A quand la suite pour l'intégrer sous Dreamweaver par ex. Jean Michel

Lire les autres témoignages

 

D'autres tuto de bpdesign

Créer une maquette complète de PortfolioCréer une maquette complète de Portfolio
Dans ce tuto Photoshop, vous allez apprendre à réaliser un portfolio complet de 4 pages…

Logo vintage années 50Logo vintage années 50
Dans ce tuto en vidéo, allez apprendre à jongler entre Illustrator et Photoshop pour…

Menu déroulant intelligent en full CSS 3Menu déroulant intelligent en full CSS 3
Avec ce tuto CSS 3, apprenez à réaliser un menu déroulant dit "intelligent" en full…

Découper et intégrer une maquette Blog Web 2.0Découper et intégrer une maquette Blog Web 2.0
Ce tuto dédié à l'intégration d'une maquette de blog web 2.0 est la suite du tuto…

voir tous les tuto de bpdesign

Notes attribuées par les utilisateurs (2 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (3)

par jcc33220à voté :
(a acheté ce tuto - 10 février 2012)

" simple et bien expliqué même si parfois un peu brouillon .. Merci "

par bpdesign
(auteur de ce tuto - 13 octobre 2011)

" Hello, je regarde ça dès que possible ;) "

par stephnà voté :
(a acheté ce tuto - 13 octobre 2011)

" Salut, ton tuto est tres clair, je t'ai mis 5/5.



Eventuellemnt une petit question, j'essaie de faire une petite modif dedans.
J'aimerais que les "boites" s'ouvre/se ferme au clic. Avec quelle propriété se serait possible?

ici ton code:

.container :hover h2 a{
text-decoration:none;
}

.container :hover h2 + div{
height:250px;
}

Merci si tu as le temps de me repondre. Je vais essayer de trouver sur le net.

Bonne continuation. "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto CSS 3 d’une durée de 33 minutes a été acheté 87 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 20 juin 2011 par bpdesign, contributeur, ayant reçu une note moyenne de 4,3/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto CSS Menu.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !