JeuWeb - Crée ton jeu par navigateur
Design par cadre de div ou TD - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Design par cadre de div ou TD (/showthread.php?tid=6765)

Pages : 1 2

RE: Design par cadre de div ou TD - starmindfr - 02-05-2013

(03-04-2013, 11:45 AM)Harparine a écrit : Salut, il faut effectivement plusieurs images (pour les coins aussi).
Tu peux le faire à l'ancienne, avec des div imbriquées transparentes contenant chacune des images répétées en background. Ca passe partout mais c'est lourd et ça n'a aucun sens dans ton code HTML. Exemple :



Sinon, il y a (beaucoup) plus élégant en CSS3 :

Code :
<div class="general-document">
Contenu
</div>



.general-document {

	background-color: #f5f6f6;

	background: 

		url("../img/design/infos_general_head_right.png") no-repeat top right,

		url("../img/design/infos_general_head_left.png") no-repeat top left,

		url("../img/design/infos_general_foot_right.png") no-repeat bottom right,	

		url("../img/design/infos_general_foot_left.png") no-repeat bottom left,

		url("../img/design/infos_general_body_right.png") repeat-y top right,

		url("../img/design/infos_general_body_left.png") repeat-y top left,

		url("../img/design/infos_general_head_back.png") repeat-x top left,

		url("../img/design/infos_general_foot_back.png") repeat-x bottom left,

		#f5f6f6;

	border: none;

	padding: 40px;

	margin: 0px;

	webkit-box-shadow: none;

		-moz-box-shadow: none;

			box-shadow: none;

	-webkit-border-radius: 0px;

		-moz-border-radius: 0px;

			border-radius: 0px; 

}


Bonjour

Merci j'ai donc adapter le code ci dessus, ca marche bien par contre il me manque surement une petite astuce :

L’intérieur de la boite n'est pas un fond unis mais plutôt semi transparent, et si je met un fond non transparent sur mes angles, ca cache bien les extrémités des cadres, mais ca déborde sur le fond transparent, a l'inverse si je laisse un fond transparent sur les angles, il est possible de voir le chevauchement des extrémités.

Une astuce pour ne pas faire aller le repeat sur 100% ou autre idée ?

Voila l'exemple sans font transparent :

[Image: test1.png]

RE: Design par cadre de div ou TD - @lucard - 09-06-2014

essaye d'utliser le border-image
 div{border-image: url(border.png) 20 20 round;}/*'round' pour repeter, 'stretch' pour etirer*/
en revanche si tu as un background-color, alors tu le veras sous "l'angle" transparent.
dans ce cas utilise border-radius pour limiter la vu du background.

petit exemple vite-fait :
http://codepen.io/anon/pen/HilvA

RE: Design par cadre de div ou TD - Harparine - 09-06-2014

Ou alors tu vires la transparence de tes images de fond mais c'est un peu plus old-school Smile