text-shadow - Teh Forum

<body> <div id="header"> <span class="left"> <span class="back"><a href="lthread_list.php?webtag=DEFAULT"><span class="image mobile_back" title="Back"></span></a></span> <span class="image mobile_logo" title="Beehive Forum Logo"></span> </span> <ul> <li> <a class="reply_all" href="lpost.php?webtag=DEFAULT&reply_to=38939.0&return_msg=38939.22"> <span class="image mobile_reply_all"></span><span class="text">Reply to All</span> </a> </li> <li> <a class="navigation" href="#"> <span class="image mobile_navigation"></span><span class="text">Show messages</span> </a> </li> <li> <a class="main" href="#"><span class="image mobile_menu" title="Menu"></span> </a> </li> </ul> </div> <div class="menu main"> <ul> <li><a href="lthread_list.php?webtag=DEFAULT">Messages</a></li> <li><a href="lpm.php?webtag=DEFAULT">Inbox</a></li> <li><a href="lsearch.php?webtag=DEFAULT">Search</a></li> <li><a href="llogon.php?webtag=DEFAULT">Login</a></li> </ul> </div> <div class="menu navigation"><a href="lmessages.php?webtag=DEFAULT&msg=38939.1">1–10</a><a href="lmessages.php?webtag=DEFAULT&msg=38939.11">11–20</a><a href="lmessages.php?webtag=DEFAULT&msg=38939.21">21–30</a><a href="lmessages.php?webtag=DEFAULT&msg=38939.31">31–35</a></div> <div id="page_content"> <h3 class="thread_title"><a href="index.php?webtag=DEFAULT&amp;msg=38939.22">text-shadow</a> </h3> <div id="messages" data-navigation="38939_22_35_10"> <a name="a38939_22"></a><div class="message" id="message_38939_22"> <div class="message_header"> <div class="message_from"> From: 99% of gargoyles look like (MR_BASTARD)<span class="message_time">21 Sep 2011 06:32</span> <div class="clearer"></div> </div><div class="message_to">To: Drew (X3N0PH0N) <span><span class="image post_read" title="Read: 21 Sep 2011 06:34"></span></span> <span class="message_count">22 of 35</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38939.22">38939.22</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38939.17">38939.17</a></div> <div class="message_body"> I'm sorry to say that I agree with Peter on this. Reworking a whole site's graphics text because of design changes, rather than tweaking CSS, is bonkers. Besides, text (even pretty text) should be text, not graphics.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38939.22&return_msg=38939.22" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38939.22"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38939_23"></a><div class="message" id="message_38939_23"> <div class="message_header"> <div class="message_from"> From: af (CAER)<span class="message_time">21 Sep 2011 08:33</span> <div class="clearer"></div> </div><div class="message_to">To: Drew (X3N0PH0N) <span><span class="image post_read" title="Read: 21 Sep 2011 08:50"></span></span> <span class="message_count">23 of 35</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38939.23">38939.23</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38939.17">38939.17</a></div> <div class="message_body"> A <a href="http://www.colorzilla.com/gradient-editor/">visual thing</a> you say? (ironic that it tries very hard to look exactly like Photoshop)<br /> <br /> Ok it only does gradients, but still, I'm sure it wouldn't be too hard to knock together a text-shadow (or box-shadow) example. In fact, I might just do that...<br /> <br /> edit:<br /> Plus, it's more than just "a few clicks in Photoshop" – you first need to create the image, specifying what size you want it, then enter the text, then do a few clicks, then need to upload it to the server in the right place, then change some text files to actually reference the image, then like Peter said, possibly make another version that looks good on a smaller screen.<br /> <br /> Also, using CSS like this means you can make your fancy effects big as you like without affecting filesize, and including it in an existing CSS file means one less HTTP request, = faster site.<div class="edit_text">EDITED: 21 Sep 2011 08:38 by CAER</div> </div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38939.23&return_msg=38939.22" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38939.23"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38939_24"></a><div class="message" id="message_38939_24"> <div class="message_header"> <div class="message_from"> From: Drew (X3N0PH0N)<span class="message_time">21 Sep 2011 08:57</span> <div class="clearer"></div> </div><div class="message_to">To: af (CAER) <span><span class="image post_read" title="Read: 21 Sep 2011 09:00"></span></span> <span class="message_count">24 of 35</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38939.24">38939.24</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38939.22#a38939_23" target="_self">38939.23</a></div> <div class="message_body"> You're missing my point. Even if there were a visual thing which did everything CSS can currently do, which that certainly isn't, it would be able to do about 0.01% of what Photoshop can do.<br /> <br /> As I say, if you want something very trivial or looking like 1990s home-publishing then great, CSS has caught up. If you want something genuinely rich you still have to use Photoshop anyway.<br /> <br /> The few clicks thing was clearly hyperbole. For anything beyond the most trivial of decorations, it's going to be <i>far</i> quicker to do with direct manipulation and feedback.<br /> <br /> <div class="quotetext" id="quote"><b>quote: </b></div><div class="quote">Also, using CSS like this means you can make your fancy effects big as you like</div><br /> <br /> The tiny subset of fancy effects which CSS can now do.<br /> <br /> <div class="quotetext" id="quote"><b>quote: </b></div><div class="quote">without affecting filesize</div><br /> <br /> Cos people really notice a 20k hit these days.<br /> <br /> <div class="quotetext" id="quote"><b>quote: </b></div><div class="quote">one less HTTP request</div><br /> <br /> 1. You're scraping the bottom of the barrel now 2. You're well aware that you can put image data in CSS anyway.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38939.24&return_msg=38939.22" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38939.24"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38939_25"></a><div class="message" id="message_38939_25"> <div class="message_header"> <div class="message_from"> From: af (CAER)<span class="message_time">21 Sep 2011 09:19</span> <div class="clearer"></div> </div><div class="message_to">To: Drew (X3N0PH0N) <span><span class="image post_read" title="Read: 21 Sep 2011 09:24"></span></span> <span class="message_count">25 of 35</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38939.25">38939.25</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38939.22#a38939_24" target="_self">38939.24</a></div> <div class="message_body"> Ok, you're right in that Photoshop can do a lot more than CSS, and for things that need it, it's certainly the preferable tool.<br /> <br /> But, and this was kinda my point I guess, not every situation requires it; there are valid situations where using CSS would be a better choice.<br /> <br /> It ties into the point Truffy made, too: if the text is integral to the content of the page, then it should be styled with CSS; if not, sure, an image might be better.<br /> <br /> And the point about HTTP requests and filesize was that these things often aren't used in isolation: sure, a 20K image is not much to be concerned about, but once you start using them all over the place, the weight starts to add up.<br /> <br /> Plus, there are other advantages to using CSS, mostly relating to maintenance: you could use the same basic effects but with different colours for different areas of a site (versus creating different images for each, which yes, I know, could be combined into a sprite and possibly inlined in the CSS), you can animate the CSS (or use Flash, I guess), you can change the text on the fly, perhaps in response to a user login, I dunno. There's lots of things you can do with it that either aren't possible with just images, or that start to get unwieldy (or require Flash).</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38939.25&return_msg=38939.22" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38939.25"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38939_26"></a><div class="message" id="message_38939_26"> <div class="message_header"> <div class="message_from"> From: Drew (X3N0PH0N)<span class="message_time">21 Sep 2011 09:32</span> <div class="clearer"></div> </div><div class="message_to">To: af (CAER) <span><span class="image post_read" title="Read: 21 Sep 2011 09:32"></span></span> <span class="message_count">26 of 35</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38939.26">38939.26</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38939.22#a38939_25" target="_self">38939.25</a></div> <div class="message_body"> Yeah, but as I said earlier all of that is only of any value at all if the same people who design the thing code the thing. Which in my experience, and outside the realm of hobbyists, is not the case.<br /> <br /> Big, mainsteam sites are designed primarily in photoshop. Then after 20 meetings when everyone's happy with the design the photoshop files get chopped up and form the basis of the site, which is put together by other people.<br /> <br /> The coders can't design and the designers can't code. <br /> <br /> I'm not saying what you describe isn't desirable or even preferable, conceptually. It's just of no relevance to how stuff is done.<br /> <br /> For anything heavily designed, it's going to have to sit on a background image anyway. So then you have to explain the design people that they need to export without any text. Then you have to explain to the coders that no, it has to match the reference images exactly and no that's not close enough and no you can't just guess at the colours.<br /> <br /> No one, outside of hobbyists and places which insist on good practise (which are rare), will use it.<br /> <br /> (beyond corporate intranets and other non-public-facing or low profile stuff. Anything where coders do the design (and it usually shows). They'll <i>love</i> adding dropshadows to all their header tags)</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38939.26&return_msg=38939.22" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38939.26"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38939_27"></a><div class="message" id="message_38939_27"> <div class="message_header"> <div class="message_from"> From: af (CAER)<span class="message_time">21 Sep 2011 09:38</span> <div class="clearer"></div> </div><div class="message_to">To: Drew (X3N0PH0N) <span><span class="image post_read" title="Read: 21 Sep 2011 09:38"></span></span> <span class="message_count">27 of 35</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38939.27">38939.27</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38939.22#a38939_26" target="_self">38939.26</a></div> <div class="message_body"> In that respect I bow to your greater experience in these matters.<br /> <br /> <div class="quotetext" id="quote"><b>quote: </b></div><div class="quote">Big, mainsteam sites are designed primarily in photoshop. Then after 20 meetings when everyone's happy with the design the photoshop files get chopped up and form the basis of the site, which is put together by other people.</div>Will this always be the case? Like I said, my experience with these things is more limited, and besides I'm probably being too idealistic anyway, but I like to think that things are moving towards the conceptual ideal.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38939.27&return_msg=38939.22" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38939.27"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38939_28"></a><div class="message" id="message_38939_28"> <div class="message_header"> <div class="message_from"> From: Drew (X3N0PH0N)<span class="message_time">21 Sep 2011 09:52</span> <div class="clearer"></div> </div><div class="message_to">To: af (CAER) <span><span class="image post_read" title="Read: 21 Sep 2011 09:52"></span></span> <span class="message_count">28 of 35</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38939.28">38939.28</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38939.22#a38939_27" target="_self">38939.27</a></div> <div class="message_body"> Yeah, I absolutely agree with you that what you desribe is conceptually preferable. It'll make the internet <i>better</i>.<br /> <br /> And I think the companies who are mainly of the internet - Google and Twitter and so on, will do it the right way.<br /> <br /> But the sort of stuff I work on is shocking. I think your head would explode if you saw some of the stuff I work on (for companies like VMG, Warner, EA, Sony, Fox). Big lumbering companies who do not understand the internet at all and there's so many layers of hierarchy between the person who decided X thing should have a site and the person who's getting me to do it. And they get instructions from higher up that they follow without question. Like someone higher up probably said 'I heard flash is cool these days, we should have something like that' and by the time it gets to me it's 'the whole site MUST be in flash'. <br /> <br /> There was a site I worked on recently and one in a litany of fuckwitted decisions from higher up was that they wanted quite rich animated menus in flash. I told them I could do them in CSS and it would be a lot easier (cos the site needed internationalising, and that's obviously a pain in the arse in flash) and... just better in every way. But no, they insisted on flash.<br /> <br /> Another one was a site which needed translating into 7 languages. It was quite a dynamic, database driven site. So I said - easiest way to do translations was just isolate all the strings in the database and pull the right ones in dynamically, using mod rewrite to keep it all tidy. But no, they <i>insisted</i> that they wanted the entire site replicating 7 times. I pushed for this several times - explaining at length how it was simply <i>better</i> and, as far as the end user was concerned, totally absolutely identical - and every time they came back with no, it must be physically copied 7 times (including several hundred mb of video content which they wouldn't even let me symlink).<br /> <br /> It's totally nuts.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38939.28&return_msg=38939.22" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38939.28"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38939_29"></a><div class="message" id="message_38939_29"> <div class="message_header"> <div class="message_from"> From: af (CAER)<span class="message_time">21 Sep 2011 09:55</span> <div class="clearer"></div> </div><div class="message_to">To: Drew (X3N0PH0N) <span><span class="image post_read" title="Read: 21 Sep 2011 09:56"></span></span> <span class="message_count">29 of 35</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38939.29">38939.29</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38939.22#a38939_28" target="_self">38939.28</a></div> <div class="message_body"> I guess I'm lucky working for a company that at least has a say in how things are implemented, and a boss who generally knows his stuff <span class="emoticon e_shock" title=":O"><span class="e__">:O</span></span> The only downside is having to support IE7 (at least on my current project; I think others have to support 6 too, although I think we charge extra for that).<div class="edit_text">EDITED: 21 Sep 2011 09:55 by CAER</div> </div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38939.29&return_msg=38939.22" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38939.29"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38939_30"></a><div class="message" id="message_38939_30"> <div class="message_header"> <div class="message_from"> From: DrBoff (BOFF)<span class="message_time">21 Sep 2011 09:56</span> <div class="clearer"></div> </div><div class="message_to">To: Drew (X3N0PH0N) <span><span class="image post_read" title="Read: 21 Sep 2011 09:56"></span></span> <span class="message_count">30 of 35</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38939.30">38939.30</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38939.22#a38939_28" target="_self">38939.28</a></div> <div class="message_body"> Your "make websites easier to read" plugin would be kinda fucked if all the headings were in photoshopotext though, wouldn't it? Unless you do clever things with alt-text I guess.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38939.30&return_msg=38939.22" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38939.30"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38939_31"></a><div class="message" id="message_38939_31"> <div class="message_header"> <div class="message_from"> From: Drew (X3N0PH0N)<span class="message_time">21 Sep 2011 09:59</span> <div class="clearer"></div> </div><div class="message_to">To: DrBoff (BOFF) <span><span class="image post_read" title="Read: 21 Sep 2011 10:07"></span></span> <span class="message_count">31 of 35</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38939.31">38939.31</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38939.22#a38939_30" target="_self">38939.30</a></div> <div class="message_body"> On the kinda sites I'm talking about, it'd be fucked altogether, yeah, we're not really talking about headers as such. Just very 'rich' websites.<br /> <br /> But the standard approach of people who know what they're doing is to use the image as a background image and have the text there, but invisible. That way you're not fucking over screen readers etc..</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38939.31&return_msg=38939.22" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38939.31"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div></div> <div class="message_page_footer"> <ul> <li class="right_col"><form accept-charset="utf-8" method="get" action="lmessages.php" target="_self"><input type="hidden" name="webtag" id="webtag" class="bhinputtext" value="DEFAULT" dir="ltr" /><input type="hidden" name="msg" id="msg" class="bhinputtext" value="38939.32" dir="ltr" /><input type="submit" name="submit" id="keep_reading" value="Keep reading…" class="button" /></form></li> </ul> </div> </div> </body>