Ange Chierchia » Webdesign

#wdfr S02E01 – Responsive Web Design

Ange Chierchia — Wed, 12 Oct 2011 13:30:53 +0000

Le vendredi 2 septembre, on avait évoqué le responsive web design. Aujourd’hui, le compte rendu de la session a été publié sur le blog du Webdesign Friday. Cliquez sur le titre du billet pour lire le compte rendu !

css3button.net – Vos boutons en CSS3, tout simplement

Ange Chierchia — Fri, 16 Sep 2011 18:53:01 +0000

Encore une petite trouvaille en cette fin de semaine (je vais finir par en faire une habitude si ça continue) : au programme aujourd’hui une ressource bien sympa pour créer nos joli bouton d’interface, comme les fameux boutons « Submit » de nos bon amis les formulaires Web.

On le sait tous, préparer nos images pour nos boutons de formulaire, que l’on va potentiellement utiliser un peu partout sur un site, c’est chiant. CSS3 nous sauve un peu la vie, les jolis boutons qu’on claque dans nos maquettes, c’est parfois pas la joie à intégrer.

Alors pourquoi ne pas créer ces boutons, fourrés aux dégradés et autres joyeusetés top-tendance, directement avec CSS3, sans passer pas Photoshop ? Vous avez demandé un générateur qui vous mâche les déclarations CSS? tant mieux!

FlexSlider — vos diaporamas « responsive »

Ange Chierchia — Wed, 31 Aug 2011 16:56:06 +0000

Aujourd’hui, avec HTML5, CSS3 et les Media Queries, on fait de très jolies choses côté webdesign. Mais le must-have, hormis les rubans et autres joyeuseté bien rétro, c’est un design complètement « responsive », adaptatif, afin de servir une mise en page différente de l’informations suivant le support (desktop, mobile, tablette, etc…).

La petite trouvaille d’aujourd’hui, est un diaporama utilisant le principe du responsive design! Vous pourrez donc vous la péter en gardant vos sliders dans les versions pour mobiles. #youpi!

Awesome Fontstacks — vos piles de polices tout simplement

Ange Chierchia — Sun, 26 Jun 2011 11:36:10 +0000

Créez facilement et rapidement des piles de polices, s’accordant parfaitement, et avec fallbacks. Le tout, à emporter grâce à une feuille de style générée automatiquement! Enjoy!

Subtle Patterns — Des motifs haute qualité à télécharger gratuitement

Ange Chierchia — Wed, 27 Apr 2011 13:06:44 +0000

Voilà un site fort utile si vous aimez les fonds de page simples et sophistiqué. Au programme des pattern sable, papier ou encore carbone. Enjoy!

Patternify – Générateur de pattern CSS

Ange Chierchia — Tue, 12 Apr 2011 22:21:00 +0000

Patternify est une petite application web permettant des dessiner pixel par pixel ses propres motifs rayés afin de les utiliser dans nos feuille de style CSS, sans avoir à ouvrir Photoshop. On pourra enregistrer l’image dans un fichier, ou bien directement utilisé l’image converti en Base64, sans avoir besoin d’une image.

Utiliser une fonte personnalisée avec Cufón

Ange Chierchia — Fri, 18 Dec 2009 23:53:19 +0000

Dans un précédent billet j'avais mentionné Cufón et sIFR, comme moyen d'utiliser des polices personnalisées sur nos sites Internet, de bonnes alternatives à la propriété CSS3 @font-face qui n'est pas prise en compte par tout les navigateurs web. Aujourd'hui je vais vous montrer comment utilisé vos polices d'écriture préférées sur votre site Web en utilisant Cufón.

Qu'est-ce que c'est Cufón ?

Cufón est un simple fichier Javascript qui se charge de remplacer n'importe quel texte par une image en utilisant la police de votre choix. Cufón est aussi une très bonne alternative à sIFR, qui fait exactement la même chose mais est beaucoup plus lourd et moins facile à configurer.

Comment le mettre en oeuvre ?

Téléchargement du script de remplacement

La première étape à effectuer pour pouvoir utiliser Cufón, c'est bien entendu de télécharger le fameux fichier disponible à cette adresse.

Conversion de notre police

Ensuite, nous allons devoir générer un fichier Javascript qui ne contiendra ni plus ni moins que les information de notre police, pour cela, le site de Cufón dispose d'un générateur de police dans lequel on va pouvoir télécharger le(s) fichier(s) de notre police.

On devra ensuite choisir quels lettres et symboles inclure dans notre fichier généré, et d'autres options facultatives. Une fois les conditions d'utilisation acceptées, un petit clique sur le bouton de validation et l'on pourra télécharger notre police d'écriture converti au format JavaScript.

Voilà, on a déjà fait le plus gros du travail. Éprouvant non? ^^

Installation de Cufón

Ouvrez bien les yeux ça va aller vite maintenant, vous n'avez qu'a inclure le code suivant entre vos balises :


	
	 //le script Cufon
	 //notre police converti

Et c'est terminé tous les élément H1 utiliseront notre police personnalisée! Simple non?

3 façons d’utiliser une police d’écriture « exotique » sur un site Web

Ange Chierchia — Sat, 17 Oct 2009 16:04:13 +0000

Dans ce nouvel article, nous allons voir comment utiliser une police d’écriture dite éxotique, c’est à dire qui n’est normalement pas destinée à une utilisation sur le Web.

D’abord, quelles sont les polices d’écriture ou fonts en anglais utilisées généralement sur Internet?

Eh bien il n’y en a pas une dizaine! En effet, lorsqu’on parcours un peu le Web on se rend compte que les polices utilisées sont le plus souvent Times New Roman, Times, Helvetica, Verdana, Arial et Trebuchet, et ceci pour une bonne raison : ce sont toutes des polices intégrées d’origine dans nos ordinateurs, que ce soit Mac ou PC.

Maintenant, qu’est-ce qu’une font exotique?

Une police d’écriture exotique ce sont toute les fonts que l’on peut trouvées en téléchargement sur des sites comme le très connu Dafont.com qui propose de nombreuse polices en tout genre à installé sur l’ordinateurs. C’est d’ailleur une très bonne ressource pour les designer web et autre graphiste car ces polices permettent de diversifier nos travaux. La police que j’utilise d’ailleurs pour les titres de mes articles est la font Qlassik disponible gratuitement sur sur Dafont.

Maintenant qu’on sait çà, voyons voir comment l’utiliser sur nos sites Internet.

Comment utiliser une police exotique sur Internet?

Il faut savoir qu’il y a plusieurs façon de mettre en oeuvre une telle police sur un site Internet, notament en utilisant Javascript, Flash, les CSS3, ou encore une image.

Commençons d’abord par la methode la plus simple à mettre en place, mais pas forcement la plus pratique : l’utilisation d’images

1ère methode :Remplacer du texte par une image avec les CSS

Il faut savoir que cette technique n’est pas adaptée suivant l’utilisation qu’on en fait. En effet, cette technique est utile pour par exemple remplacer le titre de notre site par notre logo. Au contraire, utiliser ce procédé pour remplacer le titre des articles d’un blog est une chose vraiment fastidieuse et demandant vraiment trop de travail.

Ici sur AngeChierchia.com le logo est enfait une balise

avec un identifiant afin de stylisé le texte entre les balises

et

, dont voici le CSS :

h1#logo {
background-image:url(images/logo.png);
background-repeat:no-repeat;
width:368px; height:84px;
display:block;
float:left;
text-indent:-999px;
border:none;
}

Les propriétés importantes ici, sont background-image qui permet de mettre une image de fond, width et height qui permettent de dimensionner la zone de notre H1, et text-indent: qui permet de dire à notre balise H1 que le texte qu’elle contient doit être indenté, ici le texte sera décalé de 999 pixels à gauche donc non visible.

2ème methode : remplacer du texte en utilisant Javascript et Cufón ou Flash et sIFR

La seconde methode est celle qui est le plus répendue actuellement, on l’appelle aussi Advanced Image Remplacement (remplacement par l’image avancé). Ici on utilise plus du tout CSS et une image, mais plutot Javascript si on choisi d’utiliser le script Cufón, ou encore Flash si on utilise sIFR.

Ici, je ne vais pas vous montrer comment utiliser sIFR ou Cufón, on verra çà dans un prochain article. Sachez juste que sur ce blog j’utilise Cufón pour styliser mes balises h1, h2 et h3.

3ème methode : la règle @font-face de CSS3

Bien que cette methode soit la plus récente et la plus simple à mettre en place, certaines polices ainsi que certain type de fichier ne sont pas bien supporté. Pour utiliser notre police on doit donc d’abord la déclarer dans notre feuille de style en utilisant la règle @font-face qui permet de dire à notre site d’utilisé la police se trouvant à tel endroit sur notre serveur. En quelque sort c’est l’équivalent de la propriété background-image.

Une fois la police déclarée, on pourra l’utilisé avec la propriété font-family.

@font-face { //on déclare notre police
font-family: "Qlassik";
src : url("chemin/vers/Qlassik.otf");
}
h1 { //on utilise notre police pour tous les élément h1
font-family: "Qlassik", helvetica, arial;
font-size: 24px;
}