/* Généalogie */ /* genea.css */ /* Les choses se compliquent un peu plus lorsqu'on arrive au CSS. En effet, il faut du travail (et parfois un peu d'astuce) pour obtenir un résultat se rapprochant de la maquette. Je dis bien « se rapprochant » car vous ne pourrez jamais obtenir un résultat identique au pixel près. Mettez-vous bien cela en tête : le but est d'obtenir le rendu le plus proche possible, sans chercher la perfection. Même si vous obtenez selon vous « la perfection » sur un navigateur, vous pouvez être sûrs qu'il y aura des différences sur un autre navigateur (plus ancien) ou sur une autre machine que la vôtre. Nous allons donc faire au mieux et ce sera déjà du travail, vous verrez. */ /* Pour la mise en forme du fichier html, on procède par étapes: */ /* 1- Polices personnalisées: Trebuchet MS, BallparkWeiner, Day Roman */ /* Définition des polices personnalisées */ /* Comme vous le savez, il faut proposer plusieurs versions de ces polices pour les différents navigateurs.Dafont ne propose que le .ttf en téléchargement. Par contre,FontSquirrel propose un générateur de polices à utiliser en CSS3 avec @font-face: vous lui envoyez un .ttf, l'outil transforme le fichier dans tous les autres formats nécessaires et vous fournit même le code CSS prêt à l'emploi ! Je m'en suis servi pour générer les différentes versions des deux polices exotiques que je vais utiliser. Ensuite, dans mon fichier CSS, je rajoute ce code qui m'a été fourni par FontSquirrel pour déclarer les nouvelles polices : */ @font-face { font-family: 'BallparkWeiner'; src: url('polices/ballpark.eot'); src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'), url('polices/ballpark.woff') format('woff'), url('polices/ballpark.ttf') format('truetype'), url('polices/ballpark.svg#BallparkWeiner') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Dayrom'; src: url('polices/dayrom.eot'); src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'), url('polices/dayrom.woff') format('woff'), url('polices/dayrom.ttf') format('truetype'), url('polices/dayrom.svg#Dayrom') format('svg'); font-weight: normal; font-style: normal; } /* En plus de cela, il faut bien entendu mettre à disposition les fichiers des polices. Comme vous le voyez, j'ai créé un sous-dossier polices dans lequel j'ai mis les différentes versions de mes polices. */ /* 2 - Définition des styles principaux: /* largeur du site, fond, couleur par défaut du texte */ /* On peut maintenant s'attaquer à définir quelques styles globaux pour tout le design de notre page. On va définir une image de fond, une police et une couleur de texte par défaut, et surtout on va dimensionner notre page et la centrer à l'écran. */ /* Eléments principaux de la page */ body { background: url('images/fond_jaune.png'); font-family: 'Trebuchet MS', Arial, sans-serif; color: #181818; } #bloc_page { width: 1024px; /* 900 */ margin: auto; } section h1, footer h1, nav a { font-family: Dayrom, serif; font-weight: normal; text-transform: uppercase; } aside h1 { text-align: center; } /* Avec #bloc_page, le bloc qui englobe toute la page, j'ai fixé les limites à 900 pixels de large. Avec les marges automatiques, le design sera centré. J'ai utilisé la propriété CSS text-transform: uppercase;(que nous n'avons pas vue auparavant) pour faire en sorte que mes titres soient toujours écrits en majuscules. Cette propriété transforme en effet le texte en majuscules (elle peut aussi faire l'inverse avec lowercase). Notez qu'on aurait aussi pu écrire les titres directement en majuscules dans le code HTML. */ /* 3 - En-tête et liens de navigation */ /* Header */ /* D'après la structure que j'ai proposée, l'en-tête contient aussi les liens de navigation. Commençons par définir l'en-tête et, en particulier, le logo en haut à gauche. Nous verrons ensuite comment mettre en forme les liens de navigation. */ header { background: url('images/separateur.png') repeat-x bottom; display: flex; justify-content: space-between; align-items: flex-end; } #titre_principal { display: flex; flex-direction: column; } #logo { display: flex; flex-direction: row; align-items: baseline; /* baseline */ } #logo img { width: 59px; height: 60px; } header h1 { font-family: 'BallparkWeiner', serif; font-size: 2.5em; font-weight: normal; margin: 0 0 0 10px; } header h2 { font-family: Dayrom, serif; font-size: 1.1em; margin-top: 0px; font-weight: normal; } /* Nous créons une distinction entre l'en-tête et le corps de page grâce à une image de fond. Les éléments sont positionnés avec flexbox : il y a plusieurs niveaux d'imbrication, certains sont positionnés verticalement d'autres horizontalement. Nous personnalisons aussi les polices et les dimensions. */ /* Navigation */ /* La mise en forme des liens de navigation est intéressante. Vous l'avez vu, j'ai créé une liste à puces pour les liens… mais une telle liste s'affiche habituellement en hauteur, et non en largeur. Heureusement, cela se change facilement, vous allez voir : */ nav ul { list-style-type: none; display: flex; } nav li { margin-right: 15px; } nav a { font-size: 1.3em; color: #181818; padding-bottom: 3px; text-decoration: none; } nav a:hover { color: #760001; border-bottom: 3px solid #760001; } /* La principale nouveauté est la définition CSS list-style-type: none;, qui permet de retirer l'image ronde servant de puce. Chaque élément de la liste (
  • ) est positionné dans une Flexbox, ce qui nous permet de placer les liens côte à côte comme nous le souhaitions. Le reste des définitions ne contient rien d'extraordinaire : des dimensions, des couleurs, des bordures… Autant de choses que vous connaissez déjà. Notez que je ne trouve pas forcément les bonnes valeurs du premier coup, il me faut parfois tâtonner un peu pour trouver une apparence proche de la maquette d'origine. */ /* 4 - Bannière (représentant le pont de San Francisco) */ /* - elle comporte des angles arrondis ; - la description est écrite sur un fond légèrement transparent ; - le bouton « Voir l'article » est réalisé en CSS, avec des angles arrondis ; - une ombre vient donner du volume à la bannière. */ /* Bannière */ #banniere_image { margin-top: 15px; height: 300px; border-radius: 5px; background: url('images/picto3.jpg') no-repeat; /* banniere.jpg */ position: relative; /* relative */ box-shadow: 0px 4px 4px #1c1a19; /* 1c1a19 */ margin-bottom: 25px; } #banniere_description { position: absolute; bottom: 0; border-radius: 0px 0px 5px 5px; width: 99.5%; height: 33px; padding-top: 15px; padding-left: 4px; background-color: rgba(255,255,153,0.8); /* 24,24,24,0.8 */ color: grey; font-size: 1em; overflow: hidden; } /* Défilement du texte dans la bannière-description .defile:after { content:attr(data-text); position: absolute; white-space: nowrap; padding-left: 10px; } */ /* les blocks défilants */ .marque [data-text] { white-space: nowrap; display: inline-block; padding-right: 2em; min-width: 200%; /* 2 fois la largeur du conteneur */ } /* il suffit ensuite d'initialiser les pseudo-éléments comme suit Code : */ .marque [data-text]:before, .marque [data-text]:after { content: attr( data-text) "\00A0"; /* plus espace en fin */ display: inline-block; min-width: 50%; /* la moitié du parent */ } /* pour l'animation rien ne change et l'affectation est faite sur le :before uniquement, le :after suivant le mouvement Code : */ .marque [data-text]:before { animation: marque-defil 20s infinite linear; } @keyframes marque-defil { 0% { margin-left: 0; } 100% { margin-left: -50%; } } /* Nota : la vitesse reste à ajuster suivant les cas. */ .bouton_rouge { height: 25px; position: absolute; right: 5px; bottom: 5px; background: url('images/fond_degraderouge.png') repeat-x; border: 1px solid #760001; border-radius: 5px; font-size: 1.2em; text-align: center; padding: 3px 8px 0px 8px; color: white; text-decoration: none; } .bouton_rouge img { border: 0; } /* Vous pouvez constater que j'ai choisi d'afficher l'image du pont sous forme d'image de fond dans le bloc
    de la bannière. J'ai aussi donné une position relative à la bannière, sans utiliser de propriétés pour en modifier le décalage… Pourquoi ? A priori, une position relative sans décalage ne sert à rien… Et pourtant, cela m'a été particulièrement utile pour placer le bouton « Voir l'article » en bas à droite de la bannière. En effet, j'ai placé le bouton en absolu à l'intérieur: si un bloc est positionné en absolu dans un autre bloc lui-même positionné en absolu, fixe ou relatif, alors il se positionne à l'intérieur de ce bloc. Notre bannière est positionnée en relatif (sans décalage). Comme le bouton est positionné en absolu à l'intérieur, il se place donc en bas à droite de la bannière ! C'est une technique particulièrement utile et puissante dans la réalisation d'un design, souvenez-vous en ! Dernier détail : pour la légende de la bannière, j'ai choisi d'utiliser la transparence avec la notation RGBa plutôt que la propriété opacity. En effet, opacity aurait rendu tout le contenu du bloc transparent, y compris le bouton « Voir l'article » à l'intérieur. J'ai trouvé préférable de rendre transparente seulement la couleur de fond plutôt que tout le bloc. Pour réaliser le dégradé du bouton « Voir l'article », j'ai utilisé une image de fond représentant le dégradé et j'ai répété cette image horizontalement. Sachez qu'il existe une propriété CSS3linear-gradientqui permet de réaliser des dégradés sans avoir à recourir à une image de fond. Son usage étant un peu complexe, j'ai choisi de ne pas l'utiliser dans cet exemple, mais vous pouvez vous documenter à son sujet si vous le souhaitez ! */ /* 5 - Section principale du corps de page, au centre */ /* Le corps, au centre de la page, est dans notre cas constitué d'une unique balise
    (mais il pourrait y en avoir plusieurs, bien sûr). Le positionnement du bloc « À propos de l'auteur » se fait grâce à Flexbox. J'ai choisi de répartir la taille des éléments avec la propriété flex, ce qui permet à l'article et au bloc sur le côté d'équilibrer leurs largeurs. On joue avec les angles arrondis et les ombres, on ajuste un peu les marges et les dimensions du texte, et nous y voilà ! */ /* Corps */ section { display: flex; margin-bottom: 20px; } article, aside { text-align: justify; } article { margin-right: 20px; flex: 3; } .ico_categorie { vertical-align: middle; margin-right: 8px; } article p { font-size: 1em; } aside { flex: 1.2; position: relative; background-color: #339966; /* #706b64 */ box-shadow: 0px 2px 5px #1c1a19; /* #1c1a19 */ border-radius: 5px; padding: 10px; color: white; font-size: 0.9em; } #fleche_bulle { position: absolute; top: 90px; left: -12px; } #photo_chris { text-align: center; } #photo_chris img { border: 1px solid #181818; } aside img { margin-right: 4px; } /* La petite difficulté ici était de réussir à placer la flèche à gauche du bloc