WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   CSS bakgrund (https://www.wn.se/forum/showthread.php?t=30976)

quickhelp 2008-08-06 14:53

Skulle vilja få till en sån här "skugga" i botten:

http://img410.imageshack.us/img410/9580/skuggair9.png

Hur gör man en sådan bild?
(Vill ha en mot en vit bakgrund)

Har försökt googla efter det, men inte hittat.
Vad kallas detta?

thorsell 2008-08-06 15:08

Ser ut som det är en bild längst ner med tillagd skugga på högerkanten..

allstars 2008-08-06 15:14

För mig ser det ut att vara en png med transparens som är lagd som en background i css med positionen 100% 100% (bottom right)

Kan vara gjord så som Thorsell beskriver dock, men tillvägagångssättet jag beskrev är mer "korrekt".

KarlRoos 2008-08-06 15:15

EDIT
Jag kodade ihop den här!

Kopiera så gott du vill ;)

quickhelp 2008-08-06 15:47

Citat:

Originally posted by KarlRoos@Aug 6 2008, 15:15
EDIT
Jag kodade ihop http://karlroos.se/examples/nice_block/

Kopiera så gott du vill ;)

Tack för den :)

Kan du kort beskriva hur du gjorde den?

allstars 2008-08-06 15:47

Kudos till dig Karl!!
Snyggt jobbat.

KarlRoos 2008-08-06 15:52

Citat:

Ursprungligen postat av quickhelp
Citat:

Originally posted by -KarlRoos@Aug 6 2008, 15:15
EDIT
Jag kodade ihop http://karlroos.se/examples/nice_block/
Kopiera så gott du vill



Tack för den
Kan du kort beskriva hur du gjorde den?

En div med 5px padding som innehåller den gråa bakgrunden, den har även en transparent PNG med skuggan (200 px bred och 5px hög) som flyter nere till höger (PSD fil för denna finns på länken).
I denna div finns det en div med vit bakgrund och 5px padding och en 5px röd kantlinje till höger.

Sedan för att skilja texten och ikonen har jag två divs som flyter till vänster, den ena (float_left) med 60px bredd så att ikonen får lite marginal (min ikon är 50x50px). Den andra (float_right) innehåller texten och flyter till vänster.

Struktur:
- .block
-- .content
---.float_left
---.float_right

;)
Citat:

Ursprungligen postat av allstars
Kudos till dig Karl
Snyggt jobbat.

Tack tack :)

allstars 2008-08-06 15:53

Cssen är i stort sett självförklarande.

Dock så har Karl gjort en div med 5px padding med grå bakgrund. Vad bilden som quickhelp länkar till inte förtäljer är nog att sidans bakgrund skall vara grå, vilket betyder att man kan lägga ihop .block och .content till en div och istället för padding ha margin uppe och nere.

[edit]Man kan även skippa div runt om img och lägga till style på img istället, så slipper man lite markup.
Detta förutsätter dock att det inte skall vara ngn bildtext under och att texten till höger får lov att flöda nedanförbilden. [/edit]

Men det är bara förslag!

KarlRoos 2008-08-06 15:55

Citat:

Originally posted by allstars@Aug 6 2008, 15:53
Cssen är i stort sett självförklarande.
Dock så har Karl gjort en div med 5px padding med grå bakgrund. Vad bilden som quickhelp länkar till inte förtäljer är nog att sidans bakgrund skall vara grå, vilket betyder att man kan lägga ihop .block och .content till en div och istället för padding ha margin uppe och nere.

Det stämmer ;)

(om det gråa är bakgrunden för hela sidan så blir det mycket snyggare med än ännu ljusare grå än den nuvarande)

allstars 2008-08-06 16:23

Om man tar karl excellenta exempel och tillämpar det jag föreslog ser det ut så här:
http://allstars.se/nice_blocks2/

Dock behöll jag .content för att det blev bättre så.

Syke 2008-08-06 16:34

Här kommer min fortsättning på Karl Roos variant (hoppas du inte misstycker KR):

http://klientsidan.se/dump/nice_block/index.html

Lite annan semantik i koden, och förhoppningsvis lite kortare kod. För enkelhetens skulle slängde jag in css:en i html-filen.

allstars 2008-08-06 16:44

Det var inte dumt det heller.

KarlRoos 2008-08-06 17:03

Citat:

Originally posted by Syke@Aug 6 2008, 16:34
Här kommer min fortsättning på Karl Roos variant (hoppas du inte misstycker KR):
Nej nej, det är bara bra när folk kan vidareutveckla till det bättre! :)
Fint att du gjorde det till en lista, väldigt praktiskt om man ska ha många!

Jag gjorde ju hela grejen på 5~10 minuter men ni verkade gilla den, kul!

quickhelp 2008-08-06 18:34

Tack för hjälpen :)
Hur gjorde du bilden i Photoshop?
Antar att det är några enkla steg?

(Är inte så bra på Photoshop...)

KarlRoos 2008-08-06 19:59

Citat:

Originally posted by quickhelp@Aug 6 2008, 18:34
Tack för hjälpen
Hur gjorde du bilden i Photoshop?
Antar att det är några enkla steg?
(Är inte så bra på Photoshop...)

http://karlroos.se/examples/nice_block/shadow.psd

Jag gjorde helt enkelt en bild; 200px bred och 5px hög. Sedan gjorde jag en form med "pen tool" som var lite rundad och flyttade denna precis ovanför arbetsytan. Sedan satte jag bara en drop shadow, ganska liten med rätt så mycket "spread". Exprimentera lite ;)

martine 2008-08-09 11:53

Citat:

Originally posted by KarlRoos@Aug 6 2008, 19:59
Jag gjorde helt enkelt en bild; 200px bred och 5px hög. Sedan gjorde jag en form med "pen tool" som var lite rundad och flyttade denna precis ovanför arbetsytan. Sedan satte jag bara en drop shadow, ganska liten med rätt så mycket "spread". Exprimentera lite ;)
En annan möjlighet är att göra ett lager med sidans bakgrundsfärg (alt + sudda) och lägga ett lager på med övergång (G) från grå till genomskinligt.


Alla tider är GMT +2. Klockan är nu 17:08.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson