Image Post Designs

Feb 03, 2012 13:09

Account Status: All
Actions: Image Styling
Theme: Working in Flexible Squares but likely works with all.

Ever been to a journal where their images are all fancy with border or rounded corners. Let's show you how this works.

1. Let's say you want a border around your image.


The way we do this is simple. In your Custom CSS section you want to add the below coding to your Custom Stylesheet. After the body section is great.
img.special {
border: 10px solid #eeeeee;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
}

This is the coding you'd want in your post


Use this coding while the "class" function isn't working on LJ
i img {
border: 10px solid #eeeeee;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
}



2. But lets say you want it to just have rounded corners and no border.


Then we are going to want to change that coding to this.
img.special {
border: 0px solid #eeeeee;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
}

This is the coding you'd want in your post


Use this coding while the "class" function isn't working on LJ
i img {
border: 0px solid #eeeeee;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
}



Thank you to fueschgast at s2flexisquares for helping with this. Genius!

!lj-tips/tricks/features, help with: images, account: all

Previous post Next post
Up