<-[[index]] ====== Berlingots ====== On va créer des berlingots, parce que c'est bien et c'est facile à fabriquer. Un berlingot, c'est une forme qui ressemble à ça : {{:ressources:html:berlingot_sample.gif|}} ===== Berlingot simple ===== ==== HTML et CSS de base ==== Commencez par créer un document HTML, dans le ''body'', collez ce code pour le berlngot.

Noir

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Dans le css du document (balises style) ajoutez ceci, ça met le texte en blanc sur fond noir dans des berlingots de 450px de large. .berlingot{ width:450px; color:#fff; background-color:#000; } .inner{ } ==== Ajout des backgrounds ==== Voici deux backgrounds qui font eux-aussi 450px de large. La technique c'est d'en mettre un en haut et un en bas. Le premier se met au dessus, sur l'objet .berlingot, le deuxième se met sur l'objet inner en bas. Si vous êtes perdu, recherchez les propriétés de **background**. {{:ressources:html:berlingot_450.zip|}} ==== Finitions ==== Jouez avec les margin, les paddings et les typos pour que ce soit un peu plus joli. ===== Berlingot souple ===== ==== En noir ==== Avec cette méthode, on ne peut faire que des berlingots de 450 px de large. Ce serait plus facile de pouvoir créer des berlingots de largeur différente. {{:ressources:html:berlingot_multi.png|}} En affinant cette technique et n'utilisant que des images de coins, vous pourrez avoir plus de souplesse. {{:ressources:html:berlingot_coins.zip|}} ==== En rouge ==== Il est possible que le rouge contenu dans l'image ne corresponde pas au rouge du css dans le navigateur codé en #c00 à cause des profils de couleurs et des différentes gestions de couleurs sur mac, pc, linux, ps3, wii, ati, nvidia, minitel, etc. Bref il est plus malin de jouer avec la transparence. {{:ressources:html:berlingot_coins_transpared.zip|}} ===== Berlingot en texture ===== Cette technique sert notamment à créer des éléments texturés, des blocs qui utilisent des images comme habillage. {{:ressources:html:berlingot_texture.png?700|}} Pour faire un bloc comme celui-ci, utilisez ce HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi utm.

et pour le CSS body{ background-image:url('images/bg_body.jpg'); background-position:center top; } .block{ width:940px; background-color:#f0f0f0; background-image:url('images/bg_footer_top.gif'); background-repeat:no-repeat; background-position:top left; margin:30px; } .inner{ background-image:url('images/bg_footer_top.gif'); background-repeat:no-repeat; background-position:bottom left; padding:20px; color:#989898; font-family:Helvetica,Arial,Verdana,sans-serif; } Il ne manque plus que les deux images, une pour le fond de body et une pour le fond du bloc. {{:ressources:html:berlingot_texture.zip|}}