Rounded Corners and Shadows for Images using CSS alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... Rounded Corners and Shadows for Images using CSS 2 comments Here are some unique border styles that you can apply to blogger images by using theborder-radiusproperty and defining either all four corners simultaneously or applying the rounded border only to some of them. One of the advantages of CSS3 is that we can apply rounded borders without complicating things too much and one of the options would be to use these edges or borders to images in the blog posts, to which we can also add some hover effects such as shading and rounded borders accompanied by transitions. Note: if you need more info about how to add rounded corners on images, follow these links: - CSS Basics. How to Apply Rounded Corners On Images #1 - CSS Basics. How to Apply Rounded Corners On Images #2 Below are a few examples of these borders and how the images behave when you hover over them. If you want to use one of these styles, just copy the code below the image, then go toTemplate, click on theEdit HTMLbutton and paste that code before]]>(CTRL + F to find it) .post-body img{ border:0; padding:0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .post-body img:hover{ box-shadow: 0px 0px 15px #000;/* Shadow */ border-radius: 50%;/* Rounded border */ -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } .post-body img{ background:#FFF;/* background color around the image */ padding:15px;/* space between border and image */ -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .post-body img:hover{ box-shadow: 0px 0px 15px #000;/* Shadow */ border-radius: 0% 50%;/* Rounded border */ -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } .post-body img{ background:#FFF;/* the background color around the image */ padding:15px;/* The Space Between Border and Image */ border-radius: 50% 0;/* Rounded border */ box-shadow: 0px 0px 15px #000;/* Shadow */ -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .post-body img:hover{ border-radius:0;/* This removes the border roundness (value 0) */ -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } .post-body img{ box-shadow: 0px 0px 15px #000;/* Shadow */ border-radius: 50%;/* Rounded border */ border:0; padding:0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .post-body img:hover{ box-shadow: 0;/* With this we remove the shadow (value 0) */ border-radius: 0;/* This removes the border roundness (value 0) */ -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } .post-body img{ border-radius: 45% / 20%;/* Rounded border */ box-shadow: 0px 0px 15px #000;/* Shadow */ padding:0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .post-body img:hover{ border-radius: 0;/* This removes the roundness of border (value 0) */ -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; }So these effects will apply to all images uploaded to your Blogger posts. But if you want to apply them only on certain pictures then change.post-body imgwith.roundedand.post-body img:hoverwith.rounded:hover Then add theroundedclass selector in the image's code: These are just some examples, however, you can modify them anytime by adding or deleting more CSS styles, it depends on everybody's tastes or needs. But as you have seen, we can make the images look way more attractive and this has been done only with CSS ;) Like 5 Random Posts Add floating social media sharing buttons below Blogger post titles20/02/2014 - 1 Comments How to do natural SEO on Blogger22/10/2013 - 3 Comments Simple Recent Posts Widget for Blogger/Blogspot28/04/2012 - 156 Comments Related Posts: CSS3 Transition Property Basics How to Increase Thumbnail Resoluti... How to Use Cookies in Javascript Create a CSS3 Image Hover Effect wi... Before/After Photo Effect with jQue... 2 comments: Anonymous 9/18/2013 Thanks for the good tip ! Reply PC - návod 9/21/2013 Excellent instructions. That's exactly what I needed. Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,786 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 5 Like