30
Dec

Skuggad ram med CSS och jQuery

Kategorier: CSS Javascript

I den här artikeln ska jag visa hur man på ett snyggt och relativt enkelt sätt kan lägga en skuggad ram runt valda element. Om man inte vill sitta och göra ramen i photoshop för varje element är det smidigt och lätt att göra det med hjälp av CSS och lite jQuery-javascript.

HTML-koden på exempelsidan borde inte skapa några större frågetecken. Det element som ska ha den skuggade ramen tilldelas klassen "shadow". Kom ihåg att du kan tilldela ett element flera olika klasser genom att separera klassnamnen med mellanslag.

Metoden för att skugga element använder sig av flera olika transparenta PNG-filer liggandes i div-element som positioneras absolut. För att undvika onödig HTML-kod för de webbklienter som inte använder javascript läggs HTML-koden för skuggningen in med just javascript. Har man inte javascript tillgängligt får man ingen skuggning.

CSS:en för skuggningen är inte särskilt svår eller knepig. En div för varje del av skuggan (övre vänstra hörnet, toppen, övre högra hörnet, vänster sida, höger sida, nedre vänstra hörnet, botten och nedre högra hörnet) placeras ut absolut. Div:en har en bredd och höjd som motsvarar PNG-filen, samt placerar ut den absolut i förhållande till elementet som ska skuggas. Själva bildfilen ligger som en bakgrund för att kunna repeteras där så behövs. Här är CSS-koden för övre vänstra hörnet (tlc = top left corner) som exempel:

div.shadow_tlc {

	position: absolute;

	background-image: url('shadow_tlc.png');

	width: 10px;

	height: 10px;

	top: -10px;

	left: -10px;

}

Eftersom elementet med klassen "shadow" ges en relativ positionering betyder det att skugg-divarna kommer att positioneras utefter detta. Genom att sätta top, left, bottom och right till olika värden puttas bilderna till rätt plats. Om du skulle vilja ändra storlek på skuggan är det bara att dels göra nya PNG-bilder samt ändra värdena för width, height och positionen på div-elementen så att de motsvarar de nya bilderna.

När CSS:en är färdig är det javascriptets tur. Jag använder mig av jQuery för att underlätta. Först skapar jag en funktion som initierar skuggorna så fort dokumentet är laddat.

Nu kommer en del som kan ses som något kontroversiell. Internet Explorer 6 och lägre versioner har uselt stöd för transparenta PNG-bilder. Det finns fixar men ingen av dem är riktigt bra. Jag väljer därför att kolla om webbläsaren är någon av dessa versioner, och om den är det hoppa över att skugga elementen. Det är upp till var och en att välja om man vill göra på detta sätt. Andra alternativ kan vara att implementera en PNG-fix eller att helt enkelt ignorera de besökare som trillar in med IE6 och lägre versioner (vilket inte borde vara särskilt många). Här är i alla fall koden för att kolla webbläsaren:

if(!(jQuery.browser.msie && parseInt(jQuery.browser.version) <= 6)) {

Nästa steg är enkelt. Första skapar vi en variabel där alla element som har klassen "shadow" hamnar. Efter detta lägger vi in HTML-koden för alla skugg-element på alla element i variabeln. Av utrymmesskäl har jag tyvärr varit tvungen att införa radbrytningar i koden vilket gör att den inte fungerar om du kopierar den nedifrån.

shadedObjects = $(".shadow");

shadedObjects.append('

   <div class="shadow_tlc"></div>

   <div class="shadow_top"></div>

   <div class="shadow_trc"></div>

   <div class="shadow_left"></div>

   <div class="shadow_right"></div>

   <div class="shadow_blc"></div>

   <div class="shadow_bottom"></div>

   <div class="shadow_brc"></div>

');

Nu är funktionen färdig. På en riktig sida är det dock att föredra att lägga CSS:en och javascriptet i separata filer och inkludera dessa i head-elementet. Jag har testat den med gott resultat i följande webbläsare: Internet Explorer 7, Firefox 3, Safari 3.1.1 (windows), Opera 9.52 samt Chrome 1.0.

Här hittar du exempelsidan med flera element med skuggade ramar, samt en länk till nedladdning av filerna.

TYCKTE DU OM ARTIKELN?

KOMMENTARER

#1. Skriven av mac3 den 22 Jan 2009

hejsan
jag har gjort samma sätt som du har gjort men jag behöver inte nån js för göra skuggade ramar.

det finns två sätt
första är T9 som betyder 9 celler i en tabell med 9 css klassar
det andra sättet är 9 div boxar med 9 css klassar

men tack ändå för tipset ^^

#2. Skriven av Stefan den 22 Jan 2009

Hej!
Nu var inte utmaningen att göra det utan JS, utan att göra en snygg lösning som inte slänger in massa onödig markup i källkoden som sökmotorer och andra klientprogram än vanliga webbläsare behöver traggla sig igenom.

Din metod fungerar säkert jättebra förutom att du får massa onödig markup i källkoden. Och hur anger du det dynamiskt på olika element? Det är lättare att bara ange klassen "shadow" på elementet än att sitta och lägga till alla ram-element för hand.

Skuggad ram med CSS och jQuery

TYCKTE DU OM ARTIKELN?

KOMMENTARER

SÖK BLAND ARTIKLAR

KATEGORIER

OM KLIENTSIDAN