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 :

Berlingot simple

HTML et CSS de base

Commencez par créer un document HTML, dans le body, collez ce code pour le berlngot.

<div class="berlingot">
	<div class="inner">
 
		<h1>Noir</h1>
		<p>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.</p>
 
	</div>
</div>

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.

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.

En affinant cette technique et n'utilisant que des images de coins, vous pourrez avoir plus de souplesse.

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.

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.

Pour faire un bloc comme celui-ci, utilisez ce HTML

<div class="block">
	<div class="inner">
		<p>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.</p>
	</div>
</div>

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.

berlingot_texture.zip

ressources/html/berlingots.txt · Last modified: 2013/06/16 22:51 (external edit)
 
 
Creative Commons License Powered by PHP Valid XHTML 1.0 April