Re: [css-d] CSS3 Opacity Inheritance
Yes. The better approach is to use rgba colors for elements containing text.
That way only the box is affected and the text (or any other child elements)
remain unaffected.
RGBA stands for red, green, blue, and alpha. So this declaration renders a
box
80% opaque, while stuff inside the box is fully opaque:
#elli-box {
background-color: black;
background: rgba(255,255,255,.8);
}
The background-color property is a fallback for older browsers lacking
support
for RGBA.
255,255,255 is white
0,0,0 is black
Most code editors now have the ability to let you easily set colors like this.
Here is a quick example:
http://www.projectseven.com/csslab/css3/rgba/quick-test.htm
The styles used on the example are:
#elli-box {
background-color: #3CF;
background: rgba(51,204,255,.8);
/*Light Blue*/
}
And some design extras:
.elli-styles {
padding: 40px;
width: 400px;
font-size: 14px;
line-height: 1.5;
border-radius: 11px;
box-shadow: inset 0px 0px 40px #0080AA;
border: 2px solid #FFF;
}
-- Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
Thanks you guys! Al, Phillipe, Tom, L. David Baron Alan you're all
awesome
I now have a much clearer understanding on the apparent translucent
effect of the opacity property on child elements and how to solve it.
Elli Vizcaino
Creating meaningful connections and compelling
experiences through the art beauty of design.
http://www.e7flux.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/
[css-d] can CSS do flick panning?
Sorry if this is the wrong word, but it's what Adobe uses to describe how you can click-drag in a Photohop document and when you let go of the pen or mouse, the image continues to scoot in the direction you dragged it..it then slows down nicely as though friction and gravity are working on it. I thought that might be an elegant way to let users go through an array of images, other than or in addition to a scroll bar. thank you in advance for any info on this. John __ 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/
Re: [css-d] can CSS do flick panning?
Use Jquery --Mensaje original-- De: John Remitente: css-d-boun...@lists.css-discuss.org Para: CSS-Discuss Asunto: [css-d] can CSS do flick panning? Enviado: 21 de oct, 2011 10:15 Sorry if this is the wrong word, but it's what Adobe uses to describe how you can click-drag in a Photohop document and when you let go of the pen or mouse, the image continues to scoot in the direction you dragged it..it then slows down nicely as though friction and gravity are working on it. I thought that might be an elegant way to let users go through an array of images, other than or in addition to a scroll bar. thank you in advance for any info on this. John __ 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/ Enviado desde BlackBerry® de COMCEL S.A. __ 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/
Re: [css-d] can CSS do flick panning?
Hiya Jon, currently only possible in iOS5 Safari with -webkit-overflow-scrolling: bounce; This needs to be on top of overflow: scroll. Regards, Barney Carroll (+44) 742 9177 278 __ 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/
[css-d] help with positioning text in bottom right corner of content area
I need to position a very small text item in the bottom right hand corner of my content area. I've tried positioning it relative with bottom:0 and right:0, but that didn't work. So then I just positioned it like so: p style=position:relative;bottom:0;left:100%;AF/p. This does move it to the right, but not to the bottom of my page content area. I can't determine what is keeping it from sitting on the bottom. Any advice appreciated. Here is my test page: http://sbctc.edu/college/test.aspx Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.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/
Re: [css-d] help with positioning text in bottom right corner of content area
Try making the parent element position relative, and the AF element position absolute, bottom:0, left:0. Kevin On Fri, Oct 21, 2011 at 2:15 PM, Angela French afre...@sbctc.edu wrote: I need to position a very small text item in the bottom right hand corner of my content area. I've tried positioning it relative with bottom:0 and right:0, but that didn't work. So then I just positioned it like so: p style=position:relative;bottom:0;left:100%;AF/p. This does move it to the right, but not to the bottom of my page content area. I can't determine what is keeping it from sitting on the bottom. Any advice appreciated. Here is my test page: http://sbctc.edu/college/test.aspx Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.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/ __ 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/
Re: [css-d] help with positioning text in bottom right corner of content area
Oops, left:0 should be right:0. Kevin On Fri, Oct 21, 2011 at 2:29 PM, Kevin A. Cameron kevinacame...@gmail.comwrote: Try making the parent element position relative, and the AF element position absolute, bottom:0, left:0. Kevin On Fri, Oct 21, 2011 at 2:15 PM, Angela French afre...@sbctc.edu wrote: I need to position a very small text item in the bottom right hand corner of my content area. I've tried positioning it relative with bottom:0 and right:0, but that didn't work. So then I just positioned it like so: p style=position:relative;bottom:0;left:100%;AF/p. This does move it to the right, but not to the bottom of my page content area. I can't determine what is keeping it from sitting on the bottom. Any advice appreciated. Here is my test page: http://sbctc.edu/college/test.aspx Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.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/ __ 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/
Re: [css-d] help with positioning text in bottom right corner of content area
On 10/21/11 5:15 PM, Angela French wrote: I need to position a very small text item in the bottom right hand corner of my content area. I've tried positioning it relative with bottom:0 and right:0, but that didn't work. So then I just positioned it like so: http://sbctc.edu/college/test.aspx Angela French Tweak... div id=Content_box style=position: relative;border:1px dashed red; p style=position: absolute; bottom: 0; left: 95%; color: red;AF/p ~d -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.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/
Re: [css-d] help with positioning text in bottom right corner of content area
I did try putting the p inside a div that I positioned relative with the p positioned absolutely. But I suppose what I need to do is set the content container to relative. But I didn't write the layout CSS (happened before I got here) and there is something funky about the nested divs used to arrive at the content area. I'm a little hesitant to mess with them. Any other possibilities? From: Kevin A. Cameron [mailto:kevinacame...@gmail.com] Sent: Friday, October 21, 2011 2:29 PM To: Angela French Cc: css-d (css-d@lists.css-discuss.org) Subject: Re: [css-d] help with positioning text in bottom right corner of content area Try making the parent element position relative, and the AF element position absolute, bottom:0, left:0. Kevin On Fri, Oct 21, 2011 at 2:15 PM, Angela French afre...@sbctc.edumailto:afre...@sbctc.edu wrote: I need to position a very small text item in the bottom right hand corner of my content area. I've tried positioning it relative with bottom:0 and right:0, but that didn't work. So then I just positioned it like so: p style=position:relative;bottom:0;left:100%;AF/p. This does move it to the right, but not to the bottom of my page content area. I can't determine what is keeping it from sitting on the bottom. Any advice appreciated. Here is my test page: http://sbctc.edu/college/test.aspx Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316tel:360-704-4316 afre...@sbctc.edumailto:afre...@sbctc.edu http://www.checkoutacollege.com/ __ css-discuss [css-d@lists.css-discuss.orgmailto: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.orghttp://evolt.org -- http://www.evolt.org/help_support_evolt/ __ 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/
Re: [css-d] help with positioning text in bottom right corner ofcontent area
You could put it in a DIv like this:
div class=mybottom
p AF /p.
/div
Then your CSS is like this:
.mybottom {
position: absolute;
bottom: 0;
right: 0;
height: 50px;
background-color: blue;
color: yellow;
}
hth
--
From: Angela French afre...@sbctc.edu
Sent: Friday, October 21, 2011 10:15 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] help with positioning text in bottom right corner ofcontent
area
I need to position a very small text item in the bottom right hand corner
of my content area.
I've tried positioning it relative with bottom:0 and right:0, but that
didn't work. So then I just positioned it like so:
p style=position:relative;bottom:0;left:100%;AF/p.
This does move it to the right, but not to the bottom of my page content
area. I can't determine what is keeping it from sitting on the bottom.
Any advice appreciated. Here is my test page:
http://sbctc.edu/college/test.aspx
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/
__
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/
Re: [css-d] help with positioning text in bottom right corner ofcontent area
I tried that. I think that div needs its parent to be relatively positioned.
-Original Message-
From: Jayesh T [mailto:xfs...@hotmail.com]
Sent: Friday, October 21, 2011 2:50 PM
To: Angela French; css-d@lists.css-discuss.org
Subject: Re: [css-d] help with positioning text in bottom right corner
ofcontent area
You could put it in a DIv like this:
div class=mybottom
p AF /p.
/div
Then your CSS is like this:
.mybottom {
position: absolute;
bottom: 0;
right: 0;
height: 50px;
background-color: blue;
color: yellow;
}
hth
--
From: Angela French afre...@sbctc.edu
Sent: Friday, October 21, 2011 10:15 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] help with positioning text in bottom right corner ofcontent
area
I need to position a very small text item in the bottom right hand
corner of my content area.
I've tried positioning it relative with bottom:0 and right:0, but that
didn't work. So then I just positioned it like so:
p style=position:relative;bottom:0;left:100%;AF/p.
This does move it to the right, but not to the bottom of my page
content area. I can't determine what is keeping it from sitting on the
bottom.
Any advice appreciated. Here is my test page:
http://sbctc.edu/college/test.aspx
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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/
__
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/
[css-d] redmond 6/7
Fast and dirty quick check ie 6/7 [sig link] appreciated. Thanks. Best, Qzzie. -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.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/
Re: [css-d] redmond 6/7
On 22.10.2011 04:00, David Laakso wrote: Fast and dirty quick check ie 6/7 [sig link] appreciated. Thanks. Best, Qzzie. Less height on header in IE6/7 - balls crossed by line instead of riding just above it. No big deal IMO. I suggest setting 'min-width' at 480 (or maybe a bit higher) for IE7/8 and other browsers that can't transform to single-column - don't support mediaquery. Georg __ 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/
