What is Digg?57 Comments
- inactive, on 10/12/2007, -0/+22otherwise known as a hard drop shadow.
- nubnub, on 10/12/2007, -2/+23Nothing new. If you come up with a way that doesn't require you to have the text typed twice and I'll be impressed.
- gameguy43, on 10/12/2007, -0/+11redundancy is a major problem with lots of sites that think theyre "valid". accessibility is just as important. it's an interesting idea, and a simple execution, but all in all i would avoid redundant content. still dugg cus digg needs more webdev articles.
- seanmac, on 10/12/2007, -0/+9Here's a tip: If your site looks weird (repeated text, illogical flow of content) when you remove the css completely, you have not used css properly.
- SilverRocket, on 10/12/2007, -0/+9Why all the negativity?
Mostly because it goes against the purpose of designing websites with xhtml and css. You want to SEPERATE content and design. With styles off, or with an audio reader, you'd see/hear everything twice with that effect.
If you're going to combine presentation and content, you might as well design it all in photoshop, export slices and make your webpage one big table. - mfearby, on 10/12/2007, -2/+10Why are the examples shown as images and not for real? I don't get it...
- TenebrousX, on 10/12/2007, -1/+9oops, digg me up
- bmson, on 10/12/2007, -0/+7(CSS2) text-shadow : .5em .5em 1em #777;
Safari is the only browser to render this, as far as I know.
http://www.blooberry.com/indexdot/css/properties/text/textshadow.htm - bean, on 10/12/2007, -1/+8Yep, looks okay and it's valid xhtml but not semantic.
- hookshotzz, on 10/12/2007, -1/+8not that hard to describe. drop shadow.
- greymarketbrain, on 10/12/2007, -0/+6Give text that raised look and crash your site with less than 50 diggs.
- idonthack, on 10/12/2007, -1/+7To show you what it's supposed to look like, even if your browser doesn't support CSS (or has a nonstandard implementation).
- rompom7, on 10/12/2007, -1/+7Server getting slow, not long until it dies.
http://duggmirror.com/design/Give_Text_That_Raised_Look_Just_With_CSS - dmorel, on 10/12/2007, -0/+6I thought it was a pretty elegant solution, it's simplicity is ideal, but the repetition of the content twice is starting to bother me a few minutes down the road...
The author is clearly aware of the issue, and devotes a paragraph to it. In the context of a wordpress theme where the usage will be dictated by the theme I suppose it's OK, but for practical applications, it's going to get mucky. Plus, from a purist standpoint it really breaks the content/display divide of CSS and HTML... In the end though, I digg it as a clever and simple to implement solution to a very specific problem (styling the headings in a wordpress theme). - ivachen, on 10/12/2007, -0/+5I don't know about overlaying that with absolute spans, looks like trouble looming to me.
- darkfate, on 10/12/2007, -2/+7I've seen this done before, but this is probably the simplest method I've seen.
- dmorel, on 10/12/2007, -0/+5gameguy: still dugg cus digg needs more webdev articles.
Agreed! In a few minutes there will be more diggs and comments on a front paged submission about a dude buying food at taco bell... - diagonalfish, on 10/12/2007, -1/+5Amazing that you were able to post a comment then! Truly astonishing! Well done, sir!
- steveatdownmix, on 10/12/2007, -0/+3Styles shouldn't require a change to page content. Do you really want search engines and screen readers reading your h1 tag as "Lorem IpsumLorem Ipsum"? Didn't think so.
- zammit, on 10/12/2007, -0/+3this is old "news" - anyone experienced with css could figure this one out.
accessibility is indeed important, having the text duped is not practical
everyone might want to check this out (url says it all):
http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows
i'll give this post a pat on the back, but in the end it gets buried. - thekak, on 10/12/2007, -1/+4Yea really.
- LordLucless, on 10/12/2007, -0/+2PNG is probably the worst solution for compatibility. IE screws up PNG colour rendering and transparency. If you want compatibility, use GIF or JPEG, whichever is more appropriate. PNG is a more open format, and has some nice stuff like alpha-transparency (which is also not supported in IE), but its not highly compatible (IEs fault, not the PNG format).
- covidiu, on 10/12/2007, -0/+2That's obviously *not* done "Just with CSS". The title is misleading. You need extra markup in the HTML code (the span and its content).
- jalenack, on 10/12/2007, -0/+2My thoughts exactly. There's more to it than "just CSS". I generally give faint text-shadows to things I want shadowed, knowing it'll be extra nice in Saf and not noticeably bad in the others.
- inactive, on 10/12/2007, -1/+3Yeah, really simple. It's a nice effect.
- sonick, on 10/12/2007, -4/+6Better yet, a Lorem Ipsum generator, perfect for doing layouts etc.
http://www.lipsum.com/ - Jero, on 10/12/2007, -0/+1This technique is just as bad as using elements like FONT or CENTER because it's abusing HTML in the same way. HTML should only be used to allow the user agent that's parsing the HTML code to understand the structure of your content. However, this technique has nothing to do with that. It requires you to add extra HTML code just to get an effect that looks cool.
So if you care about the semantic web, get sIFR instead, because techniques like this are raping the evolution of the web. - XZanatos, on 10/12/2007, -0/+1clarification: I meant "compute mathematics of any sort" not just displaying formulas and equations. It seems to me that if I wait long enough someone is going to find a way for CSS to properly display the relativistic effects of a blackhole, or they are going to come up with a way to do quantum physics "with CSS". I am not trying to insult CSS or complain about, I am just asking, "is there anything it can't do?"
- spliffy, on 10/12/2007, -0/+1yeah, i'm going to wait for the css3 text shadow to be widely supported before i start adding 2x the amount of text to my mark up for a lame ass shadow.
- Stonekeeper, on 10/12/2007, -0/+1Colour alert on that link!
- zammit, on 10/12/2007, -1/+2@ fearofcorners
filter only works in IE - fearofcorners, on 10/12/2007, -1/+2There are other ways to do this that are more elegant, but unfortunately they don't all work in all browsers and don't give very consistent results. Nice and simple.
- johnie1, on 10/12/2007, -0/+1it's a bit janky when you copy/paste the text
- daGUY, on 10/12/2007, -0/+1Cool, but you can do all this and more (such as set the amount of blur) with the text-shadow property, and you don't have to write everything twice. Unfortunately, I think Safari is the only browser that currently supports it.
- smhill, on 10/12/2007, -0/+1Most decent editors have lorem built right in. TextMate for example, just type lorem + Tab and you get a paragraph of it.
- arjie, on 10/12/2007, -0/+1Konqueror does too. But then they share much.
- Xilon, on 10/12/2007, -0/+1And this is news? wow... next there will be a digg on how to add images.
- MrDizzystick, on 10/12/2007, -0/+1@ XZanatos:
CSS shouldn't have any limits, but like everything it obviously does.
And math is where MathML comes in.
http://en.wikipedia.org/wiki/MathML - dmorel, on 10/12/2007, -2/+2@brw3245 why all the negativity?
If it's 11:45 EST on a saturday night and you're writing comments about about CSS on digg, well that should mostly explain.
Just to clarify, It's only 9:45 here in AZ, and my wife is in the shower... My night hasn't started yet - ukillman, on 10/12/2007, -0/+0COOL, thank you !!
- brw3245, on 10/12/2007, -3/+3A nice tip for beginners and for experienced coders. Thanks.
Ps, why all the negativity? - calvinator, on 10/12/2007, -0/+0"Why are the examples shown as images and not for real? I don't get it..."
He provides a link to actual CSS at the bottom of the page: http://jimwhimpey.com/misc/textshadow.html - ratbastid, on 10/12/2007, -1/+1Really. "That raised look. It's hard to describe."
Um. How 'bout calling it what it's called? - Norsted, on 10/12/2007, -0/+0An nice and easy way to create a shadow effect on headers. But...this is wrong in so many ways... first of all having the same text more than once isn't very SEO and crawler friendly. Secondly it's not 100% cross-browser compliant. But for a personal website it's fine - wouldn't recommend it being utilized on a corporate website though.
If you wanna have cool dynamic text headers - you should look into siFR (http://www.mikeindustries.com/sifr/) like Jero also suggested. - robcornelius, on 10/12/2007, -0/+0I first saw this technique about 5 years or so ago in a very basic HTML/CSS tutorial. IIRC correctly it said something along the lines of "Of course this is possible but impractical as the text is repeated twice." That still stands today.
If you used this for the headline of your site you would see it repeated in the little blurb of text on google's search results.
To all these people who say that 99.9999% of users can see properly, have javascript and CSS turned on etc. Googlebot doesnt. And its just about the most important vistor to your site as it will generate more money than any other single user. You could say it generates roughly the same amount of money as the rest of your users put together. - AboutPaula, on 10/12/2007, -1/+1I like the idea
- Tsukmar, on 10/12/2007, -2/+1Yes, this should be done in Photoshop. In incompatible browsers, this would create two of the heading separated from each other. Throw it in a png for the best compatible solution, imo.
- robcornelius, on 10/12/2007, -1/+0I first saw this technique about 5 years or so ago in a very basic HTML/CSS tutorial. IIRC correctly it said something along the lines of "Of course this is possible but impractical as the text is repeated twice." That still stands today.
If you used this for the headline of your site you would see it repeated in the little blurb of text on google's search results.
To all th0se people who say that 99.9999% of users can see properly, have javascript and CSS turned on etc. Googlebot doesnt. And its just about the most important vistor to your site as it will generate more money than any other single user. You could say it generates roughly the same amount of money as the rest of your users put together. - XZanatos, on 10/12/2007, -4/+1Does anyone else get the feeling that CSS is way too broad? Every week its something new to do with CSS. Its like somebody decided one day that it would be great if HTML could do "math", where math covers everything in the entire universe. Please tell me are there ANY limits to CSS???
- TroubleInMind, on 10/12/2007, -5/+1There is nothing new under the sun. Yawn.
-
Show 51 - 57 of 57 discussions
The Digg Toolbar for Firefox lets you Digg, submit content, and keep track of Digg even when you're not on the Digg site. Download the official 
© Digg Inc. 2009
— Content created and posted by Digg users is