Design a Unique Portfolio with CSS3 Image Effects.
CSS has evolved into a diverse design medium over the last few years, allowing us to create a myriad of hip and elegant effects that were once limited to graphic design. When paired with jQuery, CSS3 can do some truly amazing stuff.
This tutorial will teach you how to take the awesome HTML5 Fluid Squares blueprint and transform it into a cool and responsive portfolio using some modern CSS tricks.
Here is a preview of the layout you will be creating.
STEP 1
Download fluid squares and unpack its contents into a uniquely named project folder. Launch your HTML editor and open the” index.html” and “screen.css,” which is located in the “css” folder.
Take a look at the header and footer of the index.html to gain an understanding of what you may need to add to your own website templates if you plan to integrate the portfolio into an existing layout. The essential pieces are:
This tag controls how the page will scale when viewed on different screen sizes and goes at the top of the HTML head.
This line pulls in the JavaScript plugin that allows your CSS3 media queries to function across all browser platforms.
Additionally, you will need jQuery included in your header or footer, and may already be using it on your website. For the purpose of this tutorial, I have added it just above the
tag, using the Google library.
STEP 2
Check out how the example DIVs are formatted. Pretty simple, right? Each one is placed inside the link tags and contains basic markup, text formatting and minimal use of classes.
At a maximum, four image columns will be displayed, which will shrink dynamically to three and then to two on mobile devices. Since we are building a portfolio layout, normally all we need to do is insert a DIV containing the images, but because we want to style our thumbnails using some interesting effects, we will be adding a specially styled span using Darcy Clarke’s background image hack. Add her code just above your document’s tag:
This code will detect your images and apply the image as a background of a span using the “image-srap” class to allow us to manipulate the image appearance with CSS.
STEP 3
Prepare your portfolio image thumbnails and place them into the “img” folder. For best results, crop them to 240×240 pixels.
Replace the contents of your document with your skeleton containers. Be careful not to remove the script in the document footer. For this demo, I am including 10 using the following:
Go ahead and update each “img” tag with the path to your images. We will come back to the links later on. All you need is the path and alt text and the CSS will handle the rest.
STEP 4
This is the fun part where we add some effects to our elements. The first style will be applied to the DIV. The second, “image-wrap,” is already defined for us by the JavaScript and is used to style the span.
Switch over to the” screen.css” document and find line 67. This is where you can begin editing. Add the DIV style first. I have called mine “lovely” but you can use any class name you like. This class is used primarily to style the text elements within the DIV:
.lovely{
color: #fff;
font-size: .9em;
text-align: center;
font-style: italic;
}
Now add two styles for the "image-wrap" class, one for the normal state and one for a hover.
.lovely .image-wrap {
-moz-transition: all 1s ease 0s;
border-radius: 30em 30em 30em 30em;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 5px rgba(0, 0, 0, 0.6) inset, 0 1px 0 rgba(0, 0, 0, 0.6) inset;
}
.lovely .image-wrap:hover {
border-radius: 60em 60em 60em 60em;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 20px #FFFFFF inset;
}
The "border-radius" property is what allows you to create a circle. To ensure that it is rendered properly in most browsers, add some fallback declarations to each class like so:
-moz-border-radius: 30em 30em 30em 30em;
-khtml-border-radius: 30em 30em 30em 30em;
-webkit-border-radius: 30em 30em 30em 30em;
To get the stylish shadow effect, we are using the box-shadow property with an “inset” value. We reverse the color to white with a “0.6” opacity for the hover to produce a pretty glow. If your portfolio background is something other than white, you can adjust the hover shadow color to match for a nice fading effect.
STEP 5
A portfolio is not complete without a short description of each work. Return to your HTML document and add a new DIV container below each image to hold your description text. To keep things semantic, give it a class of “description.” Wrap the text in a paragraph tag and give it a class of “description-text.”
Add the styles for these new classes to your stylesheet:
.description{
top:40%;
width: 100%;
display:none; /* hide it */
position:absolute;
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-khtml-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
background-color:black;
color:white;
opacity:0.6; /* transparency */
filter:alpha(opacity=60); /* IE transparency */
}
p.description-text{
padding:10px;
margin:0;
}
The absolute position allows you to place the description over the image with the “top” property. I am using percentages here to keep things scaling nicely. To get this element to only appear when the mouse hovers over the image element, you need to include another chunk of jQuery above your tag:
If you are using a class name for the main DIV other than “lovely,” you will need to change it in the above script.
STEP 6
Top off your portfolio by adding a lightbox or image-preview plugin. If you are already using one, you should only need to edit your link tags to include the correct class, URL syntax or “rel” value. You may also wish to edit or replace the default styles included in the Fluid Squares stylesheet to add your own fonts, background colors and so on. The extras that come with Fluid Squares such as the “apple touch” icons may be customized and added to your site if you don’t have one already.
CONCLUSION
As you’ve learned, you can do some pretty cool stuff with CSS3 and jQuery to manipulate how images and content boxes appear and behave for unique and interesting effects. Experiment with other styles to give your portfolio its own twist!
Author bio
Vail from DesignArticleWriters.com is a designer and tech blogger who enjoys writing everything and anything about design and tech. She love to recommend people who provide awesome stock photos to design community around the globe.