slDesign » CSS3

Tutoriel HTML 5 : Réaliser une lecteur vidéo personnalisé

Steve Leherpeux — Tue, 14 Sep 2010 11:43:19 +0000

Depuis la sortie de HTML5 il est possible d’insérer et de manipuler de nombreux médias dans vos pages WEB, vous pouvez entre autre insérer un lecteur vidéo. C’est un réel plus pour les développeurs Web.

Nous allons donc voir comment intégrer un lecteur vidéo et comment le personnaliser afin d’obtenir le même design quelque soit le navigateur.

Information sur le document :

Version : 0.1
Date de publication : 14-09-2010
Date de révision : NC

Introduction

Avant de commencer vous trouverez sur le site du "W3C l’ensemble des informations portant sur la balise l’intégration de vidéo. Ces informations sont disponibles à l’adresse suivante : http://www.w3.org/TR/2008/WD-html5-20080610/video.html#video

Je tiens également à vous rappeler que l’intégration de vidéo via la balise ‘ n’est pas supporté par l’ensemble des navigateurs… et plus encore compliqué, les navigateurs ne supportent pas tous le même format de vidéo…

Théorie…

L’intégration de vidéo en HTML 5 se fait avec la balise "". Cette balise supporte différents attributs :

src :La source de la vidéo
poster : La source d’une image qui sera affichée si le navigateur ne supporte pas la balise "video"
autoplay :Démarrage automatique de la vidéo [Défaut = false]
start : Début de la vidéo
loopstart : Début de la lecture en boucle
loopend : Fin de la lecture en boucle
end : La vidéo est à la fin
playcount : Nombre de fois à lire
controls : Affiche ou non les contrôles
width : Largeur du lecteur
zq hauteur du lecteur

Les attributs src, autoplay, start, loopstart, loopend, end, playcount, et sont des attributs commun à tous les éléments de type "Médias".

Les étapes

Etape 1 – Création du document de base

Nous utiliserons ici une simple page Web :




Mon lecteur Vidéo HTML5

Etape 2 – Intégration de la vidéo

Nous allons intégrer une vidéo simple dans un premier temps. Saisissez le code ci-dessous dans votre page WEB :

Le résultat est le suivant :

Si vous cliquez avec le bouton droit de votre souris sur le lecteur, vous verrez apparaître un menu contextuel

Etape 3 – Etendre le lecteur

Nous allons maintenant étendre notre lecteur avec les attributs de base.

Nous avons ici simplement ajouter les contrôles et une image et activé l’autoplay

Création d’un lecteur vidéo HTML personnalisé:

Comme vous venez de le voir l’intégration du player est très simple mais limitée. En effet, le design de votre player dépend du navigateur et ce dernier n’est pas forcement adapté au design de votre site. Heureusement, nous allons pouvoir utiliser javascript ; en effet, les navigateurs sont gérés côté client donc, c’est votre navigateur qui intègre ce player. Nous allons donc pouvoir utiliser javascript pour agrémenter notre player.

Je vais dans cet article utiliser la bibliothèque jQuery que j’ai intégrée depuis Google Api. et j’ai également intégré la bibliothèque jQuery-ui. Je vais également créer un Plugin jQuery. Le code ci-dessous vous montre l’initialisation jQuery ainsi que la liaison avec mon plugin.

J’ai également ajouté un dossier "themes" ainsi qu’un dossier "themes/default/" qui vont héberger nos fichiers de styles. Vous trouverez ci-dessous la structure de notre projet :



	
	owPlayer - HTML 5 Web video Player

Ce tutoriel n’a pas pour but de vous expliquer le développement d ‘un plugin jQuery. Malgré tout, j’ai essayé de commenter le plus précisément possible le code de cette extension. Si vous ne vous sentez pas à l’aise avec jQuery et le développement de plugin, voici quelques ressources :
- Tutoriel sur l’édition de plugin jQuery [Lien]

- Tutoriel en Anglais [lien]

Théorie

Avant de commencer, il est utile de comprendre le fonctionnement et les attributs d’un lecteur vidéo HTML 5. Le lecteur HTML dépend de l’interface “Media Element”. Vous trouverez l’ensemble des informations relative à cette interface à l’adresse suivante : http://www.w3.org/TR/2010/WD-html5-20100624/video.html#media-element

Lorsque vous initialisez l’élément ‘’ vous avez accès à différents attributs.

Les éléments

readyState : Status de la video (Prete ou pas)
seeking : Retourne un intervalle de temps ; ceci permet de gérer un statut d’avancement
currentTime : Retourne la position actuelle
startTime : Retourne la position de départ
duration : Durée de la vidéo
paused : Status de la vidéo en pause
defaultPlaybackRate : Vitesse de lecture par défaut
playbackRate : Vitesse de lecture
TimeRange played : Retourne la durée jouée – intervalle
TimeRange seekable : Temps restant – intervalle
ended : Retourne vrai si la fin de la vidéo est atteinte
autoplay : Lecture automatique
loop : Relire la video
play : Jouer la vidéo
pause : Mettre la vidéo en pause
controls : Affiche les contrôles
volume : Volume du player
muted : Eteindre le son

Comme vous le voyez, nous disposons de différents attributs que nous allons pouvoir utiliser pour réaliser notre player. Javascript et dans notre cas jQuery vont nous permettre d’accéder et de manipuler nos données.

Etape par étape :

Etape 1 – Initialisation du plugin jQuery

La première étape consiste à initialiser notre plugin jQuery. J’ai decidé d’appeler ce plugin owPlayer

Penser utiliser un nom unique à votre plugin afin d’assurer la compatibilité avec d’autres plugin

Le code ci-dessous vous montre l’initialisation du plugin :

(function($) {

	$.fn.owPlayer = function(uri, options) {

		// Initialisation des options par defaut
		var defaults = {};

		// On étend les options avec les valeurs par défaut
		var options = $.extend(defaults, options);

		this.each(function(){
			$owPlayer = $(this);

		});
	};
})(jQuery);

Ce code nous permet simplement d’initialiser notre plugin. Pour le moment la variable ‘default’ permettant de définir nos options par défaut est vide mais nous le compléterons ultérieurement.

Etape 2 – Chargement des feuilles de style

Notre extension va nous permettre de changer de thème en le spécifiant simplement dans les options ; nous devons donc charger les feuilles de style dynamiquement.

//Chargement des éléments de style
var cssThemeFile = options.theme;
$('').appendTo('head');
$('').appendTo('head');

Etape 3 – Construction du wrapper et des contrôles

Cette étape consiste simplement à construire notre interface. Nous aurions pû réaliser cette étape directement dans notre page HTML mais j’ai opté pour une génération interne à mon plugin.

Le code ci-dessous nous permet de créer un conteneur principal :

//Création du conteneur principal
$owPlayerWrapper = '';
$owPlayer.wrap($owPlayerWrapper);
$('.owPlayerWrapper').width(options.width);

Le code ci-dessous nous permet de réaliser notre conteneur qui accueillera nos contrôles:

//Création du panel de contôles
$owPlayerControls = '';
$owPlayerControls += '';
$owPlayer.after($owPlayerControls);

Ce code permet d’insérer un conteneur juste derrière notre balise "

Reste à insérer nos contrôles (boutons et autres éléments) à l’intérieur de ce conteneur

// Création des contrôles
var $owPlayerControls = '';
$owPlayerControls += 'Play / Pause';
$owPlayerControls += '';
$owPlayerControls += '00:00';
$owPlayerControls += 'Mute / Unmute';
$owPlayerControls += 'Volume';
$owPlayerControls += '';
$($owPlayerControls).appendTo('.owPlayerControlsContener');

Voici la liste de ces contrôles et leurs rôles :

owPlayerBtPlay : Bouton lecture / pause
owPlayerSeeker : Il s’agit de la barre d’avancement
owPlayerTimer : Le timer "00:00"
owPlayerSoundBox : Conteneur pour la gestion du son
owPlayerBtSound : Son on/off
owPlayerSoundTrigger : Bouton déco pour l’affichage du slider pour le son
owPlayerSoundSlider : Slider pour le son

Etape 4 – Bouton Play / Pause

Maintenant que nous venons de réaliser nos différents contrôles, il faut leur assigner des fonctions.

Commencons par le bouton "owPlayerBtPlay" ; ce bouton va nous permettre de jouer l’animation ou de la mettre sur pause. Nous l’avons vu plus haut, ce qui déclanche la video est l’action "play".

	/** Bt Play */
		$('.owPlayerBtPlay').click(function() {
			if ($owPlayer.attr('paused') == false) {
				$owPlayer[0].pause();
				$(this).removeClass('ui-icon-play').addClass('ui-icon-pause');
			} else {
				$owPlayer[0].play();
				$(this).removeClass('ui-icon-pause').addClass('ui-icon-play');
			}
		});

Quelques informations : Ce code permet de vérifier si le lecteur est en pause ou non. Le cas échéant, si le lecteur est en pause, on déclanche la lecture.

Etape 5 – Gestion du son

Nous allons maintenant nous occuper du son, nous avons deux éléments importants :

Le bouton On / Off
Le slider permettant de régler le volume

Dans un premier temps, occupons nous du bouton permettant d’activer / désactiver le son :

	/** Bouton pour le son */
		//@TODO Récupérer la valeur du son lors du Mute pour le récupérer lors de l'unmute
		$('.owPlayerBtSound').click(function(){
			if($owPlayer.attr('muted') == true){
				//Activation du son - le slider passe à 50
				$('.owPlayerSoundSlider').slider('value', '50');
				$(this).removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on');
			}else{
				//Desactivation du son
				$owPlayer.attr('muted', true);
				$('.owPlayerSoundSlider').slider('value', '0');
				$(this).removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off');
			}
		});

Cette action permet d’eteindre ou d’activer le son à travers le slider que nous verrons par la suite.

Le slider nous permet de gérer le volume du son. Pour réaliser ce slider, j’utilise l’extension “jQuery-ui "slider()"

	/** Slider pour le son */
	//Cache le slider à l'initialisation
	$('.owPlayerSoundSlider').hide();

	//Action pour afficher le slider
	$('.owPlayerSoundBox').hover(function() {
		$('.owPlayerSoundSlider').show();
	}, function() {
		$('.owPlayerSoundSlider').hide();
	});

	//Action du slider
	$('.owPlayerSoundSlider').slider( {
		orientation : "vertical",
		value:0.50,
		range:"min",
		max:1,
		step:0.05,
		animate:true,
		slide : function(e, ui) {
			$owPlayer.attr('muted', false);
			video_volume = ui.value;
			$owPlayer.attr('volume', ui.value);
		}
	});

Il s’agit ici simplement de lier notre slider à l’attribut "volume" du player.

Etape 6 – Gestion du seeker

Deux éléments encore. Le timer qui nous permet d’afficher le temps écoulé et le slider nous permettant de naviguer au sein même de la vidéo

Gestion du timer : Il s’agit ici de récupérer le temps et la position de lecture ; nous devons pour cela utiliser un "écouteur"

	//Durée totale de la vidéo
		var video_duration = $owPlayer.attr('duration');

		//Fonction de convertion pour le timer
		var gTimeFormat=function(seconds){
			var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
			var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
			return m+":"+s;
		};

		/** Gestion du Timer */
		var seekUpdate = function() {
			var currenttime = $owPlayer.attr('currentTime');
			if(!seeksliding) $('.owPlayerSeeker').slider('value', currenttime);
			$('.owPlayerTimer').text(gTimeFormat(currenttime));
		};

		//Mise à jour des informations
		$owPlayer.bind('timeupdate', seekUpdate);	

		//Affichage du texte
		$('.owPlayerTimer').text(' / '+gTimeFormat(video_duration));

La fonction jQuery "Bind" permet de mettre en continu le timer de notre lecteur. Au par avant, j’ai juste créé une fonction "gTimeFormat" qui permet de convertir notre temps en minutes/secondes

Dernière étape, le slider pour la navigation au sein même de la vidéo.

	/** Slider pour le seeker */

		//Initialise la variable du slider
		var seeksliding;

		var createSeek = function() {
			if($owPlayer.attr('readyState')) {
				var video_duration = $owPlayer.attr('duration');
				$('.owPlayerSeeker').slider({
					value: 0,
					step: 0.01,
					orientation: "horizontal",
					range: "min",
					max: video_duration,
					animate: true,
					slide: function(){
						seeksliding = true;
					},
					stop:function(e,ui){
						seeksliding = false;
						$owPlayer.attr("currentTime",ui.value);
					}
				});
			} else {
				setTimeout(createSeek, 150);
			}
		};

		createSeek();

Cette fonction "createSeek()" permet de réaliser un slider pour naviguer au sein même de la vidéo. Lors de l’arrêt du slider, il y a une recherche de la position.

Etape 7 – Appel du plugin

La derniere étape consiste à initialiser notre plugin dans notre page HTML. L’opération est simple, un simple "$([selecteur]).owPlayer([url],[options]);" permet de réaliser cette opération. Vous aurez bine évidement pris soin d’intégrer le plugin et les différentes bibliothèques au par avant.

Le code ci-dessous vous montre cette intégration :



    
	owPlayer - HTML 5 Web video Player
	
	
	
	


	owPlayer::

Résultat final

Cette capture vous montre le résultat final. Ce résultat et bien évidement le même sur Firefox, Chrome ou Safari (non testé sur les autres navigateurs)

Conclusion

Vous venez de voir qu’il n’est pas si compliqué que cela de rendre votre lecteur vidéo complètement personnalisé. Malheureusement, la compatibilité n’est pas encore au rendez-vous et faudra encore pour quelques temps compter sur les lecteurs Flash….

Cet exemple n’est qu’un bribe de ce qu’il est possible de réaliser, il est possible d’étendre ce lecteur en y insérant de nouvelles fonctions :

Playliste
Changement de thèmes dynamiques
Navigation de Playliste –Next / Prev
Gestion des différents navigateurs

Dans les prochaines versions, j’aurai l’occasion d’améliorer cette extension et de gérer ces différentes fonctions.

N’hésitez pas à laisser vos commentaires / remarques pour les éventuelles questions afin de faire évoluer cet article.

Vous trouverez-ci dessous les codes complets de l’application ainsi qu’un fichier zip téléchargeable.

Code javascript : owPlayer.js

(function($) {

	$.fn.owPlayer = function(uri, options) {

		// Initialisation des options par defaut
		var defaults = {
			autoplay : false,
			width : 854,
			height : 480,
			theme : 'default',
			poster : null
		};

		// On étend les options avec les valeurs par défaut
		var options = $.extend(defaults, options);

		this.each(function() {
			$owPlayer = $(this);

			// Chargement de la video
				$owPlayer.attr('src', uri);

				// Chargement des éléments de style
				var cssThemeFile = options.theme;
				$(
						'')
						.appendTo('head');
				$(
						'')
						.appendTo('head');

				// Création du conteneur principal
				$owPlayerWrapper = '';
				$owPlayer.wrap($owPlayerWrapper);
				$('.owPlayerWrapper').width(options.width);

				// Création du panel de contôles
				$owPlayerControlsContener = '';
				$owPlayerControlsContener += '';
				$owPlayer.after($owPlayerControlsContener);

				// Création des contrôles
				var $owPlayerControls = '';
				$owPlayerControls += 'Play / Pause';
				$owPlayerControls += '';
				$owPlayerControls += '00:00';
				$owPlayerControls += 'Mute / Unmute';
				$owPlayerControls += 'Volume';
				$owPlayerControls += '';
				$($owPlayerControls).appendTo('.owPlayerControlsContener');

				// Action des boutons et initialisation des sliders
				/** Bt Play */
				$('.owPlayerBtPlay').click(
						function() {
							if ($owPlayer.attr('paused') == false) {
								$owPlayer[0].pause();
								$(this).removeClass('ui-icon-play').addClass(
										'ui-icon-pause');
							} else {
								$owPlayer[0].play();
								$(this).removeClass('ui-icon-pause').addClass(
										'ui-icon-play');
							}
						});

				// Durée totale de la vidéo
				var video_duration = $owPlayer.attr('duration');

				// Fonction de convertion pour le timer
				var gTimeFormat = function(seconds) {
					var m = Math.floor(seconds / 60) < 10 ? "0"
							+ Math.floor(seconds / 60) : Math
							.floor(seconds / 60);
					var s = Math.floor(seconds - (m * 60)) < 10 ? "0"
							+ Math.floor(seconds - (m * 60)) : Math
							.floor(seconds - (m * 60));
					return m + ":" + s;
				};

				/** Gestion du Timer */
				var seekUpdate = function() {
					var currenttime = $owPlayer.attr('currentTime');
					if (!seeksliding)
						$('.owPlayerSeeker').slider('value', currenttime);
					$('.owPlayerTimer').text(gTimeFormat(currenttime));
				};

				$owPlayer.bind('timeupdate', seekUpdate);

				$('.owPlayerTimer').text(' / ' + gTimeFormat(video_duration));

				/** Slider pour le seeker */

				// Initialise la variable du slider
				var seeksliding;

				var createSeek = function() {
					if ($owPlayer.attr('readyState')) {
						var video_duration = $owPlayer.attr('duration');
						$('.owPlayerSeeker').slider( {
							value : 0,
							step : 0.01,
							orientation : "horizontal",
							range : "min",
							max : video_duration,
							animate : true,
							slide : function() {
								seeksliding = true;
							},
							stop : function(e, ui) {
								seeksliding = false;
								$owPlayer.attr("currentTime", ui.value);
							}
						});
						// $video_controls.show();
					} else {
						setTimeout(createSeek, 150);
					}
				};

				createSeek();

				/** Bouton pour le son */
				// @TODO Récupérer la valeur du son lors du Mute pour le
				// récupérer lors de l'unmute
				$('.owPlayerBtSound').click(function() {
					if ($owPlayer.attr("muted") == true) {
						// Activation du son - le slider passe à 100
						$('.owPlayerSoundSlider').slider('value', '50');
						$(this).removeClass('ui-icon-volume-off').addClass(
								'ui-icon-volume-on');
					} else {
						// Desactivation du son
						$owPlayer.attr('muted', true);
						$('.owPlayerSoundSlider').slider('value', '0');
						$(this).removeClass('ui-icon-volume-on').addClass(
								'ui-icon-volume-off');
					}
				});

				/** Slider pour le son */
				$('.owPlayerSoundSlider').hide();
				$('.owPlayerSoundBox').hover(function() {
					$('.owPlayerSoundSlider').show();
				}, function() {
					$('.owPlayerSoundSlider').hide();
				});

				$('.owPlayerSoundSlider').slider( {
					orientation : "vertical",
					value : 0.50,
					range : "min",
					max : 1,
					step : 0.05,
					animate : true,
					slide : function(e, ui) {
						$owPlayer.attr('muted', false);
						video_volume = ui.value;
						$owPlayer.attr('volume', ui.value);
					}
				});

			});
	};
})(jQuery);

Code HTML : index.html



    
	owPlayer - HTML 5 Web video Player
	
	
	
	


	owPlayer::

Code CSS : style.css

/**
 * owPlayer stylesheet file
 * Extend jQuery-ui stylesheet
 * @author slDesign
 * @version 0.1
 */

.owPlayer{
	margin:0;
	padding:0
}
.owPlayerControlsContener{
	height:24px;
	z-index:100;
	margin-top:-5px;
}

.ui-icon{
	border:1px solid #ccc;
	padding:1px;

}
.owPlayerControl{
	float:left;
	margin:1px 8px;
}

.owPlayerSeeker{
	width:500px;
	height:4px;
}

.owPlayerSoundBox *{
	margin:0;
}
.owPlayerSoundSlider{
	height:300px;
	float:left;
	margin-top:-90px;
}

Remerciements :

Merci à l’équipe de Big Buck Bunny pour la vidéo [site] [licence]. Cette vidéo a été réalisée sous Blender

Merci à Cristian-Ionut Colceriu pour son article initial qui m’a aidé à rédigé celui-ci

Support HTML 5 – La solution pour gérer la compatibilté des navigateurs

Steve Leherpeux — Sun, 08 Aug 2010 07:26:21 +0000

HTML 5, CSS 3 c’est bien beau, ça rend bien service et c’est sympa… malheureusement, tout n’est pas parfait au pays des rêves car de nombreux utilisateurs (vos lecteurs et utilisateurs) ne peuvent pas profiter de ces nouveaux attributs HTML et CSS.

Il est important de penser « utilisateurs ». Les modifications apportées par HTML 5 et CSS 3 ne sont pas encore implémentées par tous les navigateurs. Ne pouvant pas forcer tout le monde à utiliser un seul navigateur, il faut s’efforcer de prendre en compte cet compatibilité.

Comment pouvons nous vérifier cette compatibilité, comment savoir quel navigateur est compatible avec tel attribut HTML ou CSS ? C’est ce que je vous propose de voir dans cet article.

Solution Javascript

Une des première solution consiste à utiliser javascript pour vérifier

Si vous mettez ce simple script sur votre page, vous déclencherez une alerte « true » ou « false » selon les navigateurs.

Alerte sur un navigateur supportant l'attribut Pattern

Alerte sur un navigateur ne supportant pas l'attribut Pattern

C’est un moyen simple mais assez contraignant de vérifier la compatibilité de tel ou tel attribut…

Commentaires conditionnels

Les commentaires conditionnels sont un mécanisme propre à Internet Explorer Windows, qui permettent d’inclure dans une page (X)HTML, de manière valide, du code qui ne sera lu et interprété que par Internet Explorer, ou par l’une ou l’autre de ses versions.

Techniquement, il s’agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s’il doit interpréter le contenu du commentaire ou bien l’ignorer.

Cette technique a le mérite d’exister, surtout lorsque l’on connait les différences qu’il existe entre IE et les autres navigateurs mais, elle ne s’applique que à Internet Explorer et elle devient vite lourde à gérer…

Class Modernizr

Modernizr ajoute classes à l’élément

qui vous permettent de cibler les fonctionnalités du navigateur spécifique dans votre feuille de style. Vous n’avez pas réellement besoin d’écrire du Javascript pour l’utiliser.

Initialisation :

Il suffit de lier la bibliothèque dans votre doument HTML :

Voici un exemple concret concernant l’attribut « border-radius » qui n’est pas disponible sur IE… Eh bien, avec Modernizr vous pouvez accomplir tout cela! La syntaxe est très intuitive, aussi:

Code HTML


	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis fermentum quam, ut feugiat dui ornare eu. Aenean vitae purus eget nunc sagittis sollicitudin eget a lorem.

Feuille de style CSS :

	.radius p span{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	display:block;
	width:300px;
}

.borderradius p span{
	border:1px solid #cc3300;
}

.no-borderradius p span{
	border:1px solid #000;
}

L’opération est simple, vous déclarer une class « .[mon attribut] » ou « .no-[mon atribut] » dans votre feuille de style pour gérer les différentes compatibilité…

Border Radius sous firefox

Border radius sous IE après mise en forme via ".no-borderradius"

Il est également possible d’appliquer des conditions sur des éléments javascript. Voici un exemple concernant « localStorage »

Cette bibliothèque ne répond surement pas à toutes les problématiques mais elle mérite que l’on s’y arrette. Elle est simple d’utilisation et bien documentée

Pour télécharger « Modernizr », rendez-vous sur le site de l’auteur : http://www.modernizr.com/.

Conclusion

Il n’existe pas de solution parfaite, cela dit, vous disposez de différentes techniques qui vous permettrons d’adapter vos pages Web sur tous les navigateurs. Vous pouvez également orienter vos utilisateurs à utiliser un autre navigateur.

-----

A bientôt…

Tutoriel CSS : 3D Transform

Steve Leherpeux — Tue, 27 Jul 2010 07:36:25 +0000

Le version 3 de CSS nous a apporté son lot de nouveauté ; parmi les plus connues et plus utilisées on peut citer « Corner radius » ou encore les dégradés mais une nouvelle propriété très intéressante va vous permettre une encore plus grande liberté : la propriété « transform ».

De la 3D en CSS ?

Je n’irai pas jusqu’à dire qu’il s’agit de 3D mais plutot d’effet 3D au même titre que nous pouvons réaliser ces effets avec un logiciel de graphisme.

Nous verrons dans cet article comment réaliser un cube en effet 3D.

I – Introduction

Avant toute chose, il est nécessaire de prendre en compte la comptabilité. L’utilisation de la propriété CSS 3D transform n’est compatible qu’avec Firefox 3.5+ [-moz-transform] (documentation) et Safari 3.2+[-webkit-transform](documentation).

Travaillant essentiellement sur Firefox, je ne m'aventurerai pas dans les détails de Safari mais il n'y a pas d'énormes différences...

1°) Prérequis

Connaissances HTML / CSS
Vous vous souvenez de vos cours de géométrie ?
Un éditeur CSS / HTL

2°) Un peu de théorie...

http://www.w3.org/TR/css3-3d-transforms/

Rotation d'un objet : -moz-transform: rotate(angle);

Exemple :

-moz-transform: rotate(30);



Figure 1.2.1 - Propritét CSS Transform rotate - Rotation d'un div de 30°



Redimensionnement 2D axe X et Y d'un objet : -moz-transform:  scale(sx[, sy]);

Si [sy] n'est pas renseigné, il aura la même valeur de [sx]

Modifier la perspective : -moz-transform: skew(ax,[ay]);

Permet de modifier l'axe de perspective, vous pouvez également utilsier skewX(deg) et skewY(deg) pour les utiliser indépendament.

Exemple : -moz-transform: skewY(30deg);

Parlons maintenant de la propriété "transform:matrix", il faut comprendre dans Matrix la traduction "matrice". Nous avons une forme géométrique qui est constituée de différents points [a,b,c,d] que nous pouvons manipuler.

-moz-transform:  matrix(a, c, b, d, tx, ty)

/* Where a, b, c, d construit la transformation de la matrice
   ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   and tx, ty are the translate values.  */

Quelques exemples :

.matrix {
width: 200px;
height: 100px;
background: #f5f5f5;
-moz-transform:matrix(1,0,0.6,1,15em,0);
}

Rendu (figure 1.2.3)

Figure 1.2.3 - Rendu de la proprité transform:matrix

Exemple 2 - Retournement d'objet

.matrix {
width: 200px;
height: 100px;
background: #ff8000;
-moz-transform:matrix(-1,0,1.2,1,20em,12em);
}

Résultat (figure 1.2.4) :

Figure 1.2.4 - Résultat transform:matrix - retournement d'objet

Exemple 3 : Reflexion

-moz-transform: matrix(1, 0, 0, -1, 0, 0);

Figure 1.2.5 - Exemple transform:matrix - Reflexion

Autres exemples (non-shématisés) :

Rotation 90° sur la gauche : -moz-transform:matrix(0,-1,1,0,0,0);

II - Création d'un cube 3D

1°) Code HTML de base

Il faut tout d'abord créer 3 blocs qui nous permettrons de simuler notre cube. Ces 3 blocs seront encadrés par un div global.

Code HTML du cube





Tutoriel CSS 3D




 
 Content
 Content
 Content

J'ai également créé un fichier css qui nous permettra de mettre en forme notre cube 3D. Dans un premier temps, j'ai simplement dissocier les blocs.

Code CSS fichier style.css

#cube {
 position: relative;
 top: 200px;
 margin:0 0 230px 0;
}

#cube .cubeSide{
 height:200px;
 width:200px;
}
#topSide{
 background:#ff8000;
}
#leftSide{ background:#0080c0;}
#rightSide{background:#00ff40;}

Voici le résultat obtenu (figure 2.1.1) :

Figure 2.1.1 -CSS Transform - Cube 3D Etape 1

Maintenant, passons à des choses un peu plus sympa, nous allons appliquer notre propriété "transform" à notre cube :

.leftFace {
 background: #ff8000;
 -moz-transform: skewY(30deg);
}

.rightFace {
 background: #800080;
 -moz-transform: skewY(-30deg);
}

Nous avons appliqué ici une propriété "transform:skewY" permettant d'incliner nos div sur leurs axes Y donnant ainsi un effet de perspective.

Figure 2.1.2 - Transformation perspective sur l'axe Y - [transform:skewX(val)

Positionner les DIV : Nous devons appliquer un positionnement "absolute" à l'ensemble de nos blocs afin que ceux-ci puissent êtres dissocié et placés indépendament (figure 2.1.3) .

Code CSS : Positionnement des DIV

.topFace, .leftFace, .rightFace {
position: absolute;
}

Figure 2.1.3 - Positionnement absolute des blocs

Ensuite, nous allons positionner notre bloc right (figure 2.1.4). Il s'agit ici de décaller notre bloc de 200px sur la droite et vers le bas.

.rightFace {
 background: #800080;
 -moz-transform: skewY(-30deg);
 top: 200px;
 left: 200px;
}

Figure 2.1.4 - Positionnement du bloc "rightSide"

Intéressons nous maintenant à la partie haute, c'est à dire le DIV topSide. C'est la partie la plus compliquée...

.topFace {
 -moz-transform: rotate(60deg);
 left: 100px;
 top: 42px;
}

.topFace div {
 background: #0080c0;
 -moz-transform: skewY(-30deg) scaleY(1.16);
}

Quelques explications : Pour donner cet effet, il est nécessaire de pivoter notre face (-moz-transform: rotate(60deg);), puis nous appliquons une perspective et un redimenssionnement.

Figure 2.1.5 - CSS Effet 3D - Cube final

Avec un peu d'habillage, voici le résultat final :

Figure 2.1.5 - CSS Effet 3D - Cube Final

CSS3 – Quelques nouveautés en image

Steve Leherpeux — Fri, 23 Apr 2010 05:19:20 +0000

Je suis persuadé que lorsque vous développez un site WEB, vous avez un multitude de logiciels ouverts sur votre bureau ; encore aujourd’hui, j’utilise Gimp pour éditer des images aux coins arrondis. Bientôt, avec CSS3, nous allons pouvoir nous passer d’éditer certaines images et gagner un temps précieux dans le développement de nos sites.

Dans cet article, je vais vous montrer certaines techniques CSS3 qui vous permettront de changer vos méthodes de travail.

CSS3? What’s that?! Qu’est-ce que c’est?!

Je suis sûr que vous avez entendu parler de CSS en général. CSS3 n’est pas très différent, en termes de syntaxe, mais la puissance de CSS3 est beaucoup plus grande. Comme vous le verrez dans ces techniques comment il est possible redimensionner dynamiquement des éléments, créer des ombres de texte, et plus encore!

Voici la définition donnée par le W3C de CSS3 :

CSS3 est le petit nouveau dans la famille feuille de style. Il offre de nouvelles possibilités intéressantes pour créer un impact avec vos dessins, vous permet d’utiliser des feuilles de style plus variés pour des effets de style beaucoup plus puissants et variés.

1°) Les coins arrondis en CSS3

Alors qu’auparavant il était nécessaire de créer des coins arrondis avec des images ou encore utiliser javascript il est désormais possible de faire appel à CSS3 ; Voici le code et le résultat (figure 1) que vous obtiendrez avec la propriété ‘border-radius’ :

Figure 1 - Résultat obtenu avec la propriété corner radius

Vous avez la possibilité de manipuler chacun des coins ; voici un exemple courbant les coins haut gauche et bas droit (figure 2) :

Figure 2 - Coins arrondis sur deux angles

2°) Les ombre sur div en CSS3

Encore une fois CSS3 va nous faire gagner du temps ; fini les DIV superposés et décalés ou encore l’utilisation de javascript pour générer de belles ombres. La propriété ‘box-shadow’ nous permet maintenant de réaliser ce type d’effet (Figure 3)

Figure 3 - Ombre portée sur un DIV

Voici les propriétés de notre élément ‘box-shadow’ :

Décalage horizontal : en négatif le décalage sera à gauche en positif, il sera à droite
Décalage vertical : négatif il sera vers le haut, positif il sera vers le bas
Rayon de flou : par défaut 0, c’est à dire aucun.

3°) Les ombres de texte en CSS3

Voici le code vous pemettant d’implémenter ce nouvel effet CSS3 ; Vous verrez en figure 4 le résultat, la première ligne sert à montrer la différence entre un texte sans ombre et un second avec :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...

Figure 4 - Text shadow

Les propriétés sont les mêmes que pour un DIV.

4°) Les polices de caractères embarquées :

Nous en avons rêvé pendant longtemps, CSS3 l’a fait ! Il est maintenant possible de choisir votre police et de l’utiliser dans vos pages WEB – veillez toutefois à faire attention aux droits d’utilisation, toutes les polices ne sont pas libres de droit. Dans l’exemple suivant, j’ai opté pour la police ‘LIBRE’.

Lorem ipsum dolor sit amet...

Figure 5 - CSS3 et police embarquée

5°) CSS3 et opacité :

Vous pouvez maintenant gérer l’opacité des éléments HTML dans vos feuilles de styles ; Il était déjà possible de réaliser cette opération avec les propriétés CSS ‘opacity’ et ‘filter’. Maintenant la tache est plus facile comme vous pouvez le voir :

La figure 6 vous montre un carré gris dont l’opacité est fixée à 60% :

Figure 6 - Opacité d'un élément

6°) Taille des « background »

Il est maintenant possible d’utiliser la propriété ‘background-size’ ; cette propriété sert à fixer la tailles des backgrounds ce qui était jusqu’alors impossible.

Voici un exemple avec une image dont la taille initiale est de 400px X 566px et ramenée à 50% d’un div dont les dimensions sont de 200px X 200px :

Figure 7 - Propriété Background-size

Attention ! Le résultat ne sera pas le même sur tous les navigateurs ! Pour exemple, Mozilla conserve les proportions de votre image ce qui n’est pas le cas sur Chrome…

7°) Propriétés columns :

Voici une propriété qui vous permet de diviser un DIV en plusieurs colonnes. pour cela, il vous suffit d’en spécifier le nombre.




 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.

Figure 8 - Propriété colonnes

8°) Bordures ‘images’

Euh… Comment dire ? l’utilité de cette nouvelle propriété est contestable mais elle a le mérite d’exister. Donc, vous allez pouvoir créer des bordures à partir d’images.

Je ne vais pas m’étendre sur cette propriété donc passons tout de suite au code et au résultat :

Figure 9 - Image source

Figure 10 - Résultat d'une bordure 'image'

Les sélecteurs CSS3

Je n’ai pas d’exemple imagé, sachez simplement que de nouveaux sélecteurs font leur arrivée dans vos feuilles de style ; Cela signifie que vous pourrez créer des design encore plus puissants et personnalisés.

Je vous renvoi à l’excellent article parru sur le site www.456bereastreet.com

Je réaliserai un post complet à ce sujet dans les jours qui viennent.

Conclusion

Vous venez de consulter quelques techniques CSS qui vous faciliteront le développement de vos interfaces et design WEB. Malheureusement, il faudra encore attendre un peu avant que ceci soit réalisable sur tous les navigateurs… alors pensez utilisateurs et dites vous bien que de nombreuses personnes n’aurons pas accès à toues ces propriétés.

Vue d’ensemble de la syntaxe CSS 3 Sélecteur
Selector type Sélecteur de type	Pattern Modèle	Description Description
Substring matching attribute selector sélecteur de sous-chaîne correspondant à l’attribut	E[att^=”val”] E [^ att = "val"]	Matches any E element whose `att` attribute value begins with “val”. Correspond à tout élément E dont l’ `att` valeur de l’attribut commence par « val ».
Substring matching attribute selector sélecteur de sous-chaîne correspondant à l’attribut	E[att$=”val”] E [att $ = "val"]	Matches any E element whose `att` attribute value ends with “val”. Correspond à tout élément E dont l’ `att` valeur de l’attribut se termine par « Val ».
Substring matching attribute selector sélecteur de sous-chaîne correspondant à l’attribut	E[att=”val”] E [att = "val"]	Matches any E element whose `att` attribute value contains the substring “val”. Correspond à tout élément E dont l’ `att` valeur de l’attribut contient la chaîne « val ».
Structural pseudo-class Structurels pseudo-classe	E:root E: root	Matches the document’s root element. Correspondances élément racine du document. In HTML, the root element is always the HTML element. En HTML, l’élément racine est toujours l’élément HTML.
Structural pseudo-class Structurels pseudo-classe	E:nth-child(n) E: nth-child (n)	Matches any E element that is the n-th child of its parent. Correspond à tout élément E qui est l’enfant n-ième de son parent.
Structural pseudo-class Structurels pseudo-classe	E:nth-last-child(n) E: nth-last-child (n)	Matches any E element that is the n-th child of its parent, counting from the last child. Correspond à tout élément E qui est l’enfant n-ième de sa mère, à compter du dernier enfant.
Structural pseudo-class Structurels pseudo-classe	E:nth-of-type(n) E: nth-of-type (n)	Matches any E element that is the n-th sibling of its type. Correspond à tout élément E qui est le frère n-ème de sa catégorie.
Structural pseudo-class Structurels pseudo-classe	E:nth-last-of-type(n) E: nth-last-of-type (n)	Matches any E element that is the n-th sibling of its type, counting from the last sibling. Correspond à tout élément E qui est le frère n-ème de sa catégorie, à compter de la fratrie dernier.
Structural pseudo-class Structurels pseudo-classe	E:last-child E: last-child	Matches any E element that is the last child of its parent. Correspond à tout élément E qui est le dernier enfant de son parent.
Structural pseudo-class Structurels pseudo-classe	E:first-of-type E: first-of-type	Matches any E element that is the first sibling of its type. Correspond à tout élément E qui est le premier frère de son type.
Structural pseudo-class Structurels pseudo-classe	E:last-of-type E: last-of-type	Matches any E element that is the last sibling of its type. Correspond à tout élément E qui est le frère dernière de ce type.
Structural pseudo-class Structurels pseudo-classe	E:only-child E: que l’enfant	Matches any E element that is the only child of its parent. Correspond à tout élément E qui est le seul enfant de son parent.
Structural pseudo-class Structurels pseudo-classe	E:only-of-type E: only-of-type	Matches any E element that is the only sibling of its type. Correspond à tout élément E qui est le seul frère de son type.
Structural pseudo-class Structurels pseudo-classe	E:empty E: vide	Matches any E element that has no children (including text nodes). Correspond à tout élément E qui n’a pas d’enfants (y compris les nœuds de texte).
Target pseudo-class Objectif pseudo-classe	E:target E: l’objectif	Matches an E element that is the target of the referring URL. Correspond à un élément E qui est la cible de l’URL de renvoi.
UI element states pseudo-class UI élément Etats pseudo-classe	E:enabled E: activé	Matches any user interface element (form control) E that is enabled. Correspond à tout élément d’interface utilisateur (contrôle de formulaire) E qui est activé.
UI element states pseudo-class UI élément Etats pseudo-classe	E:disabled E: personnes handicapées	Matches any user interface element (form control) E that is disabled. Correspond à tout élément d’interface utilisateur (contrôle de formulaire) E qui est désactivé.
UI element states pseudo-class UI élément Etats pseudo-classe	E:checked E: checked	Matches any user interface element (form control) E that is checked. Correspond à tout élément d’interface utilisateur (contrôle de formulaire) E qui est vérifiée.
UI element fragments pseudo-element élément d’interface fragments pseudo-élément	E::selection E:: sélection	Matches the portion of an element E that is currently selected or highlighted by the user. Correspond à la partie d’un élément E qui est actuellement sélectionné ou mis en valeur par l’utilisateur.
Negation pseudo-class Négation pseudo-classe	E:not(s) E: pas (s)	Matches any E element that does not match the simple selector s. Correspond à tout élément E qui ne correspond pas à la simple sélection de l’art
General sibling combinator Générale frère combinateur	E ~ F E ~ F	Matches any F element that is preceded by an E element. Correspond à tout élément F qui est précédé par un élément E.