Dans ce tuto CSS3 & HTML5, nous verrons ensemble comment concevoir et réaliser une télévision interactive en CSS3. Chaque chapitre de cette formation s'inspirera d'un grand classique du cinéma et nous permettra d'aborder un aspect précis du moteur d'animation de CSS. Ainsi nous apprendrons à :

  • Programmer des animations complexes à l'aide d'images clés
  • Créer un effet de scroll horizontal
  • Appliquer des effets de transitions aux divs
  • Exploiter les nouveaux sélecteurs CSS
  • ... et bien plus encore !

Ce tuto est destiné à tous ceux quoi souhaitent améliorer leurs connaissances en CSS3. Il est nécessaire de posséder des notions de base en HTML et CSS. Les fichiers sources sont livrés avec cette formation. Bon tuto à tous !

Jetez un oeil à ces autres tuto CSS 3, HTML 5

Pack créer et développer un portfolio de A à ZPack créer et développer…
Voici un tuto créer et développer un portfolio de A à Z dédié…

Le CSS Responsive avec Emmet, Sass et CompassLe CSS Responsive avec Emmet,…
Tuto CSS Responsive avec Sass, Emmet, Compass : créer un site…

Découverte de Foundation 5Découverte de Foundation…
Tuto Foundation 5 : Un framework CSS Responsive pour le design…

Créer une superposition de div lors du scroll dans une pageCréer une superposition de…
Dans ce tuto vidéo nous allons voir ensemble comment créer…

Créer un site One Page complet de A à ZCréer un site One Page complet…
Dans ce tuto vidéo HTML5, CSS3 et jQuery, 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…

Débuter avec BootstrapDébuter avec Bootstrap
Dans cette formation Bootstrap complète de plus de 2h30, nous…

Cette formation contient 6 leçons en vidéo pour une durée totale de 6h24.
Voici le programme complet abordé au cours de cette formation :

  • 00 - Introduction00:02:41 
  • 01 - Réaliser la TV01:08:36 
  • 02 - Film d'horreur01:11:04 
  • 03 - Science fiction02:13:29 
  • 04 - Film d'action00:53:49 
  • 05 - Film de passion00:55:16 

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

Partagez cet extrait

Lien vers cet extrait : Embed code :

VincentTutos , Formateur

Bonjour ! Je m'appelle Vincent Tartar je suis chef opérateur caméra sur les plateaux de tournage et aspirant réalisateur. Je suis passé par beaucoup de corps de métier, du web à l'image, ce qui m'a naturellement emmené vers l'enseignement (je suis ponctuellement professeur de cinéma au lycée) et la création de tutos. N'hésitez pas à me contacter si vous avez des questions, j’essaierai de vous répondre au mieux ! Mon blog : http://www.thepixelisland.com

Toutes les formations de VincentTutos


 

D'autres tuto de VincentTutos

Créez votre bannière de navigation animéeCréez votre bannière de navigation animée
Dans ce tuto CSS 3 & Photoshop CS5 en vidéo, nous allons voir comment concevoir une…

Créez votre menu polaroïd animéCréez votre menu polaroïd animé
Dans ce tuto CSS 3 en vidéo, nous allons voir comment concevoir un menu de navigation…

Réalisez des incrustations grâce au tracking 3DRéalisez des incrustations grâce au tracking 3D
Dans ce tuto After Effects CS6, nous allons voir ensemble comment utiliser le moteur…

Créez un texte avec effet aquatiqueCréez un texte avec effet aquatique
Dans ce tuto Photoshop CS6, nous allons voir ensemble comment créer un texte avec effet…

voir tous les tuto de VincentTutos

Notes attribuées par les utilisateurs (2 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (9)

par Rik0u
(a acheté ce tuto - 24 décembre 2012)

" merci je vais essayer à nouveau
"

par VincentTutos
(auteur de ce tuto - 23 décembre 2012)

" Bonsoir,

De manière générale il est préférable d'ajouter un espace à votre code, si vous regardez ce tuto vous remarquerez les endroits où les caractères sont collés et les moments où ils ne le sont pas.
Pour votre code, si vous tapez :

#screen div#id1:target ~ .emissions .display {
margin-left: 0px
}

Cela devrait fonctionner, si ce n'est pas le cas il y a deux possibilités : soit vous avez un navigateur trop ancien pour interpréter le code (ce qui est de moins en moins probable avec les mises à jour de tous les navigateurs), soit vous avez éventuellement fait une faute de frappe, ce qui pourrait expliquer que votre code ne s’exécute pas.

J'espère que vous trouverez la solution, les personnes qui ont suivi cette formation et qui ont commenté cette fiche sont jusqu'à maintenant toutes parvenues à mener ce tuto à son terme. Bon courage !

Vincent "

par Rik0u
(a acheté ce tuto - 23 décembre 2012)

" Bonsoir,
je viens d'acheter le Tuto et commencer le tuto j'ai un gros problème c'est bien d'avoir expliquée que ( ~ ) c'est nouveau en CSS3 on le pose comment?? y a t il des espaces
le bout de code #screen div#id1:target~ .emissions .display { margin-left: 0px }

j'ai mis ça comme code ça ne marche pas et comme dans les fichiers sources le fichiers index. HTML et le fichier style.css et manquant je ne peux pas verifier.
Merci de me donner plus d'info car à ~ 7min de la fin du premier chapitre c'est un peu sans ça je ne peux continuer je ne sais pas si c'est un oublie ou voulu..

En vous remerciant d'avance..
mes salutations. "

par manonpa voté :
(a acheté ce tuto - 30 octobre 2012)

" C'était super! Clair, net et précis! Je suis contente de ma première animation en CSS!!
Un gros merci à toi Vincent! "

par mykee01a voté :
(a acheté ce tuto - 11 septembre 2012)

" Excellent chapitre ! le formateur est très pédagogue ! 5/5 ! "

par VincentTutos
(auteur de ce tuto - 04 septembre 2012)

" Je ne donnerai qu'une seule indication, c'est qu'il s'agit de l'animation sous CSS et c'est donc dans CSS que ça se passe. Pour faire cela on utilisera @keyframes, pour la suite il faudra regarder le tuto ;-) "

par doctor-pixel
(a acheté ce tuto - 04 septembre 2012)

" j'ai pas voulu mettre en cause la validation, mais quelle est la technique employée pour les anims?? "

par VincentTutos
(auteur de ce tuto - 04 septembre 2012)

" Bonsoir,

Comme son titre l'indique, ce tuto est un atelier pour apprendre à recréer les animations présentés dans l'extrait de cette formation. Pour information, il n'est pas fait une seule fois usage de la balise canvas.

Notez enfin qu'il est rare qu'un tuto soit validé lorsqu'il raconte la même chose pendant six heures,

Cordialement,
Vincent "

par doctor-pixel
(a acheté ce tuto - 04 septembre 2012)

" bonjour,

c'est quoi exactement le sujet du tuto, on ne comprend pas trop...
c'est une étude complète (pendant 6H) de la balise canvas ?? "

 

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, HTML 5 d’une durée de 6 heures 24 minutes a été acheté 51 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 4 septembre 2012 par VincentTutos, contributeur, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos, dans les catégories Tuto CSS Effet et Animation.

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

Cette formation qui se présente sous la forme de plusieurs vidéos, 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 !