[css-d] CSS Shapes
Good morning fellow listers, CSS Shapes. No doubt this will be something I'm asked to do in a page layout soon. I was just watching this demo of a new Chrome extension: http://razvancaliman.com/writing/css-shapes-editor-chrome/ A very handy thing indeed, but... my first thought when seeing the coffee cup layout on that page is how do you provide a fallback for that? Anyone? -- 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] CSS Shapes
On Thu, Sep 4, 2014 at 8:32 AM, Tom Livingston tom...@gmail.com wrote: Good morning fellow listers, CSS Shapes. No doubt this will be something I'm asked to do in a page layout soon. I was just watching this demo of a new Chrome extension: http://razvancaliman.com/writing/css-shapes-editor-chrome/ A very handy thing indeed, but... my first thought when seeing the coffee cup layout on that page is how do you provide a fallback for that? Anyone? -- I'll add that it seems like a significant layout change or at least swap images for ones that allow text to run over them and still allow for legibility. I also see modernizr being used as well. Anything else? -- 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] CSS Shapes
Le 4 sept. 2014 à 21:32, Tom Livingston tom...@gmail.com a écrit : No doubt this will be something I'm asked to do in a page layout soon. I was just watching this demo of a new Chrome extension: http://razvancaliman.com/writing/css-shapes-editor-chrome/ A very handy thing indeed, but... my first thought when seeing the coffee cup layout on that page is how do you provide a fallback for that? Perhaps this: http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/ Also this gallery by the folks who implemented it in WebKit/Bink/Firefox: http://blogs.adobe.com/webplatform/2014/05/13/good-looking-shapes-gallery/ 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] button using text and graphic
Le 4 sept. 2014 à 00:31, Tom Livingston tom...@gmail.com a écrit :
If you look carefully at the image I linked to, the text and arrow image
aren't well centered vertically. It look better in Safari. I know vertical
centering is a bit annoying but is there a better way to go about this
structure/style?
subpixel positioning - depends on the rendering engine and is platform
dependent (and resolution dependent). Not much you can do about it.
One possibility: set the line-height to '1' on the element. Might help a little
by making the line box the same size as the font-size.
Le 4 sept. 2014 à 00:50, Tom Livingston tom...@gmail.com a écrit :
Also, I can't use background-position: 100% 50%; in this case as the arrow
is a sprite which changes position on hover. The sprite is an image of two
different colored arrows that move up and down on hover via
background-position.
.button{
background-position: 100% 0;
}
.button:hover{
background-position: 100% -43px;
}
sigh I rarely use those things :-) (hate hover effects with a passion).
In the future, CSS blend modes may alleviate the need for multiple images…
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] CSS Shapes
On Thu, Sep 4, 2014 at 8:58 AM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 4 sept. 2014 à 21:32, Tom Livingston tom...@gmail.com a écrit : No doubt this will be something I'm asked to do in a page layout soon. I was just watching this demo of a new Chrome extension: http://razvancaliman.com/writing/css-shapes-editor-chrome/ A very handy thing indeed, but... my first thought when seeing the coffee cup layout on that page is how do you provide a fallback for that? Perhaps this: http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/ Also this gallery by the folks who implemented it in WebKit/Bink/Firefox: http://blogs.adobe.com/webplatform/2014/05/13/good-looking-shapes-gallery/ Philippe -- Philippe Wittenbergh http://l-c-n.com/ Thanks Philippe. I was hoping it wouldn't be another polyfill. I use picturefill.js (and subsequently matchmedia.js), as I feel it's use is ultimately for the greater good, but I'm not a fan of polyfills. If I can avoid adding any weight, then all the better. I don't use modernizr in every project either - though it's very handy - but shapes seem like a tough thing to do a fallback for without it. A fallback for shapes looks like a bit of work, as opposed to the fallback for rem units, for example. Seems like using modernizr to help you swap images with something that allows legible text to run over it would be simplest. Next would be layout changes, moving the images to another place on the page so the text doesn't crash into it. Obviously it depends on each situation... -- 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] button using text and graphic
On Thu, Sep 4, 2014 at 9:29 AM, Philippe Wittenbergh e...@l-c-n.com wrote:
Le 4 sept. 2014 à 00:31, Tom Livingston tom...@gmail.com a écrit :
If you look carefully at the image I linked to, the text and arrow image
aren't well centered vertically. It look better in Safari. I know
vertical
centering is a bit annoying but is there a better way to go about this
structure/style?
subpixel positioning - depends on the rendering engine and is platform
dependent (and resolution dependent). Not much you can do about it.
One possibility: set the line-height to '1' on the element. Might help a
little by making the line box the same size as the font-size.
Le 4 sept. 2014 à 00:50, Tom Livingston tom...@gmail.com a écrit :
Also, I can't use background-position: 100% 50%; in this case as the
arrow
is a sprite which changes position on hover. The sprite is an image of
two
different colored arrows that move up and down on hover via
background-position.
.button{
background-position: 100% 0;
}
.button:hover{
background-position: 100% -43px;
}
sigh I rarely use those things :-) (hate hover effects with a passion).
In the future, CSS blend modes may alleviate the need for multiple images…
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
Thank you! I'll give the line-height suggestion a test. Not sure why I
didn't think of that... :-/
--
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] button using text and graphic
One possibility: set the line-height to '1' on the element. Might help a
little by making the line box the same size as the font-size.
Le 4 sept. 2014 à 00:50, Tom Livingston tom...@gmail.com a écrit :
Also, I can't use background-position: 100% 50%; in this case as the
arrow
is a sprite which changes position on hover. The sprite is an image of
two
different colored arrows that move up and down on hover via
background-position.
.button{
background-position: 100% 0;
}
.button:hover{
background-position: 100% -43px;
}
sigh I rarely use those things :-) (hate hover effects with a passion).
In the future, CSS blend modes may alleviate the need for multiple images…
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
Thank you! I'll give the line-height suggestion a test. Not sure why I
didn't think of that... :-/
That took some of the sting out of it. Thanks again.
--
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/
