New in Crafts

Adventures in Fabric Dyeing – Purple Onesies

This experiment was a first for me - I have never dyed fabric before. Except for the occasional … [Read More...]

New in Recipes

Double Chocolate Zucchini & Walnut Muffins

My new favorite muffin light, moist and delicious - you'd never know you were eating your fruit and … [Read More...]

New in Home & Garden

DIY Backyard Compost “Station”

For any stellar garden, you need to produce some compost. Compost is like top soil. It is decayed, … [Read More...]

I'm Kristy!
A graphic & web designer in sunny Florida. Simply put, I LOVE ALL THINGS CREATIVE. My 3Peppers are Crafts, Cooking, and Color... What are yours?

3 Tricks for Styling Images with CSS for your Blog

3 Tricks for styling images with css for your blog from 3Peppers #blogtips #blogging #cssImages are VERY important to your blog. There’s no denying this.

You know great picture help you get shared, and really attract attention to your blog. For a lot of people, it’s just snap, upload, share… But there are also a few cool tricks you can do with css to add a little extra “style” to your images, like making them round, or giving them a shadow or transparency. In this post I’ll show you just how to do so with some simple CSS code.

Images are styled by the “class” you give them, and then how your CSS defines that class. Sometimes you also have to put the image in a “div” (a division box on your site) and style the “div” with a class to get the effect you are looking for.

 

Trick #1 – Circle images (without an image editor)

A lot of people use their image editor (photoshop, ect.) to make a round image with a transparent background, which is then displayed on your blog. This can actually be done in CSS, by defining the div and setting the image as the background of the div. Here’s an example:

HTML:

<div class="circular"><img src="images/example1.jpg" alt="example image" /></div>

CSS:

.circular {
width:300px;
height:300px;
border-radius:150px;
-webkit-border-radius:150px;
-moz-border-radius:150px;
background:url(http://3peppers-recipes.com/wp-content/uploads/2014/06/example1.jpg) no-repeat;
}
 

Trick #2 – Add a shadow

You can also add a shadow to your images with CSS. Here’s a shadow on the circular image above.

 

HTML:

<div class="circularshadow"><img src="images/example1.jpg" alt="example image" /></div>

CSS:

.circular {
width:300px;
height:300px;
border-radius:150px;
-webkit-border-radius:150px;
-moz-border-radius:150px;
background:url(http://3peppers-recipes.com/wp-content/uploads/2014/06/example1.jpg) no-repeat;
-webkit-box-shadow: 2px 2px 2px 2px #333333;
box-shadow: 2px 2px 2px 2px #333333;
}
 

Trick #3 – Transparency

With transparency, you can make the image transparent or you can put a transparent box over an image.

Here’s how you make the image transparent.

HTML:

<div class="circulartransparent"><img src="images/example1.jpg" alt="example image" /></div>

CSS:

.circulartransparent {
width:300px;
height:300px;
border-radius:150px;
-webkit-border-radius:150px;
-moz-border-radius:150px;
background:url(http://3peppers-recipes.com/wp-content/uploads/2014/06/example1.jpg) no-repeat;
opacity: 0.5;
filter: alpha(opacity=0.5);
}

I hope these tricks are helpful for your blog design, CSS is a very powerful tool to understand. I’m happy to answer any questions or help you figure out CSS, just ask!

kristy-signature

About Kristy

Hi! I'm Kristy! I'm a graphic & web designer working from home in sunny Florida. Simply put, I LOVE ALL THINGS CREATIVE. 3Peppers is my place to share my creations with you... My three peppers are crafts, cooking and color, what are yours?

Comments

  1. Great tips…pinned and stumbled!

  2. AshleyMcElheny says:

    Thanks for the tip!! I have not ventured into the HTML or CSS world yet but I think I’m going to give this one a try!
    Pinned!

  3. Excellent tips! I’ve been looking for a way to make the images circular! Thanks! I found your blog through the Mondays Block Party on Making the World Cuter.

  4. What great tips, thanks for sharing! I don’t know a whole lot about html and css, but it’s fun to learn new stuff about it and find new tricks to try!