One trend that we’re seeing a lot at the moment, in both Android and iOS design, is the use of rounded corners.
From the community to the app stores, there are examples of overlapping elements that look like cards sitting one stacked atop the other.
Border Radii
The effect is really easy to achieve in Thunkable, because you have the ability to specific the radius of each corner of a component.
The find the BorderRadii property, click on the Advanced tab, and then open the Styling options.
In the example above, the white column has radii of 40 px while the yellow label is using 20px radii.
5 Likes
Yes. I’m always equip this to reduce many of the screen
1 Like
darren
June 14, 2019, 7:59pm
3
Thanks @domhnallohanlon !
I was actually trying to figure this one out 2 nights ago and was unsuccessful.
2 Likes
jacob1
November 24, 2019, 3:16am
4
Hey,
This looked cool so I wanted to have a play with it - if anybody wants to utilise my design the share link is here: Thunkable
4 Likes
Hi, @jacob1 !
The design looks pretty cool
Thanks!
1 Like
jacob1
November 24, 2019, 4:07am
6
Thanks for your feedback @kartik14 I have it set at 0.76, but I will adjust to be more transparent
1 Like
Will it be possible to blur the background and other components except the card? Example of iPhone screen below:
jared
April 9, 2020, 12:54pm
8
we do not have something like this yet.
hopefully this could be a cool future feature. Can you add this to the github feature request?
2 Likes
jared
April 9, 2020, 2:51pm
10
The alpha setting doesn’t blur an image. it only affects the opaqueness of the image/componenet.
you could use the webviewer, an HTML file with a photo, and some CSS layered on top. Tryit Editor v3.7
2 Likes
Looks good! Can you explain how you made this?
Edit: it looks like the negative margin value is the key to this. I didn’t even know you could use negative numbers for those properties.
4 Likes
yes!, you got it!. That is the key for the effect: The negative margin value for the column which is inside the other column.
3 Likes
Awesome. I’ve created a button along the bottom of apps that sticks out from the bottom row/footer but always used Z positioning which is kind of a pain because it’s relative to the edge of the screen, not the component. But your method is relative to the component so it should be simple.
Here’s a demo:
https://x.thunkable.com/copy/a51a326c0affce35bcd55fc77a477350
4 Likes
