My OperaThis topic has been closed. No new entries allowed.
Reason: You can now post comments on articles on Dev Opera
You need to be logged in to post in the forums. If you do not have an account, please sign up first.
CSS3 borders, backgrounds and box-shadows
Opera 10.50+ comes with support for the W3C's CSS3 Backgrounds and Borders specification. Amongst them are border-radius, border-image, multiple backgrounds and box-shadow. Opera 10.60+ updates this support with box-decoration-break and an updated background shorthand. We’ll showcase all these and more through examples and explanations.( Read the article )
Awesome article and wonderful to see this kind of support!
It should, however, be noted in the article that the box-shadow property was removed from the CSS3 Backgrounds and Borders specification (see http://www.w3.org/TR/css3-background/#the-box-shadow ). Also because of this, I feel it should only be supported in Opera 10.5 Final using the -o- prefix.
It should, however, be noted in the article that the box-shadow property was removed from the CSS3 Backgrounds and Borders specification (see http://www.w3.org/TR/css3-background/#the-box-shadow ). Also because of this, I feel it should only be supported in Opera 10.5 Final using the -o- prefix.
<a href="http://a.deveria.com/">Fyrdility</a>.
What, no CSS gradients? :-p
Honestly, VERY glad to see border-radius finally supported. Right now Opera is the only browser where our application's layout has square boxes (we load a behavior for IE to add in border-radius support). I knew that border-radius would show up in Opera soon so I put in a -o-border-radius... guess that wasn't needed.
Honestly, VERY glad to see border-radius finally supported. Right now Opera is the only browser where our application's layout has square boxes (we load a behavior for IE to add in border-radius support). I knew that border-radius would show up in Opera soon so I put in a -o-border-radius... guess that wasn't needed.
There's quite a few ’ entities in the text, could anyone possibly fix that, please?
Otherwise, nice article, thank you.
Michal
Otherwise, nice article, thank you.
Michal
Originally posted by michalstanko:
There's quite a few ’ entities in the text, could anyone possibly fix that, please?
Should be fixed now - a little bug was introduced during the last site update, which we have since fixed. Cheers!
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
There is bug in box-shadow support in Opera 10.50 Alpha.
Presto incorrectly uses dimensions of element without scrollbars, and scrollbars render over shadow.
WebKit and Gecko engines correctly use dimensions including scrollbars.
Presto incorrectly uses dimensions of element without scrollbars, and scrollbars render over shadow.
WebKit and Gecko engines correctly use dimensions including scrollbars.
Originally posted by akzhan-abdulin:
There is bug in box-shadow support in Opera 10.50 Alpha.
Presto incorrectly uses dimensions of element without scrollbars, and scrollbars render over shadow.
WebKit and Gecko engines correctly use dimensions including scrollbars.
I tested this, and Opera looks to give the same result as Firefox and Safari - can you give me a test case in which you encounter the behaviour you are talking about? Thanks!
The text case I used was this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>box-shadow test</title>
<link rel="stylesheet" type="text/css" href="images4.css">
<style type="text/css">
body {
font-size: 150%;
font-family: Georgia;
}
div {
background-color: #dddddd;
width: 400px;
height: 600px;
box-shadow: 15px 15px 20px #333333;
-webkit-box-shadow: 15px 15px 20px #333333;
-moz-box-shadow: 15px 15px 20px #333333;
overflow: scroll;
}
p {
padding: 10px;
}
</style>
</head>
<body>
<div id="content">
<p>On one of the last days we spent in Australia, we visited Luna Park, which is an amusement park next to the harbour in Sydney. My son Gabriel enjoyed it very much, having lots of fun on the Dodgems, the Ferris Wheel, the Rollercoaster and the magic mirrors!</p>
<p>On one of the last days we spent in Australia, we visited Luna Park, which is an amusement park next to the harbour in Sydney. My son Gabriel enjoyed it very much, having lots of fun on the Dodgems, the Ferris Wheel, the Rollercoaster and the magic mirrors!</p>
<p>On one of the last days we spent in Australia, we visited Luna Park, which is an amusement park next to the harbour in Sydney. My son Gabriel enjoyed it very much, having lots of fun on the Dodgems, the Ferris Wheel, the Rollercoaster and the magic mirrors!</p>
<p>On one of the last days we spent in Australia, we visited Luna Park, which is an amusement park next to the harbour in Sydney. My son Gabriel enjoyed it very much, having lots of fun on the Dodgems, the Ferris Wheel, the Rollercoaster and the magic mirrors!</p>
<p>On one of the last days we spent in Australia, we visited Luna Park, which is an amusement park next to the harbour in Sydney. My son Gabriel enjoyed it very much, having lots of fun on the Dodgems, the Ferris Wheel, the Rollercoaster and the magic mirrors!</p>
</div>
</body>
</html>
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
CSS3 new properties will save a lot of time to developpers!
I already test some properties like background and borders, and I definitely adopt them.
I already test some properties like background and borders, and I definitely adopt them.
I'm looking at the article (http://dev.opera.com/articles/view/css3-border-background-boxshadow/) with Opera 10.10 which I just installed.
No border radius or shadow appear.
Just thought I'd mention that in case there is any interest (or someone knows why).
Windows XP MCE 2005 SP3
Opera 10.10 Build 1893
No border radius or shadow appear.
Just thought I'd mention that in case there is any interest (or someone knows why).
Windows XP MCE 2005 SP3
Opera 10.10 Build 1893
Originally posted by ttocsmij:
I'm looking at the article (http://dev.opera.com/articles/view/css3-border-background-boxshadow/) with Opera 10.10 which I just installed.No border radius or shadow appear.
Hi there!
These features are first supported in our 10.5 alpha, so you'll need that to view these examples. You can find links to the builds at http://labs.opera.com/news/2009/12/22/
Best regards,
Chris
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Hi,
I don't know if it's an bug or not, but I want to share my test.
I draw a circle using border-radius. In CSS, I create a style in order to change the background-color (just an example) when you hover the circle. What is suprising is when the cursor isn't over the circle yet, the bg color change.
Test : http://files.myopera.com/The-Doc/test/border-radius.html
I don't know if it's an bug or not, but I want to share my test.
I draw a circle using border-radius. In CSS, I create a style in order to change the background-color (just an example) when you hover the circle. What is suprising is when the cursor isn't over the circle yet, the bg color change.
Test : http://files.myopera.com/The-Doc/test/border-radius.html
Originally posted by The-Doc:
I don't know if it's an bug or not, but I want to share my test.
It looks like the hover is still taking the area of the element *before* the border radius was applied as the area to trigger over, so you see the effect when you mouse over the cut out parts of the originalsquare, as well as the created circle. I tried it in other browsers too, and they seem to have the same effect. Not sure if this is a bug exactly ;-)
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
http://frans.lowter.us/test/2010/border-radius/
This is something I've been working on, but I went on vacation and stuff so I didn't exactly get around to finishing it (hence I haven't submitted any bug reports either). Test cases 4 and 5 are potentially not correct per spec (I'm still figuring that out), but the others are. Test 1 describes this specific bug. I suppose I could report that one since I'm sure it's correct (given the paragraph I quoted on the first page I linked) and it's finished, if you want.
This is something I've been working on, but I went on vacation and stuff so I didn't exactly get around to finishing it (hence I haven't submitted any bug reports either). Test cases 4 and 5 are potentially not correct per spec (I'm still figuring that out), but the others are. Test 1 describes this specific bug. I suppose I could report that one since I'm sure it's correct (given the paragraph I quoted on the first page I linked) and it's finished, if you want.
Intelligent alien life does exist, otherwise they would've contacted us. — Calendar — Extend Opera
Originally posted by Frenzie:
This is something I've been working on, but I went on vacation and stuff so I didn't exactly get around to finishing it (hence I haven't submitted any bug reports either). Test cases 4 and 5 are potentially not correct per spec (I'm still figuring that out), but the others are. Test 1 describes this specific bug. I suppose I could report that one since I'm sure it's correct (given the paragraph I quoted on the first page I linked) and it's finished, if you want.
Thanks for these tests - interesting stuff. Yes, if you could report these, it'd be great.
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Submitted as DSK-281896.
Intelligent alien life does exist, otherwise they would've contacted us. — Calendar — Extend Opera
How do I make box shadow engulf an entire object, rather than be on the right or left? I want it to look like this.
Can't wait to see gradients!
Can't wait to see gradients!
Originally posted by DanielHendrycks:
How do I make box shadow engulf an entire object, rather than be on the right or left?
Something like this might go towards giving you what you need: box-shadow: 0px 0px 30px #000000;
same position as the element you are shadowing, but with a lot of blurring.
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Originally posted by chrismills:
Something like this might go towards giving you what you need: box-shadow: 0px 0px 30px #000000;
Thank you
I think you have there a little bug,
when i try to give border-radius to the FIELDSET element, WebKit corectly create rounded borders, but opera did not :(
Gecko create rounded borders if i put there -moz round parameter
DEMO CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DEMO</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
fieldset{
border: 1px black solid;
border-radius: 5px;
}
div.inside{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<fieldset>
<legend>This is it!</legend>
<div class="inside">Some content</div>
</fieldset>
</body>
</html>
when i try to give border-radius to the FIELDSET element, WebKit corectly create rounded borders, but opera did not :(
Gecko create rounded borders if i put there -moz round parameter
DEMO CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DEMO</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
fieldset{
border: 1px black solid;
border-radius: 5px;
}
div.inside{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<fieldset>
<legend>This is it!</legend>
<div class="inside">Some content</div>
</fieldset>
</body>
</html>
I have a question. The "inset" must be the first or the last clausule in box-shadow?. This is because when I want to validate my CSS3 style sheet gives me no error if I put it at first but Opera ignores it, however if I put it at last Opera takes it but not validate
I used this validator: http://jigsaw.w3.org/css-validator/
I used this validator: http://jigsaw.w3.org/css-validator/
box-shadow isn't in the current version of the CSS3 Backgrounds and Borders spec: http://www.w3.org/TR/2009/CR-css3-background-20091217/#misc
The last time it did appear: http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-box-shadow
...the order wasn't specified.
I guess, until the spec gets finalized, just go with what works.
The last time it did appear: http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-box-shadow
...the order wasn't specified.
I guess, until the spec gets finalized, just go with what works.
It was a bright, cold day in April...
What welcome news to have Opera come out of the gate with such a solid implementation. There are still a couple of bugs in border-radius when the border is thicker than the radius. You can see the problems at http://muddledramblings.com/table-of-css3-border-radius-compliance - it looks like just an edge condition that would be easy to fix.
I just reported a bug described at http://j.mp/bwGF6V - Bug ID: DSK-29316
If you set border-radius to anything on an INPUT element with border:none 0px, Presto forgets to render the background of the INPUT element.
If you set border-radius to anything on an INPUT element with border:none 0px, Presto forgets to render the background of the INPUT element.
Originally posted by atornblad:
I have a question. The "inset" must be the first or the last clausule in box-shadow?. This is because when I want to validate my CSS3 style sheet gives me no error if I put it at first but Opera ignores it, however if I put it at last Opera takes it but not validate
I think it is meant to be first. Opera and Mozilla both implement it like this, I know that much. The CSS3 validator is a big buggy in some regards.
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
I was playing a bit trying to make some nice form buttons, but I'm having a problem with text-shadow and text-transform properties of the inputs type submit, so my question is if the input type submit support those properties or not? no problem with input text or even button type submit, but input submit does not take those css properties.
Originally posted by xavier83ar:
I was playing a bit trying to make some nice form buttons, but I'm having a problem with text-shadow and text-transform properties of the inputs type submit, so my question is if the input type submit support those properties or not? no problem with input text or even button type submit, but input submit does not take those css properties.
Can you send me a link to a code example so I can check it out? So <input type="submit"> won't accept any text-shadows or transforms? I think I might know what it is. Are you applying them to the element with a direct selector, or are they child elements of the element you are selecting?
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
13. November 2010, 19:43:50 (edited)
This article has now been updated to include the new CSS3 version of the background shorthand and box-decoration-break. Opera 11 or greater is needed to see these new features.
<q>Knowledge speaks, but wisdom listens.</q> - Jimi Hendrix
David Storey, Chief Web Opener, Product Manager Opera Dragonfly, Opera Software ASA
David Storey, Chief Web Opener, Product Manager Opera Dragonfly, Opera Software ASA
I was somewhat surprised to find that the border-radius property in the Opera 11 release does not support images. The Gecko and Webkit application of the standard property does.
A simple test is at:- http://countjustonce.com/border-radius.html
Yes, the mark-up is valid HTML5.
A simple test is at:- http://countjustonce.com/border-radius.html
Yes, the mark-up is valid HTML5.
7. January 2011, 03:20:49 (edited)
On further investigation, I find that Opera 10.50+ has supported border-radius, but the support seems a variance with the W3C specification, e.g.
Being pro-active, I have used a "sledge-hammer" to "crack an egg" and applied a jQuery remedy that hides the <img> and creates a <div> complete with the src attribute to generate a background-image in its place. Opera 10.50 ~ 11.10 detection ensures that the script doesn't over-ride the CSS in other browsers.
The example is at:- http://countjustonce.com/border-radius-new.html
Name: border-radius
Value: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
Initial: 0
Applies to: all elements, except table element when ‘border-collapse’ is ‘collapse’
Being pro-active, I have used a "sledge-hammer" to "crack an egg" and applied a jQuery remedy that hides the <img> and creates a <div> complete with the src attribute to generate a background-image in its place. Opera 10.50 ~ 11.10 detection ensures that the script doesn't over-ride the CSS in other browsers.
The example is at:- http://countjustonce.com/border-radius-new.html
Hello,
I find dead link in this article.
background shorthand demo (http://people.opera.com/dstorey/backgrounds/background-shorthand.html) is 404 not found.
Please fix correct URI.
I find dead link in this article.
background shorthand demo (http://people.opera.com/dstorey/backgrounds/background-shorthand.html) is 404 not found.
Please fix correct URI.