β‘ How to create a Claymorphism CSS Card, a new CSS Trend in 2022 ππ₯π₯
#100DaysOfCode #Developer #design #CSS3
π
#100DaysOfCode #Developer #design #CSS3
π
Claymorphism can be
β created using a combination of inner and outer shadows
β create more depth against the background using one large shadow
β two inner shadows giving a 3d effect
πone corner lighter shadow,
πdiagonally opposite is a darker shadow
β created using a combination of inner and outer shadows
β create more depth against the background using one large shadow
β two inner shadows giving a 3d effect
πone corner lighter shadow,
πdiagonally opposite is a darker shadow
π HTML
β‘ Simple and straightforward HTML
β‘ Card div holding all the information
β‘ Simple and straightforward HTML
β‘ Card div holding all the information
π CSS
β‘ 2 colours, light pastel colours produces a great claymorphic effect.
β‘ lighter background so that the depth is clearly visible - RGB(249, 234, 255)
β‘ border-radius to give more 3d kind of effect
β‘ 2 colours, light pastel colours produces a great claymorphic effect.
β‘ lighter background so that the depth is clearly visible - RGB(249, 234, 255)
β‘ border-radius to give more 3d kind of effect
β‘ Use the same colour for both inner and outer shadow.
β‘ Outer shadow should be darker than an inner shadow to give the depth
β‘ Inner shadow - reduce the alpha value for lighter tones
β‘ Outer shadow should be darker than an inner shadow to give the depth
β‘ Inner shadow - reduce the alpha value for lighter tones
β‘ Add Styles to image, text and link.
β‘ Add shadows to them to get a more clay-like 3d effect
β‘ Full Code,
β‘ Add shadows to them to get a more clay-like 3d effect
β‘ Full Code,
π₯ That's it! We have created a claymorphic 3d card
β‘ Follow @sangyk_dev for more web dev content
π₯ Retweet the first tweet to inspire others.
β‘ Follow @sangyk_dev for more web dev content
π₯ Retweet the first tweet to inspire others.
https://twitter.com/sangyk_dev/status/1484192038317096960
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
