ruzee.com - Steffen Rusitschka

#shadowed-border .sb-inner { background:#444444 url(grad.png) repeat-x; }

11 Responses to “ShadedBorder with Gradients”

• 1
  Piotr Says:
  October 21st, 2007 at 11:55

  Hmmm,
  But the example page that comes with the download looks good in IE7.
  So guess it’s my IE7 setup(?). Anyway, thanks for the update Steffen.

  Piotr

• 2
  MArcio Says:
  October 24th, 2007 at 18:49

  Hy my name is Marcio, i’m from Brasil

  I’m using ShadedBorder script in this project

  http://www.cerebrum.com.br/_somar_cabos/

  But link CEREBRUM in Internet Explorer show Up

  How to resolve this

• 3
  Adam Says:
  November 6th, 2007 at 0:20

  Wow, I just updated to this version and the gradient backgrounds look great, thanks!!!!!

• 4
  Mohiuddin Khan Inamdar Says:
  December 11th, 2007 at 10:16

  Hi,
  I think this I should try this out.
  Nice way to say its free to use… with MIT license style..
  I plan to try it on one of my existing intranet project..

  Thanks for sharing this ….
  Signed
  Mohnkhan
  http://www.mohitech.com

• 5
  Francesco Says:
  January 24th, 2008 at 18:27

  Hi,
  thanks a lot for your code, the script is great!
  The only is we cannot use gradient for the complete height
  I’ve done a little fix to your script but I’ve some problems to solve.

  This is my change:

  ROW 120
  // draw inner
  // FIXME: 100 (the height fo the div)
  var dd = div + ‘ z-index:2;’ + (t ?
  ‘background-position:0 -’ + (r-yc-1) + ‘px;’ :
  ‘background-position:0 -’ + (100 -2*h + r) + ‘px;’);

  ROW 200

  // FIXME: 100 (the height fo the div)
  ds.push(dd + (t ? ‘background-position-y:0; top:’ :
  ‘background-position:0 -’ + (100 -2*h + r) + ‘px; bottom:’) + y + ‘px;’ +
  ‘ height:’ + (r+cy+s) + ‘px;” class=”‘ + iclass + ‘”>’);
  el.innerHTML = ds.join(”);
  }

  ========================

  Using this path I can rounded all the background image, including the bottom.

  There are some issues:

  1) how can I determinate the height of the rounded div? (I’ve used a fixed height of 100px)

  2) the antialiasing of bottom corners not works.

  3) the shadow not work.

  Please let me know.

  Thank you!!!

• 6
  Francesco Says:
  February 4th, 2008 at 12:00

  Hi Steffen,
  can we work together in order to solve the “full-height” gradient background issue?

  Thank you very much!
  Francesco

• 7
  bodo Says:
  February 20th, 2008 at 16:44

  Hi Steffen,
  your library is great, but I have an issue concerning IE 6. I want to have a 1px wide border around a div containing several other divs. I can´t use the div itself, because the background-color has to be white (and not in the color of the border). So I wrap around the div another div with 1px padding. This is the code:

  [..]

  #border{
  width: 200px;
  background-color: #000066;
  xorder: 1px solid red;
  padding: 3px;
  }
  #inner{
  background-color: #fff;
  }

  window.onload = initIt;
  function initIt(){
  var roundBorder = RUZEE.ShadedBorder.create({corner:3});roundBorder.render(’border’);
  }

  test

  Quite simple and it works in every browser except IE 6. There the bottom line gets cut away. I narrowed it down to the element sb-inner inside the sb-gen. It simply isn´t displayed. I see the borders of the two main divs and in between there is a 1px white space, the sb-inner, that isn´t displayed. Do you have a solution for that?

  Thanks,
  Bodo

• 8
  aqeel ahmed Says:
  April 4th, 2008 at 11:58

  i liked the code but have some minor issues of coding…..do please use this site for javascript error….http://www.javascriptlint.com/online_lint.php

  shadedborder.js..i like the stuff but have some issues….anyway thanks for the great work and the effort put into it…

• 9
  Gary Says:
  April 6th, 2008 at 2:39

  I’m setting up new look for site and want to try to find way of making rounded corners with drop shadow but also add image inset( crosshatch or similar look to simulate a fabric) following or replacing the border/drop shadow, but around the radius of corners. New page layout is at http://www.solarfabric.com/test2.html
  Any ideas anyone?I was thinking of possibly div with image beneath but want look to be with image on top where drop shadow would normally be.
  Thanks Gary

• 10
  aqeel Says:
  April 9th, 2008 at 14:55

  great script but would be more greatful if could use jquery…like this is only rounded but u might add shadow…

  http://www.malsup.com/jquery/corner/

  entire stuff here….

  http://docs.jquery.com/Plugins

  jquery.com

• 11
  Charles Manske Says:
  April 16th, 2008 at 0:09

  I use jQuery for most things, but I really like the style and size of this code for corners and gradients. A common pattern for rendering corners for all elements of a particular class is:
  var border = RUZEE.ShadedBorder.create(…);
  border.render($(’.my_border_class’).get()); /* Use get() to return array of DOM elements */

  But I’m seeing an ugly problem when a page is resized in IE7 (Windows XP). You can see it on the example page: http://www.ruzee.com/files/shadedborder/test.html
  Resize the window from the bottom-right corner to make it smaller and watch what happens to the “A headline With Its Own Style” box. Both of the right corners become dislocated and shift to the right or disappear completely. Also, if the window is very narrow, the central div in that box (the one that ends up with 100% height in the final render) is not extended correctly and the background shows through. These obviously stem from the classic IE “box” rendering bugs.
  Just in case some of you aren’t using Firefox, developing in Firefox with the Firebug plugin is by far the best way to debug styles, since you can inspect ALL of the rendered divs. If only that worked in IE!

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website