Re: [css-d] Experiment: CSS post it note

[david]

Charles Miller wrote:

On Apr 8, 2011, at 1:36 PM, Venditelli, Daniel - Web Development
Administrator wrote:


*Can't even begin to count the number of sites that had some
snippet of useful text just begging to be copied into my research
notes only to discover the text is a graphic. 



Guilty. Flat out guilty. Not necessarily repentant.

Pictures get high readership. A few well-chosen words in the pic do
too.


As many eye-tracking studies have shone, people look for words on a
page, and ignore what they think of as images. They've learned that
images=ads. You fool them by showing them a picture of text, so when 
they try to use the "text" as text, they feel deceived and cheated.



Plus with the high number of generic pix slapped onto pages as
content-free phony eye candy, words in photos show a little thought.
A little personalization.


I'd rather avoid using generic pix in the first place.


I'd never put a key piece of word content ONLY in a pic. In fact, I
guess I use them as a mild form of constructive redundancy, or as
teasers to encourage the old art of reading the text.


Or they're used by graphic-designers-turned-web-designers desperately 
trying to get back the exact font control they have on their printed 
products.


--
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
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] Experiment: CSS post it note

[Charles Miller]

On Apr 8, 2011, at 1:36 PM, Venditelli, Daniel - Web Development Administrator 
wrote:

> *Can't even begin to count the number of sites that had some snippet of
> useful text just begging to be copied into my research notes only to
> discover the text is a graphic. 


Guilty. Flat out guilty. Not necessarily repentant. 

Pictures get high readership. A few well-chosen words in the pic do too. 

Plus with the high number of generic pix slapped onto pages as content-free 
phony eye candy, words in photos show a little thought. A little 
personalization. 

I'd never put a key piece of word content ONLY in a pic. In fact, I guess I use 
them as a mild form of constructive redundancy, or as teasers to encourage the 
old art of reading the text. 

Chuck M

__
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] Experiment: CSS post it note

[Venditelli, Daniel - Web Development Administrator]

>From an accessibility and convenience* standpoint, I have an issue
whenever we use pictures of text over actual text. (Alt tags aren't
enough) The CSS rotation may not quite be ready for prime time, but if
USED CAREFULLY, it can still be better than text out of Photoshop.

*Can't even begin to count the number of sites that had some snippet of
useful text just begging to be copied into my research notes only to
discover the text is a graphic. 


-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tomasz
Kisielewski
Sent: Thursday, April 07, 2011 1:55 PM
To: Chris F.A. Johnson
Cc: Gabriele Romanato; css-discuss
Subject: Re: [css-d] Experiment: CSS post it note

Hi Guys. I can't agree that visual effects are good in this example.
When manipulate any image, or create composition always beware of
shadows.In this example it doesn't make sense, still photoshop,or gimp
do better job than box rotation ( browsers support as well).
CSS3 is great, butsome things are pretty useless, especially if you
think about production environment. Thats my opinion.

Tom


On Thu, Apr 7, 2011 at 9:37 PM, Chris F.A. Johnson
wrote:

> On Thu, 7 Apr 2011, Gabriele Romanato wrote:
>
>  Hi,
>> I've often asked myself: 'ok, we can rotate boxes with CSS3, but what

>> this is good for?".
>> Answer: visual effects. Like this:
>>
>> http://onwebdev.blogspot.com/2011/04/css-post-it-note.html
>>
>
>Beware of trying to fit text into a fixed-size container:
>
><http://t.cfaj.ca/postit.jpg>
>
>For an example that works with any font size, see
><http://twd2.cfaj.ca/>. (I have just started to redo my site, so
>there not much there besides the first page.)
>
> --
>   Chris F.A. Johnson, <http://cfajohnson.com/>
>   Author:
>   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
>   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) 
> __
> css-discuss [css-d@lists.css-discuss.org] 
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- 
> http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-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] Experiment: CSS post it note

[Philippe Wittenbergh]

On Apr 8, 2011, at 2:07 AM, Gabriele Romanato wrote:

> I've often asked myself: 'ok, we can rotate boxes with CSS3, but what this is 
> good for?".
> Answer: visual effects. Like this:
> 
> http://onwebdev.blogspot.com/2011/04/css-post-it-note.html

Hmm, use images with alpha transparency ? that would avoid those ugly overlaps 
for those people who don't feel the need to have a 2000px wide window.

Also: using  instead of @import is more performant, especially on IE < 9 
(@import blocks the parser, check Mr Souders tests sometime). It doesn't matter 
much for such a small stylesheet, but serious projects…

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] Experiment: CSS post it note

[Tomasz Kisielewski]

Hi Guys. I can't agree that visual effects are good in this example. When
manipulate any image, or create composition always beware of shadows.In this
example it doesn't make sense, still photoshop,or gimp do better job than
box rotation ( browsers support as well).
CSS3 is great, butsome things are pretty useless, especially if you
think about production environment. Thats my opinion.

Tom


On Thu, Apr 7, 2011 at 9:37 PM, Chris F.A. Johnson wrote:

> On Thu, 7 Apr 2011, Gabriele Romanato wrote:
>
>  Hi,
>> I've often asked myself: 'ok, we can rotate boxes with CSS3, but what this
>> is good for?".
>> Answer: visual effects. Like this:
>>
>> http://onwebdev.blogspot.com/2011/04/css-post-it-note.html
>>
>
>Beware of trying to fit text into a fixed-size container:
>
>
>
>For an example that works with any font size, see
>. (I have just started to redo my site, so
>there not much there besides the first page.)
>
> --
>   Chris F.A. Johnson, 
>   Author:
>   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
>   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
> __
> 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] Experiment: CSS post it note

[Chris F.A. Johnson]

On Thu, 7 Apr 2011, Philip Taylor (Webmaster, Ret'd) wrote:


Chris F.A. Johnson wrote:


Beware of trying to fit text into a fixed-size container:



For an example that works with any font size, see
. (I have just started to redo my site, so
there not much there besides the first page.)


I don't know how you've produced that rotated panel,


   It's CSS3:

-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);


Chris, but it doesn't render well here :


http://web-consultants.org.uk/sites/tests/css/Fullscreen%20capture%2007-Apr-2011%20214031.jpg


   Thanks for that. On my screen the type looks a little wonky, but
   acceptable. Since it looks worse for some people, I'll remove the
   rotation.

--
   Chris F.A. Johnson, 
   Author:
   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
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] Experiment: CSS post it note

[Philip Taylor (Webmaster, Ret'd)]

Chris F.A. Johnson wrote:


Beware of trying to fit text into a fixed-size container:



For an example that works with any font size, see
. (I have just started to redo my site, so
there not much there besides the first page.)


I don't know how you've produced that rotated panel,
Chris, but it doesn't render well here :


http://web-consultants.org.uk/sites/tests/css/Fullscreen%20capture%2007-Apr-2011%20214031.jpg

Philip Taylor
__
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] Experiment: CSS post it note

[Chris F.A. Johnson]

On Thu, 7 Apr 2011, Gabriele Romanato wrote:


Hi,
I've often asked myself: 'ok, we can rotate boxes with CSS3, but what this is 
good for?".

Answer: visual effects. Like this:

http://onwebdev.blogspot.com/2011/04/css-post-it-note.html


Beware of trying to fit text into a fixed-size container:



For an example that works with any font size, see
. (I have just started to redo my site, so
there not much there besides the first page.)

--
   Chris F.A. Johnson, 
   Author:
   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
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] Experiment: CSS post it note

[Gabriele Romanato]

thanks guys! I have to fix something, as you pointed out... ouch! however,
absolute positioning is just for show... the intention is to use it in the
future on some gallery with floats...
at least, floats are aware of the position of other floats.. floats have
almost empathy for developer's emotions
and are not so selfish like absolute boxes. :-)

thanks for the shots, particularly that from Seamonkey. I miss this browser.
I used it on my old Tiger laptop :-(

ps. Google fonts work ok... I guess they use  for performance... has
anyone noticed some lag using @import?

bye


-- 
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] Experiment: CSS post it note

[karla porter]

it works nicely on chrome and ff on a mac


Karla Porter Archer



On Thu, Apr 7, 2011 at 12:44 PM, Geoff Lane  wrote:
> On Thursday, April 7, 2011, 6:34:31 PM, Philip Taylor (Webmaster, Ret'd) 
> wrote:
>
>> What has happened to some of the text on the
>> yellow "Post-it" (R), Gabriele ?
>
>>         http://web-consultants.org.uk/sites/tests/css/Fullscreen capture 
>> 07-Apr-2011 183056.jpg
>
> ---
>
> FWIW, I got a chunk missing from the top-right of the yellow note
> also. I suspect that these are masked by the pre-rotation position of
> the other post-it notes and wonder whether judicious use of z-index
> might correct the problem.
>
> --
> Geoff
__
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] Experiment: CSS post it note

[Geoff Lane]

On Thursday, April 7, 2011, 6:34:31 PM, Philip Taylor (Webmaster, Ret'd) wrote:

> What has happened to some of the text on the
> yellow "Post-it" (R), Gabriele ?

> http://web-consultants.org.uk/sites/tests/css/Fullscreen capture 
> 07-Apr-2011 183056.jpg

---

FWIW, I got a chunk missing from the top-right of the yellow note
also. I suspect that these are masked by the pre-rotation position of
the other post-it notes and wonder whether judicious use of z-index
might correct the problem.

-- 
Geoff

__
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] Experiment: CSS post it note

[Philip Taylor (Webmaster, Ret'd)]

What has happened to some of the text on the
yellow "Post-it" (R), Gabriele ?

http://web-consultants.org.uk/sites/tests/css/Fullscreen capture 
07-Apr-2011 183056.jpg

Philip Taylor

Gabriele Romanato wrote:


I've often asked myself: 'ok, we can rotate boxes with CSS3, but what
this is good for?".
Answer: visual effects. Like this:

http://onwebdev.blogspot.com/2011/04/css-post-it-note.html

__
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] Experiment: CSS post it note

[David Laakso]

On 4/7/11 1:07 PM, Gabriele Romanato wrote:

Hi,
I've often asked myself: 'ok, we can rotate boxes with CSS3, but what 
this is good for?".

Answer: visual effects. Like this:

http://onwebdev.blogspot.com/2011/04/css-post-it-note.html


HTH

Gabriele





Correct for cross-over 1152 through 640?
~d


--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Experiment: CSS post it note

[Gabriele Romanato]

Hi,
I've often asked myself: 'ok, we can rotate boxes with CSS3, but what  
this is good for?".

Answer: visual effects. Like this:

http://onwebdev.blogspot.com/2011/04/css-post-it-note.html

The Google font is included in the zip file, so you can add it to your  
font folder if you view this demo locally.


Improvements: if you use JS and jQuery or whatever other library, you  
can automate the positioning process by adding a common CSS class to  
all the post it notes. However, the topic of this list is CSS, so I  
avoided to get things more complicated.


Feel free to use the code in all your projects, without license,  
permissions and other legalese stuff.

Web is sharing, so enjoy it! :-)

HTH

Gabriele


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/