text shadow

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

text shadow

Δημοσίευση από xmavidis » 20 Μαρ 2005 12:52

Πώς μπορώ να βάλω σκιά στα γράμματα μου;
Χρησιμοποιώ το attribute text-shadow στο css μου αλλά δε γίνεται τίποτα.
Πώς μπορώ να το κάνω;
I want to know God’s thoughts; the rest are details.
Albert Einstein


Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

text shadow

Δημοσίευση από geraki » 20 Μαρ 2005 13:07

http://www.blooberry.com/indexdot/css/s ... y/text.htm

Δεν υποστηρίζεται από κανένα browser.
Εικόνα ← Αυτό το έκλεψα απ'τον Eneme.

Άβαταρ μέλους
milianos
Δημοσιεύσεις: 269
Εγγραφή: 11 Νοέμ 2004 01:39
Τοποθεσία: schwabenland
Επικοινωνία:

text shadow

Δημοσίευση από milianos » 20 Μαρ 2005 15:15

Η εντολή text-shadow ανήκει στην Version 2.0 του CSS Style-Sheets και οπως έγραψε και το geraki δεν υποστηρίζεται, προς το παρόν, απο κανένα browser.
Εαν θέλεις να βάλης σκιά π.χ σε μιά επικεφαλίδα, μπορείς να χρησιμοποιήσης φίλτρα δηλ.την ιδιότητα css filter:Shadow().
Αυτα τα φίλτρα προέρχονται απο την επεξεργασία φωτογραφιών η άλλων στοιχείων αλλα ειναι δυνατόν να εφαρμοστούν κάποια οπτικά εφφέ με επιτυχία και στις γραμματοσειρές.
Ενα παράδειγμα αλλά μόνο για τον Microsoft IE:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253">
<title>filter:Shadow()</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div style="width:100%; font-size:38pt; color:#d9d900; filter:Shadow(color=#444444, direction=45); height:63px">
<p align="center">Επικεφαλίδα με σκιά</p>
</div>
</body>
</html>
Η παράμετρος direction παίρνει τις τιμές: 0, 45, 90, 135, 180, 225, 270, 315

0 σημαίνει: η σκιά δείχνει προς τα επάνω
45 σημαίνει: η σκιά δείχνει προς επάνω δεξιά
90 σημαίνει: η σκιά δείχνει προς τα δεξιά
135 σημαίνει: η σκιά δείχνει προς κάτω δεξιά
180 σημαίνει: η σκιά δείχνει προς τα κάτω
225 σημαίνει: η σκιά δείχνει προς κάτω αριστερά
270 σημαίνει: η σκιά δείχνει προς τα αριστερά
315 σημαίνει: η σκιά δείχνει προς επάνω αριστερά

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

text shadow

Δημοσίευση από xmavidis » 20 Μαρ 2005 18:07

Δε θα με ενδιέφερε κάτι που παίζει μόνο στον ie. Θα δοκιμάσω τα υπόλοιπα. :)
I want to know God’s thoughts; the rest are details.
Albert Einstein

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

text shadow

Δημοσίευση από skeftomilos » 21 Μαρ 2005 05:55

Είδα τη λύση που προτείνει ο EneMe και είναι αρκετά αποτελεσματική. Υπάρχει το πρόβλημα ότι με position:absolute τα elements πέφτουν το ένα πάνω στο άλλο, και χρειάζονται πολλά <br> ενδιάμεσα. Επιπλέον εάν ο χρήστη μειώσει το πλάτος του browser και γίνει wrapping είναι πιθανό (αν και οριακό) να γίνει διαφορετικό wrapping στα δύο όμοια κείμενα που προκαλούν το shadow effect. Άλλο πρόβλημα είναι το επαναλαμβανόμενο κείμενο σε δύο ή τρία σημεία που εγείρει θέματα maintenability. Ίσως αξίζει η χρήση ενός server script αν γίνεται εκτεταμένη χρήση του effect σε πολλά σημεία και σελίδες. Μου δημιουργήθηκε η απορία αν μπορεί να γίνει και με client side scripting και πράγματι γίνεται. Μία μικρή ρουτίνα στο head και ο html κώδικας απλοποιήται πολύ:

Κώδικας: Επιλογή όλων

<html>
  <head>
    <style>
      body &#123; background-color&#58; #BCD; font-family&#58;Verdana; font-size&#58;12px &#125;
      div.emboss &#123; position&#58;relative; white-space&#58; nowrap &#125;
      div.emboss &#123; font-family&#58; Tahoma; font-size&#58;30px; font-weight&#58; bold &#125;
      div.emboss-light &#123; position&#58;absolute; top&#58;-2; left&#58;-2; color&#58;white &#125;
      div.emboss-shade &#123; position&#58;absolute; top&#58;+2; left&#58;+2; color&#58;black &#125;
      div.emboss-body &#123; position&#58;absolute; top&#58;0; left&#58;0; color&#58;red &#125;
    </style>
    <script>
      function emboss&#40;&#41; &#123;
        var divs = document.getElementsByTagName&#40;"div"&#41;
        for&#40;var i = 0; i < divs.length; i++&#41; &#123;
          var div = divs&#91;i&#93;
          if&#40;div.className == "emboss"&#41; &#123;
            var html = div.innerHTML
            div.innerHTML = "&nbsp;"
            div.appendChildSpecial = function&#40;className, html&#41; &#123;
              var child = document.createElement&#40;"div"&#41;
              child.className = className
              child.innerHTML = html
              this.appendChild&#40;child&#41;
            &#125;
            div.appendChildSpecial&#40;"emboss-light", html&#41;
            div.appendChildSpecial&#40;"emboss-shade", html&#41;
            div.appendChildSpecial&#40;"emboss-body", html&#41;
          &#125;
        &#125;
      &#125;
      window.onload = emboss
    </script>
  </head>
  <body>
    <div class="emboss">Τα σουξέ της Καλομοίρας</div>
    <ul>
      <li>Οι πειρασμοί της νεαράς παρθένου</li>
      <li>Η ουτοπία θέλει θεραπεία</li>
    </ul>
    <div class="emboss">Η ξανθιά επιστήμον</div>
    <ul>
      <li>Η θεωρία της σχετικότητας με τα μάτια μιας στριπτιζέζ</li>
      <li>Αισθητική προσώπου και διαφορικός λογισμός</li>
    </ul>
  </body>
</html>
Σε σχέση με το αρχικό παράδειγμα έχω βάλει position:relative στο κύριο div, και έχω προσθέσει και white-space:nowrap.

Εικόνα

Εμφανίζεται σωστά και στους τρεις browsers (Firefox, IE, Opera). Βέβαια το κείμενο θα εμφανιστεί χωρίς shadow αν ο χρήστης έχει απενεργοποιημένη τη JavaScript.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

text shadow

Δημοσίευση από geraki » 21 Μαρ 2005 10:42

Πολύ καλό, κυρίως γιατί δεν χρειάζεται επανάληψη του κειμένου.
Με αρέσουν τα κείμενα στο παράδειγμά σου...
Συγχαρητήρια!!! Εικόνα
Εικόνα &#8592; Αυτό το έκλεψα απ'τον Eneme.

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

text shadow

Δημοσίευση από xmavidis » 21 Μαρ 2005 20:49

Ευχαριστώ πάρα πολύ για τη βοήθεια σας! :P
I want to know God’s thoughts; the rest are details.
Albert Einstein

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες