Shadow som på jaiku

rhuse · 2008-04-22, 01:03

Hur skapar man den där "shadowliknande" effekten som används runt alla boxar på t.ex. jaiku? Finns det någon smidig lösning?

Edit: Lyckades tydligen missa när jag högerklickade för att se om de använde sig av en bakgrundsbild. Så problemet är löst. Jaiku kör med en bakgrundsbilder.

elitasson · 2008-04-22, 09:27

Här är iaf hur jag hade gjort.

CSS:

Kod:

body {
	margin:0px;
	background-image:url(gfx/bg.gif);
	background-repeat:repeat-x;
	background-color:#F1F1F1;
}

div.main {
	position:absolute;
	top:60px;
	left:50%;
	margin-left:-355px;
	width:710px;
}

div.topBig {
	background-image:url(gfx/top_big.gif);
	background-repeat: no-repeat;
	width:611px;
	height:20px;
}

div.middleBig {
	background-image:url(gfx/middle_big.gif);
	background-repeat: repeat-y;
	width:611px;
}

div.bottomBig {
	background-image:url(gfx/bottom_big.gif);
	background-repeat: no-repeat;
	width:611px;
	height:20px;
}

div.text {
	padding:20px;
	width:600px;
}

Index:

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php print $title; ?></title>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-4" />
<meta name="description" content="<?php print $desc; ?>"></meta> 
<link rel="shortcut icon" href="favicon.ico" />
<link href="jaiku.css" type="text/css" rel="stylesheet" />

</head>

<body>

<div class="main">
	<div class="topBig">

	</div>
	<div class="middleBig">
 <div class="text">


	Your Conversation.
	Welcome to Jaiku!

  *
   Create your activity stream

   Post Jaikus, add icons, customize your design, share your Web feeds
  *
   Follow your friends

   Get their updates, see their presence, add comments
  *
   Get Jaiku on your phone

   Text Jaikus from any phone. Share your availability, location, and calendar from your smartphone
  *
   › Take the tour


 </div>
	</div>
	<div class="bottomBig">

	</div>

</div>



</body>
</html>

gfx-mappen:
http://data.fuskbugg.se/skalman01/------gfx.rar

Så du ser hur bilderna är upplaggda. Hoppas jag var till lite hjälp. Fråga om det är något du inte förstår.

EDIT: jaha, det var löst

Då hoppas jag att jag hjälper någon annan som läser denna tråden.

rhuse · 2008-04-22, 22:07

japp, löste det själv elitasson men jag funderade faktiskt på att skriva en liknande guide (om än inte lika utförlig) för andra som undrar samma sak. Så tack för att du gjorde det åt mig.

allstars · 2008-04-23, 12:56

dock borde man kunna lösa det på en enda bild, eller åtminstone två efter den markup de använder på jaiku. Markupen kan ev fixas också

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Shadow som på jaiku