Søg
Avatar billede cpccorp Juniormester
04. november 2004 - 23:14 Der er 13 kommentarer og
1 løsning

Skygge på teksten

jeg har en tekst som jeg gerne vil have skygge på, hvad gør jeg
Avatar billede skovenborg Nybegynder
04. november 2004 - 23:18 #1
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
Avatar billede skovenborg Nybegynder
04. november 2004 - 23:25 #2
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>
Avatar billede cpccorp Juniormester
04. november 2004 - 23:31 #3
jeg eksperimenterer lige, læg et svar
Avatar billede skovenborg Nybegynder
04. november 2004 - 23:40 #4
okay - men vent med at acceptere til vi har en samlet løsning.
Avatar billede roenving Novice
05. november 2004 - 00:14 #5
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>
Avatar billede skovenborg Nybegynder
05. november 2004 - 00:20 #6
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.
Avatar billede roenving Novice
05. november 2004 - 00:22 #7
Hvordan for langt op ?-)

-- denne simple sætter den jo simpelthen -2px til venstre og 5px under ?o]
Avatar billede skovenborg Nybegynder
05. november 2004 - 00:28 #8
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
Avatar billede roenving Novice
05. november 2004 - 00:33 #9
Hvis du har en standard fjernelse af IEs standard-margen, såeh, måske ?-)
Avatar billede roenving Novice
05. november 2004 - 00:33 #10
Glem IEs ...
Avatar billede olebole Juniormester
05. november 2004 - 01:10 #11
<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>
Avatar billede roenving Novice
05. november 2004 - 01:16 #12
-- endnu en, som genbruger tidligere udviklede principper ...

*lol*

-- jeg mindes en tabel som ud fra samme principper fik en ganske flot skygge !-)
Avatar billede mik789 Nybegynder
05. november 2004 - 07:57 #13
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....;-)
Avatar billede mik789 Nybegynder
05. november 2004 - 07:58 #14
og selvfølgelig tilsvarende de andre steder med -moz-opacity
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
IT-JOB
Seneste spørgsmål Seneste aktivitet
I dag 19:46 Skift fra Microsoft365 til Microsoft 2024 Af 1Dorte i Office & Kontorpakker
I går 16:51 Links m.m. virker ikke Af Kjeld Aage Christiansen i PC
I går 11:04 Outlookproblem Af g91 i E-mail programmer
I går 09:21 Firefox - Bøvl med idelig genbekræftelse af identitet Af andershl i Browsere
17/0815:14 Sætte billeder ind i google sheets ark ud fra elev nummer Af lurup i Excel
White papers
Flere white papers »