Jag har gjort en meny, där länkarna ligger i en lista. Beställaren av sidan vill att texten i menyn skall ha en skuggning. Jag vet att man kan fixa det genom att man låter menyn vara en bild, men eftersom det inte är direkt användavänligt med imagemaps så vill jag inte ha en navigeringsbild. Har sökt runt lite på nätet om man kan göra någon typ av skuggning med hjälp av CSS, hittat några lösningar men alla inkluderar att man ska använda sig av bilder.
Går det att utan bilder fixa en skuddning på texten i CSS?
Jag förstog din fråga som att det var själva TEXTEN som skulle ha dropshadow och inte rutorna?! Eller har jag fel? Är det texten så hittade jag en javascriptbaserad variant här: http://kryogenix.org/code/browser/aqdropshadow/
Tack för detta tips! Ser ut som om man ska skriva in i CSS mallen vad det är för ord som skall skuggas...? Har du kanske en lösning på hur man gör om det är flera ord som skall skuggas?
Jag förstog din fråga som att det var själva TEXTEN som skulle ha dropshadow och inte rutorna?! Eller har jag fel? Är det texten så hittade jag en javascriptbaserad variant här: http://kryogenix.org/code/browser/aqdropshadow/
Tack för detta tips! Provade detta med en gång men javascriptet bara laddade i en hel evighet... kort sagt; jag fick det inte att fungera :/
Tack för detta tips! Provade detta med en gång men javascriptet bara laddade i en hel evighet... kort sagt; jag fick det inte att fungera :/
Ajdå. Dessutom är det ganska fult :) Kan inte du som webexpert helt enkelt avråda din kund från dropshadow-kravet på texten med hänvisning till tidigt 90-tal ;)
Hmm, du skulle kunna göra en ful-lösning där du gör om idna där du ska ha skugga till classer. Sedan duplicerar texten som står i menyn i den taggens title-element och hämtar upp den med hjälp av attr(title). Det är nog den bästa lösning jag kan komma på. Exempel:
.shadow {
/* needed for Internet explorer */
height: 2em;
filter: Shadow(Color=#666666,
Direction=135,
Strength=5);
/* Needed for Gecko */
line-height: 2em;
white-space: nowrap;
}
/*
* used by browsers which know about
* :before to create the shadow
*/
.shadow:before {
display: block;
margin: 0 0 -2.12em 0.15em;
padding: 0;
color: #666666;
}
.shad_text:before {
content: attr(title);
}
/*\*/
html*.shadow {
[color:red;/* required by Safari
* so that [] is correctly
* begun. associated with
* the property, yet hiding
* it. Seen by IE6 */
/*
* seen by IE6 and Safari, but hidden
* from Gecko
*/
text-shadow: #666666 5px 5px 5px;
]color:auto; /* resets color for IE6 */
}/**/
/*
* end hack using dummy attribute selector
* for IE5 mac
*/
.dummyend[id]{clear: both;}
/*\*/
html*.shadow:before {
[color:red;/* required by Safari.
seen by IE6 */
/*
* seen by IE6 and Safari, but hidden
* from Gecko
*/
display: none;
]color:auto; /* resets color for IE6 */
}/**/
/*
* end hack using dummy attribute selector
* for IE5 mac
*/
.dummyend[id]{clear: both;}
Det underlättar ivf om du skriver ut det hela via serverside-kod...du slipper generera texten på två helt skilda ställen nämligen. :)
