welcome
Hey you, so nice to see you. You've just stumbled into Katie's humble abode going by the name Midnight Tears. This is the place where you'll find my art, resources and other little things. Look around and enjoy your stay. All art was made by me. Please show respect and don't steal, hotlink, edit or claim as yours.site of the month
There are so many awesome artists out there with stunning sites that everyone should have a look at. So, every month I want to put one of them in the spotlight to spread the love.Shattered Memories -- read why Ω have a look
html tidbits
rounded corners
Corners are corners, aren't they? Not necessarily so. If you've thought before that they might look cooler if they're rounded instread of the usual straight, then here's how to get them just like that.
Something bad in advance. This will not work with the Internet Explorer up until the latest version.
If two values are set, the first one applies to top-left and bottom-right corner, the second one applies to top-right and bottom-left corner.
If three values values are set, the second value applies to top-right and also bottom-left.
Four values apply to the top-left, top-right, bottom-right, bottom-left corner.
You can also define them all one by one.
The higher the number, the tighter the radius of the rounded corner. So, if you want the roundness to be soft, lower the number.
Something bad in advance. This will not work with the Internet Explorer up until the latest version.
-moz-border-radius
If one value is set, the radius applies to all 4 corners.If two values are set, the first one applies to top-left and bottom-right corner, the second one applies to top-right and bottom-left corner.
If three values values are set, the second value applies to top-right and also bottom-left.
Four values apply to the top-left, top-right, bottom-right, bottom-left corner.
You can also define them all one by one.
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
This is, for example, what I had defined in my layout. The corner on the top right and the one of the bottom left was rounded with a value of 60.The higher the number, the tighter the radius of the rounded corner. So, if you want the roundness to be soft, lower the number.
-moz-border-radius-topright: 60px;
-moz-border-radius-bottomleft: 60px;
To make this work in Safari, you'll also have to add this part. Just a slightly different text; everything else is the same.-webkit-border-top-right-radius: 60px;
-webkit-border-bottom-left-radius: 60px;