bild med skuggbild

Jobbar med wordpress och temat (Karma) har inbyggda ramar till bilderna.
Nu vill jag lägga till en egen "ram"/skuggbild som ser ut som en skugga.

Ersätter jag koderna med de som finns eller att jag bara kopierar och döper om classerna så vill det sig inte ändå.

Min bild och de andra förinstallerade bilderna ligger i samma mapp, images/_global:
http://www.jerpadesign.com/gc/wp-content/themes/Karma/images/_global/type26.png

Så jag tänkte att då jag inte kommer använda detta så mycket, utan bara enbart vid någon bild då och då kan jag lika gärna skriva in det i inlägget under html-fliken, anv aldrig visuella fliken.

Men hur skriver jag?
Divar och style eller? Ska ena div:en ha skuggan och en annan div uppepå med bilden jag vill visa?

Sitter just nu och leker under denna adress:
http://www.jerpadesign.com/gc/testsida2/

Varför jiddra med kod (som kanske inte funkar i alla webbläsare) som dessutom WP kanske inte accepterar? Om du bara vill använda skuggan på någon enstaka bild då och då är det väl bättre att du fixar detta i Photoshop direkt.

Om du tänkt dig att köra med bilden http://www.jerpadesign.com/gc/wp-con...bal/type26.png
som skugga så har du problem i alla fall eftersom den är extremt stor och dessutom avsevärt bredare/högre än den synliga skuggan ger sken av.

Jag vill helst inte hålla på med photoshop då jag oftast är ute i fällt när jag bloggar.
Bilden i sig kan jag skala ner till 364x218 som är medium av de bilder jag laddar upp direkt ur mobilen.

De bildramar som nu genereras (bland annat den stora inför varje inlägg) ligger alla i en bild och beroende på storlek samt liggande/stående så flyttas den bilden runt. Annars skulle jag bara kunna ersätta den.
Visst skulle jag kunna pilla in min skuggbild i den stora bilden också, men då kan jag inte anv den storleken om jag nu skulle vilja det.

Så jag tänkte bara om man kunde på nåt vis ersätta eller göra en egen variant.

Jerpa skrev:

Jag vill helst inte hålla på med photoshop då jag oftast är ute i fällt när jag bloggar.
Bilden i sig kan jag skala ner till 364x218 som är medium av de bilder jag laddar upp direkt ur mobilen.

De bildramar som nu genereras (bland annat den stora inför varje inlägg) ligger alla i en bild och beroende på storlek samt liggande/stående så flyttas den bilden runt. Annars skulle jag bara kunna ersätta den.
Visst skulle jag kunna pilla in min skuggbild i den stora bilden också, men då kan jag inte anv den storleken om jag nu skulle vilja det.

Så jag tänkte bara om man kunde på nåt vis ersätta eller göra en egen variant.

Varför inte då bara skapa en class med box-shadow och ge de speciella bilderna? Visst, skuggan blir kanske inte lika tjusig som din hemmagjorda, men funkar galant i alla nyare webbläsare och det är klart på några minuter...

http://search.yippy.com/search?input-form=clusty-simple&v%3Asources=webplus-ns-aaf&v%3Aproject=clusty&query=css3+box-shadow

Lägger du dessutom in en border på 10-12 pixlar med t.ex. #fff så får du en snygg vit kant också...

Om css3 är ok så sätt en skugga, använd css för att skapa ett block till placera den i botten och kör en sugga på den. Kan se om jag kan fixa ett exempel när jag inte sitter påse mobilen

Om vi nu säger att jag väljer ett sätt, css eller css med bild (vet att ie är den som brukar krångla mest men det är skit samma). Om en webbläsare inte stöder en typ av skugga, uteblir den då men visar bilden ändå?

Jerpa skrev:

Om vi nu säger att jag väljer ett sätt, css eller css med bild (vet att ie är den som brukar krångla mest men det är skit samma). Om en webbläsare inte stöder en typ av skugga, uteblir den då men visar bilden ändå?

Nej, bilden visas ändå, utan effekten

demo: http://jsbin.com/oxexan/edit#javascript,html,live vet du få nog leka med alla värden där.

Har suttit och lekt vidare på det här.
Gick tillbaka till det jag provade i början dvs bara border o padding, det som jag egentligen inte ville ha. Men just nu anv jag:

.ram{
    width: 437px;
    height: 234px;
    background: #e3e1e1;
    border-top: 1px solid #9d9d9b;
    border-right: 1px solid #9d9d9b;
    border-bottom: 1px solid #343433;
    border-left: 1px solid #9d9d9b;
    margin-left: 59px;  
    padding: 6px;
}

En följdfråga på detta.
Går det på nåt vis att ha border padding border?
Hittade och provade med outline, men då lägger den ju sig utanför den befintliga bordern. dvs padding border border.
Varför jag undrar, så är det för då blir den snarlik den bildborder som ligger inbyggt i temat. Går det inte att fixa så gör inte det så mycket, utan var bara en fråga som poppade upp.

Menar du en marginal, eller flera border? Du kan ha flera skuggor (utan en blur) och ha olika färger på dom för att få flera ramar

Det går säkert att lösa, men är inte så haj på dessa skuggor, blur moz mm.
Men att man först har bilden, sen 1px svart kant, sen 6px grå padding och som avslutning 1px border som jag kan välja färg på, så som min kod ovan.

Vilka läsare är det krav på att det skall fungera?

1. Chrome - 35,71 %
2. Firefox - 31,75 %
3. IE - 13,49 %
4. Safari - 11,90 %
5. Android Browser - 3,17 %
6. Mozilla Compatible Agent - 2,38 %
7. Opera - 1,59 %
Säger statistiken, men jag kan inte få fram versioner.
Själv kör jag senaste av det mesta, och vissa säger att besökaren bör köra det senaste?!

Nu är det ju inte så många bilder det kommer handla om och besökarna är väl desamma. Jag gör det hela för att dels blogga om något seriöst (allt annat rinner ut i sanden ;) ), men även komma ihåg.

Så jag kan ju ändå prova lite kod.