- This topic is empty.
-
AuthorPosts
-
August 20, 2015 at 12:15 pm #206798
salll
ParticipantHi,
Where can i find tutorials about advanced borders and box-shadows in css?
I discovered shape of css but cant explanation this:
#egg { display:block; width: 126px; height: 180px; background-color: red; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
box-shadow: 0 0 0 1em red, 0 1em 0 1em red, -2.5em 1.5em 0 .5em red, 2.5em 1.5em 0 .5em red, -3em -3em 0 0 red, 3em -3em 0 0 red, -2em -2em 0 0 red, 2em -2em 0 0 red, -3em -1em 0 0 red, -2em -1em 0 0 red, 2em -1em 0 0 red, 3em -1em 0 0 red, -4em 0 0 0 red, -3em 0 0 0 red, 3em 0 0 0 red, 4em 0 0 0 red, -5em 1em 0 0 red, -4em 1em 0 0 red, 4em 1em 0 0 red, 5em 1em 0 0 red, -5em 2em 0 0 red, 5em 2em 0 0 red, -5em 3em 0 0 red, -3em 3em 0 0 red, 3em 3em 0 0 red, 5em 3em 0 0 red, -2em 4em 0 0 red, -1em 4em 0 0 red, 1em 4em 0 0 red, 2em 4em 0 0 red; background: red; width: 1em; height: 1em; overflow: hidden; margin: 50px 0 70px 65px; }
link.
How it works o.O
August 20, 2015 at 9:25 pm #206813Shikkediel
ParticipantThe trick with border-radius is that what comes before the slash defines what happens on the x-axis and after it describes the values for the y-axis. You can use multiple values to pair each corner (like in the example) or in case of using a single value after the slash, it will apply to all defined x-axis values. When the slash is omitted, the values will be used for both x and y.
sitepoint.com/border-radius-with-slash-syntax
The webkit rule above is using pixels for older operating systems (or browsers) because it doesn’t handle percentages well.
In short for box-shadow, it stacks a whole bunch of them.
August 21, 2015 at 12:03 am #206823 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.