Slightly glitched tape corners #27

New Issue

decentral1se · 2022-01-25T12:10:53Z

decentral1se commented

2022-01-25 12:10:53 +00:00

![image](/attachments/df2e8c24-1baa-4ec5-941b-98faaf3e4a3f)

image.png

72 KiB

decentral1se added this to the (deleted) project 2022-01-26 08:48:30 +00:00

decentral1se commented

2022-02-10 12:13:47 +00:00

I think we should just go back to them and say this is really hard to do in CSS and we should be careful not to sink budget into an obscure CSS adventure when we can just tweak the design. /cc @aadil

aadil commented

2022-02-11 09:10:46 +00:00

Yeah it's just really fragile making shapes using CSS pseudo-elements. Ideally this would be an SVG shape but I couldn't find any good resources for how to make a UI element like this with SVG and have HTML inside it.

decentral1se commented

2022-03-04 10:25:48 +00:00

We think it'd be a shame to lose this not square style. @simoon will try to tweak this design to make it easier to implement in CSS. @aadil can implement that then after.

aadil self-assigned this 2022-03-11 11:17:59 +00:00

simoon was assigned by aadil

2022-04-08 09:28:18 +00:00

simoon commented

2022-04-09 08:14:43 +00:00

I've changed the sticker to have a rounded edge (see screenshot), this is responsive and would be easy to do in CSS using border-radius: 0 24 24 0;. What do you think? Would this require more rounded elements in the design, say other sticker elements? I read that ruangrupa prefer more diversity in shape, adding a few rounded elements here and there could help, might require some more time to think out the design though.

I've changed the sticker to have a rounded edge (see screenshot), this is responsive and would be easy to do in CSS using `border-radius: 0 24 24 0;`. What do you think? Would this require more rounded elements in the design, say other sticker elements? I read that ruangrupa prefer more diversity in shape, adding a few rounded elements here and there could help, might require some more time to think out the design though.

Screen Shot 2022-04-09 at 10.07.52.png

60 KiB

simoon commented

2022-04-09 08:32:57 +00:00

Here's an example of how border-radius could be used on other cards - in this case the one for shouts

Here's an example of how `border-radius` could be used on other cards - in this case the one for shouts

Screen Shot 2022-04-09 at 10.31.40.png

122 KiB

simoon commented

2022-04-09 09:02:38 +00:00

Alternatively, I also found this way of making a sticker shape similar to the one now in CSS:

https://css-tricks.com/the-shapes-of-css/#aa-pointer-via-amsakanna-alt

In the pseudo-element #pointer:after you just have to comment out or delete the property border-left: 20px solid white; to make the left side square.

Alternatively, I also found this way of making a sticker shape similar to the one now in CSS: https://css-tricks.com/the-shapes-of-css/#aa-pointer-via-amsakanna-alt In the pseudo-element `#pointer:after` you just have to comment out or delete the property `border-left: 20px solid white;` to make the left side square.

Screen Shot 2022-04-09 at 11.02.30.png

203 KiB