28172 sujets

CSS et mise en forme, CSS3

[Résolu] Bordure middle sur un titre possible?

Pages :
(reprise du message précédent)

gc-nomade a écrit :

code test avec une tite pointe de css3


Ah on peut utiliser du CSS3 ? Smiley lol 


<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8" />
	<title>Test</title>
	<style type="text/css">
	h1 {
	padding: 0;
	margin: 0;
	color: #fff;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(49.4%, #000000), color-stop(49.5%, #ffffff), color-stop(50.5%, #ffffff), color-stop(50.6%, #000000), color-stop(100%, #000000));
	background: -moz-linear-gradient(top, #000000 0%, #000000 49.4%, #ffffff 49.5%, #ffffff 50.5%, #000000 50.6%, #000000 100%);
	background: -o-linear-gradient(top, #000000 0%, #000000 49.4%, #ffffff 49.5%, #ffffff 50.5%, #000000 50.6%, #000000 100%);
	}

	h1 span {
	padding: 0 15px;
	background: #000;
	}
	</style>
</head>

<body>
	<h1><span>Mon titre</span></h1>
</body>
</html>

Modifié par jb_gfx (13 Jul 2011 - 17:55)
Blogger a écrit :

je préfère utiliser une image de fond.


Tu as raison, c'est bien plus propre (moins bidouille).
Modifié par jb_gfx (13 Jul 2011 - 17:58)
Ben finalement je préfère utiliser un border, ça évite de charger une image en plus...don là on arrive dans un gros détails...^^

Sinon cool pour le CSS3, malheureusement impossible de l'appliqué pour le moment Smiley smile
jb_gfx a écrit :


Ah on peut utiliser du CSS3 ? Smiley lol 


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta charset=utf-8&quot; /&gt;
	&lt;title&gt;Test&lt;/title&gt;
	&lt;style type=&quot;text/css&quot;&gt;
	h1 {
	padding: 0;
	margin: 0;
	color: #fff;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(49.4%, #000000), color-stop(49.5%, #ffffff), color-stop(50.5%, #ffffff), color-stop(50.6%, #000000), color-stop(100%, #000000));
	background: -moz-linear-gradient(top, #000000 0%, #000000 49.4%, #ffffff 49.5%, #ffffff 50.5%, #000000 50.6%, #000000 100%);
	background: -o-linear-gradient(top, #000000 0%, #000000 49.4%, #ffffff 49.5%, #ffffff 50.5%, #000000 50.6%, #000000 100%);
	}

	h1 span {
	padding: 0 15px;
	background: #000;
	}
	&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
	&lt;h1&gt;&lt;span&gt;Mon titre&lt;/span&gt;&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;


Hahaha tu gère Smiley lol
jb_gfx a écrit :


Tu as raison, c'est bien plus propre (moins bidouille).


surtout qu'un petit carré d'un pixel, ça mange pas de pain ...
Blogger a écrit :
Ben finalement je préfère utiliser un border, ça évite de charger une image en plus...don là on arrive dans un gros détails...^^

Sinon cool pour le CSS3, malheureusement impossible de l'appliqué pour le moment Smiley smile


Alors en CSS 2.x tu peux inclure directement les données de ton image encodées en base64 dans ta feuille de style, ce qui évite de charger un fichier supplémentaire. Ça fonctionne depuis IE8 et sur tous les navigateurs modernes et c'est moins bidouille que le border machin. Et au pire si tu veux le même affichage dans IE7 tu peux charger une image externe uniquement pour ce navigateur avec les commentaires conditionnels.


<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8" />
	<title>Test</title>
	<style type="text/css">
	h1 {
	padding: 0;
	margin: 0;
	height: 100px;
	line-height: 100px;
	text-align: center;
	color: #fff;
	background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAMAAACuX0YVAAAABlBMVEVZWVkAAAAN4A1iAAAADElEQVQI12NgYGAAAAAEAAEnNCcKAAAAAElFTkSuQmCC) 0 center repeat-x;
	}

	h1 span {
	padding: 0 15px;
	background: #000;
	}
	</style>
</head>

<body>
	<h1><span>Mon titre</span></h1>
</body>
</html>

Modifié par jb_gfx (13 Jul 2011 - 18:40)
jb_gfx a écrit :

Ah on peut utiliser du CSS3 ? Smiley lol


<hs>je vois que tu as relevé le coté "clin d'oeil" au nouvel intitulé de la section du forum.

Je n’adhère pas trop encore au background radiant avec les multiples syntaxes accepté possible ou non selon le navigateur , Les fichiers SVG auraient ma préférence a terme, comme je préfère font-face aux autres techniques, ... sans pour autant dénigré les autres: à chaque situation et contrainte, la méthode qui va bien . </hs>

Le border-machin+ line-height+ etc ... n'est pas bidouille, cela demande un peu de réflexion et compréhension des effets de style parfois légèrement différent d'un nav a l'autre.
C'est sur que ça ne se jette pas dans la feuille de comme un simple background qui reste néanmoins la façon la plus simple et solide de faire.

On peut aussi se servir de http://dummyimage.com/ pour ce genre de petite image (pour l'alternative IE7 et moins par exemple : http://dummyimage.com/1x1/000/000.jpg )

++
Modifié par gc-nomade (13 Jul 2011 - 18:54)
gc-nomade : selon le cas, pour les gradients j'utilise la syntaxe multiple et je sert du SVG pour IE9. C'est quand même mieux pour les perfs d'avoir les dégradés directement dans la feuille de styles.
Pages :
Sujet clos
Aller à