Re: [css-d] css3

[Bill Brown]

David Laakso wrote:
> Is PC Safari and Chrome rendering (unable to view this end for a lot of 
> boring reasons):
> 
> 1/ border-radius
> 2/ box-shadow
> 3/ text-shadow
> 

Tested in XP/VirtualBox on Ubuntu Ibex:
Safari and Chrome both appear to recognize your border-radius, 
box-shadow and text-shadow settings as they stand now.

Hope it helps. Would have responded earlier, but there was some "static" 
on the list that I had to filter out first.

;-)

-- 

__
css-discuss [cs...@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] css3

[David Laakso]

Bill Brown wrote:
> David Laakso wrote:
>>
>> 
>
> Tested in XP/VirtualBox on Ubuntu Ibex:
> Safari and Chrome both appear to recognize your border-radius, 
> box-shadow and text-shadow settings as they stand now.
>
> Hope it helps. Would have responded earlier, but there was some 
> "static" on the list that I had to filter out first.
>
>
>



Thanks.
~d
"Take no prisoners."


-- 

A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/

__
css-discuss [cs...@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] css3

[peter hyde-smith]

 David Laakso  wrote: 
> Is PC Safari and Chrome rendering (unable to view this end for a lot of 
> boring reasons):
> 
> 1/ border-radius
> 2/ box-shadow
> 3/ text-shadow
> 
> Known issues: there are many-- thanks for not reminding me...
> 
> 

In Chrome 1.0.154.43 on Win Vista SP2, see screen shot here...

http://www.fatpawdesign.com/laaksoscreenshot.png

You're looking okay in IE7.

Best,

Peter
www.fatpawdesign.com
GO CARDS!!!
__
css-discuss [cs...@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] css3

[Gunlaug Sørtun]

David Laakso wrote:
> Is PC Safari and Chrome rendering (unable to view this end for a lot
> of boring reasons):
> 
> 1/ border-radius 2/ box-shadow

1/2 combination:
   Safari - OK,
   Chrome - FAULTY (looks terrible)

> 3/ text-shadow

2:
   Safari - YES,
   Chrome - NO.

> Known issues: there are many-- thanks for not reminding me...

You're welcome :-)

> 

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@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] css3

[Gunlaug Sørtun]

David Laakso wrote:
> Farewell. Time to break-out the coil of rope and take it to the woods...
> ~d

Hey ... that's *my* line!

G
-- 
http://www.gunlaug.no
__
css-discuss [cs...@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] css3

[David Laakso]

Gunlaug Sørtun wrote:
> David Laakso wrote:
>> Is PC Safari and Chrome rendering (unable to view this end for a lot
>> of boring reasons):
>>
>> 1/ border-radius 2/ box-shadow
>
> 1/2 combination:
>   Safari - OK,
>   Chrome - FAULTY (looks terrible)
>
>> 3/ text-shadow
>
> 2:
>   Safari - YES,
>   Chrome - NO.
>
>> Known issues: there are many-- thanks for not reminding me...
>
> You're welcome :-)
>
>> 
>
> regards
> Georg


Farewell. Time to break-out the coil of rope and take it to the woods...
~d







-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.com/

__
css-discuss [cs...@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] css3

[David Hucklesby]

On Sun, 18 Jan 2009 14:22:05 -0500, David Laakso wrote:
> Is PC Safari and Chrome rendering (unable to view this end for a lot of 
> boring reasons):
>
> 1/ border-radius
> 2/ box-shadow
> 3/ text-shadow
>
> Known issues: there are many-- thanks for not reminding me...
> 


PC Safari 3.2.1 renders all three. The box-shadow on the center
column boxes looks odd - the shadow is on the bottom only, and appears
to be offset from the left, but there is no corresponding shadow 
to the right.

PC Chrome 1.0.154.43 has no text-shadow, while box-shadow is much
larger than on Safari, extending to all sides of the top row boxes, and
top and bottom only of the main content's boxes. The border-radius
creates a sharp right-angle black corner instead of a rounded corner.

Viewed on a Mac running Windows xp under VMware Fusion "Unity".

Cordially,
David
--

__
css-discuss [cs...@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] css3

[David Laakso]

peter hyde-smith wrote:
>
> In Chrome 1.0.154.43 on Win Vista SP2, see screen shot here...
>
> http://www.fatpawdesign.com/laaksoscreenshot.png
>
>
> www.fatpawdesign.com
>
>   


Oh, my...
"Twinkle, Twinkle, Little Star"



-- 

A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/

__
css-discuss [cs...@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] css3

[David Laakso]

David Hucklesby wrote:
> On Sun, 18 Jan 2009 14:22:05 -0500, David Laakso wrote:
>   
>> Is PC Safari and Chrome rendering (unable to view this end for a lot of 
>> boring reasons):
>>
>> 1/ border-radius
>> 2/ box-shadow
>> 3/ text-shadow
>>
>> Known issues: there are many-- thanks for not reminding me...
>> 
>> 
>
>
> PC Safari 3.2.1 renders all three. The box-shadow on the center
> column boxes looks odd - the shadow is on the bottom only, and appears
> to be offset from the left, but there is no corresponding shadow 
> to the right.


Ah, so. See that now (blind as a bat on this end) on Mac/Safari. It's 
fixable. Thanks.


-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.com/

__
css-discuss [cs...@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] CSS3

[Jack Timmons]

On Tue, Mar 3, 2009 at 1:34 PM, Atkinson, Sarah <
sarah.atkin...@cookmedical.com> wrote:

> Does anyone know when Browsers will start supporting CSS3?
>
>
Define "Start supporting CSS3"?

Most of the "major" browsers do. Not sure about IE8, but FF, Safari, and
Opera support some CSS3 standards. They don't even support CSS2 fully, but I
think most of them are just about there. Opera may have all of CSS2, I
haven't checked in so long.

With CSS, it isn't a "do they support CSS or not", its "do they support the
elements I plan on using or not."

Chart gratis from PPK

http://www.quirksmode.org/css/contents.html

-- 
-Jack Timmons
http://www.trotlc.com
Twitter: @jorachim
__
css-discuss [cs...@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] CSS3

[Jack Timmons]

On Tue, Mar 3, 2009 at 1:43 PM, Jack Timmons  wrote:

>
>
> On Tue, Mar 3, 2009 at 1:34 PM, Atkinson, Sarah <
> sarah.atkin...@cookmedical.com> wrote:
>
>> Does anyone know when Browsers will start supporting CSS3?
>>
>>
>
Also:

http://www.css3.info


-- 
-Jack Timmons
http://www.trotlc.com
Twitter: @jorachim
__
css-discuss [cs...@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] CSS3

[Ankeet P]

On Tue, Mar 3, 2009 at 2:34 PM, Atkinson, Sarah
 wrote:
> Does anyone know when Browsers will start supporting CSS3?

Perhaps the question should be when will CSS3 be officially
recommended? Or when browsers start conforming to more of the
standards (i.e. border-radius instead of -moz-border-radius and its
webkit variation)?
--Ankeet [ http://www.skyisturningred.com/ ]
__
css-discuss [cs...@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] CSS3 101

[Isabel Santos]

Hi Ted,

first of all, you use the tags that make sense for your content,
not because it is "css-ish".
If your data should be presented in a list, because for instance,
it constitutes a list of items, thats ok.
If it is tabular data, it should go on a table.

As for the alignment, you are having issues with css positioning.
You can tell the items n a list to display in rows several ways:
Using "diplay: inline-box" will make the lis behave like inline boxes.
Using "float: left" will float the items to the left.
Using "display: table" will present them as a table
(but then it would make more sense to use an actual table.)
The advantage of the list is that you already have a container for the list,
the ul itself, so you do not need the div.

CSS positioning may be kind of hard to grasp in the begining,
but once you get the fundamentals, everything makes sense,
so I would advice you to go further then w3school,
google will give you a lot on "CSS Positioning".

As for the files,
my trick to test a bit of code without the external files,
is to change the css name on the call to anything else but its name.
It doesn't return any error, just skips the loading.

Or you can comment out parts of the code
you do not wish to parse at any moment.

Hope it helps,
isabel



On Fri, May 11, 2012 at 11:28 PM, Ted Rolle Jr.  wrote:

> I've lurked on this list, but the level of expertise required to understand
> posts is beyond my level.  I've been to CSS3 design sites (w3school and
> others).
>
> I have 5 (may increase) boxes for data entry.  Right now they'er vertically
> aligned.  I'm using  rather than  because that seems more
> CSS-ish.
>
> How can I (if possible) have the boxes align in left-to-right columns and
> as many rows as needed?  The variable alignment is for different platforms.
>
> Do I have one big  that contains one  for each data-entry box?
>
> There is some CSS code in CSS files.  Can I start fresh and use only CSS on
> the page without having the CSS in the files interfering?
>
> Ted
>
> --
> GPG/PGP public key: 0xB07F9AAE
> __
> 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] CSS3 101

[Ted Rolle, Jr.]

On 05/12/2012 08:08 PM, Isabel Santos wrote:
> Hi Ted,
>
> first of all, you use the tags that make sense for your content,
> not because it is "css-ish".
> If your data should be presented in a list, because for instance,
> it constitutes a list of items, thats ok.
> If it is tabular data, it should go on a table.
Thanks so much for the reply...even at this level I have to read it a
couple of times.
The pointer to a web search will be helpful.

Ted
__
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] CSS3 101

[David Laakso]

 Thanks so much for the reply...even at this level I have to read it a
couple of times.
The pointer to a web search will be helpful.
 Ted

Putting your page on a public server and providing a clickable link to
it in your post to the list may get you some replies of a more
immediate and practical nature
Best,
David Laakso
-- 
Chelsea Creek Studio
http://ccstudi.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] CSS3 101

[Ted Rolle, Jr.]

On 05/12/2012 10:27 PM, David Laakso wrote:
>  Thanks so much for the reply...even at this level I have to read it a
> couple of times.
> The pointer to a web search will be helpful.
>  Ted
>
> Putting your page on a public server and providing a clickable link to
> it in your post to the list may get you some replies of a more
> immediate and practical nature
> Best,
> David Laakso
Good idea!  I'll clean it up a bit (I was trying different borders...)
and put it on my server.  Um, ..., after I upgrade the operating
system... so it won't be immediately.

Ted
__
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] css3 animations

[Philippe Wittenbergh]

Le 23 juin 2012 à 04:45, Sandy a écrit :

> 
> http://sandyfeldman.com/tests/animation/css3animation.html
> 
> http://jigsaw.w3.org/css-validator/validator
> turns up 80 errors on the css, all connected to
> @-moz-keyframes and -moz-animation
> is there a way to get the animations and have the css validate? Should I be 
> rewriting this?

Under 'options', you can turn vendor prefixed stuff to 'warning'.
Dunno about the rest of your post as you've coded your page to be Gecko only, 
and I don't have Firefox on this machine.

You do know that WebKit browsers, Opera and IE10 also support animations with 
the appropriate prefixes, I hope…

Philippe
--
Philippe Wittenbergh
http://l-c-n.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] css3 animations

[Sandy]

http://sandyfeldman.com/tests/animation/css3animation.html

http://jigsaw.w3.org/css-validator/validator turns up 80 errors on
the css, all connected to @-moz-keyframes and -moz-animation



Under 'options', you can turn vendor prefixed stuff to 'warning'.

thanks.



You do know that WebKit browsers, Opera and IE10 also support
animations with the appropriate prefixes, I hope…


Philippe, thank you much for taking the time to look at this. I am going 
to look for the appropriate prefixes and try again.


best regards and thanks again,
Sandy
__
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] CSS3 Transitions

[Pi Dizayn]

Define expanding left.


On Tue, Apr 23, 2013 at 1:13 PM, Anton Steiner  wrote:

> Hello
> CSS3 transitions are very amazing and i would try it for a
> search-bar. But the bar shoud expand to left. Is this possible with
> transitions? If found no solution to do so.
>
> Mny tx
> Anton
>
> __
> 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/
>



-- 
Boray Eris
www.pidizayn.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] CSS3 Transitions

[Barney Carroll]

Maybe you could use the 'left' property. Generally trial and error is
incredibly easy with transitions: set the element to transition every
property:

element {
transition: .3s;
}

Then try changing its properties on class or :hover / :focus state change,
or modify its properties directly with Firebug or Webkit's DOM Inspector.

Apple's website features an effect that sounds analogous to what you
describe, and it's achieved with transitions: when you click on the search
input field, a class is applied to the header wrapper (#globalheader),
which triggers new rules to be applied:

http://www.apple.com/uk/

Regards,
Barney Carroll

barney.carr...@gmail.com
+44 7429 177278

barneycarroll.com


On 23 April 2013 11:13, Anton Steiner  wrote:

> Hello
> CSS3 transitions are very amazing and i would try it for a
> search-bar. But the bar shoud expand to left. Is this possible with
> transitions? If found no solution to do so.
>
> Mny tx
> Anton
>
> __
> 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] CSS3 Selectors

[Micky Hulse]

Are you using it for anything mission critical? Personally, I let
something like that gracefully degrade. Or, looking at:

http://caniuse.com/#search=nth-

Seems like contemporary browsers have a handle on that. Sometimes I'll
just make sure there's an alternative option (or, it degrades
gracefully) for older IEs.

I'm not a huge fan of adding polyfills for everything, unless I'm
already using them for a good reason.

That's my .2 cents. :D
__
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] CSS3 Selectors

[Frank Taylor]

So far I've only had to really use the :nth-type selectors for tables, and for 
creating some demos on layouts. 

When it comes to tables, I'd created an html table-maker that optionally 
generates helper classes. 

Outside of tables, I really haven't had projects that required :nth-child 
support in older browsers on any other html elements. 






On Jun 12, 2013, at 2:11 PM, Tom Livingston wrote:

> List,
> 
> I use selectivizr frequently. Do you use this or something like it?
> What's your method for dealing with, for example, a lack of support
> for:
> 
> p:nth-of-type(3n){
> color: red;
> }
> 
> TIA!
> 
> --
> 
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] CSS3 Selectors

[Tom Livingston]

On Wed, Jun 12, 2013 at 4:31 PM, Frank Taylor  wrote:
> So far I've only had to really use the :nth-type selectors for tables, and 
> for creating some demos on layouts.
>
> When it comes to tables, I'd created an html table-maker that optionally 
> generates helper classes.
>
> Outside of tables, I really haven't had projects that required :nth-child 
> support in older browsers on any other html elements.
>
>
>
> 
> 
>
> On Jun 12, 2013, at 2:11 PM, Tom Livingston wrote:
>
>> List,
>>
>> I use selectivizr frequently. Do you use this or something like it?
>> What's your method for dealing with, for example, a lack of support
>> for:
>>
>> p:nth-of-type(3n){
>> color: red;
>> }
>>
>> TIA!
>>
>> --


I should add that I wrap selectivizr in a conditional for IE less than
8, so not everyone has to load it.

Here's a typical use case:


.wrap div{width: 32%;margin-right:2%;float:left}
.wrap div:last-of-type{margin-right:0;}



 
 
 


I prefer this over adding additional classes. Yes, here it's only one
additional class, but you get the idea. In IE 8 the 3rd inner div
would wrap below.

--

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] CSS3 Selectors

[Frank Taylor]

In your exact use case,I've solved the problem  by using the adjacent sibling 
selector. More than three items and I consider things a little too messy;  I'll 
revert to JS or helper classes for more than three items:


> 
> .wrap div{width: 32%;margin-right:2%;float:left}
> .wrap div + div + div {margin-right:0;}
> 
> 
> 
> 
> 
> 
> 



On Jun 12, 2013, at 2:46 PM, Tom Livingston wrote:

> On Wed, Jun 12, 2013 at 4:31 PM, Frank Taylor  
> wrote:
>> So far I've only had to really use the :nth-type selectors for tables, and 
>> for creating some demos on layouts.
>> 
>> When it comes to tables, I'd created an html table-maker that optionally 
>> generates helper classes.
>> 
>> Outside of tables, I really haven't had projects that required :nth-child 
>> support in older browsers on any other html elements.
>> 
>> 
>> 
>> 
>> 
>> 
>> On Jun 12, 2013, at 2:11 PM, Tom Livingston wrote:
>> 
>>> List,
>>> 
>>> I use selectivizr frequently. Do you use this or something like it?
>>> What's your method for dealing with, for example, a lack of support
>>> for:
>>> 
>>> p:nth-of-type(3n){
>>>color: red;
>>> }
>>> 
>>> TIA!
>>> 
>>> --
> 
> 
> I should add that I wrap selectivizr in a conditional for IE less than
> 8, so not everyone has to load it.
> 
> Here's a typical use case:
> 
> 
> .wrap div{width: 32%;margin-right:2%;float:left}
> .wrap div:last-of-type{margin-right:0;}
> 
> 
> 
> 
> 
> 
> 
> 
> I prefer this over adding additional classes. Yes, here it's only one
> additional class, but you get the idea. In IE 8 the 3rd inner div
> would wrap below.
> 
> --
> 
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] CSS3 Selectors

[Tom Livingston]

On Wed, Jun 12, 2013 at 4:50 PM, Frank Taylor  wrote:
> In your exact use case,I've solved the problem  by using the adjacent sibling 
> selector. More than three items and I consider things a little too messy;  
> I'll revert to JS or helper classes for more than three items:
>
>
>> 
>> .wrap div{width: 32%;margin-right:2%;float:left}
>> .wrap div + div + div {margin-right:0;}
>> 
>>
>> 
>> 
>> 
>> 
>> 


I like it. That idea never occurred to me, sadly.


--

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] CSS3 Selectors

[Frank Taylor]

Your one and only caveat is IE7: if there are HTML comments between the divs, 
then the adjacent sibling selector doesn't work. 

In the one case where our CMS was kicking out comments, I reverted to the 
non-adjacent selector:

>> .wrap div ~  div ~  div {margin-right:0;}

Mind you, if you're dealing with a CMS where you have a variable amount of divs 
(between 2 and 4)a no-CSS3, no-JS approach becomes massively more difficult 
and requires exponentially more whisky (for me, at least). 





On Jun 12, 2013, at 3:13 PM, Tom Livingston wrote:

> I like it. That idea never occurred to me, sadly.

__
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] css3 selectors

[Nick Fitzsimons]

On Thu, March 26, 2009 1:21 pm, Climis, Tim wrote:
> I'm just curious, is there a css3 selector for previous siblings?  And if
> there is, how widely supported is it?
>
> It'd be useful for styling paragraphs that come before (introducing) lists
> for instance.
>

No, but you could achieve the same thing (for the example you give) using
CSS2.1 adjacent-sibling selectors [1]:

p  + ul {
 font-style: italic;
}


[1] 


Cheers,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/


__
css-discuss [cs...@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] css3 selectors

[Mauricio (Maujor) Samy Silva]

> I'm just curious, is there a css3 selector for previous siblings?  And if 
> there is, how widely supported is it?
---
Yes! There is.

Sintax is:
ul ~ p {...} matches p elements that comes before ul elements.

Firefox, Opera and Safari on windows support it.
IE 7 doesn't support.
Don't know about others.
Maurício


__
css-discuss [cs...@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] css3 selectors

[Mauricio (Maujor) Samy Silva]

Ops! My fault on previous email:

> Sintax is:

ul ~ p {...} matches p elements that comes AFTER ul elements.

Maurício 

__
css-discuss [cs...@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] css3 selectors

[Climis, Tim]

> you could achieve the same thing (for the example you give) using
> CSS2.1 adjacent-sibling selectors [1]:

> p  + ul {
>  font-style: italic;
> }

>From the spec:

> Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is 
> the subject of the selector. The selector matches if E1 and E2 share the same 
> parent in the document tree and E1 immediately precedes E2, ignoring 
> non-element nodes (such as text nodes and comments).

These are the things you need to bring:

  Bananas
  Pie


Unless I'm misreading the spec, that would match the  and make my list text 
italicized, which isn't what I want.  I want to match the .

Something like E1 + E2, where E1 is the subject of the selector.

---Tim
__
css-discuss [cs...@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] css3 selectors

[Nick Fitzsimons]

On Thu, March 26, 2009 2:03 pm, Climis, Tim wrote:
> Unless I'm misreading the spec, that would match the  and make my list
> text italicized, which isn't what I want.  I want to match the .
>


DOH! Yes, I fail - sorry :-(

Well, it is lunchtime...
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/


__
css-discuss [cs...@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] css3 selectors

[Michael Stewart]

On Mar 26, 2009, at 10:06 AM, Mauricio ((Maujor)) Samy Silva wrote:

>> I'm just curious, is there a css3 selector for previous siblings?   
>> And if
>> there is, how widely supported is it?
> -- 
> -
> Yes! There is.
>
> Sintax is:
> ul ~ p {...} matches p elements that comes before ul elements.

I don't believe that this is correct. This would match a p element  
that comes AFTER (though not necessarily immediately after) the list  
element.

See:
http://www.w3.org/TR/css3-selectors/#general-sibling-combinators


Michael Stewart
bagelstew...@gmail.com

__
css-discuss [cs...@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] css3 selectors

[Philippe Wittenbergh]

On Mar 26, 2009, at 10:21 PM, Climis, Tim wrote:

> I'm just curious, is there a css3 selector for previous siblings?   
> And if there is, how widely supported is it?
>
> It'd be useful for styling paragraphs that come before (introducing)  
> lists for instance.

Nope, nothing like that exists.


Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@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] css3 selectors

[Alan Gresley]

Climis, Tim wrote:

> These are the things you need to bring:
> 
>   Bananas
>   Pie
> 
> 
> Unless I'm misreading the spec, that would match the  and make my list 
> text italicized, which isn't what I want.  I want to match the .
> 
> Something like E1 + E2, where E1 is the subject of the selector.
> 
> ---Tim


You can only target it indirectly.

p:first-child {...}

p ~ p  {...} /* overriding style */


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@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] css3 selectors

[Climis, Tim]

> Ops! My fault on previous email:

> > Sintax is:

> ul ~ p {...} matches p elements that comes AFTER ul elements.

Yeah, my testing had just discovered that. :(  Digging into the spec to see 
what was up, it looks like there's not a selector for what I want. Maybe 
because it would need a second pass to figure out who's before.

The ~ matches all  the p elements after a ul element.  The + matches a p 
element immediately after a ul element.

Oh well.
__
css-discuss [cs...@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] css3 selectors

[Sarah Atkinson]

>>> ul ~ p {...} matches p elements that comes AFTER ul elements.
>> The ~ matches all  the p elements after a ul element.  The + matches a p
>> element immediately after a ul element.
 What about doing it backwards then put a class on the  and target the
following 
 

__
css-discuss [cs...@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] css3 selectors

[Bill Brown]

Climis, Tim wrote:
> I'm just curious, is there a css3 selector for previous siblings?
> And if there is, how widely supported is it?
> 
> It'd be useful for styling paragraphs that come before (introducing)
> lists for instance.

None exists, but you could use jQuery to do it:


p.p_before_ul
   {
 font-weight:bold;
   }



   google.load('jquery','1');
   google.setOnLoadCallback(function(){
 $('ul').prev('p').addClass('p_before_ul');
   });


Anyway, hope it helps.
--Bill

-- 

__
css-discuss [cs...@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] css3 selectors

[Climis, Tim]

> What about doing it backwards then put a class on the  and target the
> following 

What I'm going for is to take the bottom margin off of a paragraph preceding a 
list.  I don't need the list to be styled any differently, so there's no reason 
to target it at all.

Here's a list:
* Something
* Something else

Instead of:

Here's a list:

*something
*something else
 
So targeting the ul doesn't make much sense.  What I've got now is a 
"list_header" class that goes on all the p elements that are really list 
headers.  But I thought it would be cool if I didn't need the class, and could 
just say "any paragraph before a list is a list header" instead.

__
css-discuss [cs...@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] css3 selectors

[Atkinson, Sarah]

> You should use h* elements instead of p elements for any kind of
> header.  You might then not need to specify any classes and it's more
> semantically correct
>> What I'm going for is to take the bottom margin off of a paragraph
>> preceding a list.  I don't need the list to be styled any
>> differently, so there's no reason to target it at all.

Scott has a valid point here. Maybe this is the way you should be doing it.
Also is it possible to make up ones own elements? That's sorta what XML is
right? If you could do that then you can style it just like a p or h1 tag.

__
css-discuss [cs...@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] css3 selectors

[Scott Mueller]

You should use h* elements instead of p elements for any kind of  
header.  You might then not need to specify any classes and it's more  
semantically correct

Sent from my iPhone

On Mar 26, 2009, at 9:21 AM, "Climis, Tim"  wrote:

>> What about doing it backwards then put a class on the  and  
>> target the
>> following 
>
> What I'm going for is to take the bottom margin off of a paragraph  
> preceding a list.  I don't need the list to be styled any  
> differently, so there's no reason to target it at all.
>
> Here's a list:
> * Something
> * Something else
>
> Instead of:
>
> Here's a list:
>
> *something
> *something else
>
> So targeting the ul doesn't make much sense.  What I've got now is a  
> "list_header" class that goes on all the p elements that are really  
> list headers.  But I thought it would be cool if I didn't need the  
> class, and could just say "any paragraph before a list is a list  
> header" instead.
>
> __
> css-discuss [cs...@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 [cs...@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] css3 selectors

[Climis, Tim]

> Scott has a valid point here. Maybe this is the way you should be doing it.
> Also is it possible to make up ones own elements? That's sorta what XML is
> right? If you could do that then you can style it just like a p or h1 tag.

He does.  And I may do that.  I'm not using h6 for anything on this site yet.  
But there are a few things I wish for that would make even more semantic sense. 
 A. lists contained in paragraphs, or B. a list header element (like thead or 
th)   

And with XHTML, I could add my own elements, but then I'd have to write my own 
doctype or namespace, and it'd probably throw IE into all sorts of fun 
conniption fits.

But I think now that I've written an entire email without any mention of CSS, 
we're officially off topic, and should close the thread.

---Tim

__
css-discuss [cs...@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] css3 selectors

[coll...@sullivanlehdesigns.com]

> What I'm going for is to take the bottom margin off of a paragraph  
> preceding a list.  I don't need the list to be styled any  
> differently, so there's no reason to target it at all.
>
> Here's a list:
> * Something
> * Something else
>
> Instead of:
>
> Here's a list:
>
> *something
> *something else
>
> So targeting the ul doesn't make much sense.  What I've got now is a  
> "list_header" class that goes on all the p elements that are really  
> list headers.  But I thought it would be cool if I didn't need the  
> class, and could just say "any paragraph before a list is a list  
> header" instead.

Wouldn't it be easier to either:
- default to have paragraph spacing apply above, not below (padding- 
top vs padding-bottom) with no top padding on a ul
- or if the ul follows a p, give it a negative margin-top

+++
colleen sullivan leh




__
css-discuss [cs...@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] css3 selectors

[David Hucklesby]

Climis, Tim wrote:
>> What about doing it backwards then put a class on the  and target the
>> following 
> 
> What I'm going for is to take the bottom margin off of a paragraph preceding 
> a list.  I don't need the list to be styled any differently, so there's no 
> reason to target it at all.
> 
[...]
Tim,
How about *adding* a negative top margin to the UL? viz:

p + ul { margin-top: -1em; }


Cordially,
David
--
__
css-discuss [cs...@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] css3 selectors

[Climis, Tim]

> How about *adding* a negative top margin to the UL? viz:

An interesting idea that I had not thought of.  It would work though.

---Tim
__
css-discuss [cs...@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] css3 selectors

[Kathy Wheeler]

On 27/03/2009, at 4:26 AM, Climis, Tim wrote:

> But there are a few things I wish for that would make even more  
> semantic sense.  A. lists contained in paragraphs, or B. a list  
> header element (like thead or th)   


Perhaps a definition list could be styled to achieve what you want?
http://www.w3.org/MarkUp/html3/deflists.html

You'd probably need to put a bullet in as a css background image as  
dl does not seem to support list-style-type as ul and ol do, but dl  
does have an optional list header  which could be styled ...

Cheers,
KathyW.
__
css-discuss [cs...@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] [+] css3 pie?

[Thierry Koblentz]

> Has anyone used this?
> 
> css3pie.com

No, but I just twitted this:

CSS3 Playground by Mike Plate: http://css3.mikeplate.com/ /* cool stuff */

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
css-discuss [cs...@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] CSS3 Resources Please

[David Laakso]

On 6/29/11 6:57 PM, Elli Vizcaino wrote:

Hello CSS Discuss,

Looking for some good CSS3 resources/sites.

TIA
Elli




http://www.css3.info/  http://www.css3.info/>
http://css3please.com/  http://css3please.com/>
http://www.w3.org/TR/css3-roadmap/  
http://www.w3.org/TR/css3-roadmap/>
http://www.slideshare.net/maxdesign/css3-media-queries/  
http://www.slideshare.net/maxdesign/css3-media-queries/>
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries  
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries>
http://protofluid.com/?c=mediaQueries  
http://protofluid.com/?c=mediaQueries>
http://www.standardista.com/css3/css3-selector-browser-support  
http://www.standardista.com/css3/css3-selector-browser-support>

Google is your friend.

~d

--
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] CSS3 Resources Please

[Elli Vizcaino]

> > Hello CSS Discuss,
> >
> > Looking for some good CSS3 resources/sites.
> >
> > TIA
> > Elli
> >
> 
> 
> http://www.css3.info/  http://www.css3.info/>
> http://css3please.com/  http://css3please.com/>
> http://www.w3.org/TR/css3-roadmap/ 
> http://www.w3.org/TR/css3-roadmap/>
> http://www.slideshare.net/maxdesign/css3-media-queries/ 
> http://www.slideshare.net/maxdesign/css3-media-queries/>
> http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries 
> http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries>
> http://protofluid.com/?c=mediaQueries 
> http://protofluid.com/?c=mediaQueries>
> http://www.standardista.com/css3/css3-selector-browser-support 
> http://www.standardista.com/css3/css3-selector-browser-support>
> 
> Google is your friend.
> 
> ~d
> 

Thanks! I tried google but wasn't crazy about the search results that were 
coming up. I'll take a look at these...

:))


__
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] CSS3 Opacity Inheritance

[L. David Baron]

On Wednesday 2011-10-19 08:36 -0700, Elli Vizcaino wrote:
> If I recall correctly, child elements inherit the opacity property
> of parent elements. Meaning, any text within a div with an opacity
> declaration would then also take on the same values. Has this
> changed with CSS3?

What happens with opacity isn't inheritance, but it does affect all
the descendants of an element.  When an element has opacity less
than 1, the element and all of its descendants get drawn into a
buffer, and then, in a single step, that buffer is drawn with
opacity onto what's underneath the element.  This means that things
within the element can fully hide each other, even though, when
everything is drawn, the end result is partially transparent.

I wrote some visual examples of this at:
http://dbaron.org/talks/2009-03-15-css3-sxsw/slide-4.xhtml
(and compared with rgba() colors, which affect just a single drawing
operation rather than an entire subtree).

-David

-- 
𝄞   L. David Baron http://dbaron.org/   𝄂
𝄢   Mozilla   http://www.mozilla.org/   𝄂
__
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] CSS3 Opacity Inheritance

[Tom Livingston]

I believe this to still be the case.



On Wed, Oct 19, 2011 at 11:36 AM, Elli Vizcaino  wrote:
>
>
> Hello CSS Discuss,
>
> If I recall correctly, child elements inherit the opacity property of parent 
> elements. Meaning, any text within a div with an opacity declaration would 
> then also take on the same values. Has this changed with CSS3?
>
>
> 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/
>



-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] CSS3 Opacity Inheritance

[Elli Vizcaino]

>What happens with opacity isn't inheritance, but it does affect all
>the descendants of an element.  When an element has opacity less
>than 1, the element and all of its descendants get drawn into a
>buffer, and then, in a single step, that buffer is drawn with
>opacity onto what's underneath the element.  This means that things
>within the element can fully hide each other, even though, when
>everything is drawn, the end result is partially transparent.
>
>I wrote some visual examples of this at:
>http://dbaron.org/talks/2009-03-15-css3-sxsw/slide-4.xhtml
>(and compared with rgba() colors, which affect just a single drawing
>operation rather than an entire subtree).
>
>-David


I found this response a little confusing. So what happens when one uses hex 
colors? And how does one explain this to someone else in layman's terms? 
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/

Re: [css-d] CSS3 Opacity Inheritance

[Philippe Wittenbergh]

On Oct 20, 2011, at 12:36 AM, Elli Vizcaino wrote:

> If I recall correctly, child elements inherit the opacity property of parent 
> elements. Meaning, any text within a div with an opacity declaration would 
> then also take on the same values. Has this changed with CSS3?

As David notes, the descendants of a box with opacity applied don't inherit 
that opacity. The property is applied to the (block) box and all its 
descendants. If what you want is a box with a semi-transparent background and / 
or borders, then rgba() or hsla() colours are your friend.

Philippe
--
Philippe Wittenbergh
http://l-c-n.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] CSS3 Opacity Inheritance

[Elli Vizcaino]

>On Oct 20, 2011, at 12:36 AM, Elli Vizcaino wrote:

>
>> If I recall correctly, child elements inherit the opacity property of parent 
>> elements. Meaning, any text within a div with an opacity declaration would 
>> then also take on the same values. Has this changed with CSS3?
>
>As David notes, the descendants of a box with opacity applied don't inherit 
>that opacity. The property is applied to the (block) box and all its 
>descendants. If what you want is a box with a semi-transparent background and 
>/ or borders, then rgba() or hsla() colours are your friend.
>
>Philippe
>--
>Philippe Wittenbergh
>http://l-c-n.com/


That seems like a contradictory statement and leaves me still somewhat 
confused. What I'm getting at is, if a box element gets an opacity property 
with a value of  0.5 for a semi transparent effect, do child elements such as 
text then display in the browser at that same semi-transparent value? 


 
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/

Re: [css-d] CSS3 Opacity Inheritance

[Tom Livingston]

I think what it means is the elements get opacity applied - parent and child - 
simultaneously as if they were separate elements. 

Out of curiosity, if it was inherited, would the opacity amount get compounded 
the more levels deep the elements went??

Sent from iOS 5

On Oct 20, 2011, at 12:28 PM, Elli Vizcaino  wrote:

>> On Oct 20, 2011, at 12:36 AM, Elli Vizcaino wrote:
> 
>> 
>>> If I recall correctly, child elements inherit the opacity property of 
>>> parent elements. Meaning, any text within a div with an opacity declaration 
>>> would then also take on the same values. Has this changed with CSS3?
>> 
>> As David notes, the descendants of a box with opacity applied don't inherit 
>> that opacity. The property is applied to the (block) box and all its 
>> descendants. If what you want is a box with a semi-transparent background 
>> and / or borders, then rgba() or hsla() colours are your friend.
>> 
>> Philippe
>> --
>> Philippe Wittenbergh
>> http://l-c-n.com/
> 
> 
> That seems like a contradictory statement and leaves me still somewhat 
> confused. What I'm getting at is, if a box element gets an opacity property 
> with a value of  0.5 for a semi transparent effect, do child elements such as 
> text then display in the browser at that same semi-transparent value? 
> 
> 
>  
> 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-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] CSS3 Opacity Inheritance

[David Laakso]

On 10/20/11 12:28 PM, Elli Vizcaino wrote:
What I'm getting at is, if a box element gets an opacity property with 
a value of  0.5 for a semi transparent effect, do child elements such 
as text then display in the browser at that same semi-transparent value?

Elli Vizcaino





Try it and see.

--
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] CSS3 Opacity Inheritance

[Philippe Wittenbergh]

On Oct 21, 2011, at 1:28 AM, Elli Vizcaino wrote:

>> As David notes, the descendants of a box with opacity applied don't inherit 
>> that opacity. The property is applied to the (block) box and all its 
>> descendants. If what you want is a box with a semi-transparent background 
>> and / or borders, then rgba() or hsla() colours are your friend.
>> 
> 
> 
> That seems like a contradictory statement and leaves me still somewhat 
> confused. What I'm getting at is, if a box element gets an opacity property 
> with a value of  0.5 for a semi transparent effect, do child elements such as 
> text then display in the browser at that same semi-transparent value? 

There is absolutely no contradiction. Opacity is applied to the box and 
everything that box contains. The box as a whole becomes translucent. Opacity 
is _not_ something to make just a transparent background. You can compare it to 
reducing the opacity of a layer group in Photoshop. 

View this testcase and compare the 2 boxes:
http://dev.l-c-n.com/_temp/translucent-transparent.html

Philippe
--
Philippe Wittenbergh
http://l-c-n.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] CSS3 Opacity Inheritance

[Elli Vizcaino]

 

> On 10/20/11 12:28 PM, Elli Vizcaino wrote:
>>  What I'm getting at is, if a box element gets an opacity property with 
> a value of  0.5 for a semi transparent effect, do child elements such as text 
> then display in the browser at that same semi-transparent value?
>>  Elli Vizcaino
>> 
> 
> 
> Try it and see.
> 
> -- Desktop. Laptop. Tablet. Mobile!
> http://chelseacreekstudio.com/


Good idea!  

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/

Re: [css-d] CSS3 Opacity Inheritance

[Elli Vizcaino]

> On Oct 21, 2011, at 1:28 AM, Elli Vizcaino wrote:
> 
>>>  As David notes, the descendants of a box with opacity applied don't 
> inherit that opacity. The property is applied to the (block) box and all its 
> descendants. If what you want is a box with a semi-transparent background and 
> / 
> or borders, then rgba() or hsla() colours are your friend.
>>> 
>> 
>> 
>>  That seems like a contradictory statement and leaves me still somewhat 
> confused. What I'm getting at is, if a box element gets an opacity property 
> with a value of  0.5 for a semi transparent effect, do child elements such as 
> text then display in the browser at that same semi-transparent value? 
> 
> There is absolutely no contradiction. Opacity is applied to the box and 
> everything that box contains. The box as a whole becomes translucent. Opacity 
> is 
> _not_ something to make just a transparent background. You can compare it to 
> reducing the opacity of a layer group in Photoshop. 
> 
> View this testcase and compare the 2 boxes:
> http://dev.l-c-n.com/_temp/translucent-transparent.html
> 
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/

The photoshop analogy helps me get it but then I guess I must be 
misunderstanding the meaning of inheritance, can you tell me what exactly does 
the definition of inherit mean?


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/

Re: [css-d] CSS3 Opacity Inheritance

[Elli Vizcaino]

> I think what it means is the elements get opacity applied - parent and child 
> - 

> simultaneously as if they were separate elements. 
> 
> Out of curiosity, if it was inherited, would the opacity amount get 
> compounded 
> the more levels deep the elements went??
> 
> Sent from iOS 5

It seems like you get what inherit does/mean and and how it differs from what 
happens to child elements of a parent with opacity applied. Would you know how 
to explain the difference?



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/

Re: [css-d] CSS3 Opacity Inheritance

[Elli Vizcaino]

>>  That seems like a contradictory statement and leaves me still somewhat 

> confused. What I'm getting at is, if a box element gets an opacity property 
> with a value of  0.5 for a semi transparent effect, do child elements such as 
> text then display in the browser at that same semi-transparent value? 
> 
> There is absolutely no contradiction. Opacity is applied to the box and 
> everything that box contains. The box as a whole becomes translucent. Opacity 
> is 
> _not_ something to make just a transparent background. You can compare it to 
> reducing the opacity of a layer group in Photoshop. 
> 
> View this testcase and compare the 2 boxes:
> http://dev.l-c-n.com/_temp/translucent-transparent.html
> 
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/


Just took a loot at the opacity sample. And of course I used, Firebug to 
inspect code and firebug says that the opacity of 0.5 on the img has been 
inherited from div.a - this is why I'm confused and unsure then of what inherit 
means if the opacity is getting applied to it's descendants and yet I am being 
told it is a property that is 
not inherited. 

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/

Re: [css-d] CSS3 Opacity Inheritance

[Al Sparber]

On 10/20/2011 11:04 PM, Elli Vizcaino wrote:




On 10/20/11 12:28 PM, Elli Vizcaino wrote:

  What I'm getting at is, if a box element gets an opacity property with

a value of  0.5 for a semi transparent effect, do child elements such as text
then display in the browser at that same semi-transparent value?


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
__
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] CSS3 Opacity Inheritance

[Al Sparber]

On 10/20/2011 11:26 PM, Elli Vizcaino wrote:


Philippe Wittenbergh
http://l-c-n.com/



Just took a loot at the opacity sample. And of course I used, Firebug to 
inspect code and firebug says that the opacity of 0.5 on the img has been 
inherited from div.a - this is why I'm confused and unsure then of what inherit 
means if the opacity is getting applied to it's descendants and yet I am being 
told it is a property that is
not inherited.


Philippe used RGBA for the box on the right "b". So the image and the 
text in that second box is not transparent at all.


Make sure you are using an up-to-date version of Firefox.
__
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] CSS3 Opacity Inheritance

[Philippe Wittenbergh]

On Oct 21, 2011, at 12:09 PM, Elli Vizcaino wrote:

> The photoshop analogy helps me get it but then I guess I must be 
> misunderstanding the meaning of inheritance, can you tell me what exactly 
> does the definition of inherit mean?

Here is the CSS 2.1 definition of 'inherit':
http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit

Note that only _some_ properties are inherited. For example, the margin 
property does not inherit, but the color property does (look them up in the 
specs). You can set the color property on body and all descendants of body will 
have that color applied (unless you override it on a specific element). On the 
hand, you can specify a large top and bottom margin on a div, but the 
descendants  of that div won't have that large margin, unless you explicitly 
specify that they do so.

The opacity property does _not_ inherit, as already noted.
http://www.w3.org/TR/css3-color/#transparency

The descendants of a box with the opacity set appear translucent _because_ the 
parent box as a whole unit is made translucent.

Philippe
--
Philippe Wittenbergh
http://l-c-n.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] CSS3 Opacity Inheritance

[L. David Baron]

On Thursday 2011-10-20 20:09 -0700, Elli Vizcaino wrote:
> The photoshop analogy helps me get it but then I guess I must be
> misunderstanding the meaning of inheritance, can you tell me what
> exactly does the definition of inherit mean?

It means that the value of the property gets copied from the parent
element to its children, unless those children have another value
specified.  Classic examples of inherited properties are 'color' and
the 'font-*' properties; a classic examples of non-inherited
properties are the 'border-*' properties (since if you give an
element a border, all of its descendants don't also get a border).

You can tell that opacity is not inherited because if you do:
  hello
you'll get a different effect from:
  hello

(In a similar way, background properties are not inherited, but the
background does end up going behind descendants.  However, if you
have a background-image with some transparency, or a background
image where you can see where the tiles start and end, you'll see
that specifying the background on a child actually adds an
additional background.)

-David

-- 
𝄞   L. David Baron http://dbaron.org/   𝄂
𝄢   Mozilla   http://www.mozilla.org/   𝄂
__
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] CSS3 Opacity Inheritance

[Philippe Wittenbergh]

On Oct 21, 2011, at 12:26 PM, Elli Vizcaino wrote:

>> View this testcase and compare the 2 boxes:
>> http://dev.l-c-n.com/_temp/translucent-transparent.html

> Just took a loot at the opacity sample. And of course I used, Firebug to 
> inspect code and firebug says that the opacity of 0.5 on the img has been 
> inherited from div.a - this is why I'm confused and unsure then of what 
> inherit means if the opacity is getting applied to it's descendants and yet I 
> am being told it is a property that is 
> not inherited. 

Firebug lies.

Yes, I had to check, and indeed Firebug says that the img in that text case 
inherits the opacity from the div. ::shocked::
Check in WebKit's Web Inspector, or Opera's dragonfly and they tell you a 
different story.

Philippe
--
Philippe Wittenbergh
http://l-c-n.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] CSS3 Opacity Inheritance

[Al Sparber]

On 10/20/2011 11:33 PM, Al Sparber wrote:

On 10/20/2011 11:04 PM, Elli Vizcaino wrote:




On 10/20/11 12:28 PM, Elli Vizcaino wrote:

What I'm getting at is, if a box element gets an opacity property with

a value of 0.5 for a semi transparent effect, do child elements such
as text
then display in the browser at that same semi-transparent value?


Yes.


Just to clarify, this is not an inheritance issue (as Phillippe 
explained). It can better be described as an occupancy issue :-)


The reason why RGBA works is because it is applying an alpha 
transparency to the color - not the box.

__
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] CSS3 Opacity Inheritance

[Alan Gresley]

On 21/10/2011 2:15 PM, Elli Vizcaino wrote:


It seems like you get what inherit does/mean and and how it differs
from what happens to child elements of a parent with opacity applied.
Would you know how to explain the difference?


Try this code Elli.




#parent {
  color: white;
  background: green;
}

#child {
  color: red;
  background: white;
  border: 10px solid silver;
  padding: 1em;

}
#child:hover {
  color: white;
  background: inherit;
}




  Parent
  Child Element ~ hover me
  Element




--
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/

Re: [css-d] CSS3 Opacity Inheritance

[Elli Vizcaino]

> 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/

Re: [css-d] CSS3 media queries

[David Laakso]

 On 9/30/10 4:46 AM, Bernat Lleonart wrote:


I'm using CSS3 media queries on a site, and I'd like them to work on 
IE8 and older browsers. I've read about css3-mediaqueries-js 
(http://code.google.com/p/css3-mediaqueries-js/), but I don't know how 
to use the script.


I'm including this on my main.css:

@media (max-width: 500px) {
...
}

I also include css3-mediaqueries.js in the head of my document, but I 
don't know what I'm missing as media queries still don't work on IE.


Thank you.








Dunno. Good question. Tried on this end, and if it is of any 
consolation, I could not make it happen, either. We're both gonna need a 
pro. Have you asked on the jQuery forum [1]?


[1]


Best,
~d


--
:: desktop and mobile ::
http://chelseacreekstudio.com/

__
css-discuss [cs...@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] CSS3 transformations: rotate

[Philippe Wittenbergh]

On Oct 6, 2010, at 2:11 AM, Gabriele Romanato wrote:

> http://onwebdev.blogspot.com/2010/10/css3-transformations-rotate.html
> 
> Opera seems not to support it.

-o-transform: rotate() works just fine here (as one would expect for something 
that is in a spec in early stages of development).


Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@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] CSS3 control over shapes?

[Chris Rockwell]

Sure, check out
http://codepen.io/search?q=tag&limit=all&order=popularity&depth=everything&show_forks=falsefor
some ideas


On Sun, Feb 9, 2014 at 4:02 PM, John Johnson  wrote:

> if you picture a store tag..a rectangle with a hole at one end for the
> string, and that end's corners each snipped off at appx 45 degrees..
>
> can CSS handle something like that, or would I be better of turning to
> HTML5 canvas?
>
> Thank you
>
> 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/
>



-- 
Chris Rockwell
__
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] CSS3 animations considered harmful

[David Laakso]

Gabriele Romanato wrote:
> Hi!
> need some responses and criticisms about my opinions expressed right  
> here:
>
> http://onwebdev.blogspot.com/2010/08/css3-animations-considered-harmful.html
>
> HTH ^^/
>
> Gabriele Romanato
>
>   


CSS is a programming language: albeit, a very simple one. It copes with 
"look and feel." Expanding CSS to include more than that is scary. But 
therein may, or may not, lie the future. /Push the envelope./

Best,
~d

-- 
http://chelseacreekstudio.com/

__
css-discuss [cs...@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] CSS3 animations considered harmful

[tedd]

At 9:19 PM -0400 8/10/10, David Laakso wrote:
>Gabriele Romanato wrote:
>>  Hi!
>>  need some responses and criticisms about my opinions expressed right 
>>  here:
>>
>>  http://onwebdev.blogspot.com/2010/08/css3-animations-considered-harmful.html
>>
>>  HTH ^^/
>>
>  > Gabriele Romanato
>
>
>CSS is a programming language: albeit, a very simple one. It copes with
>"look and feel." Expanding CSS to include more than that is scary. But
>therein may, or may not, lie the future. /Push the envelope./
>
>Best,
>~d

I agree and was very close to responding as such. However, I didn't 
think my contribution would amount to anything in that forum.

In any event, people who say that CSS is not a programming language 
must have a better understanding of programming than me -- after all, 
I only wrote my first line of code 45 years ago and still haven't 
mastered it.

Cheers,

tedd

-- 
---
http://sperling.com/
__
css-discuss [cs...@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] CSS3 animations considered harmful

[david]

tedd wrote:
> At 9:19 PM -0400 8/10/10, David Laakso wrote:
>> Gabriele Romanato wrote:
>>>  Hi!
>>>  need some responses and criticisms about my opinions expressed right 
>>>  here:
>>>
>>>  
>>> http://onwebdev.blogspot.com/2010/08/css3-animations-considered-harmful.html
>>>
>>>  HTH ^^/
>>>
>>  > Gabriele Romanato
>>
>>
>> CSS is a programming language: albeit, a very simple one. It copes with
>> "look and feel." Expanding CSS to include more than that is scary. But
>> therein may, or may not, lie the future. /Push the envelope./
>>
>> Best,
>> ~d
> 
> I agree and was very close to responding as such. However, I didn't 
> think my contribution would amount to anything in that forum.
> 
> In any event, people who say that CSS is not a programming language 
> must have a better understanding of programming than me -- after all, 
> I only wrote my first line of code 45 years ago and still haven't 
> mastered it.

CSS isn't a programming language. No control constructs like 
IF/THEN/ELSEIF, SWITCH, etc. No variables. The only programming language 
presence really are the MS extensions (Javascript functions).

-- 
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
css-discuss [cs...@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] CSS3 animations considered harmful

[Climis, Tim]

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
> boun...@lists.css-discuss.org] On Behalf Of david
> Sent: Wednesday, August 11, 2010 3:12 PM
> To: css-d
> Subject: Re: [css-d] CSS3 animations considered harmful
> 
> tedd wrote:
> > At 9:19 PM -0400 8/10/10, David Laakso wrote:
> >> Gabriele Romanato wrote:
> >>>  Hi!
> >>>  need some responses and criticisms about my opinions expressed
> >>> right
> >>>  here:
> >>>
> >>>
> >>> http://onwebdev.blogspot.com/2010/08/css3-animations-
> considered-harm
> >>> ful.html
> >>>
> >>>  HTH ^^/
> >>>
> >>  > Gabriele Romanato
> >>
> >>
> >> CSS is a programming language: albeit, a very simple one. It copes
> >> with "look and feel." Expanding CSS to include more than that is
> >> scary. But therein may, or may not, lie the future. /Push the
> >> envelope./
> >>
> >> Best,
> >> ~d
> >
> > I agree and was very close to responding as such. However, I didn't
> > think my contribution would amount to anything in that forum.
> >
> > In any event, people who say that CSS is not a programming language
> > must have a better understanding of programming than me -- after
> all,
> > I only wrote my first line of code 45 years ago and still haven't
> > mastered it.
> 
> CSS isn't a programming language. No control constructs like
> IF/THEN/ELSEIF, SWITCH, etc. No variables. The only programming
> language presence really are the MS extensions (Javascript functions).
> 

I wish there were variables.  Even variables of the macro kind for defining a 
color palette would be really great.  MAIN_COLOR = #123456;

border-color: MAIN_COLOR;
color: MAIN_COLOR;
Want to change your main color from green to blue? Change one line!  How 
awesome would that be?  But anyway...

I think the lack of control structures is a little erroneous...  the entire 
language is a giant switch statement.  If there's an element that matches such 
and such, apply these properties...

Switch (element) {
  Case 'p': margin: 1em;
}

We just leave the switch() case: out for brevity. :P

Also, isn't it instructions for a computer?  Isn't that the definition of a 
programming language?  I can understand HTML not being a language, as it 
doesn't, by itself, cause anything to happen to the text (default styling is 
CSS, after all). But CSS actually does stuff.

---Tim


__
css-discuss [cs...@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] CSS3 animations considered harmful

[bruce . somers]

David Laakso :
>
>CSS is a programming language: albeit, a very simple one. It copes with 
>"look and feel." Expanding CSS to include more than that is scary. But 
>therein may, or may not, lie the future. /Push the envelope./

Oh please, folks! CSS itself is not a programming language.  It is a structured 
set of parameters (specifications) to be processed by various programs called 
browsers. Some do that processing better than others.

Bruce
__
css-discuss [cs...@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] CSS3 animations considered harmful

[Steven DuBois]

On 08/11/2010 04:39 PM, Climis, Tim wrote:
> 
> 
>> -Original Message-
>> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
>> boun...@lists.css-discuss.org] On Behalf Of david
>> Sent: Wednesday, August 11, 2010 3:12 PM
>> To: css-d
>> Subject: Re: [css-d] CSS3 animations considered harmful
>>
>> tedd wrote:
>>> At 9:19 PM -0400 8/10/10, David Laakso wrote:
>>>> Gabriele Romanato wrote:
>>>>>  Hi!
>>>>>  need some responses and criticisms about my opinions expressed
>>>>> right
>>>>>  here:
>>>>>
>>>>>
>>>>> http://onwebdev.blogspot.com/2010/08/css3-animations-
>> considered-harm
>>>>> ful.html
>>>>>
>>>>>  HTH ^^/
>>>>>
>>>>  > Gabriele Romanato
>>>>
>>>>
>>>> CSS is a programming language: albeit, a very simple one. It copes
>>>> with "look and feel." Expanding CSS to include more than that is
>>>> scary. But therein may, or may not, lie the future. /Push the
>>>> envelope./
>>>>
>>>> Best,
>>>> ~d
>>>
>>> I agree and was very close to responding as such. However, I didn't
>>> think my contribution would amount to anything in that forum.
>>>
>>> In any event, people who say that CSS is not a programming language
>>> must have a better understanding of programming than me -- after
>> all,
>>> I only wrote my first line of code 45 years ago and still haven't
>>> mastered it.
>>
>> CSS isn't a programming language. No control constructs like
>> IF/THEN/ELSEIF, SWITCH, etc. No variables. The only programming
>> language presence really are the MS extensions (Javascript functions).
>>
> 
> I wish there were variables.  Even variables of the macro kind for defining a 
> color palette would be really great.  MAIN_COLOR = #123456;
> 
> border-color: MAIN_COLOR;
> color: MAIN_COLOR;
> Want to change your main color from green to blue? Change one line!  How 
> awesome would that be?  But anyway...
> 
> I think the lack of control structures is a little erroneous...  the entire 
> language is a giant switch statement.  If there's an element that matches 
> such and such, apply these properties...
> 
> Switch (element) {
>   Case 'p': margin: 1em;
> }
> 
> We just leave the switch() case: out for brevity. :P
> 
> Also, isn't it instructions for a computer?  Isn't that the definition of a 
> programming language?  I can understand HTML not being a language, as it 
> doesn't, by itself, cause anything to happen to the text (default styling is 
> CSS, after all). But CSS actually does stuff.
> 
> ---Tim
> 

There is LessCSS [1] which attempts to make CSS into more of a
programming language.

As for the Gabriele's original point. I don't see the advances made in
CSS3 to be harmful. Many people won't use the new "behavior" features
extensively. People can still make nice looking sites that mainly use
CSS features that have been in existence for a while now. JavaScript
will remain an important part of client side web programming for a while.

[1] http://lesscss.org/

-- 
Steven DuBois 
Free Software Foundation - Intern



signature.asc
Description: OpenPGP digital signature
__
css-discuss [cs...@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] CSS3 animations considered harmful

[pcoates]

>
>
>> -Original Message-
>> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
>> boun...@lists.css-discuss.org] On Behalf Of david
>> Sent: Wednesday, August 11, 2010 3:12 PM
>> To: css-d
>> Subject: Re: [css-d] CSS3 animations considered harmful
>>
>> tedd wrote:
>> > At 9:19 PM -0400 8/10/10, David Laakso wrote:
>> >> Gabriele Romanato wrote:
>> >>>  Hi!
>> >>>  need some responses and criticisms about my opinions expressed
>> >>> right
>> >>>  here:
>> >>>
>> >>>
>> >>> http://onwebdev.blogspot.com/2010/08/css3-animations-
>> considered-harm
>> >>> ful.html
>> >>>
>> >>>  HTH ^^/
>> >>>
>> >>  > Gabriele Romanato
>> >>
>> >>
>> >> CSS is a programming language: albeit, a very simple one. It copes
>> >> with "look and feel." Expanding CSS to include more than that is
>> >> scary. But therein may, or may not, lie the future. /Push the
>> >> envelope./
>> >>
>> >> Best,
>> >> ~d
>> >
>> > I agree and was very close to responding as such. However, I didn't
>> > think my contribution would amount to anything in that forum.
>> >
>> > In any event, people who say that CSS is not a programming language
>> > must have a better understanding of programming than me -- after
>> all,
>> > I only wrote my first line of code 45 years ago and still haven't
>> > mastered it.
>>
>> CSS isn't a programming language. No control constructs like
>> IF/THEN/ELSEIF, SWITCH, etc. No variables. The only programming
>> language presence really are the MS extensions (Javascript functions).
>>
>
> I wish there were variables.  Even variables of the macro kind for
> defining a color palette would be really great.  MAIN_COLOR = #123456;
>
> border-color: MAIN_COLOR;
> color: MAIN_COLOR;
> Want to change your main color from green to blue? Change one line!  How
> awesome would that be?  But anyway...
>
> I think the lack of control structures is a little erroneous...  the
> entire language is a giant switch statement.  If there's an element that
> matches such and such, apply these properties...
>
> Switch (element) {
>   Case 'p': margin: 1em;
> }
>
> We just leave the switch() case: out for brevity. :P
>
> Also, isn't it instructions for a computer?  Isn't that the definition of
> a programming language?  I can understand HTML not being a language, as it
> doesn't, by itself, cause anything to happen to the text (default styling
> is CSS, after all). But CSS actually does stuff.
>
> ---Tim
>

I push all my code, css, js, php through M4.  this enables me to do
exactly what you are asking for, and also have shared symbolic constants
for return codes and such for json structures.  It really helps.

Peter

__
css-discuss [cs...@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] CSS3 multiple background images

[David Laakso]

 On 10/3/10 10:48 AM, Gabriele Romanato wrote:

Hi,
I think this post will be useful for beginners:

http://onwebdev.blogspot.com/2010/10/css3-multiple-background-images.html

HTH ^^/

bye

Gabriele Romanato





Ah, just what I need! Timely. I had forgotten about that. Thanks :-) .

Best,
~grasshopper

PS freshCitrus beats what you had before hands-down...




--
:: desktop and mobile ::
http://chelseacreekstudio.com/

__
css-discuss [cs...@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] CSS3 multiple background images

[Alan Gresley]

Gabriele Romanato wrote:

Hi,
I think this post will be useful for beginners:

http://onwebdev.blogspot.com/2010/10/css3-multiple-background-images.html

HTH ^^/

bye

Gabriele Romanato



Hello Gabriele,

Why not just use border radius for rounded corners. Leaves the 
multiple backgrounds for the something like this.






Now supported in Gecko, WebKit, Opera 10.62 and IE9 beta.



--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@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] CSS3 multiple background images

[Gabriele Romanato]

Good advice thanks!
On Oct 5, 2010, at 5:52 PM, Alan Gresley wrote:


Gabriele Romanato wrote:

Hi,
I think this post will be useful for beginners:
http://onwebdev.blogspot.com/2010/10/css3-multiple-background-images.html
HTH ^^/
bye
Gabriele Romanato



Hello Gabriele,

Why not just use border radius for rounded corners. Leaves the  
multiple backgrounds for the something like this.






Now supported in Gecko, WebKit, Opera 10.62 and IE9 beta.



--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo


http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/  (English)
http://www.css-zibaldone.com/articles/  (English)
http://onwebdev.blogspot.com/  (English)








__
css-discuss [cs...@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] [css3] support for filters

[Alan Gresley]

Somehow www-st...@w3.org got dropped, CC to CSS WG list. Sorry for 
duplicates.


On 6/01/2011 4:13 PM, Rik Cabanier wrote:

Hello Rik. Can I please request that you comment inline (snipping 
irrelevant parts) instead of top posting. It will make this thread 
easier to follow.




There is a good description of this on
http://www.bradclicks.com/cssplay/drop-shadow/Drop-Shadow.html



Just a quick comment on Brad's description of a 'drop-Shadow'. The 
closes that any browser comes to actuality being able to achieve part of 
the first examples of Bard's drop-shadow is IE9 which correctly rounds 
the corners of the background with clipping on the padding edge but 
instead of the shadow being the size of the background, the shadow is 
formed and sized from the border edge.


I would still like to see some of the affects in Brad's description of a 
'drop-shadow', some of which don't behave like a box-shadow filter like 
the examples with dotted borders casting shadows on the background. Here 
is one test.




I have applied Microsoft propriety filter dropShadow to examples 2 and 
4. Even though the later test case is semi transparent, the dark part 
begins on the top and left edges (not offset) and unlike the bottom and 
right edges that are offset. Example 5a is a hack using the shadow of 
example 5a.


I noticed how rgba color and this MS filter combined creates an orange 
that would not be the same as if you layered a transparent orange 
background-image or transparent colored (from a child or sibling 
element) over the same shadow. IE9 seems to create a composite of both 
colors.


Note: For some reason the box-shadow on the first few examples show 
peekaboo activity in IE9.




On 8/01/2011 12:37 PM, Rik Cabanier wrote:


Hi Alan,

No, my dropshadow is different. In your example
()
the outside of the element (aka the box) has the shadow applied.


Yes, I linked to that test to show how spread works in box-shadow.


All
of the testcases work with this box, not with the content inside of
it.



Yes.



What I'm looking for is something that would shadow the elements
within the box. If the box contained a set of images, text and svg
blocks, the box's image would cast a shadow on it previous siblings.



Don't you mean previous ancestors?



The elements within the box should not interact with each other. The
shadow would be calculated using the visible part of the element and
be visible through non-opaque elements. I attached an example of what
this looks like. The html for this image would look like:


(had to copy example html below, didn't like line wrapping)


 
 
Some example text





Rik



Thank you Rik for a good example. I have made some examples using HTML 
and CSS. There are a few example showing steps in how this could be 
done. Please remember that I have coded in a non SVG fashion. SVG stroke 
is the same as border and SVG fill is the same as background-color if 
clipping is on the padding edge.





The test is suited to a 16px font-size setting (IE medium) and I have 
used Arial font in the test. If your settings are different, the text 
may be out of place or broken on a new line.



* Example 1 is constructed in the manner of your code above with . This requires a bit of use of negative margins.



* Example 2 is constructed in the manner in how I would approach it 
where you can offset where the red background begins.



* Example 3 is the same as example 2 but without any text-shadow or 
box-shadow.



* Example 4 has the only CSS property that behaves like a filter, this 
is opacity. Here is an excerpt from the FX minutes [1].


   ChrisL: So when you apply a filter, what is it applied to?

   dbaron: The whole thing; the border/background/etc.
   ... I think it works like opacity and creates a new stacking context.

(but not sure about that)


Indeed David is correct. Opacity creates a new stacking context. I not 
sure if some of the affects wanted (blur, glow, bevel, gradient glow, 
gradient bevel) need to really do this. In CSS, gradients are painted in 
the same painting order as background-image. So this is allowable.


background: red linear-gradient(right, #ff, transparent);

Here is a test that shows that opacity creates a new stacking context.

http://css-class.com/test/temp/opacity-z-index.htm


* Example 5 has a Microsoft propriety filter dropShadow applied that 
comes close to the images that Rik has created. Unfortunately this type 
of filter can not be blurred.



* Example 6 has another affect, where I have swapped positive=true for 
positive=false.



If some of the SVG affects can be used along side text-shadow and 
box-shadow, we don't necessary always want to create a new stacking 
context (well I wouldn't). For drop-shadow though, it makes sense. I 
would like the format and

Re: [css-d] CSS3 animations - enter the matrix

[Gabriele Romanato]

This is awesome! :-)

On Sat, Apr 16, 2011 at 5:25 PM, Alan Gresley  wrote:

> Hello all,
>
>
> I have for years been smashing down barriers concerning CSS. This may have
> been on this mailing list or on www-style (CSS WG). I came into this realm
> of human endeavor just when CSS3 was starting to be implemented by Safari 2
> or 3 (back in 2008). My early CSS was an attempt at creating depth of field
> with basic CSS2.1 or CSS3 (box-shadow was in CSS2).
>
> I started playing with CSS animations early this year. I did some basic
> demos that had things moving but I kept on seeing visions of virtual 3D
> space. This I find exciting since it breaks the notion that things can only
> be perceived as happening only on a 2D plane (x and y axis) with just depth
> of field to create an illusion of space by z-index or normal painting order.
>
> With CSS3 3D transforms and CSS3 animation one can create virtual 3D space
> my moving, scaling, skewing, rotating or translating things on the x, y and
> z axises (not indexes). There is also this marvelous aspect of CSS3
> animation call perspective.
>
> Below is a link to my new demo. It works in Safari, iPad or iPhone. It uses
> CSS3, HTML, SVGs and one PNG. If you want it to be interactive, you must
> enable JS. Using the controls (the only part with JS), selecting random
> sideways movement buttons (left, center and right) and the jump buttons
> quickly can result in some amazing spinning. I could use pure CSS3
> animations using @keyframes to do similar but I believe the fun is being
> able to interact with such a demo.
>
> Moving on, the demo.
>
> http://css-3d.org/enter-the-matrix.htm
>
>
> I will in future put demos of this nature on this domain.
>
> http://css-3d.org/
>
>
> Enjoy and be inspired. I can only show you the door. You're the one that
> has to walk through it. :-)
>
>
>
> --
> Alan http://css-class.com/
>
> Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
> __
> 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/
>



-- 
http://www.css-zibaldone.com/
http://www.css-zibaldone.com/test/ (English)
http://www.css-zibaldone.com/articles/ (English)
http://onwebdev.blogspot.com/  (English)
__
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] CSS3 animations - enter the matrix

[David Hucklesby]

On 4/16/11 8:58 AM, Gabriele Romanato wrote:

This is awesome! :-)

On Sat, Apr 16, 2011 at 5:25 PM, Alan Gresley
wrote:



http://css-3d.org/enter-the-matrix.htm


I will in future put demos of this nature on this domain.

http://css-3d.org/



I agree with Gabriele. It reminds me of time spent in the mid-1970s
calculating matrix transforms to make 3d graphics on an HP plotting
display -- quite an effort to recall high school math 25 years on!

This is so-o-o-o much easier -- and runs so very much faster. :)

You can still practice your matrix algebra to make transforms in
old Internet Explorer...
--
Cordially,
David
__
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] CSS3 animations - enter the matrix

[tedd]

At 1:25 AM +1000 4/17/11, Alan Gresley wrote:

Moving on, the demo.

http://css-3d.org/enter-the-matrix.htm



Mondo kewl.

Cheers,

tedd
--
---
http://sperling.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] CSS3 transitions only after load

[David Hucklesby]

On 6/29/11 11:38 AM, Mark Volkmann wrote:

I want to specify a transition for an element, but I only want it to
be used if a change is made to a property AFTER the page has loaded.
For example,

#foo {
font-size: 24pt;
transition: all 1s linear;
-moz-transition all 1s linear;
-webkit-transition all 1s linear;
}



One possibility is to trigger the transition on activating a link to 
#foo using the :target selector:


http://reference.sitepoint.com/css/pseudoclass-target

Not sure if that's what you are after, though...
--
Cordially,
David

__
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] CSS3 transitions only after load

[L. David Baron]

On Wednesday 2011-06-29 13:38 -0500, Mark Volkmann wrote:
> I want to specify a transition for an element, but I only want it to
> be used if a change is made to a property AFTER the page has loaded.
> For example,
> 
> #foo {
> font-size: 24pt;
> transition: all 1s linear;
> -moz-transition all 1s linear;
> -webkit-transition all 1s linear;
> }
> 
> I don't want the change to font-size from the default to 24pt to be animated.

This should be the way transitions work normally.  Are you doing
something that causes the style not to be applied until just after
load?

-David

-- 
L. David Baron http://dbaron.org/
Mozilla Corporation   http://www.mozilla.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] CSS3 transitions only after load

[Mark Volkmann]

It turns out my issue was due to height and width animation, not
font-size animation. I had height and width values set to 100% which
are then calculated values. Those were being animated. I fixed it by
being more specfic about what should be animated ... only
-webkit-transform in my case. Thanks to Ghodmode for that suggestions!

On Wed, Jun 29, 2011 at 4:29 PM, L. David Baron  wrote:
> On Wednesday 2011-06-29 13:38 -0500, Mark Volkmann wrote:
>> I want to specify a transition for an element, but I only want it to
>> be used if a change is made to a property AFTER the page has loaded.
>> For example,
>>
>> #foo {
>> font-size: 24pt;
>> transition: all 1s linear;
>> -moz-transition all 1s linear;
>> -webkit-transition all 1s linear;
>> }
>>
>> I don't want the change to font-size from the default to 24pt to be animated.
>
> This should be the way transitions work normally.  Are you doing
> something that causes the style not to be applied until just after
> load?

-- 
R. Mark Volkmann
Object Computing, Inc.
__
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] [CSS3] [HELP] Nav menu bug

[Philippe Wittenbergh]

On Jul 6, 2011, at 1:53 PM, Mark Ayers wrote:

> http://www.ineedwebpage.com/
> 
> Okay, first things first. This only happens on screens wider than 1200px, as
> I have media queries set up since it overlaps content. It doesn't anymore
> since I made it hide itself, but I'll change that AFTER I fix the major site
> breaking bugs.
> 
> Here's the problem. The nav menu is supposed to slide out, then have all the
> options displayed. It also has a vertical text label. The menu items slide
> over further when you hover. When you hover over the lower ones, the menu
> compresses (specifically the first li in the list), which makes
> it very difficult to click the link to the homepage. Any help is much
> appreciated.

Have you consider using a transform for #navContain p (instead of 
-webkit-writing-mode) ?

Then I suppose you'd have to set a width on that whole block, to stop it from 
dancing around when the use mouses over the various items.

You'd be better off using some scripting, me thinks.

PS - cross posting to various lists is _not_ a good idea.

Philippe
--
Philippe Wittenbergh
http://l-c-n.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] [CSS3] [HELP] Nav menu bug

[Lesley Lutomski]

On 06/07/11 05:53, Mark Ayers wrote:

http://www.ineedwebpage.com/

When you hover over the lower ones, the menu

compresses (specifically the firstli  in the list), which makes
it very difficult to click the link to the homepage.


FWIW, as a user with neurological/co-ordination problems, I find the 
menu impossible to use with a mouse.  It jumps around all over the place 
and I haven't a hope of clicking the link I'm after.  It's particularly 
bad in Firefox 5, but Chromium isn't much better.  Epiphany (Web-kit 
based) is the best, but even that is pretty much unusable.  (All on 
Linux.)


I like the idea - just can't use it.

Lesley
__
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] [CSS3] [HELP] Nav menu bug

[David Laakso]

On 7/6/11 12:53 AM, Mark Ayers wrote:

http://www.ineedwebpage.com/

Okay, first things first. This only happens on screens wider than 1200px, as
I have media queries set up since it overlaps content. It doesn't anymore
since I made it hide itself, but I'll change that AFTER I fix the major site
breaking bugs.





I have no idea what that's supposed to do or why it is supposed to do it.
A simple menu less the obligatory jazz...

Good luck.
~d

--
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] [CSS3] [HELP] Nav menu bug

[Tom Livingston]

>>
>> http://www.ineedwebpage.com/
>>
>
> I have no idea what that's supposed to do or why it is supposed to do it.
> A simple menu less the obligatory jazz...
> 
> Good luck.
> ~d
>
> --
> http://chelseacreekstudio.com/
>


Hiding the site navigation is rarely a good idea. And the contrast
between the nav "tab" and the bg isn't much, which could be an issue
for some people to find it. As far as your issues go, the first LI has
an initial height of 86px, then as you hover the LIs, it changes. You
might try using padding on the hrefs or LIs instead of fixed heights.

HTH


-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] [CSS3] [HELP] Nav menu bug

[Mark Ayers]

This is the bug I'm trying to fix. Firefox is far worse because I develop
for Webkit then add support for everything else, so I don't have the text
written vertically in Firefox.

On Wed, Jul 6, 2011 at 2:15 AM, Lesley Lutomski 
wrote:

> On 06/07/11 05:53, Mark Ayers wrote:
>
>> http://www.ineedwebpage.com/
>>
> When you hover over the lower ones, the menu
>
>> compresses (specifically the firstli  in the list), which
>> makes
>> it very difficult to click the link to the homepage.
>>
>
> FWIW, as a user with neurological/co-ordination problems, I find the menu
> impossible to use with a mouse.  It jumps around all over the place and I
> haven't a hope of clicking the link I'm after.  It's particularly bad in
> Firefox 5, but Chromium isn't much better.  Epiphany (Web-kit based) is the
> best, but even that is pretty much unusable.  (All on Linux.)
>
> I like the idea - just can't use it.
>
> Lesley
> __**__**__
> 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] [CSS3] [HELP] Nav menu bug

[Mark Ayers]

There is no CSS rule making the first li 86px tall though. That's why I'm
having trouble tracking this down. The fixed heights were an attempt to fix
the bug.

On Wed, Jul 6, 2011 at 7:56 AM, Tom Livingston  wrote:

> >>
> >> http://www.ineedwebpage.com/
> >>
> >
> > I have no idea what that's supposed to do or why it is supposed to do it.
> > A simple menu less the obligatory jazz...
> > 
> > Good luck.
> > ~d
> >
> > --
> > http://chelseacreekstudio.com/
> >
>
>
> Hiding the site navigation is rarely a good idea. And the contrast
> between the nav "tab" and the bg isn't much, which could be an issue
> for some people to find it. As far as your issues go, the first LI has
> an initial height of 86px, then as you hover the LIs, it changes. You
> might try using padding on the hrefs or LIs instead of fixed heights.
>
> HTH
>
>
> --
>
> Tom Livingston | Senior Interactive Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] [CSS3] [HELP] Nav menu bug

[Lesley Lutomski]

On 06/07/11 16:41, Mark Ayers wrote:

This is the bug I'm trying to fix. Firefox is far worse because I
develop for Webkit then add support for everything else, so I don't have
the text written vertically in Firefox.

On Wed, Jul 6, 2011 at 2:15 AM, Lesley Lutomski
mailto:c...@islaywebdesign.co.uk>> wrote:

On 06/07/11 05:53, Mark Ayers wrote:

http://www.ineedwebpage.com/

When you hover over the lower ones, the menu

compresses (specifically the firstli  in the list),
which makes
it very difficult to click the link to the homepage.


FWIW, as a user with neurological/co-ordination problems, I find the
menu impossible to use with a mouse.  It jumps around all over the
place and I haven't a hope of clicking the link I'm after.  It's
particularly bad in Firefox 5, but Chromium isn't much better.
  Epiphany (Web-kit based) is the best, but even that is pretty much
unusable.  (All on Linux.)

Sorry - I don't think I explained the problem very well.  On Chromium 
and Epiphany, the position of the menu changes, which makes it very hard 
to use.  On Firefox, the links judder about, vibrating, for want of a 
better word, overlapping and impossible to select.


Lesley
__
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] [CSS3] [HELP] Nav menu bug

[Mark Ayers]

It should work now. Theres still too much space at the top, but it doesn't
jump around.

On Wed, Jul 6, 2011 at 9:11 AM, Lesley Lutomski 
wrote:

> On 06/07/11 16:41, Mark Ayers wrote:
>
>> This is the bug I'm trying to fix. Firefox is far worse because I
>> develop for Webkit then add support for everything else, so I don't have
>> the text written vertically in Firefox.
>>
>> On Wed, Jul 6, 2011 at 2:15 AM, Lesley Lutomski
>> > >
>> wrote:
>>
>>On 06/07/11 05:53, Mark Ayers wrote:
>>
>>http://www.ineedwebpage.com/
>>
>>When you hover over the lower ones, the menu
>>
>>compresses (specifically the firstli  in the list),
>>which makes
>>it very difficult to click the link to the homepage.
>>
>>
>>FWIW, as a user with neurological/co-ordination problems, I find the
>>menu impossible to use with a mouse.  It jumps around all over the
>>place and I haven't a hope of clicking the link I'm after.  It's
>>particularly bad in Firefox 5, but Chromium isn't much better.
>>  Epiphany (Web-kit based) is the best, but even that is pretty much
>>unusable.  (All on Linux.)
>>
>>  Sorry - I don't think I explained the problem very well.  On Chromium and
> Epiphany, the position of the menu changes, which makes it very hard to use.
>  On Firefox, the links judder about, vibrating, for want of a better word,
> overlapping and impossible to select.
>
> Lesley
>
__
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] [CSS3] [HELP] Nav menu bug

[Tom Livingston]

On Wed, Jul 6, 2011 at 12:29 PM, Mark Ayers  wrote:
> It should work now. Theres still too much space at the top, but it doesn't
> jump around.
>

The space appears to be coming from Nav.

-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] [CSS3] [HELP] Nav menu bug

[Lesley Lutomski]

On 06/07/11 17:29, Mark Ayers wrote:

It should work now. Theres still too much space at the top, but it
doesn't jump around.
It works fine on all three browsers, but the text saying "Nav" has 
vanished, making it very hard to find, especially on Firefox and 
Chromium, which don't display the white border.


I'd also like to see some indication on hover that the whole area is 
clickable, not just the text, but that's just a personal opinion.


Lesley
__
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] CSS3 Parse Error on Filter:

[Micky Hulse]

I thought filter was proprietary to IE?

Maybe you could move the filter to an IE-specific stylesheet?
__
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] CSS3 Parse Error on Filter:

[Philippe Wittenbergh]

On Jul 23, 2011, at 9:12 AM, Dan Kaufman wrote:

> I am getting a Parse Error from the W3C Validator for CSS3 for the
> following:
> 
> 
> I have Googled and Googled for some clue for what I have done to offend Mr.
> Validator, but thus far every word on the subject I've found appears to
> indicate that my code syntax is fine.
> 
> 
> 
> Can anyone point me the proper CSS3 documentation re filter:  ?

There is none. Filter() is either (1) a Microsoft-only property or (2) a SVG 
effect (which you can use in Gecko 1.9.2+).

http://www.w3.org/TR/SVG/filters.html

Philippe
--
Philippe Wittenbergh
http://l-c-n.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/