Thursday, April 19, 2012

All CSS Border Plus Radius Style



Everyone is familiar with css parameter border, but there are things that we do not know about it?
Basics

Basics
Everyone familiar with such use:
border: 1px solid black;
This single-pixel solid border. Slightly changing the syntax:
border-width: thick;
border-style: solid;
border-color: black;
For example at border-width parameter has three options: thin, medium, thick: If you want to change the border color when mouse over an object:
border-width+parameter

If you want to change the border color when mouse over an object:
.box {
    border: 1px solid red;
}
.box:hover {
    border: 1px solid green;
}
But since it is easier to realizeand correct:
.box {
    border: 1px solid red;
}
.box:hover {
    border-color: green;
}
Border-Radius

border-radius - this is a new option to display the CSS3 rounded corners, which works correctly in all modern browsers except Internet Explorer 8 (and older versions). For each angle can be assigned its rounding:
Border-Radius

For each angle can be assignedits rounding:
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;
border bottom left radius

In the above example does not necessarily assign "0» border-top-right-radius, and border-bottom-left-radius, if they do not inherit the values ​​that need to be changed. 
whole structure can be compressed into one line:
/* top left, top right, bottom right, bottom left */
border-radius: 20px 0 30px 0;
And here is how you can draw a lemon means CSS:
.lemon {
   width: 200px; height: 200px;
   background: #F5F240;
   border: 1px solid #F0D900;
   border-radius: 10px 150px 30px 150px;
}
draw a lemon means CSS

Here we describe the simplest and most popular examples of setting border. We now turn to more complex.

Several boundaries

Border-Style
solid, dashed, and dotted - the most popular values ​​for border-style, but let's look at the other, for example, groove and ridge.
border: 20px groove #e3e3e3;
Or in more detail:
border-color: #e3e3e3;
border-width: 20px;
border-style: groove;
Several boundaries
Outline
The most popular way to create a double border - is a parameter outline:
.box {
   border: 5px solid #292929;
   outline: 5px solid #e3e3e3;
}
Outline

This method works fine, but is limited to the creation of a double frame. If you want to display multiple element boundaries, it is necessary to use a different technique.
Pseudo-
You can use this structure:
.box {
  width: 200px; height: 200px;
  background: #e3e3e3;
  position: relative;
  border: 10px solid green;
}
/* Create two boxes with the same width of the container */
.box:after, .box:before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
.box:after {
  border: 5px solid red;
  outline: 5px solid yellow;
}
.box:before {
  border: 10px solid blue;
}
Pseudo
Maybe it's not the most elegant solution, but it works
Box-Shadow
Another way, using the shadows:
.box {
    border: 5px solid red;
     box-shadow:
       0 0 0 5px green,
       0 0 0 10px yellow,
       0 0 0 15px orange;
}
Box-Shadow
Changing the angles
By setting border-radius can be used two values, using the "/", for example:
border-radius: 50px / 100px; /* horizontal radius, vertical radius */
It's the same thing:
border - top - left - radius : 50 px 100 px ;
 border - top - right - radius : 50 px 100 px ;
 border - bottom - right - radius : 50 px 100 px ;
 border - bottom - left - radius : 50 px 100 px ;
This technicals is useful if you want to simulate a curved, rather than rounding.For example, so you can get the effect of twisted paper:
.box {
    width: 200px; height: 200px;
    background: #666;
    border-top-left-radius: 15em 1em;
    border-bottom-right-radius: 15em 1em;
}
Changing+the+angles
CSS figures
The following examples assume a markup:
<div class="box"></div>
And this basic css:
.box {
   width: 200px;
   height: 200px;
   background: black;
}
The most common example of using CSS is to display shapes of arrows. To understand how this works, you need to learn how to use a separate border-color for each side, and setting the value "0" for the width and height:
.arrow {
  width: 0; height: 0;
  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 100px solid yellow;
}
Or the same thing:
.arrow {
  width: 0; height: 0;
  border: 100px solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}
Or this:
.arrow {
  width: 0; height: 0;
  border: 100px solid;
  border-color: red green blue yellow;
}
CSS+figures
And now, leaving only the blue triangle:
.arrow {
  width: 0; height: 0;
  border: 100px solid;
  border-bottom-color: blue;
}
blue+triangle


Creating a Speech Bubble
Our basic layout:
<div class="speech-bubble">Hi there!</div>
And the styles:
.speech-bubble {
    position: relative;
    background-color: #292929;
    width: 200px;
    height: 150px;
    line-height: 150px; /* vertically center */
    color: white;
    text-align: center;
}
Creating+a+Speech+Bubble
Now you need to place the arrow-triangle in the right place. Here's our color box:
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: red green blue yellow;
}
Speech-bubble++After
We leave only a quarter of the square:
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-top-color: red;
}
quarter+of+the+square
Now move below and fill:
.speech-bubble {
   /* … other styles */
   border-radius: 10px;
}
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
  border-top-color: #292929;
  top: 100%;
  left: 50%;
  margin-left: -15px; /* adjust for border width */
}
Speech-bubble
Examples of use:
/*
   Speech Bubbles
   Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION
   <div class="speech-bubble speech-bubble-top">Hi there</div>
*/

.speech-bubble {
  position: relative;
  background-color: #292929;
  width: 200px;
  height: 150px;
  line-height: 150px; /* vertically center */
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}

/* Position the Arrow */

.speech-bubble-top:after {
  border-bottom-color: #292929;

  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.speech-bubble-right:after {
  border-left-color: #292929;

  left: 100%;
  top: 50%;
  margin-top: -15px;
}

.speech-bubble-bottom:after {
  border-top-color: #292929;

  top: 100%;
  left: 50%;
  margin-left: -15px;
}

.speech-bubble-left:after {
  border-right-color: #292929;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}

Speech-bubble+up
Vertical alignment of text

minus the use of line-height in the vertical centering of text in limiting a single line. To solve this problem, you can use display: table for our Speech Bubble and display: table-cell to the text:
.speech-bubble {
 /* other styles */
  display: table;
}
.speech-bubble p {
  display: table-cell;
  vertical-align: middle;
}
Vertical+alignment+of+text
Another example of non-standard use of borders:
.biohazard {
  width: 0; height: 0;
  border: 60px solid;
  border-radius: 50%;
  border-top-color: black;
  border-bottom-color: black;
  border-left-color: yellow;
  border-right-color: yellow;
}
non-standard+use+of+borders


Total
Use of the border are not limited to the «1px solid black», with borders, you can create different shapes, with enough time to write a CSS-class and apply it to the set of elements on the page.

No comments:

Post a Comment