Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorbeantowner
    • CommentTimeJul 21st 2006
     permalink

    "This unobtrusive script will throw a drop shadow on any block element with the class 'highContrast'. The result is a hard-edged offset shadow that's not necessarily pretty, but it gets the job done."

    http://www.scottjehl.com/jsDropShadows/

    • CommentAuthorWardLarson
    • CommentTimeJul 21st 2006
     permalink
    It's cool but when I loaded the page it took 5 or 6 seconds to load the shadows on the title and example text.
    • CommentAuthorbeantowner
    • CommentTimeJul 21st 2006
     permalink
    Thanks Ward - looks like DIGG's counter API script I inserted at the bottom was clogging it up - should be a lot faster now.
  1.  permalink
    Thanks for the link, I had just seen this idea used on rottentomatoes.com but they did it by writing each word twice and adjusting the padding and z-index on the 'shadow' layer. Your way seems easier to implement.

    Speaking of drop shadows, I just came across this method for styling boxes/images with shadows from 456 Berea Street.
    •  
      CommentAuthor4hero
    • CommentTimeJul 21st 2006 edited
     permalink
    or you could do drop shadows with css ;)

    The css:


    h1 {color:#000; position:relative;}
    span.shadow {color:#fff; position:absolute; top:-2px; left:-2px;}


    The HTML:


    <h1>Hello World!<span class="shadow">Hello World!</span></h1>


    not ideal, but nice and quick!
    • CommentAuthorbeantowner
    • CommentTimeJul 21st 2006
     permalink

    Thanks 4hero


    the shadows actually ARE done using css... the trick is that the original source doesn't have repeated content.
    All the script does is take the content, toss it into a couple spans, give one a class "shadow", and insert them back into the element. The css handles the presentation after that. The idea is to NOT have duplicated content in the source.


    Here's a link to the css portion:


    http://www.scottjehl.com/jsDropShadows/css/dropShadows.css

    basically, an element that looks like this in the source:

    <h2 class="highContrast">Here's an example</h2>


    Becomes this after the script passes through:

    <h2 class="highContrast">
    <span class="shadow">Here's an example</span>
    <span>Here's an example</span>
    </h2>



    If you view the generated source, you can see what I mean.


    lemme know if you have any more questions, thanks for the feedback!

  2.  permalink
    Hey beantowner!

    Well if you ask me CSS approach just fine to me creating extra class would not hurt page at all even if it repeated.
    I'm not questioning you programming skills just practical use of the script.
    In any case since browser rendering fronts kind of fuzzy using the shadow effect doesn't make much sense to me.

    Cheers, DS
    • CommentAuthorbeantowner
    • CommentTimeJul 21st 2006
     permalink
    Hey dmitryseliv
    Thanks for the comment.
    The idea of the technique is to produce a visual effect while allowing the markup to remain semantic and readable. It's basically a temporary solution for emulating a CSS3 drop shadow until CSS3's browser support gets better.
    If the technique required you to write duplicated markup for an effect, it would be impractical in real-world use.

    The class name idea that was previously recommended is actually what the script creates already.
    The beauty of it is that if you want the effect, just attach a js file and put a class on any element that needs a drop shadow.
    No need to change your markup at all. I'm definitely not claiming it looks beautiful, although I think it works well on large headings (not so much on body copy, heh). But a drop shadow serves a functional purpose in many design situations so it could come in handy when you need to use it.
    -S
  3.  permalink
    I got the point.
    I agree it might be handy one day.
    Thought code looks pretty compact and small so executing it on a page shouldn't be a problem.
    Maybe you can create some couple more effects that it will make it more attractive.

    DS
Add your comments
    Username Password
  • Format comments as (Help)