Skygge på teksten

Der er jo altid den enkle, IE-only metode:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp

og en lidt mere besværlig måde, men virker i andre browsere (har dog kun testet det indtil videre i Firefox - sig til hvis IE viser tegn på problemmer. Sidder i Linux lige nu såå):
<span class="dropshadow"><span>Kast en skygge på det her</span><span class="skygge" style="left:-160px;top:5px;">Kast en skygge på det her</span></span>

<style type="text/css">
.dropshadow {
    position:relative;
    color:#000;
}

.dropshadow SPAN {
    position:relative;
    z-index:2;
    font-size:14px;
}
.dropshadow SPAN.skygge {
    color:#ddd;
    z-index:1;
}
</style>

jeg eksperimenterer lige, læg et svar

okay - men vent med at acceptere til vi har en samlet løsning.

Er det ikke bedre at udnytte en absolut positionering ?-)

<span class="dropshadow"><span>Kast en skygge på det her</span><span class="skygge">Kast en skygge på det her</span></span>

<style type="text/css">
.dropshadow {
    position:relative;
    color:#000;
}

.dropshadow SPAN {
    position:relative;
    z-index:2;
    font-size:14px;
}
.dropshadow SPAN.skygge {
    position:absolute;
    left:-2px;
    top:5px;
    color:#ddd;
    z-index:1;
}
</style>

tjo, den prøvede jeg også, men fik det resultat at teksten røg lidt for langt op - den kan selvfølgelig rettes og det er vel også lettere i længden.

Hvordan for langt op ?-)

-- denne simple sætter den jo simpelthen -2px til venstre og 5px under ?o]

hmm, det kan også være det bare var et enkeltstående tilfælde - for din virker fint nok. Den røg bare lidt ud fra siden da jeg prøvede før, men det var heller ikke på præcis samme måde

Hvis du har en standard fjernelse af IEs standard-margen, såeh, måske ?-)

Glem IEs ...

<ole>

Pricippet i en X-browser løsning kunne være noget à la:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0px;
}
.shadowedTxt {
    position: relative;
}
.shadowedTxt div {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 100;
}
.shadowedTxt div.shadowA {
    position: absolute;
    left: 1px;
    top: 1px;
    z-index: 3;
    filter: alpha(opacity=30);
    _moz_opacity: 0.3;
    opacity: 0.3;
}
.shadowedTxt div.shadowB {
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 2;
    filter: alpha(opacity=20);
    _moz_opacity: 0.2;
    opacity: 0.2
}
.shadowedTxt div.shadowC {
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: 1;
    filter: alpha(opacity=10);
    _moz_opacity: 0.1;
    opacity: 0.1
}
</style>
<script type="text/JavaScript">
var d=document;
function initShadows() {
    var aDivs, tmpHTML, s;
    aDivs = d.getElementsByTagName("DIV");
    for (i=0; i<aDivs.length; i++) {
        if (aDivs[i].className=="shadowedTxt") {
            tmpHTML = aDivs[i].innerHTML;
            s = "<div>" + tmpHTML + "</div>";
            s += "<div class=\"shadowA\">" + tmpHTML + "</div>";
            s += "<div class=\"shadowB\">" + tmpHTML + "</div>";
            s += "<div class=\"shadowC\">" + tmpHTML + "</div>";
            aDivs[i].innerHTML = s;
        }
    }
}
window.onload = initShadows;
</script>
</head>
<body>

<div class="shadowedTxt">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
    Phasellus condimentum, purus a ullamcorper mattis,<br>
    neque arcu condimentum augue, sed varius est dolor non lectus.
</div>

</body>
</html>

/mvh
</bole>

-- endnu en, som genbruger tidligere udviklede principper ...

*lol*

-- jeg mindes en tabel som ud fra samme principper fik en ganske flot skygge !-)

ole> en lille smutter: _moz_opacity: 0.3; skal være -moz-opacity: 0.3; ellers er resultatet selvfølgelig ganske ulæseligt (så meget drak jeg da ikke i går aftes....;-)

og selvfølgelig tilsvarende de andre steder med -moz-opacity