Responsive, transparante box probleem

Status
Niet open voor verdere reacties.
J

johhnnyboy

Gebruiker
Lid geworden
18 nov 2007
Berichten
142
Hoi,

Ik ben bezig met de .css voor een responsive transparante box.
Nu heb ik de volgende code hiervoor reeds gemaakt:

HTML: 
.tm-top-block {
	margin:0px;
	padding: 0px;
	background: url("../../../images/module_stone_darkblue/module_stone_tl.png") 0 0 no-repeat,
				url("../../../images/module_stone_darkblue/module_stone_tr.png") 100% 0 no-repeat,							
				url("../../../images/module_stone_darkblue/module_stone_bl.png") 0 100% no-repeat,
				url("../../../images/module_stone_darkblue/module_stone_br.png") 100% 100% no-repeat,
				url("../../../images/module_stone_darkblue/module_stone_tm.png") 100% 0 repeat-x,	
				url("../../../images/module_stone_darkblue/module_stone_bm.png") 0 100% repeat-x,
				url("../../../images/module_stone_darkblue/module_stone_ml.png") 100% 0 repeat-y,	
				url("../../../images/module_stone_darkblue/module_stone_mr.png") 0 100% repeat-y,	
				url("../../../images/module_stone_darkblue/module_stone_b.png") 0 100% repeat-x;				
	box-shadow: none;
}

De .png's zijn hoeken of borders waarvan een deel van de .png een plaatje bevat. De rest erom heen is transparant.
Op zichzelf worden de plaatsjes nu goed weergegeven, maar heb ik de volgende problemen:

1) De .png "module_stone_tm.png" welke de middelste (m) is van de bovenkant (t) loopt aan de linker en rechterkant door onder "module_stone_tr.png" en "module_stone_tl.png"
2) Hetzelfde voor de onderkant
3) De .png "module_stone_ml.png" welke de middelste is aan de linkerkant (l) loopt aan de boven en onderkant door onder "module_stone_tr.png" en "module_stone_tl.png"
4) Hetzelfde voor de rechterkant
5) De background "module_stone_b.png" loopt aan alle kanten onder de randen door

Is hier een oplossing voor dat ik op plaatjes niveau een afstand kan ingeven zodat bijvoorbeeld "module_stone_tm.png" een paar pixels van links begint en een paar pixels van rechts stopt?
De background moet dan op alle vier de dimensies een afwijking hebben.
 
Plaatje

Naamloos-2.jpg

Even een plaatje toegevoegd. Niet 's werelds beste uitleg. Maar alles aan de buitenkant van die stenen richting het groen klopt dus niet. Naar links loopt de bar verder zeg maar.
 
De beste manier en de beste performance is ccs3.
Lukt dit niet, gebruik dan zo weinig mogelijk achtergrond afbeeldingen
Code: 
<div class="stone">
   <div class="stone-top"></div>
   <div class="stone-mid">
       (tekst, foto, enz.)
    </div>
   <div class="stone-bottom"></div>
</div>

.stone {
   /* width, margin */
}
.stone-top, .stone-mid, .stone-bottom {
  width: 100%;
  background-position: top left;
}
.stone-top { /* boven: 2xhoek en border-top */
  height: ...px;
  background-image: url('stone-top.jpg');
  background-repeat: no-repeat;
}
.stone-mid { /* midden: border-left/right, ertussen transparant */
  background-image: url('stone-mid.jpg');
  background-repeat: repeat-y;
}
.stone-bottom { /* onder: 2xhoek en border-bottom */
  height: ...px;
  background-image: url('stone-bottom.jpg');
  background-repeat: no-repeat;
}
Ik heb in het commentaar gezet hoe de afbeelding eruit moet zien.
Je kunt eventueel stone-top.jpg en stone-bottom.jpg op 1 plaatje zetten en dan met position de juiste kiezen.

Suc6. Have fun.
 
Laatst bewerkt:
Maar hoe voorkom ik met deze vorm dan dat 'stone-top.jpg' niet doorloopt onder de hoeken? 't Is wel de bedoeling dat 'stone-top.jpg' een breedte van bijv 100px ondersteunt, maar ook van 700px
 
Ik zag 'responsive' over het hoofd. Hieronder zou het mee moeten lukken
Code: 
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Foto met lijst</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="stone">
      <img src="image.png" alt="">
   </div>
</body>
</html>
en style.css
Code: 
.stone {
   width: 30%;
   margin: 70px auto 0 auto;
   background-image: url('image-background.png');
   background-repeat: no-repeat;
   background-position: top left;
}
.stone img {
   display: block;
   max-width: 100%;
   height: auto;
   border: 0;
}

image.jpg image-background.png

Het lukte niet om de transparantie te uploaden (images te groot). Dus wat fotobewerking is nodig.
Bij image de witte rand transparant maken en opslaan als png.
Bij image-background alles binnen de rand transparant maken en opslaan als png.

Suc6. Have fun.

*** aanvulling: je zou ook 'ns kunnen kijken wat je met background-size: 100% 100%; kunt doen.
Ondersteund vanaf IE9
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan