Great minds...something something.
That gradient plugin is neat, but, my goodness, its like I exploded a bomb
packed with DIVs instead of shrapnel!. :)
Glen
On 7/16/07, Brandon Aaron <[EMAIL PROTECTED]> wrote:
>
> Heh ... I'm secretly working on a shadow plugin that does just this ...
> although not a secret anymore. It would be a follow up to my gradient
> plugin. No timeline on when I'll get it done though ... looks like I'll have
> some time this week ... so maybe this week or maybe next month. :)
>
> --
> Brandon Aaron
>
> On 7/16/07, Glen Lipka < [EMAIL PROTECTED]> wrote:
> >
> > I guess the first one could have been done with a div that was
> > background-color: black; and then set the opacity to 0.5 or whatever.
> > No need for a png in that.
> > A very common use case is just the 3px feather fade. Its not very
> > big, just 3px in width. I think the first one, if you dynamically make 3
> > divs of the exact same opacity. Literally duplicates. And then offset them
> > 1px, 2px and 3px. And they were not pngs, just divs with opacity of
> > 0.2 or 0.3. Then the overlapping would cause it it mirror the feather
> > effect.
> >
> > Hmm, Ill have to try that one. Might make a decent plugin by itself.
> > SOmething like:
> > $("div").shadow({
> > feather: '3px',
> > color: 'black',
> > opacity: '0.2'
> > });
> >
> > I suppose it would require the dimensions plugin to position it?
> > Just brainstorming.
> >
> > Glen
> >
> >
> > On 7/16/07, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> > >
> > > very, very nice! exactly what I was looking for. thanks so much,
> > > Glen!
> > > I'll take a look at implementing this tonight or tomorrow.
> > >
> > >
> > > --Karl
> > > _________________
> > > Karl Swedberg
> > > www.englishrules.com
> > > www.learningjquery.com
> > >
> > >
> > >
> > > On Jul 16, 2007, at 1:38 AM, Glen Lipka wrote:
> > >
> > > Maybe a more scalable solution:
> > > http://www.commadot.com/jquery/shadows/v2.htm
> > >
> > > I made a box (just one to start, but obviously there could be
> > > several different opacities.)
> > >
> > > Technique is to stretch the box and move it around underneath. That
> > > way you can create your own shadow effect.
> > > One could even replace the box for a custom look.
> > >
> > > It would be cool to use the corners plugin with this. Didnt work on
> > > first try.
> > >
> > > This kind of thing would enable you to make options about which
> > > direction the shadow goes, what opacity and how far away from the content.
> > >
> > > I need to go to sleep.Karl, does this help.
> > >
> > > Glen
> > >
> > >
> > > On 7/15/07, Glen Lipka < [EMAIL PROTECTED]> wrote:
> > > >
> > > > http://www.commadot.com/jquery/shadows/
> > > > Ok, the first experiment was using a 1x1 image.
> > > > I didnt fix for IE6 yet, but it's in the ballpark...nothing
> > > > special happening.
> > > >
> > > > Ok, so the bad part was when I tried to stretch a non-1x1 image
> > > > with a fade. The fade of the shadow scaled (of course), so that wont
work.
> > > > Luckily there is another way. Thank goodness for positioning.
> > > >
> > > > By the way, these arent completely done with a ribbon on them.
> > > > But I hope these give the basic idea.
> > > >
> > > > Should these have rounded corners too?
> > > >
> > > > Hmm.
> > > >
> > > > Glen
> > > >
> > > > On 7/15/07, Karl Swedberg < [EMAIL PROTECTED]> wrote:
> > > > >
> > > > > Brilliant! You totally rock, Glen! Way above and beyond (but
> > > > > please, keep going. ;-) )
> > > > > Can't wait to see the demo.
> > > > >
> > > > >
> > > > > --Karl
> > > > > _________________
> > > > > Karl Swedberg
> > > > > www.englishrules.com
> > > > > www.learningjquery.com
> > > > >
> > > > >
> > > > >
> > > > > On Jul 15, 2007, at 11:31 PM, Glen Lipka wrote:
> > > > >
> > > > > Starting to look at it now. I recently had to do some fancy png
> > > > > shadows. ( http://www.sparkt.com/testing.html)
> > > > > I totally gave up on trying to make it a background. Luckily
> > > > > you usually have a workaround.
> > > > >
> > > > > Here is my plan, and Ill work on it now...
> > > > > I am going to make 10 png files, 10x10 with 24-bit
> > > > > transparency. Each one will be be a different opacity. 10%, 20%,
etc. The
> > > > > reason to make it 10x10 is to give the edges a fade, so the shadow
blurs.
> > > > > Then I am going to try and make your clueTip html, except rather
> > > > > than use the div as a background, I will create a layer div,
absolutely
> > > > > positioned underneath. Then offset it with left and top.
> > > > >
> > > > > In fact, if this works, then you could allow the user to define
> > > > > the opacity, and the shadow offset!
> > > > >
> > > > > Ok, Im going to work on a demo. I think it will work though.
> > > > > PNGs stretch nice with width/height attributes.
> > > > >
> > > > > Glen
> > > > >
> > > > >
> > > > > On 7/15/07, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> > > > > >
> > > > > > Hi all,
> > > > > > After I posted the clueTip beta, I realized that something had
> > > > > > regressed and the pngFix code wasn't working properly to get the
drop-shadow
> > > > > > effect working in IE6.
> > > > > >
> > > > > > I've worked that part out by, starting with the pngFix code in
> > > > > > Jörn's tooltip plugin (thanks!) and, among other things, changing
the
> > > > > > "sizingMethod" attribute from "crop" to "scale." I also re-worked
and
> > > > > > simplified the CSS for the clueTip quite a bit. Nevertheless, it's
still
> > > > > > looking a little funky, depending on the contents of the clueTip.
> > > > > >
> > > > > > I was wondering if there are any CSS gurus out there who
> > > > > > might be able to look at this in IE6 and help me find a solution.
I'm
> > > > > > usually able to tread fairly nimbly through CSS territory, but this
issue
> > > > > > has me flummoxed.
> > > > > >
> > > > > > here are thethe files I'm using to try to sort this out:
> > > > > > demo/test page: http://test.learningjquery.com/clue/demo/index.html
> > > > > > style sheet: http://test.learningjquery.com/clue/jquery.cluetip.css
> > > > > > cluetip plugin:
http://test.learningjquery.com/clue/jquery.cluetip.js
> > > > > > drop shadow image: http://test.learningjquery.com/clue/shadow.png
> > > > > >
> > > > > > I made all the clueTips "sticky" for easier
> > > > > > inspection/manipulation in a DOM viewer.
> > > > > >
> > > > > > Also, here is a zipped file of everything, including
> > > > > > Dimensions, jquery.js, images, and so on:
> > > > > > http://test.learningjquery.com/clue/ cluetip-test.zip
> > > > > >
> > > > > > Any help at all would be greatly appreciated.
> > > > > >
> > > > > > ** One more thing. I just received a question from someone
> > > > > > about the IE <select> "punch-through" problem and whether the
clueTip plugin
> > > > > > handles that.
> > > > > > I started writing a response that I'd like to share with the
> > > > > > list, in case anyone has any strong opinions that I should take into
> > > > > > consideration:
> > > > > >
> > > > > > excellent question! The short answer is, no [I haven't
> > > > > > accounted for this IE problem]. But it should. Somehow. That was an
> > > > > > oversight on my part.
> > > > > > That said, I'm a bit torn about how best to go about doing it.
> > > > > > Do I bake it right in to the plugin itself? Do I put in yet another
option?
> > > > > > If so, should the default be true (i.e. yes, add the iframe
> > > > > > hack with all corresponding css) or false?
> > > > > >
> > > > > > I wonder if it might be best to leave that problem for the
> > > > > > bgIFrame plugin to solve.
(http://jqueryjs.googlecode.com/svn/trunk/plugins/bgiframe/
> > > > > > )
> > > > > > It does a great job of it, and I certainly couldn't do any
> > > > > > better. On the other hand, I understand the disadvantages of having
to
> > > > > > include too many javascript file references on a single web page.
> > > > > >
> > > > > >
> > > > > >
> > > > > > What are your thoughts?
> > > > > >
> > > > > > Thanks so much,
> > > > > >
> > > > > > --Karl
> > > > > > _________________
> > > > > > Karl Swedberg
> > > > > > www.englishrules.com
> > > > > > www.learningjquery.com
> > > > > >
> > > > > >
> > > > > >
> > > > > >
> > > > >
> > > > >
> > > >
> > >
> > >
> >
>
