Mise en page en CSS3

znkznk Member
dans Entraide
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 :

logo.jpg

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 :p

Réponses

  • znkznk Member
    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_g2super_g2 Member
    merci de nous avoir mis d'où tu pars, cela nous feras gagner du temps.
    je vais regarder ça de suite ;)
  • znkznk Member
    Merci Super g2
  • super_g2super_g2 Member
    octobre 2010 modifié
    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é.
  • znkznk Member
    Alors là Respect ... CSS 3 c'est super !
    Merci beaucoup Super G2, je te remercie beaucoup !!
  • super_g2super_g2 Member
    octobre 2010 modifié
    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 ;)
  • znkznk Member
    Je mettrai l'url du site aboutit d'ici quelques jours pour voir le résultat.
  • super_g2super_g2 Member
    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.
Connectez-vous ou Inscrivez-vous pour répondre.