Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Creating a more advanced shape

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #42401
    Martin_Muzatko
    Participant

    Hi there!
    I am currently trying a new concept for my webfolio.
    What I am actually trying to achieve is something I can’t achieve with CSS alone.
    As you can see in this [http://i.imgur.com/J5dVWbo.jpg](http://i.imgur.com/J5dVWbo.jpg “Image”), I want to create scalable containers for my content. I do not really care about the support because it is just a project to push CSS and HTML to their limits.
    First I thought about using SVG – they are scalable and I love creating vectors. http://emacsformacosx.com/ was a great example how useful it can be.
    Then again I thought about the new HTML5 Canvas – however, javascript is NOT my strength, and also I have no idea if it could fit as a container for text and images.
    Whereas I guess I can’t avoid javascript.

    Please tell me your thoughts regarding this problem.

    Best regards
    Martin Muzatko

    #123029
    Paulie_D
    Member

    I’m unclear on what it is you are trying to do.

    At the moment, you can’t make HTML containers that are anything but rectangular. They might not look it…but they are.

    Anything else, SVG, Canvas is just something rendered inside a (still) rectangular container…or have I misunderstood?

    #123055
    Martin_Muzatko
    Participant

    I am sorry for being unclear.
    I am trying to create a more creative box. Meaning: adding some style to it which is not possible with CSS. (AFAIK: CSS does not support 45 degree corners like I showed on this image: http://i.imgur.com/J5dVWbo.jpg .
    I would love to create such thing without the need of any graphic tools /shops whatsoever.
    SVG comes here in handy, but I am not 100% sure, if this is a good approach for such a project. I humbly ask you for information, or what you consider as a good method to create an unusual shaped box and still maybe have the advantages of using CSS.

    Thank you in advance.

    #123056
    Paulie_D
    Member

    CSS certainly can create 45 degree angles it just does it with borders and/or pseudo elements.

    As I said though, whatever technique you use CSS/image/JS it’s not going to be apllied to anything other than a rectangle that will hold content.

    http://jsfiddle.net/Paulie_D/AQFKG/2/

    #123057
    Martin_Muzatko
    Participant

    Of course I know this kind of technique :).
    Although I consider this as useless, because I can’t change the color of the background or border without screwing the rest of it. What I mean is: I can’t have diagonal borders. I did know about the triangle trick, but unfortunatly that allows only one-colored boxes.
    As I said, maybe SVG could be a possible solution to get full control of the shape.
    I do not really care about that in the end it is a rectangular box, but I would love to create the boxdesign without being restricted to one color. I hope you get an idea of what I try to achieve.

    Thank you a lot and best regards.

    #123058
    Paulie_D
    Member

    Perhaps a color image of what you are after would help?

    Frankly, I’m not seeing any difference in maintaining CSS and an SVG/Canvas.

    #123061
    chrisburton
    Participant

    I’m almost positive you can create this with CSS. But I doubt the browser support is that good (IE specifically).

    Edit: Oops. I see @Paulie_D confirmed it.

    #123065
    Martin_Muzatko
    Participant

    Okay, I try to make myself clear.
    I already showed you that sketch I created.
    All I was asking for is a possibility to create a box that I am able to add polygons (which SVG is capable of), so I am able to control experimental shapes that are not rectangular or completly round with border-radius.
    Here again is the Image: http://i.imgur.com/x4y1zkO.jpg
    Unfortunatly all those CSS-Tricks won’t help me because then I can’t put it as a transparent box on a background (in the jsfiddle you sent me – this wasn’t possible).

    I hope I made myself a bit clear now. Thank you!

    #123066
    Paulie_D
    Member

    Nope…still not clear.

    All the elements will be boxes

    You can fake shapes with fancy colors, borders, pseudo elements and backgrounds but they will still be a rectangles.

    At least until something like CSS Regions comes along.

    #123067
    chrisburton
    Participant

    @Paulie_D Is he asking a way to create that shape so his content flows inside of it?

    #123071
    Paulie_D
    Member

    TBH, I’m not sure but I would assume so.

    I’m not entirely sure whether he wants to style a rectangle to look like that shape or actually have a blank ‘shape’ element that he can style.

    AFAIK, the second option doesn’t exist yet.

    #123073
    Martin_Muzatko
    Participant

    I am very sorry for being so unclear on my very first day in this forum.
    As Paulie_D mentioned, the second option is what I was searching for.

    I know that the second option is with css alone not possible, but with other tools? SVG? Canvas?

    #123074
    Paulie_D
    Member

    AFAIK, SVG can’t create an element, neither can Canvas

    SVG is just a graphic that has to sit in (or behind) an element.

    Canvas is just a rectangular element which is drawn on using javascript.

    That’s my understanding but perhaps there is something on the bleeding edge or maybe there is a gap in my understanding.

    Anyone?

    #123079
    chrisburton
    Participant

    @Paulie_D? SVG is an element, no?

    #123081
    dfogge
    Participant

    technically, SVG is actually a markup language used to create vector graphic elements.

Viewing 15 posts - 1 through 15 (of 19 total)
  • The forum ‘Other’ is closed to new topics and replies.