Mise en page en CSS3

znk · octobre 2010

Salut à tous !

Quelqu'un est assez fort pour m'aider en CSS 3 ?
Ca serai pour mettre à la façon de l'image et sans l'image, la même mise en page.

Je m'explique, pour un client, je monte un site web avec template et PluXML. Tout fonctionne parfaitement, et j'essaye avec une div de faire ça :

Mais avec du CSS 3, un effet d'ombre aux bordures bas-droite et un grossisement du mot "Echo" sur une ligne et "des collines" sur la suivante (<br>) sans fantaisie sur le "o".

Merci !

PS: Eurostile est sa police, et un font payant ... Vous connaisez une police qui s'en rapproche et qui est libre ?

J'utilise le Gabarit 4 de Alsa Création, adapté par moi à l'HTML5 et à PluXML.

PS2: J'en profite pour annoncer que je travaille sur l'adaptation de plusieurs templates pour PluXML

znk · octobre 2010

Ce que j'ai fait pour l'instant :

Code HTML

<div id="entete">
		<h1>  <a title="l'Echo des Collines">l'Echo des Collines</a></h1>
		<p><strong>   Le mensuel de la <b>RIVE DROITE</b></strong></p>
	</div>

Code CSS:

/* Titres */
h1, h2, h3, h4, h5, h6 {
	margin: 1em 0 .5em 0; /* -> 6 */
}
h1, h2 {
	font-family: Arial, serif;
	font-weight: normal; /* -> 7 */
}
h1 {
	font-size: 3em; /* -> 8 */
	font-style: bold;
}
h2 {font-size: 1.8em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1em;}

/* En-tête */
#entete {
	width: 40%;
	padding: 20px 0;
	background: #000000;
        border-radius: 15px; 
        -webkit-border-radius: 15px; 
        -moz-border-radius: 15px; 
        -khtml-border-radius: 15px; 
        box-shadow: 1px 1px 12px #555;
        -webkit-box-shadow: 1px 1px 12px #555;
        -moz-box-shadow: 1px 1px 12px #555;
        -khtml-box-shadow: 1px 1px 12px #555;
}
#entete h1 {
	margin: 0;
}

super_g2 · octobre 2010

merci de nous avoir mis d'où tu pars, cela nous feras gagner du temps.
je vais regarder ça de suite

znk · octobre 2010

Merci Super g2

super_g2 · octobre 2010

bon j'ai essayé qqch :

<html>
<head>
<title>test</title>
<style>
/* Titres */
h1, h2, h3, h4, h5, h6 {
    margin: 1em 0 .5em 0; /* -> 6 */
}
h1, h2 {
    font-family: Arial, serif;
    font-weight: normal; /* -> 7 */
}
h1 {
    font-size: 3em; /* -> 8 */
    font-style: bold;
}
h2 {font-size: 1.8em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1em;}

/* En-tête */
#entete {
    width: 450px;
    padding: 0 0 20px 0;
    background: #00a850;
	border-radius: 15px; 
	-webkit-border-radius: 15px; 
	-moz-border-radius: 15px; 
	-khtml-border-radius: 15px; 
	box-shadow: 1px 1px 12px #555;
	-webkit-box-shadow: 1px 1px 12px #555;
	-moz-box-shadow: 1px 1px 12px #555;
	-khtml-box-shadow: 1px 1px 12px #555;
    text-align:center;
}
#entete a {
    text-decoration:none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.echo a{
    color:white;
    font-weight:bold;
    font-size:124px;
    margin:0;
}
.effect {
    display:inline;
    position:relative;
    letter-spacing:-5px;
    color:rgba(0,0,255,0.5);
}
.effect:after{
    content:"o";
    position:absolute; left:0; top:-5px;
    color:rgba(255,255,255,0.5);
}
.sous-echo {
    color:black;
    font-size:70px;
    margin: -85px 0 0 0;
}
.sous-echo a{
    color:black;
}

#sous-entete {
    width: 450px;
    margin: -10px 0 0 0;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:27px;
}
#sous-entete .rive {
    font-weight:bold;
}

</style>
</head>
<body>
<div id="entete">
        <p class="echo"><a href="#" title="l'Echo des Collines">l'Ech<span class="effect">o</span></a></p>
        <p class="sous-echo"><a href="#" title="l'Echo des Collines">des Collines</a></p>
</div>
<div id="sous-entete">
        <p>Le mensuel de la <span class="rive">RIVE DROITE</span></p>
</div>
</body>
</html>

résultat sous google chrome : echo.colline.png

je t'ai fait un petit style sur le "O", en css3.

sinon, pour la font, pas cherché.

znk · octobre 2010

Alors là Respect ... CSS 3 c'est super !
Merci beaucoup Super G2, je te remercie beaucoup !!

super_g2 · octobre 2010

de rien, perso je n'en resterai pas à ce résultat, mais bon, cela te servira de début.
et pense à mettre le lien une fois ton projet fini que je vois ce que tu en as fait

et pour ton info : en CSS3 : les radius comme tu l'avais fait, le petit style de surimpression sur le O (typé anaglyphe), et je pense que tout le reste est en réalité du css2.1

au fait : rive droite == cenon? car je suis à talence

znk · octobre 2010

Je mettrai l'url du site aboutit d'ici quelques jours pour voir le résultat.

super_g2 · octobre 2010

pour ta police, regarde par ici : http://code.google.com/webfonts?subset=latin
il suffit de choisir une police qui y ressemble et d'insérer le code adéquate dans ton header.
enfin, il faudra renseigner correctement ton fichier de style.css.

Mise en page en CSS3

Réponses