C’est joooooli, non? Et le code pour faire tout pareil est dispo ici.
25
juil
30
avr
N’ayez pas peur de l’Internet
Basic HTML & CSS for non-web designers, c’est comme ça que Jessica Hische et Russ Maschmeyer décrivent leur site prometteur, Don’t Fear the Internet, dont le but sera de démystifier les bases du webdesign à l’aide de tutoriaux vidéo en s’adressant clairement à ceux qui ne veulent pas forcément en faire leur métier, mais juste avoir un blog un peu moins moche.
Le premier article précise que si les exemples seront basées sur WordPress, les enseignements eux ne seront pas spécifiques à cette plateforme. J’aime beaucoup l’idée, et comme je me suis reconnu dans la cible, je vais suivre ce blog avec beaucoup d’intérêt.
6
oct
Présenter du texte façon “touche de clavier” avec une simple feuille de style
C’est ce que propose Michael Hüneburg sur son site, avec une feuille de style Keys.css que vous pouvez récupérer et intégrer facilement à tout projet de webdesign, voir même à votre blog.
Exemple du rendu de la feuille de style, disponible en clair sur fond noir et en noir sur fond clair (mais complètement personnalisable) :
Simple et élégant.
2
mar
Ajoutez du @font-face à votre site web
Tout ce que vous avez toujours voulu savoir sur @font-face sans jamais oser le demander, c’est sur I ♥MB - Implementing @font-face. Une très bonne base, sur une seule page, pour commencer à utiliser cette règle CSS encore trop peu présente dans le webdesign.
Et pour ceux dans le fond qui se demandent ce que c’est encore que ce truc, voici qui devrait les éclairer:
@font-face is a CSS rule which allows you to show a font on a Web page even if that font is not installed on the users’ computer. This means that designers and developers can begin moving away from Web-safe fonts that users have pre-installed on their computer such as Arial, Times New Roman, Verdana and Trebuchet.
Moi, c’est clair, dès que j’ai un peu de temps (2012 à la louche), je m’y colle…
2
mai
2 tutoriels pour devenir un dieu du webdesign
L’excellent blog PSDTUTS, qui propose de nombreux tutoriels de qualité pour Photoshop et son tout récent petit frère NETTUTS (lancé en avril) qui s’attaquera lui à tout ce qui concerne le codage web (html, css, javascript, ajax, etc…), ont publiés 2 excellents tutoriels totalement complémentaires pour créer un site web de A à Z.
Sur l’article de PSDTUTS, on retrouve donc tout le design préparatoire du site, étape par étape, réalisé sous Photoshop, pour obtenir une belle maquette du futur site web. J’ai personnellement essayé le truc, sachant que je suis une quiche en Photoshop et j’y suis arrivé, donc vous ne devriez pas rencontrer de problème majeur.
L’article sur NETTUTS, quant à lui, récupère cette maquette Photoshop et la transforme en HTML+CSS, toujours étape par étape, pour bien comprendre le principe de fonctionnement des CSS notamment. Même si tout n’est pas parfait en terme d’accessibilité au niveau du code (en particulier, les positionnements absolus en-veux-tu-en-voilà, et les tailles de police de caractère définies en nombre de pixels), ces 2 “pas à pas” constituent cependant une excellente base pour qui voudrait se lancer dans le webdesign de son propre site/blog.
2 articles à bookmarker absolument!
15
avr
6 techniques CSS qu’il faut connaitre
Trevor Davis a publié un article très utile pour tous les designers web dans lequel il détaille, exemples à l’appui, 6 techniques CSS indispensables dont voici la liste:
- Fixer la taille de base de votre police de caractère
En positionnant votre font-size dans la balise body à 62.5% (soit 10px pour 1em), vous vous facilitez la vie: 1.2em = 12px, 1.4em = 14px, etc… - Supprimer toutes les marges par défaut
Certaines balises ayant des marges (et/ou padding) pré-définies, le meilleur moyen pour contrôler totalement votre design est de toutes les ramener à 0 dans un premier temps. - Positionner un float pour clearer un float
Technique indispensable pour bien gérer ses colonnes avec des div. - Remplacement d’un texte par une image
Si vous utilisez une image en header par exemple, mais que vous souhaitez qu’un texte s’affiche à la place dans le cas où les images sont désactivées (ou lors d’un CSS naked day), alors cette technique est faite pour vous. - Fausses colonnes
A utiliser en complément du point #3 pour donner l’impression que toutes les colonnes sont de la même hauteur. - CSS Sprites
Permet de faire des rollovers d’images en n’appelant (donc ne chargeant) qu’une seule image depuis le serveur (le principe étant d’afficher des morceaux différents de la même image au passage de la souris).
J’utilisais déjà une bonne partie de ces techniques qui sont parmi les plus élémentaires lorsqu’on commence à jouer avec les CSS, mais c’est un bon mémo pour les habitués et une bonne base pour les débutants. N’hésitez pas à aller y jeter un coup d’oeil et consultez les exemples ainsi que les extraits de code, ça aide…
Et n’hésitez pas à partager en commentaire vos propres petits trucs.
13
déc
Iconisez vos liens en CSS
Voila un petit package bien pratique proposé chez Pooliestudios, Iconize Textlinks with CSS, qui vous fournit les icônes et le code CSS permettant d’afficher automatiquement à coté de chaque lien vers un type de fichier spécifique, l’icône qui lui correspond. Quelques exemples dans l’image ci-dessous.
Cliquez sur l’image pour la voir en grand
Ca couvre un bon paquet d’extensions (de fichiers, mais aussi de services comme les mails, les clients IM, les vidéos online, etc…). Et si besoin d’en rajouter, il suffit de trouver une icône et de s’inspirer du code dans le fichier CSS fournit. Les icônes proposées ici viennent de chez famfamfam, que je vous invite à visiter pour trouver votre bonheur.
a[href$='.pdf'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_pdf.gif) no-repeat center right;
}
C’est tout con, mais ça peut se révéler bien pratique sur un blog ou un site d’entreprise proposant de nombreux liens vers des documents (Word, PDF, etc…) pour que les visiteurs identifient rapidement le type de lien sur lequel ils cliquent.
3
août
XRAY, visualiser les infos CSS d’un élément d’une page web
XRAY est un bookmarklet, qui permet d’un simple click d’obtenir les informations CSS de n’importe quel élément d’une page web. Concrètement, vous cliquez sur le bookmarklet dans la barre de menu de votre navigateur, puis vous sélectionnez l’élément de la page que vous souhaitez analyser. Une boite apparait alors avec les informations de dimensions, de position, la classe et l’héritage de l’objet CSS que vous avez cliqué.
Comme l’explique le site:
Just click the XRAY button to instantly answer those vital questions: where is the top and left of this element? how big is each margin? how big is the padding? how wide and high is the content box?
Bref, un petit outil bien pratique qui ne nécessite aucune installation, et plus rapide pour obtenir ces quelques informations que la néanmoins excellente et beaucoup plus complète extension Firefox Web Developer. De plus, le bookmarklet fonctionne sur Firefox, mais aussi sur Safari et Camino, est bien conçu et esthétiquement très réussi.
A ce propos justement, je prépare un article sur une liste de bookmarklets, parmi les plus utiles et pratiques. Si vous avez des perles rares, n’hésitez pas à me les soumettre…