Blogs DHNET.BE
DHNET.BE | Créer un Blog | Avertir le modérateur

Frames with rounded corners

Quotation of the message Julia_Gurber

Read the fullV your quote or community!

Frames with rounded corners


Want to collect for 5 minutes unpretentious, but very pretty frame
for text? For example, this:

Here is your text
-------
Or this:

Here is your text
-------
Then we look and take note.
 
As a basis, let's take the simplest styles - Convex frame:

Here is your text
Here is her code: Here is your text
Spotlight:

Here is your text
Code: Here is your text
Now, in the code line of any of the frames after one of the signs (;) we enter the attributes:

background: # F8E1D8; - sets the background color of the record.
For clarity, I left the color code, you replace it with any other.

border-radius: 30px; - specifies the radius of rounding of all 4 corners.
Instead of "30" substitute the number you need, for example: 8px, 16px, 32px.
You can complicate, so that the frame had a rounded upper left corner
and the lower right (like the first frame at the top of the post):

borde Charles Vickery paintings

r-top-left-radius: 32px;
border-top-right-radius: 0;
border-bottom-right-radius: 32px;
border-bottom-left-radius: 0;

We can swap rounded corners:

border-top-left-radius: 0;
border-top-right-radius: 32px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 32px;

Within the framework there is a given size of the width, which can also be changed:
width: 500px; - substitute any value.

And this is a hint on the finished strokes-curbs given in the codes:

border: 8px ridge # 33CCCC; - a border of a convex frame, where 8px is its thickness, and # 33CCCC is its color.
border: 5px dotted # CC33CC; - border of the point frame, where 5px - thickness, and # CC33CC - color.

Prepared by J. Gurber

Les commentaires sont fermés.