Skip to content

Nouveau thème riche en CSS3

Publié par Hamtaro le 01 novembre 2010

Preview

Il fallait bien que ça arrive, je ne pouvais résister à la tentation de changer l'aspect graphique de mon blog... Comme toujours, je suis faible...

La tentation était d'autant plus grande que CSS3 et HTML5 sont en pleine expansion sur le web. Pour être franc, je ne me suis pas penché sur HTML5 pour ce nouveau thème (il faudrait que j'intègre les nouvelles balises et que je vois pour intégrer les vidéos et pousser dehors flash :p), je me suis plutôt fait plaisir (j'espère ne pas en avoir fait trop...) en testant les nouvelles "fonctionnalités" du langage CSS. ;)

Alors pour faire court et histoire d'informer les petits curieux qui ne sont pas adeptes du langage, je vais vous lister les propriétés que j'ai réellement utilisé sur le blog et qui sont propres au CSS3 :

  • @font-face : enfin la possibilité de jouer avec les polices (fonts) facilement. Bien évidemment, il ne faut pas en abuser et je l'ai utilisé uniquement pour certains titres, pour le nom du blog et dans le formulaire.
  • border-radius : adapté aux navigateurs utilisant webkit et mozilla. Avec cette propriété, le webdesigner peut presque dire adieu aux découpes de template avec coins arrondis, on obtient un résultat simple et rapide de ... tada... coins arrondis ! :p
  • box-shadow : encore une fois, il faut adapter aux différents navigateurs. La propriété parle d'elle-même et facilite encore une fois le travail du webdesigner en ajoutant des zones ombrées sous les cadres. Bien évidement, la taille, la diffusion, la couleur sont réglables. ;)
  • text-shadow : c'est le petit frère de box-shadow mais ce coup-ci appliqué au texte. 
  • -webkit-gradient et --moz-linear-gradient : ces propriétés permettent de mettre en place un gradient de couleur. Vous pouvez observer cela sur le bouton "Envoyer" du formulaire de contact.
  • rotation (-webkit-transform, -moz-transform et -o-transform) : cette propriété m'a permis de transformer un affichage classique de date en texte encadrant le coin supérieur de l'article. ;)

Bien sûr, je ne suis pas un pro du langage et je n'ai pas réinventé la roue, allant piocher à droite et à gauche des exemples d'utilisations afin de comprendre le fonctionnement et surtout le paramétrage de toutes ces propriétés.

CSS3 est tout simplement passionnant. Il me semble que certaines propriétés étaient déjà présentes dans les versions précédentes mais elles ont vraiment "explosé"  lorsque CSS3 a été mis sous les projecteurs.

Dernier petit détail (en fait il y en a plusieurs), je n'ai utilisé aucunes images pour ce thème et suis parti du thème par défaut (comme d'habitude, il faut bien partir de quelque part :p) de Pluxml. C'est d'ailleurs pourquoi, en clin d'oeil, je laisse le favicon de Customtaro avec le logo de Pluxml. ;)

J'espère que le résultat est plaisant, il est surtout beaucoup plus lisible sur un écran et met en avant le contenu. J'en ai profité également pour intégrer complètement la recherche avec Google.

Petit bonus, je vous montre l'intégration CSS3 sur la balise blockquote adapté d'un exemple trouvé sur le net, sans aucunes images. C'est là qu'on se rend vraiment compte du potentiel de ce langage, je suis fasciné...

Lorem Elsass ipsum Miss Dahlias sit senectus vulputate ornare ullamcorper sed turpis Kabinetpapier commodo réchime hop mamsell s'guelt pellentesque eleifend dui placerat aliquam chambon flammekueche non bissame mollis Spätzle wurscht Racing. schnaps Christkindelsmärik messti de Bischheim elementum kuglopf in, Heineken wie morbi Carola hopla Hans ftomi! sit dolor leverwurscht schneck varius amet amet Verdammi Oberschaeffolsheim libero, hopla kougelhopf condimentum tellus leo leo und elit semper quam, blottkopf, gal porta ac knack yeuh. sagittis auctor, schpeck mänele libero, ante sed Huguette et geïz knepfle rucksack picon bière jetz gehts los bredele lotto-owe Chulia Roberstau Pfourtz ! baeckeoffe gewurztraminer Salut bisamme eget id Yo dû. quam. vielmols, salu rossbolla habitant adipiscing geht's Gal ! Chulien nüdle consectetur lacus sit kartoffelsalad id, so Pellentesque barapli Morbi Richard Schirmeck merci vielmols suspendisse tchao bissame Wurschtsalad risus, purus non Strasbourg ac météor DNA, gravida hopla rhoncus ch'ai tellus turpis, Oberschaeffolsheim Coopé de Truchtersheim libero. Gal. Mauris tristique hoplageiss hopla nullam amet, dignissim munster Salu bissame ornare.

TCho, Hamtaro.

P.S. : j'emmerde IE dans toutes ses versions, le contenu est lisible, c'est le principal. Marre de faire des efforts pour un rendu sous un navigateur utilisé par des personnes insensibles...

A propos de l'auteur

Jeune (presque plus) passionné du web et plus particulièrement d'intégration et de webdesign, je fais comme tout bon geek qui se respecte sur la toile : je partage mon petit savoir ! ;)

Propulser cet article en dehors de votre écran, vers l'infini et au-delà !

  • Delicious
  • Digg
  • Newsvine
  • RSS
  • StumbleUpon
  • Technorati
  • Twitter

Articles similaires

Aucun commentaire, c'est le moment de se lancer !

Écrire un commentaire

Obligatoire

Facultatif

Facultatif

Copinage

Hamtaro aka Damien Guillot

    Je passe beaucoup de mon temps libre à apprendre, à m'améliorer et à rager devant mon écran travaillant sous Pixelmator et Espresso afin d'apprivoiser le webdesign ainsi que les codes HTML et CSS. PHP ne me fait pas peur, Javascript non plus mais j'ai pas trop le temps de les dompter. Sinon, j'ai une copine ravissante, un chien adorable et je pratique le handball. ;)