#Tutorial : Box shadow as image frame
Wednesday, 16 December 2015 @ 04:10
These box shadow also can use as image frame
Here is the code
Colour - Image Url(http://data.whicdn.com/images/212953422/large.jpg)
Colour - Image Size(150)
Colour - Border Radius(100)
(Only for 1,2,4)
Colour - Box Shadow colour
Dreamer Advice - Border radius maximum 100, it will show in a round shape, minimum 0, it will show in a square shape if image size is 150,the radius depends on image size.
1.<img style="opacity: 0.75; width: 150px; border-radius: 100px; padding: 5px;padding:5px;box-shadow:0px 0px 5px #ddd;"src="http://data.whicdn.com/images/212953422/large.jpg">
2.<img style="opacity: 0.75; width: 150px; border-radius: 100 x;padding: 5px;padding:5px;box-shadow: 0 0 5px 5px #999;"src="http://data.whicdn.com/images/212953422/large.jpg">
3.<img style="opacity: 0.75; width: 150px; border-radius: 100 x;padding: 5px;padding:5px;box-shadow: rgba(0,0,0,.05) 4px 4px"src="http://data.whicdn.com/images/212953422/large.jpg">
4.<img style="opacity: 0.75; width: 150px; border-radius: 100 x;padding: 5px;padding:5px;box-shadow: 1px 1px 2px #999;"src="http://data.whicdn.com/images/212953422/large.jpg">
5.<img style="opacity: 0.75; width: 150px; border-radius: 100 x;padding: 5px;padding:5px;box shadow:0px 0px 6px-1pxrgba(0,0,0,0.45);"src="http://data.whicdn.com/images/212953422/large.jpg">
Mission Complete!!
Labels: tutorial