Forums

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

Home Forums CSS Struggling with CSS Hexagon tutorial

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #158579
    Lili
    Participant

    Hi
    I am trying to make a small square thumb into a small hexagon. I have found a brilliant tutorial here: http://jtauber.github.io/articles/css-hexagon.html and I have spent quite a while trying to figure out the CSS I would need to make it work on the site I am building but have had no success.

    I am trying to make this http://i.imgur.com/OBCetVM.png
    look like this http://i.imgur.com/SWBWstl.png

    Could anyone spare some brain cells to help me.

    I am completely stuck. the site is here http://tinyurl.com/l5s98pk
    Many thanks

    #158600
    Lili
    Participant

    Wow!

    That looks great. Thank you.

    If you have any tips on how to achieve what I want with that, they would be gratefully received.

    Specifically what CSS would I use for the thumbs on the site I am making.

    Fine if not, I will persevere.

    Thanks so very much.

    L

    #158604
    alexmccabe
    Participant

    If you’ve never seen SASS before that can be a little daunting, but what he is using is just basic CSS stored as variables. SASS contains math functions too, so a lot of that is being done for him, whereas if you were to do it, you would need to calculate the values yourself. The @mixin part is obviously where all the work is being done.

    If you read through the code, try and get an understanding of what he is doing. Fork it and start messing around with the code to find out what does what. Pull it apart, break it and fix it again. You will learn a lot, and if you manage to convert it to just CSS then you will have done a damn fine job :)

    #158607
    Lili
    Participant

    Thanks Alex.

    That is a very lovely reply.

    I will give it a good go!

    Hope you have a great day :)

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