CSS3 is rapidly gaining attention of all web designers around the globe.
Some of its features are really awesome like animation,
text-transition, box-shadow etc. In this article you can find ready to
use examples of CSS3 box-shadow property. You can save a lot of time by
not experiment with box-shadow. Just choose one of design and use it. I
really want to thank Abhimanyu Rana for helping us. Here I have a total
of 16 different flavors of this property.
SHADOW 1
1
2
3
| -webkit-box-shadow: 0 10px 6px -6px #777;-moz-box-shadow: 0 10px 6px -6px #777;box-shadow: 0 10px 6px -6px #777; |
SHADOW 2
1
2
3
| -webkit-box-shadow: 0 1px 2px #777;-moz-box-shadow: 0 2px 1px #777;box-shadow: 0 2px 1px #777; |
SHADOW 3
1
| box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); |
SHADOW 4
1
| box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3); |
SHADOW 5
1
| box-shadow: 0 0 1px rgba(34, 25, 25, 0.4); |
SHADOW 6
1
| box-shadow: 0 1px #FFFFFF inset, 0 1px 3px rgba(34, 25, 25, 0.4); |
SHADOW 7
1
| box-shadow: 0 4px 2px -3px; |
SHADOW 8
1
2
| border-bottom: 1px solid rgba(0, 0, 0, 0.2);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); |
SHADOW 9
1
2
| border-bottom: 0 none;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46); |
SHADOW 10
1
2
3
| -webkit-box-shadow: 0 7px 4px #777;-moz-box-shadow: 0 7px 4px #777;box-shadow: 0 7px 4px #777; |
SHADOW 11
1
2
3
| -webkit-box-shadow: 0 3px 2px #777;-moz-box-shadow: 0 3px 2px #777;box-shadow: 0 3px 2px #777; |
SHADOW 12
1
| box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3; |
SHADOW 13
1
2
3
| -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.5);box-shadow:0 0 10px rgba(0, 0, 0, 0.5); |
SHADOW 14
1
2
3
| -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; |
SHADOW 15
1
2
3
4
5
6
7
8
9
10
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;border-style: none solid solid none;border-width: medium 1px 1px medium;background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);-moz-border-bottom-colors: none;-moz-border-image: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none; |
SHADOW 16
1
2
| box-shadow: 0 1px 1px 0 #C7C7C7 inset;background: none repeat scroll 0 0 #E9E9E9; |
I hope you enjoyed reading this article. Thanks for reading.
0 komentar:
Posting Komentar