How To Set Box Shadow In Css

A quick tutorial on how to remove the shadows and borders that are found on some of the templates by Blogger. I am not a huge fan of shadows, I much prefer flat blueprint that is becoming pop.

The shadow consequence can be great when used sparely, only on Blogger templates it can seem a niggling overdone. This postal service will bear witness y'all how to remove the shadow from your blog posts, images and headers. Promise you lot find information technology useful.

Remove box shadows and borders from Blogger elements

The code for shadows is in your CSS Secton. To access that go to Template > Edit HTML. This shows your template code. The CSS is in between <b:skin> and ]]><b:skin>. Not sure how to notice that? Check out this mail service for assist.

If there is something with a shadow or border on your weblog that you wish to get rid of, look for the element in the CSS section of your template. Observe box-shadow or edge property and change it the value to 0 or none.

writing css - selector, property and value

Remove box shadows from Blogger

Notice all the elements on your blog that accept a box-shadow. It may await something like the following

          selector {   -moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .xv);   -goog-ms-box-shadow: 0 0 10px #333333;   box-shadow: 0 0 40px rgba(0, 0, 0, .15); }

The values may wait different if your weblog template uses the Template Designer Variables, if so it will wait something similar this

          selector {   -moz-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);   -webkit-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);   -goog-ms-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);   box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2); }

You'll want to carefully edit the values in both instances to remove the shadow by replacing the declarions inside the brackets with the post-obit

                      /* remove shadows by xomisse */ -moz-box-shadow: none; -goog-ms-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;

or remove the declarations birthday which is usually a better choice.

Remove text shadows on Blogger

Again get to Template > Edit HTML and find your CSS section. Look for text-shadow and remove the declaration or alter the value to nill.

For instance to remove the text shadow from your blog championship in the header, find .Header h1 and change it to the post-obit

          .Header h1 { /* remove borders by xomisse */ text-shadow:none; }

Remove shadows from blog images

In Template > Edit HTML, detect the following

          .post-torso img, .mail service-trunk .tr-caption-container, .Contour img, .Epitome img, .BlogList .item-thumbnail img

and change the values so it looks like

          .post-body img, .post-body .tr-caption-container, .Profile img, .Prototype img, .BlogList .item-thumbnail img { /* remove shadows by xomisse */ -moz-box-shadow: none ; -goog-ms-box-shadow: none; -webkit-box-shadow:none; box-shadow:none; }

Remove borders from weblog images

The very same as shown to a higher place, change the value to none or remove the declarations.

          .post-trunk img, .post-body .tr-caption-container, .Profile img, .Paradigm img, .BlogList .item-thumbnail img { /* remove borders by xomisse */ edge: 0px; }