{"id":1230,"date":"2013-08-31T18:36:28","date_gmt":"2013-08-31T18:36:28","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1230"},"modified":"2017-06-16T03:48:23","modified_gmt":"2017-06-16T03:48:23","slug":"how-to-use-box-shadow-property-in-css3-2","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2013\/08\/how-to-use-box-shadow-property-in-css3-2\/","title":{"rendered":"How to use box-shadow property in CSS3 ?"},"content":{"rendered":"<div class=\"container\">\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1228\" alt=\"Image0111\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/Image0111.jpg\" width=\"400\" height=\"300\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/Image0111.jpg 400w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/Image0111-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<ul>\n<li>We have a very simple html code here. There is one div and an image of 400 x 300 under that div.\n<pre lang=\"php\">\r\n<div class=\"container\">\r\n<img decoding=\"async\" alt=\"\" src=\"Image0111.jpg\" \/>\r\n<\/div>\r\n<\/pre>\n<\/li>\n<li>We will do some basic styling by mentioning its width, background colour and place it in a center by using margin property. I am going to opt for #efefef as a background colour.\n<pre lang=\"php\">body {\t\r\n\twidth:400px;\r\n\tbackground-color:#efefef;\r\n\tmargin:100px auto;\r\n     }<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1224\" alt=\"shadow-1\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-1.png\" width=\"493\" height=\"366\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-1.png 493w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-1-300x222.png 300w\" sizes=\"auto, (max-width: 493px) 100vw, 493px\" \/><\/li>\n<li>Our next step is to give styling to the class &#8220;container&#8221; which is the main div of the code. We will apply -webkit-box-shadow property for webkit supporting browsers, -moz-box-shadow for mozilla abd box shadow. I am using 2px for horizontal shadow(h-shadow), 3px for vertical shadow(v-shadow), 5px for blur distance and rgba colour value. Some more basic properties like margin and padding and background colour to white.Now as we can see that image is slightly bigger.\u00a0 To fix it up we will use max-width property.<br \/>\n<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1216\" alt=\"shadow-eg\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-eg.jpg\" width=\"408\" height=\"130\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-eg.jpg 408w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-eg-300x95.jpg 300w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/p>\n<pre lang=\"php\">.container {\r\n\twidth:400px;\r\n\t-webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.5);\r\n\t-moz-box-shadow: 3px 3px 5px rgba(0,0,0,.5);\r\n\tbox-shadow:3px 3px 5px rgba(0,0,0,.5);\r\n\tpadding: 20px;\r\n\tmargin:0 auto;\r\n\tbackground: white;}\r\n.container img {\t\r\n\tmax-width:100%;\r\n\tmax-height:100%;\r\n\tborder:1px solid #666;}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1225\" alt=\"shadow-2\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-2.png\" width=\"493\" height=\"396\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-2.png 493w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-2-300x240.png 300w\" sizes=\"auto, (max-width: 493px) 100vw, 493px\" \/><\/li>\n<li><\/li>\n<li>We can give variations by using inset property to give depth at the top and left side of the image.\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1217\" alt=\"shadow-eg1\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-eg1.jpg\" width=\"465\" height=\"130\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-eg1.jpg 465w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-eg1-300x83.jpg 300w\" sizes=\"auto, (max-width: 465px) 100vw, 465px\" \/><br \/>\n<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1226\" alt=\"shadow-3\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-3.png\" width=\"493\" height=\"387\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-3.png 493w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/08\/shadow-3-300x235.png 300w\" sizes=\"auto, (max-width: 493px) 100vw, 493px\" \/><\/p>\n<pre lang=\"php\">.container {\r\n\t-webkit-box-shadow:inset 2px 3px 5px rgba(0,0,0,.5);\r\n\t-moz-box-shadow:inset 2px 3px 5px rgba(0,0,0,.5);\r\n\tbox-shadow:inset 2px 3px 5px rgba(0,0,0,.5);\r\n\tpadding: 20px;\r\n\tmargin:0 auto;\r\n\tbackground: white;\r\n}<\/pre>\n<\/li>\n<li>Browser support: The box-shadow property is supported by many modern browsers including IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>We have a very simple html code here. There is one div and an image of 400 x 300 under that div. We will do some basic styling by mentioning its width, background colour and place it in a center by using margin property. I am going to opt for #efefef as a background colour. [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[46],"tags":[],"class_list":["post-1230","post","type-post","status-publish","format-standard","hentry","category-css3"],"_links":{"self":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/comments?post=1230"}],"version-history":[{"count":14,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1230\/revisions"}],"predecessor-version":[{"id":1261,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1230\/revisions\/1261"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}