Se demo här

HTML

<div class="success">This is a Success block</div>
<div class="info">This is a Notification block</div>
<div class="warning">This is a Warning block</div>
<div class="error">This is a Error block</div>

CSS

/** CSS **/

.warning {
        -khtml-border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius:3px;
        text-align: center;
        font-weight:600;
        border:1px solid #E6DB55;
        margin:0 0 10px 0px;
        padding:10px;
        background: url(../images/warning.png) #FFFFE0 1% 50% no-repeat;
        }

.success {
        -khtml-border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius:3px;
        text-align: center;
        font-weight:600;
        border:1px solid #a9dc70;
        margin:0 0 10px 0px;
        padding:10px;
        background: url(../images/success.png) #e4fbcb 1% 50% no-repeat;}

.error {
        -khtml-border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius:3px;
        text-align: center;
        font-weight:600;
        border:1px solid #fdabae;
        margin:0 0 10px 0px;
        padding:10px;
        background: url(../images/error.png) #ffdfe0 1% 50% no-repeat;
        }

.info {
        -khtml-border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius:3px;
        text-align: center;
        font-weight:600;
        border:1px solid #bad9f4;
        margin:0 0 10px 0px;
        padding:10px;
        background: url(../images/info.png) #d5eafc 1% 50% no-repeat;
        }

Ladda ner ikoner

Detta innebär att när man bygger webbplatser måste man som designer nu ta med mer i beräkningarna än att bara följa rådande trender inom design och sökmotoroptimering – man måste också ta med i beräkningarna den breda skaran människor som kommer att besöka webbplatsen.

Design för olika kulturer

Studier har visat på att kulturer faktiskt påverkar hur olika människor tar in och bearbetar information, och detta har en fullföljande effekt för hur webbplatser bör designas för att tilltala publik med olika kulturella bakgrunder. Ta till exempel en titt på skillnaderna mellan McDonalds webbplats för Storbritannien och för Indien.

Den indiska webbplatsen använder mycket fler flashanimationer och bilder istället för text för länkar samt ser överlag mer ”interaktiv” ut. Den brittiska webbplatsen är färgglad men mer statisk eftersom detta i en västerlännings ögon ser mer ”professionellt” ut. Det är uppenbart att McDonalds har gjort en grundlig marknadsundersökning och upptäckt att detta är vad deras indiska respektive brittiska målgrupper håller utkik efter på en webbplats.

Detta pekar också på en allmän designregel som bör användas när man designar webbplatser för en kultur antingen med hög kontext eller låg kontext, till exempel Kina och Indien jämfört med USA eller Skandinavien. Kulturer med ”låg kontext” föredrar information presenterad på ett minimalistiskt och rättframt sätt, medan kulturer med ”hög kontext” föredrar information som presenteras med mer färger, bilder, interaktivitet och på ett förklarande sätt.

Färg

Färg är ett annat element inom design som man bör ägna extra uppmärksamhet när man riktar sig till olika kulturer, eftersom färgers kulturella konnotationer kan variera mycket, något som detta diagram visar. Till exempel associerar de flesta västerländska kulturer färgen röd med fara, passion och lust, medan man i Indien associerar den med renhet och i Kina med festligheter och god tur. På liknande sätt anses orange ofta vara en kreativ färg i väst, men i Egypten symboliserar den sorg. Om du vill ha en trygg medelväg har färgen blå visat sig vara den mest universellt acceptabla färgen.

CSS och Unicode

Bortom estetiken inom design och färgscheman finns det dock några konkreta saker som varje designer kan göra för att bygga en webbplats som kan färdas smidigt genom olika kulturer. Först och främst är det viktigt att använda rätt verktyg, till exempel genom att använda CSS som formateringsverktyg blir det lättare att ändra bilder och textspråk mellan olika sidor, eftersom man med CSS särskiljer design och innehåll och på så sätt slipper man göra om designen från grunden om man vill ändra språk på en sida.

På samma sätt är Unicode UTF-8 en gudasänd gåva för webbdesign på många olika språk eftersom teckenkodaren för varje tecken innefattar skrift på över 90 språk. Om du designar en webbplats på ett språk som inte innefattas av Unicode UTF-8 bör du kanske ta ett steg tillbaka och fråga dig själv om det faktiskt finns någon onlinepublik för detta språk.

Navigation

När det rör grundläggande navigation på en sida kan det vara en god idé att ta med i beräkningarna vad som händer om man byter från ett vänster-till-höger-språk som t.ex. engelska till ett höger-till-vänster-språk som t.ex. arabiska eller hebreiska.

Att hålla navigationen horisontell istället för vertikal gör att det blir mycket enklare att byta riktning och hålla sin design symetrisk så att man slipper flytta bilder och textrutor från en sida till en annan. Därtill ser horisontell navigation innovativ och kreativ ut, något som bestyrks av att många designföretag använder detta på sina webbplatser, som t.ex. Section Seven. Alternativt kan man passa in allt på en sida och hålla sin navigation enkel, som t.ex. på denna smakrika webbplats som designföretaget Hive Creative i Melbourne.

Om författaren: Ioana Mihailas, Lingo24

Ecoki

World of Merix Studio

Guerra Creativa

Work Awesome

Carsonified

Gap Medics

Mother Earth Brewing

The Vile Plutocrat

Ayaka Ito

Flourish

The pixel blog

Cloudia CMS

Sketchen

Worry Free Labs

84 Colors

Strip Turnhout

Brightkite

Mark Jardine

UX Booth

Abduzeedo

Behance

Rapidshare

Tutorial9

Digg

Tuts+

Applereviews

inkd

Outlaw Design Blog

Durrani Design

GoPlay

Foliostars

Plant With Purpos

Food Network

Change

Sony

Redbrick Health

Det här förslaget är nog det bästa i dagens läge. Som jag nämnde så stöder nästan alla nya webbläsare PNG (PNG24 i Photshop) som kan sparas som transparent i ditt grafik program. I detta fall så kan effekten vara elastisk. Det sista men det mest osäkra kortet är att använda nya CSS3 attribut som skapar denna effekt i den önskade div:en.

Relaterade guider och tips om transparenta bakgrunder

• PNG Hack för IE6
• En introduktion om Opacity and RGBA

Hur du skapar detta med CSS3. Notera att detta funkar inte i alla webbläsare.

#div {
	opacity: 0.6;
	}

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div>

Christine Galvin Design

Unique 3w

Alex Swanson

Votaw Precision Technologies

Hotel Prestige

24 Ways

Design Phunk

Fred Maya

Impact South Africa

Comicspack

/Webunder

lebloe

Fabio Carneiro

RedoPC

Lisa Moseley

Steg 1 – Skapa en bakgrunds bild i Adobe Photoshop

Först så skapar vi en ny bild i Photoshop som är 1021×115. Glöm inte att välja transparant bakgrund. Sedan behöver vi skapa en till bild som är 900×50. Den ska vi använda som mall för att veta vad 900px är på våran andra bild.

På den första bilden så tar vi och makerar ungefär 3/4 av bilden på längden som vi sedan fyller med en färg, i guiden så väljer vi en blå nyans. Vi använder även ‘Gardient Overlay’ för våran blå färg, dvs att vi använder två olika blå färger. En där uppe som är lite ljusare och en där nere som är lite mörkare. Men det är inget måste.

Sen så tar vi och skapar två vita linjer som är 1px stor som vi placerar uppe och nere på den rektangen vi just färlagt. Se bild nedan.

Nu så ska vi ta våran andra bild och göra helt vit, som vi sedan kopierar in till våran första bild. Notera att den blir placerad i mitten, så allt vi behöver göra är att dra ner den till kanten mot den blåa. Lägg gärna det vita lagret under det blåa lagret.

Vi använder svart bakgrundsfärg för att visa det vita. Sen ska vi göra våra hörn, som skapar 3D känslan. Utrymmet på sidan av den vita rekangen ska vi göra två trianglar, en på vardera sida.

Vi använder ‘Polygonal Lasso Tool’ verktyget till detta.

Vi drar en linje bredvid den vita kanten sedan vidare vid den blåa linjen sen snett imellan den vita och den blåa kanten vi just dragigt. Se bild nedan. Glömt inte att göra detta på båda sidorna, sedan kan du placera lagrena under både den vita och den blåa. Det blir lättare att färglägga triangeln.

Steg 2 – Används bild med css

När bilden slutligen är klar, så sparar vi den som png som vi ska använda med css. Nu kan vi skapa index.html och style.css. Glöm inte att länka in style.css till våran html fil. Nedan kan du hela stylesheeten via använder.

Öppna ett nytt css document och kopiera följande kod..

body{background:#555;}
#wrapper{margin:0 auto; width:1022px;}
#content{width:940px; background:#ece9e9;margin:18px 0px 0px 31px; float:left; height:500px;}
#content{color:#222222; padding:10px;}
#content h2{color:#222}
#bg{background:url('bgd2.png') no-repeat scroll 0 0; float:left; width: 1022px; height:115px;}
#bg h1{color:#fff;    font-size:20px;    font-family:Verdana; font-weight:normal; padding:10px;}

Sedan har vi HTML koden som ska in i ett nytt HTML document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hur man gör en 3D känsla i 2D av Fredrik Forsmo</title>
</head>

<body>

<div id="wrapper">
<div id="bg">
<h1>Rubrik</h1>
<div id="content">
<h2>Rubrik 2</h2>
<p>Din text här</p>
</div>
</div>
</div>

</body>
</html>

Sammanfattning

Visar hur man skapar en enkel bandrolls effekt i din webbdesign. Du kan även experimentera och göra olika typer av banderoller. Guiden är mest för att visa ett sätt att skapa just den här typen av effekt.

Position Absolute

Snook

Aarah Longneckerk

Acko

Burgerkingstudio

Bluedoorbaby

Yoast

Delicious Design Studio

From The Couch

Buildconference

CSS-Tricks

Samfrombelgium

PSD to WP

Mystery Tin

Gaya Design

Idag blir det Content slideshow, har inget bra ord på svenska får det. Bildkarusell kanske.. Slideshow är ett grymt bra sätt och ha som highlight, gör sidan mer intressant, besökaren får en lätt översyn vad som är populärt eller vad webbplatsen pushar på.

Relaterade guider hur man gör en slideshow

• Creating a Slick Auto-Playing Featured Content Slider
• Easy Slider 1.5 – The Easiest jQuery Plugin For Sliding Images and Content
• Animated JavaScript Slideshow
• Galleria

Kirdan

Gisele Jaquenod

Monster Isle

Rocket Fuel

Eco-Environments

Andrew Ackroyd

Jeff Miracola

Lionite

Envira Media Inc

Water Falcon

Kinetic Shadows

Moving Out

Gaya Design

Graphic Rating

Koko Digital

Mau Russo

Graphic Circus

Graphic Circus

Fieldrunners

Ninja-Support

Corvus Art