My imagination are strong enough for me to hold on.
Hello 2017

#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: