 | |
Rough Edges Background
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Rough Edges Background -
05-15-2008
, 05:36 AM
#2
| |||
| |||
|
|
Hello, I have an anchor which I would like to have a background image with rough edges. How can I do this with CSS? One of the solutions would be image replacement using CSS ... ... I am not sure if this works in all browsers, or if is good for search engines. Could someone, please, tell me what are the options I have and if image replacement is a good option? |
--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
#3
| |||
| |||
|
|
shapper <mdmo... (AT) gmail (DOT) com> writes: Hello, I have an anchor which I would like to have a background image with rough edges. How can I do this with CSS? One of the solutions would be image replacement using CSS ... ... I am not sure if this works in all browsers, or if is good for search engines. Could someone, please, tell me what are the options I have and if image replacement is a good option? Looks to me you're over-engineering; what's wrong with background-image? -- Joost Diepenmaat | blog:http://joost.zeekat.nl/| work:http://zeekat.nl/ |
give rough edges around the text even when text gets bigger or
smaller?
Thank You,
Miguel
#4
| |||
| |||
|
|
On May 15, 11:42 am, Joost Diepenmaat <jo... (AT) zeekat (DOT) nl> wrote: shapper <mdmo... (AT) gmail (DOT) com> writes: Hello, I have an anchor which I would like to have a background image with rough edges. How can I do this with CSS? One of the solutions would be image replacement using CSS ... ... I am not sure if this works in all browsers, or if is good for search engines. Could someone, please, tell me what are the options I have and if image replacement is a good option? Looks to me you're over-engineering; what's wrong with background-image? -- Joost Diepenmaat | blog:http://joost.zeekat.nl/| work:http://zeekat.nl/ The font size is in em ... how can I create a background image that give rough edges around the text even when text gets bigger or smaller? |
1. You can't resize background images, only repeat them.
2. You can resize img elements.
3. So this is possible providing browsers support containing blocks
generated by inline boxes properly, which many don't.
Here is an example which works in Firefox 2 (but not Opera):
http://www.tidraso.co.uk/misc/sizedBackground.html
Although actually the extruded effect looks rather good in Opera. Opera
is also getting the stacking order wrong, which doesn't help.
#5
| |||
| |||
|
#6
| |||
| |||
|
|
In article <slrng2p6o9.5v2.spamspam (AT) bowser (DOT) marioworld>, Ben C <spamspam (AT) spam (DOT) eggs> wrote: http://www.tidraso.co.uk/misc/sizedBackground.html In my FF, Opera (Safari similar) and MacIE5 respectively as you go down: http://dorayme.890m.com/alt/justPics/fuzzybg.png |
FF is showing the desired effect. Opera is probably reminding Americans
of some horrible candy they enjoyed as children.
I'm surprised Safari is doing the same as there is no particular logic
to that (and the stacking order is definitely wrong in Opera).
MacIE5 is just treating the viewport as the containing block (which is
reasonable, but not what today's spec says).
#7
| |||
| |||
|
|
On 2008-05-15, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote: In article <slrng2p6o9.5v2.spamspam (AT) bowser (DOT) marioworld>, Ben C <spamspam (AT) spam (DOT) eggs> wrote: http://www.tidraso.co.uk/misc/sizedBackground.html In my FF, Opera (Safari similar) and MacIE5 respectively as you go down: http://dorayme.890m.com/alt/justPics/fuzzybg.png Thanks, good screenshots. FF is showing the desired effect. Opera is probably reminding Americans of some horrible candy they enjoyed as children. Do you still have "rock" at the seaside in England? I used to get |
on holidays.
(Rock, Jonathan, is not code for drugs, it is a candy stick, gruesomely
sweet, thick as a broom handle, with the words that go in a circle as
seen from the end that is being sucked, the words remain right through
the length).
Quote:
|
I'm surprised Safari is doing the same as there is no particular logic to that (and the stacking order is definitely wrong in Opera). MacIE5 is just treating the viewport as the containing block (which is reasonable, but not what today's spec says). |
a nice comedic surprise. <g>
--
dorayme
#8
| |||
| |||
|
|
In article <slrng2pe78.n2j.spams... (AT) bowser (DOT) marioworld>, Ben C <spams... (AT) spam (DOT) eggs> wrote: On 2008-05-15, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote: In article <slrng2p6o9.5v2.spams... (AT) bowser (DOT) marioworld>, Ben C <spams... (AT) spam (DOT) eggs> wrote: http://www.tidraso.co.uk/misc/sizedBackground.html In my FF, Opera (Safari similar) and MacIE5 respectively as you go down: http://dorayme.890m.com/alt/justPics/fuzzybg.png Thanks, good screenshots. FF is showing the desired effect. Opera is probably reminding Americans of some horrible candy they enjoyed as children. Do you still have "rock" at the seaside in England? I used to get Blackpool rock, and Llandudno rock (Wales) and Rhyll rock (Wales) when on holidays. (Rock, Jonathan, is not code for drugs, it is a candy stick, gruesomely sweet, thick as a broom handle, with the words that go in a circle as seen from the end that is being sucked, the words remain right through the length). I'm surprised Safari is doing the same as there is no particular logic to that (and the stacking order is definitely wrong in Opera). MacIE5 is just treating the viewport as the containing block (which is reasonable, but not what today's spec says). I fire up MacIE 5 sometimes because of the good chance that it will give a nice comedic surprise. <g -- dorayme |
Ben, when talking about image replacement I was talking something
about this:
http://stopdesign.com/articles/replace_text/
Or this:
http://www.mikeindustries.com/blog/archive/2004/08/sifr
And I was also looking at sprites:
http://www.alistapart.com/articles/sprites
Anyway, just read a few things to try to see if I could adapt to solve
this problem but I suppose from your help that I need to reformulate
my design.
Thank You Once Again,
Miguel
#9
| |||
| |||
|
#10
| |||
| |||
|
|
In article <slrng2pe78.n2j.spamspam (AT) bowser (DOT) marioworld>, Ben C <spamspam (AT) spam (DOT) eggs> wrote: On 2008-05-15, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote: In article <slrng2p6o9.5v2.spamspam (AT) bowser (DOT) marioworld>, Ben C <spamspam (AT) spam (DOT) eggs> wrote: http://www.tidraso.co.uk/misc/sizedBackground.html In my FF, Opera (Safari similar) and MacIE5 respectively as you go down: http://dorayme.890m.com/alt/justPics/fuzzybg.png Thanks, good screenshots. FF is showing the desired effect. Opera is probably reminding Americans of some horrible candy they enjoyed as children. Do you still have "rock" at the seaside in England? I used to get Blackpool rock, and Llandudno rock (Wales) and Rhyll rock (Wales) when on holidays. |
Quote:
|
(Rock, Jonathan, is not code for drugs, it is a candy stick, gruesomely sweet, thick as a broom handle, with the words that go in a circle as seen from the end that is being sucked, the words remain right through the length). |
A better way to do the fuzzy bg, but even less supported, would be to
use
.fuzzy:before
{
url(fuzzy.png);
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
instead of
.fuzzy img
{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
then you could leave out the img tags. But Firefox (the only browser in
which the original solution works) seems to restrict the range of styles
you can apply to pseudoelements.
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.