An a idea for this?

Discussion in 'Graphics & Webdesign' started by medina, Apr 12, 2014.

  1. medina

    medina x10 Addict Community Support

    Messages:
    1,862
    Likes Received:
    6
    Trophy Points:
    38
    Hello!I would like to do this, with no IMAGES, just CSS3 or HTML5, i know that is possible, and also know that the internet is big and can find some information, the only problem is that i dont know the name of this (I mean the cutted bottom border of the header((and not can not find something with that name)). So if someone know the name of that, can be very helpful....Obviously i tried the take a look into the source but have a lot of lines! and i dont see nothing special in the CSS
     

    Attached Files:

  2. essellar

    essellar Community Advocate Community Support

    Messages:
    3,295
    Likes Received:
    227
    Trophy Points:
    63
    It can't be done without images at the current state of the art. (That's not exactly true; you can enable experimental features in the nightly/dev builds of Firefox or Chrome to do it locally on your machine, but that won't let your users see the effect).

    There are a number of techniques, but you need at least an SVG image (obviously a PNG would work as well). The phrase you want to use for search is "css sawtooth border". (You can do a single triangle easily using vanilla CSS, but not a repeating pattern.) The least-obtrusive way to do it would be to create a pseudo-element using :after that has a fixed height, a transparent background color and a background-image with repeat-x. The image you would need would be very small, so you can include it in the stylesheet with a data URI (no extra resource HTTP request).
     
  3. descalzo

    descalzo Grim Squeaker Community Support

    Messages:
    9,375
    Likes Received:
    327
    Trophy Points:
    83
    Last edited: Apr 12, 2014
    • Agree Agree x 1
  4. medina

    medina x10 Addict Community Support

    Messages:
    1,862
    Likes Received:
    6
    Trophy Points:
    38
  5. medina

    medina x10 Addict Community Support

    Messages:
    1,862
    Likes Received:
    6
    Trophy Points:
    38
    If you want to see the result this is my page: alejandrom.com Your information was very helpfulHave no images, just CSS :) ....
     
  6. essellar

    essellar Community Advocate Community Support

    Messages:
    3,295
    Likes Received:
    227
    Trophy Points:
    63
    It's not quite cross-browser, but if you're happy with it...
     
  7. fretwizz

    fretwizz Member

    Messages:
    106
    Likes Received:
    3
    Trophy Points:
    18
    essellar is right about not being CB compliant; better to have that IMO, I'd take his SVG suggestion.
     

Share This Page