Block avec bordure complete en CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Block avec bordure complete en CSS

gatsu35

Blablaté par Harko

Yo les moules [:ohello]
Juste pour le fun ce soir je me suis amusé à faire un block avec une bordure tout autour.
bien evidement il y a une jolie pyramide de div (6 divs) dans le bouzin.
On peut reduire le code à 5 div, <div class="t"> devenant le conteneur principal, mais pour plus de lisibilité, je laisse la bête comme ça.
Mais nous sommes bien d'accord qu'un truc comme ça c'est à utiliser avec précaution.
et puis c'est juste pour l'effet de style.

http://gatsu.ftp.free.fr/html/bord [...] ersV2.html

Pour voir les images utilisées c'est ici
http://gatsu.ftp.free.fr/html/borders/
En gros je voudrais vos avis sur ma façon d'opérer.

J'ai utilisé un doctype sans URI, et je vais voir ce que ça donne avec d'autres doctype.
les gens qui ont safari, s'ils peuvent envoyer une capture d'écran ça serait gentil
edit : ça fonctionne nickel sous safari, firefosque, IE, operette [:kbchris]

la technique repose essentiellement sur les images.
je part du haut, puis dans le sens des aiguilles d'une montre je met un background à chaque div interne.
puis sur le dernier coin, je rajoute un background sur .ctn pour cacher le coin miséreux.
PS: J'ai la flème de décrire comment ça fonctionne [:petrus75]

Il y a une seule limitation, c'est si les coins arrondis de votre blocs sont transparents. Ca laisse passer les défaut engendrés par la technique. Mais bon, quand on veut quelque chose, il faut bien faire des concessions d'un autre coté

le code pour ceux qui veulent comprendre :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title></title>
    
   <style type="text/css">
      .t { background:url(rondtop.png) no-repeat left top;}
      .r { background:url(rondright.png) no-repeat right top;}
      .b { background:url(rondbottom.png) no-repeat right bottom;}
      .l { background:url(rondleft.png) no-repeat left top ;}
      .ctn {background:url(rondlittlebrcorner.png) no-repeat bottom left ; padding:30px;}
        
   </style>
</head>

<body>

<div id="block">
   <div class="t"><div class="r"><div class="b"><div class="l">
      <div class="ctn">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Phasellus ante elit, nonummy quis, mattis vel, placerat  
consectetuer, metus. Mauris consectetuer iaculis lectus.
 Phasellus elit metus, accumsan id, elementum ut,
      </div>
   </div></div></div></div>
</div>

</body>
</html>

Message édité par gatsu35 le 20-04-2006 à 00:10:53

Publicité

xtof_83

Freeride Spirit

Venant de là: http://www.snugtech.com/safaritest/

ç donne :
http://87.3.30.216/safaritest/1145481667-full.png

Sinon sympa et subtil, mieux que ce que j'avais fait il y a quelques jours pour un mec passant par là

EDIT: Mais c'est un peu triché :ange:

Message cité 1 fois
Message édité par xtof_83 le 19-04-2006 à 23:25:56

olivthill

Ca passe très bien avec mon environnement presque tout nouveau qui est I.E. 5.5 sous AOL sur Windows Millennium.
Mais comme le fond est blanc, on ne se rend pas compte si la bordure est transparente ou non.
Le code est simple et élégant. Bravo !

gatsu35

Blablaté par Harko

en fait je joue sur un truc tout con
la superposition des couches mais seulement sur un coté à chaque fois.
suffit de regarder la gueule des 5 images utilisés.

A la fin en fait on se retrouve avec un coin qui foire malheureusement, du coup il suffit de lui rajouter un coin tout connement.

Message cité 1 fois

gatsu35

Blablaté par Harko

la bordure est transparente. mais comme il y a un antialiasing sur la bordure, je ne peux pas forcément conserver la transparence que je souhaitait

Message édité par gatsu35 le 19-04-2006 à 23:30:16

xtof_83

Freeride Spirit

gatsu35 a écrit :

Mais imagine le gars à du 2000 je sais pas combien en résolution ....

Mais ouais au début, j'arrivais à choper que le coin en plus, donc je comprenais pas la manip...ensuite j'ai tout m'est apparu plus clair.

Message cité 1 fois

gatsu35

Blablaté par Harko

xtof_83 a écrit :

Comment ça triché [:petrus dei]
mais pas du tout, c'est une technique comme toutes les autres, sauf que celle-ci est compliant, et n'entraine pas des problèmes sur tous les navigateurs

gatsu35

Blablaté par Harko

xtof_83 a écrit :

et puis des images en 2000x30 c'est pas enorme je pense [:petrus75]
mais on peut aussi les faire en 5000 comme ça on est sur de ne pas avoir de problème

m'enfin c'est juste pour l'effet de style, et je trouve l'effet plutôt bon.

Maintenant, ce que je recherche c'est avant tout des critiques, les problèmes que ça peut engendrer et les emmerdes que ça procure, aussi bien pour le dev que pour le client

Message cité 1 fois

xtof_83

Freeride Spirit

gatsu35 a écrit :

Iep tu as raison, car comme on le sait tous, ce truc est anti sémantique, donc on est plus à sa près.

Enfin là, la limitation de div, et d'ajustements permet de s'assurer de la stabilité du truc....

gatsu35

Blablaté par Harko

le truc est très stable, et très semantiquement propre comparé à ce qu'on voit la plupart du temps [:petrus75] .
Mais bon c'est pas moi qui irait utiliser ça dans un site

Message cité 1 fois

Publicité

xtof_83

Freeride Spirit

gatsu35 a écrit :

le truc est très stable, et très semantiquement propre comparé à ce qu'on voit la plupart du temps [:petrus75] .
Mais bon c'est pas moi qui irait utiliser ça dans un site

Ils doivent pas implémenter cela dans les spécification CSS à venir ?

Message cité 1 fois

gatsu35

Blablaté par Harko

xtof_83 a écrit :

Ils doivent pas implémenter cela dans les spécification CSS à venir ?

les multiples backgrounds dans un block, ainsi que les bordures avec images.
mais le temps que les navigateurs qui utilisent cela sortent et soient courament utilisés. On a encore beaucoup de chemin à faire

Message cité 1 fois

xtof_83

Freeride Spirit

gatsu35 a écrit :

Ouais surtout qu'on s'en passe un peu

Mais bon, ce serait utile dans le sens où tout les designs possibles doivent être accessible (simplement)...

Bon moi :sleep: XML me pique les yeux... On verra demain ce que pensent les autres.

FORUM HardWare.fr

Programmation

HTML/CSS

Block avec bordure complete en CSS

Sujets relatifs
[CSS][HTML] rendre le Lien active avec iframe	IE déconne avec mon CSS
IDE Xhtml / CSS complet ?	[CSS] Quel programme gratuit utiliser ? up: Apercu CSS ?
[PHP][GD][Résolu] Création de bordure en fondu	CSS et impression de tableau scrollé.
[MySql][resolu] Reinitialisation complete	bordure juste pour qq cases d'un tableau
[HTML/CSS/Javascript] Select et onchange	[HTML/CSS/Javascript] "popup" dans une page
Plus de sujets relatifs à : Block avec bordure complete en CSS

Page générée en 0.052 secondes