Rough Edges Background

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • shapper

    Rough Edges Background

    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?

    Thanks,
    Miguel
  • Joost Diepenmaat

    #2
    Re: Rough Edges Background

    shapper <mdmoura@gmail. comwrites:
    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/

    Comment

    • shapper

      #3
      Re: Rough Edges Background

      On May 15, 11:42 am, Joost Diepenmaat <jo...@zeekat.n lwrote:
      shapper <mdmo...@gmail. comwrites:
      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?

      Thank You,
      Miguel

      Comment

      • dorayme

        #4
        Re: Rough Edges Background

        In article <slrng2p6o9.5v2 .spamspam@bowse r.marioworld>,
        Ben C <spamspam@spam. eggswrote:
        In my FF, Opera (Safari similar) and MacIE5 respectively as you go down:

        <http://dorayme.890m.co m/alt/justPics/fuzzybg.png>

        --
        dorayme

        Comment

        • dorayme

          #5
          Re: Rough Edges Background

          In article
          <63893497-ea36-43a6-ab93-7b38c4de3b74@w7 g2000hsa.google groups.com>,
          shapper <mdmoura@gmail. comwrote:
          "Notice the primary titles for each section or page (ie.: the words
          ³Recent Log Entries² on the <link>front page</link>)"

          Can you find "Recent Log Entries" on the page linked to with the words
          "front page"?

          --
          dorayme

          Comment

          • Ben C

            #6
            Re: Rough Edges Background

            On 2008-05-15, dorayme <doraymeRidThis @optusnet.com.a uwrote:
            In article <slrng2pe78.n2j .spamspam@bowse r.marioworld>,
            Ben C <spamspam@spam. eggswrote:
            >
            >On 2008-05-15, dorayme <doraymeRidThis @optusnet.com.a uwrote:
            In article <slrng2p6o9.5v2 .spamspam@bowse r.marioworld>,
            Ben C <spamspam@spam. eggswrote:
            >
            >http://www.tidraso.co.uk/misc/sizedBackground.html
            >
            In my FF, Opera (Safari similar) and MacIE5 respectively as you go down:
            >
            ><http://dorayme.890m.co m/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.
            Yes you can still get that.
            (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).
            And the fun of it is watching the words distort as you go.

            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.

            Comment

            • Ben C

              #7
              Re: Rough Edges Background

              On 2008-05-15, shapper <mdmoura@gmail. comwrote:
              On May 15, 11:56 pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:
              >In article <slrng2pe78.n2j .spams...@bowse r.marioworld>,
              > Ben C <spams...@spam. eggswrote:
              >>
              On 2008-05-15, dorayme <doraymeRidT... @optusnet.com.a uwrote:
              In article <slrng2p6o9.5v2 .spams...@bowse r.marioworld>,
              Ben C <spams...@spam. eggswrote:
              >>>>
              In my FF, Opera (Safari similar) and MacIE5 respectively as you go down:
              >>
              ><http://dorayme.890m.co m/alt/justPics/fuzzybg.png>
              >>
              Thanks, good screenshots.
              [...]
              Ben, when talking about image replacement I was talking something
              about this:

              >
              Or this:
              It’s been well over ten years now since the debut of the graphical web browser and we still don’t have an easy way to deliver rich typography using HTML/CSS. With CSS we can size, style, color, kern, show, and …

              >
              And I was also looking at sprites:
              Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution.

              >
              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.
              I think the image replacement method is the way to go here. The solution
              I suggested is not really practical.

              Comment

              • Rik Wasmus

                #8
                Re: Rough Edges Background

                On Fri, 16 May 2008 00:20:59 +0200, dorayme
                <doraymeRidThis @optusnet.com.a uwrote:
                In article <slrng2p6o9.5v2 .spamspam@bowse r.marioworld>,
                Ben C <spamspam@spam. eggswrote:
                >>
                In my FF, Opera (Safari similar) and MacIE5 respectively as you go down:
                >
                <http://dorayme.890m.co m/alt/justPics/fuzzybg.png>
                >
                Hmmm, your Opera (/OS) is not my Opera (/OS). Opera 9.27 @ wXP64 does
                place the background behind the text. Still lets it run to the right
                though.

                --
                Rik Wasmus
                ....spamrun finished

                Comment

                • dorayme

                  #9
                  Re: Rough Edges Background

                  In article <op.ua8jy5h35bn juv@metallium.l an>,
                  "Rik Wasmus" <luiheidsgoeroe @hotmail.comwro te:
                  On Fri, 16 May 2008 00:20:59 +0200, dorayme
                  <doraymeRidThis @optusnet.com.a uwrote:
                  >
                  In article <slrng2p6o9.5v2 .spamspam@bowse r.marioworld>,
                  Ben C <spamspam@spam. eggswrote:
                  In my FF, Opera (Safari similar) and MacIE5 respectively as you go down:

                  <http://dorayme.890m.co m/alt/justPics/fuzzybg.png>
                  >
                  Hmmm, your Opera (/OS) is not my Opera (/OS). Opera 9.27 @ wXP64 does
                  place the background behind the text. Still lets it run to the right
                  though.
                  Mine is

                  9.24
                  Build
                  3707
                  Platform
                  MacOS X
                  System
                  10.4.10

                  --
                  dorayme

                  Comment

                  Working...