On 4/06/2011 8:28 PM, Barney Carroll wrote:
Hiya Andrew,
No solutions here I'm afraid, although I have often experienced the same
thing and wondered why I'm always so far out on my first attempt.
The solution (for inset) is to apply a brighter color (more saturation
and lightness) for top and left borders and a duller color (less
saturation and lightness) for bottom and right borders. Test.
<!doctype html>
<style>
#box {
float: left;
overflow: hidden;
margin: 20px;
background: rgb(0,0,255); /* blue */
border: 10px inset rgb(0,0,255); /* blue */
}
div div {
width: 90px;
height: 90px;
margin: 1px;
border-top: 10px solid rgb(0,0,217);
border-left: 10px solid rgb(0,0,217);
border-bottom: 10px solid rgb(63,63,255);
border-right: 10px solid rgb(63,63,255);
}
</style>
<div id="box"><div></div></div>
Just a few words of opinionated warning (that you shouldn't take too
seriously):
I guess you're learning.....
as an ex-full-time designer and someone who now works with
non-technical designers, I've often been cynical of the various ways CSS3
encourages *programmers* to define effects which are then procedurally
achieved by various UAs' rendering engines.
I thought inset and outset borders were in CSS2. Why are you cynical of
CSS3?
The truth is that even for the
most experienced& competent designers, trial and error is necessary. The
notion that we can systematically write code to create
procedurally-generated effects to simulate aesthetically sensitive optical
illusions is not one I can stand behind fully: for example I have yet to use
border radius in conjunction with background gradients and box shadows
So if you haven't tested, how is it that you can express such an opinion?
sliding doors CSS and background images allow that bit more control and
pixel-perfection that allow designers to make it look consummately elegant
and convincing rather than functionally embossed.
Can you prove that absolutely?
In short, when you're
talking about optical illusions and a certain level of detail with coherent
aesthetics, I don't believe it's possible to algorithmically generate the
lot based on small input values.
I don't follow what you are saying here.
But I digress. Whenever I've tried to achieve the effect I've done it by
trial, observation and error.The same values of relative darkness or
lightness applied to other colours have never worked, and I've needed to
achieve the effect manually.
…I'd be very interested if anybody were to get this right though!
Regards,
Barney Carroll
Yes, I have. See the example above and the example in my reply to
Andrew. I'm still working on the maths but I believe I have hit the most
aesthetic values.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
