18
devGaara
334d

Just wrote an article about how to code this with CSS. I'm new to writing stuff. Would love to hear what you guys think

Comments
  • 2
    Where can we see the article?
  • 7
    @kamen oh shit. My dumb ass brain forgot to give the link

    Here you go

    https://medium.com/@so_deep.dev/...
  • 2
    @kamen thanks for pointing that out
  • 3
    I'm horrible at CSS :(
  • 4
    @Xoka everybody once was, most are still.
    Cheers
  • 0
    @devGaara have you tried to also round-corner the badge on the left side ?
  • 2
    @dder @Xoka I'm too.. lot of stuff to learn
  • 1
    Very nice!
  • 0
    @FelisPhasma thank you :D
  • 1
    Looks good. Wouldn't a element for the badge/ribbony thing be a better solution? In that scenario the content of the ribbon isn't stored in your stylesheet, which might be a problem when having different types.
  • 0
    @gyzoor oh ya.. I should have thought that through. My bad 😅
  • 1
    @gyzoor after can just be replaced with a span
  • 1
    So I really liked the article. It would be helpful to have the code fragments in the text highlighted differently than bold. But I still enjoyed the article. Its one way to achieve the card 👌🏼
  • 1
    @Flamestro thank you! And I'll keep the suggestion in mind
  • 3
    It has been long time since I write css. I wanted to challenge myself and tried to create that card just by looking the picture you posted. Here is my result:
    https://codepen.io/bekiruzun/pen/...

    I used a different approach. I used borders to create little triangle.
  • 1
    And by looking at the code you write, I think you can make css classes prettier. You can use "header" instead of "card__header" which makes css selectors better like ".card .header" instead of ".card .card__header"
  • 0
    @hack damn! This is so cool! Thanks for reaching me a new trick!
  • 1
    @hack I like to follow BEM conventions. I usually use scss pre-processor. I did not wanna have to explain what that is in the same post. That's why I wrote
    .card .card__header.

    .card{
    &__header{
    }
    }

    This is how I usually write
  • 1
    @devGaara yeah I see now. Didn't know about BEM convention. Looked it up a little bit. I guess its not for me :/

    I prefer:

    .card {
    .header {
    }
    }
  • 0
    @hack understandable
  • 2
    Modified it a little bit to fit my use case. Such as instead of using the elements background to cut the ribbon i used linear gradient on the before element. And i made it so i can write the text in the html instead of css so i can pass variables in vue.
    https://jsfiddle.net/m8x9sr60/34/
  • 1
    @24th-Dragon awesome! I did not know about attr(). Thank you!
  • 0
    Tho i think svg might be a better solution.
  • 0
  • 0
    2d drawing that can scale. Its a clear use case. Plus you can add interactivity easly because its xml
  • 0
    @24th-Dragon fair. Especially about the interactivity. But I thought css scales well as well...

    I also don’t like the usage of text in ::before.content
    You cannot select and copy that text.
  • 0
    @24th-Dragon Hey bro, I was updating the article and I wanted to give credits for suggesting the change. What do write your name as?
  • 0
    Idk, this one i guess
  • 0
    @24th-Dragon aight, cool!
  • 0
Add Comment