32
Un design simple en CSS3 compatible CSS2
Avec les prochaines mises en place du CSS3, la création de design va permettre d’aller encore plus loin. Nous allons voir comment réaliser un design de site avec un livre qui contiendra le contenu, un calepin comme menu et un crayon pour contacter l’auteur, en ajoutant une touche de CSS3. La difficulté étant d’assurer un affichage correct avec le CSS2...
Nous allons voir comment réaliser un design simple en CSS3, qui soit compatible avec CSS2. Le but étant de mettre en place un design sympa qui utilise simplement l’inclinaison des div pour donner un petit style.
Bien entendu, le CSS3 permettra d’aller beaucoup plus loin dans la réalisation de vos design, mais ici on va commencer doucement 
Le but est bien sûr de créer un design compatible avec les navigateurs plus vieux qui n’incluent pas le CSS3, ce qui est presque toujours l’étape la plus difficile de la conception de design.
Voici par exemple le résultat sur Ie6 :
A l’heure d’aujourd’hui, même notre fameux firefox n’est pas capable de prendre en compte les propriétés que nous allons utiliser dans la version stable 3.0. Nous allons donc devoir télécharger la version Béta 3.5 pour afficher correctement les inclinaisons de divs. Nous pourrons noter au passage un petit problème d’affichage : en inclinant les divs, le texte présent dans celle-ci est légèrement déformé. Malheureusement, nous ne pouvons pas faire grand chose pour pouvoir contrer ce problème, nous pouvons seulement espérer que notre design soit plus clair lorsqu’une version stable incluant le CSS3 sortira...
Pour réaliser ce design, nous allons avoir besoin de plusieurs éléments graphiques :
- Une image de fond boisée, ici j’ai choisi d’utiliser une texture de bois de http://www.cgtextures.com/
- Une image de livre, ici j’ai repris le livre que nous propose de réaliser Wonka
- Une image de calepin, réalisée par mes soins
- Une image d’un crayon, réalisé encore une fois à partir d’un tuto de Wonka
Pour que vous puissiez afficher correctement ce design sur FireFox, il vous faudra également télécharger la version béta de Firefox 3.5. Cette version est une version de test, qui s’installera en plus de votre version actuelle du navigateur. Pour passer d’une version à une autre, il vous suffira de fermer les fenêtres de Firefox ouverte et d’ouvrir la version qui vous intéresse. Par contre vous perdrez l’utilisation de certains plugins, comme la barre « WebDevelloper ».
Ensuite, il vous faudra également la structure html basique que j’utilise pour tous les tutoriels que je publie :
Nous allons décompresser cette archive dans un dossier de notre choix, puis placer dans le dossier « images » le contenu de cette seconde archive :
Télécharger l’archive des images.
J’ai inclue dans ce pack les images en .png, plus belles mais incompatibles avec les versions antérieures à Internet Explorer 6. Vous pourrez utiliser en revanche les images en .gif sans problème sur ces navigateurs.
Nous allons donc commencer par ouvrir la page « index.html », et retirer tout ce qu’elle contient entre les balises « body » pour créer une structure plus adaptée au design. Nous pourrions utiliser celle qui est déjà présente, mais je préfère que nous recommencions cette étape, afin notamment de nommer nos balises de manière plus explicite.
Donc nous allons commencer par créer une div pour notre livre. Celle-ci contiendra une div « page1 » pour la page de gauche du livre, et une page 2 pour la page de droite. Ces divs contiendront elles-même une balise h2 au début et une span à la fin, qui seront utilisées pour le titre et pour le numéro de pages. Entre ces deux balises, nous auront un paragraphe ou plusieurs paragraphes avec du texte.
Voici donc le code html que nous obtenons :
<div id="book">
<div id="page1">
<h2>L'oeuvre de l'auteur</h2>
<p><b class="lettrine">L</b>orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. </p>
<span>Page : 1</span>
</div>
<div id="page2">
<h2>L'oeuvre de l'auteur</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. </p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
<span>Page : 2</span>
</div>
</div>
Ensuite, nous allons avoir notre calepin, pour celui-ce nous utiliserons une simple div, qui contiendra une série de liens :
<div id="notepad">
<a href="#">Sommaire</a>
<a href="#">Chapitre 1 : Le couloir</a>
<a href="#">Chapitre 2 : Le purgatoire</a>
<a href="#">Chapitre 3 : Rencontre</a>
<a href="#">Chapitre 4 : Introspection</a>
<a href="#">Chapitre 5 : Citation</a>
<a href="#">Chapitre 6 : Etude</a>
<a href="#">Chapitre 8 : Le Palais</a>
<a href="#">Chapitre 9 : La fin</a>
</div>
Et enfin, nous allons faire la div avec le crayon. Ici, nous aurons une div qui contiendra une image :
<div id="contact_pen"><a href="#"><img src="images/contact-pen.gif" title="Contacter l'auteur" alt="Contacter l'auteur" /></a></div>
Voila qui est fait pour le html. Nous allons donc maintenant fermer cette page pour ouvrir le fichier css, et ajouter les propriétés de l’image de fond, directement sur la balise body :
background:url('images/page-background.jpg') top left;
Bien, si vous chargez votre page dans votre navigateur, vous verrez que nous avons notre beau fond boisé. Maintenant, nous allons placer notre livre, pour après se pencher sur la mise en page (c’est le cas de le dire 
) de nos page.
Si vous regardez de plus près l’image de notre livre, vous remarquerez qu’elle mesure 624 pixels de haut et 800 de large, nous allons donc commencer par incorporer ceci au css, avec l’image de fond. Ensuite, nous allons donner une position absolue à notre livre, ainsi qu’une marge avec le haut de 50 pixels et de 70 pixels avec la gauche. Désormais, notre livre est placé dans la page, reste à l’incliner, pour donner un petit style, et pour ça nous allons utiliser du css3.
Pour le moment, peu de navigateurs incluent cette possibilité, nous allons donc nous concentrer sur FireFox, avec la propriété suivante :
-moz-transform: rotate(-5deg);
En appliquant cette propriété à notre livre, nous allons simplement ajouter une inclinaison de 5 degrés vers la gauche.
L’intérêt de cette propriété est que tout le contenu de la div s’incline, ce qui permet de produire un design utilisable avec un système dynamique. Pour une utilisation plus simple, nous aurions pu simplement utiliser une image de livre penché, qui contiendrait déjà le texte, mais cela condamnerait le site à une gestion lourde et laborieuse, sans parler du référencement. Vous verrez dans d’autre tutos des applications de ces propriétés, qui permettent au web de ressembler un peu plus à la réalité.
Continuons donc sur notre design, avec le texte des deux pages. Nous allons commencer par appliquer un padding à la div du livre, en ajoutant les lignes suivantes :
padding-left:70px;
padding-top:50px;
Ainsi notre texte débutera en haut et à gauche de la page du livre.
Nous allons ensuite devoir appliquer les éléments suivants pour que la page s’affiche convenablement sur le livre :
- Une largeur de 320 pixels, afin que le texte ne dépasse pas de la page
- Une taille de texte de 14 pixels, pour une bonne lisibilité
- Sur le h2, une largeur de 100% avec une bordure basse en noir et une taille de police de 10 pixels
- Sur le span, une largeur de 100% également, avec un centrage du texte, une taille de 10 pixels, mais aussi une position absolue et un espacement avec le haut de 480 pixels, afin d’apparaitre en bas de la page
- Toujours sur le span, un petit hack pour définir l’espacement avec le haut à 500 pixels pour ie6
- Enfin, une taille de 80 pixels et un flottage à gauche pour la première lettre du chapitre (la div dont la class est lettrine)
Ce qui nous donne en css :
/* Propriétés de la première page */
#book #page1{
width:320px;
font-size:14px;
position:relative;
}
#book #page1 h2{
width:100%;
border-bottom:1px solid black;
font-size:10px;
}
#book #page1 span{
width:100%;
position:absolute;
top:480px;
text-align:center;
font-size:10px;
}
* html #book #page1 span{
top:500px;
}
#book #page1 .lettrine{
font-size:80px;
float:left;
}
Pour la deuxième page, l’emplacement de la div est plus difficile à obtenir, nous allons donc la placer en position absolue, et adapter nos espacement pour un affichage correct. Nous ajouterons également un petit hack, pour les espacements, toujours pour ie6 :
/* Propriétés de la deuxième page */
#book #page2{
position:absolute;
left:410px;
top:50px;
width:320px;
font-size:14px;
}
* html #book #page2{
left:410px;
top:60px;
}
#book #page2 h2{
width:100%;
border-bottom:1px solid black;
font-size:10px;
line-height:12px;
}
#book #page2 span{
width:100%;
position:absolute;
top:480px;
text-align:center;
font-size:10px;
line-height:12px;
}
* html #book #page2 span{
top:490px;
}
#book #page2 .lettrine{
font-size:80px;
float:left;
}
Et nous avons fait le plus gros du travail maintenant, nous allons nous pencher sur le calepin et sur le crayon. Commençons par le calepin, en fixant sa largeur et sa hauteur (égale à celle de l’image, vous l’aurez compris) et l’image de fond.
Nous utiliserons toujours « -moz-transform » pour une inclinaison de 4 degrés à droite.
/* Le bloc note */
#notepad{
height:465px;
width:410px;
position:absolute;
padding-top:85px;
padding-left:40px;
left:1050px;
top:150px;
background: url('images/notepad.gif') top left no-repeat;
-moz-transform: rotate(4deg);
}
Point important : les liens. Si vous rafraichissez votre page, vous verrez qu’ils sont sur la même ligne, et nous voulons qu’ils se placent les un sous les autres, si possible alignés avec les lignes de notre image de fond. Nous allons donc utiliser la propriété « line-height » pour fixer la hauteur de la ligne, faire de ces liens des blocs, puis les différents styles de texte que nous désirons appliquer.
#notepad a{
width:230px;
display:block;
line-height:28px;
font-family:Verdana;
font-size:12px;
font-weight:bold;
text-decoration:none;
color:black;
}
Voila pour le bloc note, reste le crayon. Ici, rien de compliqué, nous allons définir sa position dans la page et son inclinaison, en faisant que la pointe soit dirigée vers le calepin, et enlever la bordure du lien :
/* Le stylo */
#contact_pen{
height:350px;
width:32px;
position:absolute;
left:1350px;
top:160px;
-moz-transform: rotate(14deg);
}
#contact_pen img{
border:none;
}
Donc pour résumer, vous devriez obtenir le CSS suivant :
body{
background:url('images/page-background.jpg') top left;
}
/* Le livre */
#book{
height:624px;
width:800px;
background: url('images/book.gif') top left no-repeat;
position: absolute;
top:100px;
left:150px;
-moz-transform: rotate(-5deg);
padding-left:70px;
padding-top:50px;
}
/* Propriétés de la première page */
#book #page1{
width:320px;
font-size:14px;
position:relative;
}
#book #page1 h2{
width:100%;
border-bottom:1px solid black;
font-size:10px;
}
#book #page1 span{
width:100%;
position:absolute;
top:480px;
text-align:center;
font-size:10px;
}
* html #book #page1 span{
top:500px;
}
#book #page1 .lettrine{
font-size:80px;
float:left;
}
/* Propriétés de la deuxième page */
#book #page2{
position:absolute;
left:410px;
top:50px;
width:320px;
font-size:14px;
}
* html #book #page2{
left:410px;
top:60px;
}
#book #page2 h2{
width:100%;
border-bottom:1px solid black;
font-size:10px;
line-height:12px;
}
#book #page2 span{
width:100%;
position:absolute;
top:480px;
text-align:center;
font-size:10px;
line-height:12px;
}
* html #book #page2 span{
top:490px;
}
#book #page2 .lettrine{
font-size:80px;
float:left;
}
/* Le bloc note */
#notepad{
height:465px;
width:410px;
position:absolute;
padding-top:85px;
padding-left:40px;
left:1050px;
top:150px;
background: url('images/notepad.gif') top left no-repeat;
-moz-transform: rotate(4deg);
}
#notepad a{
width:230px;
display:block;
line-height:28px;
font-family:Verdana;
font-size:12px;
font-weight:bold;
text-decoration:none;
color:black;
}
/* Le stylo */
#contact_pen{
height:350px;
width:32px;
position:absolute;
left:1350px;
top:160px;
-moz-transform: rotate(14deg);
}
#contact_pen img{
border:none;
}
En revanche, si vous désirez utiliser ce design, n’oubliez pas de préciser la résolution optimale pour la consultation du site, ainsi qu’un petit lien vers la dernière version de firefox. Bien qu’il faille encore attendre avant de voir sortir la version qui prendra en compte le css3, au moins vous serez prêt à l’accueillir
Ce design peut encore être grandement amélioré en ajoutant de nouveaux éléments, et j’espère que c’est ce que vous ferez si vous désirez l’utiliser : ajouter votre propre marque pour personnaliser ce design.
Bon codage à tous
Article publié par Nova-Quantum
Vous aimez cet article? Partagez le !
M’intéressant aux technologies de créations de sites depuis de nombreuses années, j’édite aujourd’hui un blog afin de partager mes connaissances, notamment en CSS 2, l’utilisation future du CSS 3 et l’ergonomie Web.
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 5 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
15 mai 2009 09:08, par raskar kapak
Le css3 permet de mettre du texte en biais ??? c’est excellent ! Mais bon il va falloir attendre un certain temps comme tu le dis pour que les navigateurs puissent gérer le truc . Le pire va être d’attendre que les utilisateurs se mettent à jour et quand on pense qu’IE6 est encore utilisé , ça risque de prendre un temps non négligeable ! Va falloir concevoir des sites compatible IE6 , css2 et css3 ... aRGh ! très bon tuto en tout cas ! ça manque un peu les tutos de webdesign sur wks.
Répondre-
15 mai 2009 13:25, par Nova-Quantum
Merci pour ton commentaire !
En effet, le CSS3 ne sera pas pris en charge rapidement, surtout avec Ie6 dans la course...
Mais lorsque l’on regarde de plus près les statistiques des navigateurs utilisés sur http://www.w3schools.com/browsers/browsers_stats.asp, on voit qu’il perd beaucoup de terrain chaque mois, possible qu’il passe la barre des 5% d’ici peut...
Si Wonka est d’accord, je posterais une parti de mes tutoriels sur wks.fr, je pense que cela sera profitable à tous le monde.
D’ailleurs si vous avez des idées de sujets à traiter, ne vous gênez pas
Voir en ligne : CSS-astuce
Répondre-
18 mai 2009 09:11, par raskar kapak
Je pense que les 5 premiers tutos de cette page (http://www.css-astuce.net/category/design-complet/) ont quelque chose d’indispensable pour créer un site full css avec un bon design . Apres il manque peut être un tuto pour expliquer comment créer une maquette complexe sous photoshop , utiliser l’outil tranche et l’intégrer . Il est aussi important de savoir faire du site dynamique avec du contenu qui se recharge dynamiquement sans changer de page. ton site est très intéressant en tout cas ! J’espère que ton statut de rédacteur sur wks va t’inciter à écrire plus encore .
Voir en ligne : portfolio-rk
Répondre-
18 mai 2009 11:57, par Nova-Quantum
Merci pour tes encouragements
Les tutoriels pour photoshop ? Why not ? je vais y réfléchir, par contre je n’utilise pas trop l’outil tranche... Chacun ses habitudes
La grosse rétention que je peux avoir sur ce point est que le tuto finisse par être trop long, surtout si on part vers des design complexes.Pour ce qui est du contenu dynamique, Ajax est tout indiqué. J’ai commencé il y a peu les tutoriels sur le language Javascript, surtout sur Jquery. Je compte procéder de manière progressive, afin de ne pas trop en faire d’un seul coups, pour que tout le monde comprenne bien.
Voir en ligne : CSS-astuce
Répondre
-
-
-
-
15 juillet 2009 20:45, par Julien
Ca pourrait etre pas mal d’utiliser un plugin pour presenter ton code, avec coloration syntaxique.
Répondre
