Quand les CSS3 se mettent au service de la BD !

Thu, 06 May 2010 07:37:22 GMT

Ce que nous allons voir aujourd'hui, c'est comment, gr�ce aux CSS3, cr�er des bulles de dialogues style bande dessin�e. Je vais vous d�crire pas � pas, comment arriver � ces r�sultats : Speech Bubble & Thought Bubble, en utilisant diff�rents aspects des CSS. Tout d'abord, nous allons cr�er notre base :




  
  
    I never really was on your side.

Ajoutons � cela un petit peu de mise en forme grossi�re, gr�ce � quelques r�gles CSS :

#bubble{
  position: relative;
  right:50px;
  background-color:white;
  text-align:center;
  width:200px;
  height:80px;
  border:2px solid #555555;
}

L'attribut position:relative va nous servir � positionner correctement notre bulle par rapport au personnage, c'est donc � vous de mettre les bonnes valeurs en fonction du personnage et de la mise en page que vous avez choisis. On rajoute un fond blanc pour le fond de notre bulle, on centre le texte, on fixe les dimensions de notre bulle (l� aussi laiss�es � votre appr�ciation en fonction du texte) et on lui applique une bordure de 2 pixels. Jusque-l�, �a ne ressemble pas vraiment � une bulle de BD, je vous l'accorde, mais � un simple rectangle avec du texte � l'int�rieur.

� Arrondir les angles �

Commen�ons par arrondir notre bulle, histoire de lui donner un style un peu plus � BDis� �. Pour cela, nous allons nous servir de la propri�t� CSS3 border-radius. Cette propri�t� sert � arrondir les angles d'un bloc. Elle n'est pas impl�ment�e sur tous les navigateurs et certains utilisent des propri�t�s sp�cifiques pour l'utiliser. Dans notre cas, voici comment nous allons l'utiliser :

#bubble{
  /* ... */
  /* propri�t� CSS3 (fonctionne sous Opera) */
  border-top-right-radius:80px 40px;
  border-top-left-radius:80px 40px;
  border-bottom-right-radius:80px 40px;
  border-bottom-left-radius:80px 40px;
  /* impl�mentation Firefox */
  -moz-border-radius-topright:80px 40px;
  -moz-border-radius-topleft:80px 40px;
  -moz-border-radius-bottomright:80px 40px;
  -moz-border-radius-bottomleft:80px 40px;
  /* impl�mentation Chrome, Safari, ... */
  -webkit-border-top-right-radius:80px 40px;
  -webkit-border-top-left-radius:80px 40px;
  -webkit-border-bottom-right-radius:80px 40px;
  -webkit-border-bottom-left-radius:80px 40px;
}

Pour expliquer bri�vement ce que nous faisons, voici une petite illustration pour la la premi�re : border-top-right-radius:80px 40px; La premi�re valeur va d�finir le rayon de l'arrondi pour la bordure du haut (top), et la seconde, pour la bordure de droite (right), comme ceci :

A vous de jouer avec les valeurs pour obtenir la forme que vous souhaitez. Tout ce qu'il faut, c'est conserver un morceau de bordure droit pour, comme nous allons le voir, placer notre fl�che. Attention : l� o� les navigateurs bas�s sur Webkit n'utilisent que le pr�fixe -webkit, l'impl�mentation de border-radius par Firefox, en plus d'utiliser le pr�fixe -moz, diff�re aussi dans l'�criture des param�tres (cf. code ci-dessus) !

� On ne montre pas du doigt ! �

Mettre des bulles avec du texte, c'est bien, mais pointer vers le personnage cens� dire le texte, c'est mieux ! Nous allons donc voir comment rajouter la petite fl�che � notre bulle, permettant de pointer vers le personnage de notre souhait. Pour cela, je vais vous montrer une technique assez particuli�re et peu connue, mais pourtant tr�s puissante ! Pour cr�er notre fl�che, nous allons utiliser des blocs de dimensions... 0*0 pixels ! Pour bien comprendre la technique que nous allons utiliser, il y a deux points importants � comprendre. Premi�rement, les dimensions r�elles d'un bloc sont d�finies par : le contenu + le padding + les bordures ! Prenons l'exemple de notre bulle. J'avais fix� la hauteur � 80 pixels, mais rajout� une bordure de 2 pixels. R�sultat, la hauteur r�elle de notre bloc est donc de : 80 pixels + 2 pixels en haut + 2 pixels en bas = 84 pixels ! Le deuxi�me point concerne le fonctionnement m�me des bordures. Une bordure part en fait du centre du bloc (quand il est vide), pour aller jusqu'aux extr�mit�s. Prenons l'exemple d'un bloc vide, auquel nous rajoutons des bordures tr�s �paisses :

Le r�sultat obtenu sera le suivant : Essayez de modifier la largeur d'une des bordures pour voir l'effet produit, c'est le meilleur moyen de comprendre le fonctionnement assez particulier des bordures. Toucher � une bordure va affecter la forme d'une autre ! Vous l'aurez compris, c'est donc en jouant avec ces valeurs que nous allons cr�er notre fl�che. Vous allez aussi comprendre pourquoi j'ai utilis� deux spans dans mon code arrow_inner et arrow_border. En effet, vu que nous utilisons les bordures pour cr�er notre fl�che, on ne va pas pouvoir ajouter une bordure... � une bordure, pour cr�er le contour de notre fl�che (dans la continuit� du contour de notre bulle) ! Pour palier � ce probl�me, nous allons simplement superposer deux blocs : un de la couleur de la bordure, sur lequel viendra se coller (l�g�rement d�cal�) un de la couleur de fond de la bulle. Voici le code que j'utilise :

#arrow_border{
  width:0;
  height:0;
  line-height:0;
  border-bottom:30px solid transparent;
  border-left:30px solid transparent;
  border-right:30px solid #555555; /* couleur de la bordure de la bulle */
}
#arrow_inner{
  width:0;
  height:0;
  line-height:0;
  border-bottom:30px solid transparent;
  border-left:30px solid transparent;
  border-right:30px solid white; /* couleur du fond de la bulle */
}

Note : cette technique fonctionne �galement pour IE dans ses versions 7 et 8 ! Cela dit, ce bout de CSS ne fait pas tout. Il faut maintenant positionner correctement notre fl�che (arrow_inner + arrow_border). C'est pour cela que je vous avais demand� au d�but de garder (si possible) un morceau de bordure rectiligne. Dans mon cas, j'utilise ce positionnement (en absolute, car les spans sont contenus dans le div de la bulle) :

#arrow_border{
  /* ... */
  position:absolute;
  bottom:-30px;
  right:65px;
}
/*
 *  le span qui va se superposer doit �tre l�g�rement d�cal� pour laisser donner l'impression d'une bordure
 */
#arrow_inner{
  /* ... */
  position:absolute;
  bottom:-25px;
  right:67px;
}

Et voil�, avec quelques ajustements, vous obtenez normalement une jolie bulle de bande dessin�e ! Oui, mais... la police ne fait pas vraiment BD, elle !

� 22, v'l� les flics ! Euh... la police ! �

Pour personnaliser notre police de caract�res selon nos envies et pour faire en sorte qu'elle s'affiche correctement m�me si le visiteur n'a pas la police install�e sur son ordinateur, nous allons utiliser une propri�t� CSS2, qui... (j'esp�re que vous �tes assis) est support�e par IE (premier � BOUM �) depuis sa version 5 (deuxi�me � BOUM �) ! Il s'agit de la propri�t� @font-face, qui permet de � cr�er � une police personnalis�e utilisable en CSS. Avant de commencer, il faut d�j� trouver la police qui convient. Personnellement, je l'ai trouv�e sur Blambot, il s'agit de la police Crime Fighter. Cela dit, la police fournie est au format TTF (TrueType). Sauf que pour pouvoir l'utiliser avec @font-face, il faut qu'elle soit au format .otf (OpenType) ou .eot (Embedded OpenType, dans le cas d'Internet Explorer). Je vous redirige donc vers un petit outil online tr�s bien con�u permettant de convertir vos polices : @Font-Face Generator. Passez en mode Expert et dans la zone Font Formats, ne cochez que les cases : EOT et OpenType. R�cup�rez les fichiers votrepolice.otf et votrepolice.eot, et placez-les dans le r�pertoire de votre projet. L'utilisation est tr�s simple, pour cr�er notre police utilisable en CSS, voici le code � rajouter :

@font-face{
  font-family: ComicFighter; /* le nom que vous voulez */
  src: url('ComicFighter.otf'); /* lien vers votre fichier .otf */
  src: url('ComicFighter.eot')\9; /* hack CSS permettant d'utiliser cette police pour IE uniquement */
}

Les fichiers .otf et .eot seront stock�s directement sur votre FTP, donc nul besoin que l'utilisateur ait la police install�e sur son ordinateur pour qu'elle s'affiche correctement. Vous pouvez ensuite utiliser directement la police avec le nom que vous avez sp�cifi�, comme n'importe quelle autre police, sur votre texte :

#text{
  font-family: ComicFighter, Georgia; /* on sp�cifie une autre police standard, au cas o�... */
  font-weight:bold;
  font-size:11pt;

  position:relative;
  top:26px;
}

Note : j'applique ici la propri�t� position:relative, histoire de bien positionner le texte � l'int�rieur de la bulle. L'utilisation des padding auraient pour effet de casser la mise en forme. Et voil� ! Si tout s'est bien pass� jusque l�, vous devriez obtenir une belle bulle de dialogue comme on en trouve dans les BD ! Si vous avez compris le principe pour cr�er une Speech Bubble, vous pouvez tr�s simplement cr�er d'autres types de bulles, comme la Thought Bubble (jetez un �il au code source) !

Trailer Harry Potter et les Reliques de la Mort (sous-titr�)

Fri, 11 Dec 2009 22:53:15 GMT

J'avais fait les sous-titres du trailer du prochain Harry Potter qui a fuit�. Le voici donc, avec les sous-titres fran�ais ou anglais, au choix :

Vid�os non-cr�nel�es avec VLC sous Windows 7 : les solutions

Tue, 27 Oct 2009 20:15:55 GMT

Vous l'avez peut-�tre remarqu� si vous utilisez VLC sous Windows 7, les vid�os ont souvent un rendu pas terrible. C'est d� au mode de sortie par d�faut. Il y a pour cela deux solutions, qui ont toutes les deux leurs inconv�nients, mais qui ont le m�rite de rendre vos vid�os regardables ! Pour ce faire, il faut aller farfouiller dans les pr�f�rences de VLC : menu Outils > Pr�f�rences > onglet Vid�o. Il faut modifier le mode de sortie utilis� par VLC :

Vous avez deux choix, avec leurs inconv�nients respectifs : - Sortie vid�o � DirectX � : le probl�me en utilisant ce mode de sortie, c'est que le jeu de couleurs de Windows va �tre modifi� pendant que VLC sera lanc�, c'est-�-dire qu'au lieu d'avoir le th�me Aero comme ceci :

Vous aurez quelque chose comme ceci (pour toutes vos fen�tres) :

Fort heureusement, le mode de couleurs repasse en normal � la fermeture de VLC. - Sortie vid�o � OpenGL � : le (gros) inconv�nient de ce mode de sortie, c'est qu'en plein �cran, les contr�les de VLC disparaissent et l'usage de la souris devient al�atoire. Mais dans ce cas, le jeu de couleurs ne sera pas touch�, et vous pourrez l� aussi regarder votre vid�o avec un beau rendu. Attention : pour que les modifications prennent effet, il faut fermer et relancer VLC ! Voil� pour l'astuce du jour, en esp�rant que �a rende service � certains. :)

Beds Are Burning - Tck Tck Tck

Sat, 17 Oct 2009 17:34:48 GMT

Tweets se cache (le filou) !

Thu, 08 Oct 2009 18:43:39 GMT

Derri�re ce magnifique jeu de mots tr�s recherch� se cache (double jeu de mots !!) en fait une petite mise � jour apport�e � ma pseudo-lib Tweets. Vous l'avez peut-�tre remarqu�, mais le chargement des pages de mon site se fait d�sormais bien plus rapidement. C'est gr�ce au syst�me de cache que j'ai impl�ment� � Tweets. Vous pouvez d�sormais sp�cifier une dur�e pendant laquelle vos tweets seront mis en cache. Cela permet de soulager le traitement et d'�viter de faire un appel au fichier XML situ� sur Twitter � chaque chargement de page. L'utilisation est simple, par d�faut, le cache dure 5 minutes. Vous pouvez en changer la valeur directement dans la lib, ou en passant par la m�thode qui va bien :

var $c_lifetime = 5; // dur�e en minutes
// ou
$tw = new Tweets('delphiki', false);
$tw->set_cache_lifetime(10);

Note : Si la valeur est inf�rieure ou �gale � 0, la mise en cache sera d�sactiv�e. Vous pouvez aussi sp�cifier le dossier de cache que vous d�sirez. Par d�faut, le dossier tw_cache est cr��. L� aussi, vous pouvez le modifier directement dans la lib ou avec la bonne m�thode :

var $c_path = './tw_cache/';
// ou
$tw = new Tweets('delphiki', false);
$tw->set_cache_path('./mon_super_dossier_cache/');

Si vous modifiez le nom et que le dossier n'existe pas, il est cr�� automatiquement. Note : si cURL n'arrive pas � joindre Twitter et que la "date d'expiration" de votre cache est d�pass�e, le cache est conserv�. Pour t�l�charger la lib, c'est par l� : tweets.zip (2.2 ko) Voil� pour les petites news, j'esp�re que �a vous sera utile. ;) @ la prochaine

delphiki - Lack of Inpiration