# 041: Création de la meilleure annonce Treehouse, partie 2 - Astuces CSS

Table des matières

Nous avons le balisage en place pour l'annonce Treehouse en haut de la page, mais nous avons un travail de style à faire. Nous commençons par le graphique de l'arbre lui-même.

Nous pensons qu'utiliser le vecteur et la sortie en SVG pourrait être cool car il aura l'air net et sera de petite taille. Regardez-moi flâner dans Illustrator en essayant d'en obtenir une belle version propre dans tous les vecteurs et finalement échouer. Pour l'instant, nous décidons de l'oublier et d'en faire une image.

Il s'avère que Treehouse n'utilise plus ce branding de toute façon, donc je devrai le mettre à jour de toute façon bientôt, et je prendrai certainement le temps de le faire en SVG, même si je dois le redessiner.

Pour l'instant, nous faisons du PNG et le déposons dans le design avec un arrière-plan CSS. Nous le redimensionnons avec la taille de l'arrière-plan (bien que je me sois encore une fois confondu en utilisant des pourcentages - rappelez-vous que lorsque vous utilisez un pourcentage, il s'agit d'un pourcentage de l'élément partent et non d'un pourcentage de la taille de l'image elle-même).

Nous obtenons la coloration, la taille et le positionnement tous ensemble. Maintenant, la dernière étape consiste à le faire fonctionner dans la conception réactive.

Articles intéressants...