Original Link: http://www.cnblogs.com/asher/archive/2013/04/13/3017768.html
15 basic direct-use CSS3 styles
This article lists some basic CSS3 styles that you can put at your fingertips and modify to your own style whenever you need it.To make our CSS3 styles reusable, I write them as a class, collect and categorize them into links, inputs, texts, and so on.
rgba() is used in many places in this paper to assign color. The first three values in rgba are normal rgb values and the last one is transparency alpha values.
click here Check out a good css3 manual!Let's start with our topic.
1. Orientation Box Shadow
Top
Right
Bottom
Left
.drop-shadow.top {
box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.right {
box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.bottom {
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.left {
box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4);
}
2. Emphasize box shadows, very good results
Dark
Light
Inset
Border
.emphasize-dark {
box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}
.emphasize-light {
box-shadow: 0 0 0 10px rgba(255,255,255,.25);
}
.emphasize-inset {
box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);
}
.emphasize-border {
box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);
}
3. Box shadows of relief effect
Light
Heavy
.embossed-light {
border: 1px solid rgba(0,0,0,0.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.embossed-heavy {
border: 1px solid rgba(0,0,0,0.1);
box-shadow:
inset 0 2px 3px rgba(255,255,255,0.3),
inset 0 -2px 3px rgba(0,0,0,0.3),
0 1px 1px rgba(255,255,255,0.9);
}
4.CSS3 Gradient Effect
Light Linear
Dark Linear
Light Radial
Dark Radial
.gradient-light-linear {
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}
.gradient-dark-linear {
background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
}
.gradient-light-radial {
background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
}
.gradient-dark-radial {
background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
}
5. Round corners
Light
Heavy
Full
Barrel
.light-rounded {
border-radius: 3px;
}
.heavy-rounded {
border-radius: 8px;
}
.full-rounded {
border-radius: 50%;
}
.barrel-rounded {
border-radius: 20px/60px;
}
6. Hyperlinks with embedded backgrounds
This is some dummy text to show an Embedded Background Link.
.inline-link-1 {
display: inline-block;
margin: 0 0.2em;
padding: 3px;
background: #97CAF2;
border-radius: 2px;
transition: all 0.3s ease-out;
/* Font styles */
text-decoration: none;
font-weight: bold;
color: white;
}
.inline-link-1:hover { background: #53A7EA; }
.inline-link-1:active { background: #C4E1F8; }
.inline-link-1:visited { background: #F2BF97; }
7. Underlined hyperlinks
This is some dummy text to show an Underline Links.
.inline-link-2 {
display: inline-block;
border-bottom: 1px dashed rgba(0,0,0,0.4);
/* Font styles */
text-decoration: none;
color: #777;
}
.inline-link-2:hover { border-bottom-style: dotted; }
.inline-link-2:active { border-bottom-style: solid; }
.inline-link-2:visited { border-bottom: 1px solid #97CAF2; }
8. Hyperlinks with triangular indicators
This is some dummy text to show an Triangular Indicator Link.
.inline-link-3 {
display: inline-block;
position: relative;
padding-left: 6px;
/* Font styles */
text-decoration: none;
color: #6AB3EC;
text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}
.inline-link-3:hover {
color: #3C9CE7;
}
.inline-link-3:before {
content: "\25BA";
font-size: 80%;
display: inline-block;
padding-right: 3px;
pointer-events: none;
}
.inline-link-3:hover:before {
color: #F2BF97;
}
9. Shadow style hyperlinks
.metro {
display: inline-block;
padding: 10px;
margin: 10px;
background: #08C;
/* Font styles */
color: white;
font-weight: bold;
text-decoration: none;
}
.metro:hover { background: #0AF; }
.metro.three-d {
position: relative;
box-shadow:
1px 1px #53A7EA,
2px 2px #53A7EA,
3px 3px #53A7EA;
transition: all 0.1s ease-in;
}
.metro.three-d:active {
box-shadow: none;
top: 3px;
left: 3px;
}
10. Bordered hyperlinks
.bordered-link {
display: inline-block;
padding: 8px;
border: 3px solid #FCB326;
border-radius: 6px;
box-shadow:
0 2px 1px rgba(0, 0, 0, 0.2),
inset 0 2px 1px rgba(0, 0, 0, 0.2);
/* Font styles */
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
color: #222;
}
.bordered-link:hover { border-color: #FDD68B; }
.bordered-link:active { border-color: #FEE8BD; }
11.Some button styles
.modern {
display: inline-block;
margin: 10px;
padding: 8px 15px;
background: #B8ED01;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
transition: all 0.3s ease-out;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2);
/* Font styles */
text-decoration: none;
text-shadow: 0 1px rgba(255,255,255,0.7);
}
.modern:hover { background: #C7FE0A; }
.embossed-link {
box-shadow:
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.17),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2),
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.15),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link:active {
box-shadow:
inset 0 -2px 1px rgba(255,255,255,0.2),
inset 0 3px 2px rgba(0,0,0,0.12);
}
.socle {
position: relative;
z-index: 2;
}
.socle:after {
content: "";
z-index: -1;
position: absolute;
border-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.1),
inset 0 -1px 0 rgba(255,255,255,0.7);
top: -6px; bottom: -6px;
right: -6px; left: -6px;
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}
12. Simple input box style
.simple-input {
display: block;
padding: 5px;
border: 4px solid #F1B720;
border-radius: 5px;
color: #333;
transition: all 0.3s ease-out;
}
.simple-input:hover { border-radius: 8px; }
.simple-input:focus {
outline: none;
border-radius: 8px;
border-color: #EBD292;
}
13.Mac-style input boxes
.mac {
display: block;
border: none;
border-radius: 20px;
padding: 5px 8px;
color: #333;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1);
}
.mac:focus {
outline: none;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1),
0 0 5px 1px #51CBEE;
}
14. Input box with depth and gradient effect
.depth {
display: block;
border: 1px solid silver;
background: linear-gradient(#eee, #fff);
transition: all 0.3s ease-out;
padding: 5px;
color: #555;
}
.depth:focus {
outline: none;
background-position: 0 -1.7em;
}
15. Input box with only one line
.line {
display: block;
border: none;
color: #333;
background: transparent;
border-bottom: 1px dotted black;
padding: 5px 2px 0 2px;
}
.line:focus {
outline: none;
border-color: #51CBEE;
}The original text is from: http://www.cnblogs.com/cgtianyi/archive/2013/04/10/3011502.html
Reprinted at: https://www.cnblogs.com/asher/archive/2013/04/13/3017768.html