10 Cool CSS Image Effects

This Article outlines 10 excellent image effects for your website that can all be easily achieved using just plain old HTML and CSS. The image above shows just 3 of the effects that can be created, others included the Polaroid image effect, creating circular or elliptical images and even stacking multiple image on top of each other. The effects are listed in order of difficulty (in my opinion), so perhaps start with the first one and progress from there.

Image Rotation:

The HTML

<div class="rotate"><img src="images/picture.png" /></div>

The CSS

div.rotate  
{
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}

Border With Drop Shadow:

The HTML

<div class="shadow"><img src="images/picture.png" /></div>

The CSS

div.shadow 
{
    -moz-box-shadow: 10px 10px 5px #888888;
    -webkit-box-shadow: 10px 10px 5px #888888;
    box-shadow: 10px 10px 5px #888888;
    border:15px solid #ffffcc;
}

Layered / Stacked Images:

The HTML

<div class="box1"><img src="images/picture1.png" /></div><div class="box2"><img src="images/picture2.png" /></div><div class="box2"><img src="images/picture2.png" /></div>

The CSS

div.box1
{
z-index:1;
position:relative;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg); 
-o-transform: rotate(-3deg); 
transform: rotate(-3deg);
}

div.box2
{
z-index:2;
position:relative;
left:-150px;
}

div.box3
{
z-index:3;
position:relative;
left:-350px;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg); 
-o-transform: rotate(3deg); 
transform: rotate(3deg);
}

Circular Images Effect:

In the examples above the image is 200px high and wide with a border-radius of 100px. The key to creating circles is for the border radius to be half of the height and width.

CSS

img{border-radius:100px; height:200px; width:200px;}

Elliptical Images Effect:

In the examples above each box is 200px high and 300px wide with a border-radius of 50%. The key to creating ellipses is for the border radius to be 50%.

CSS

img{border-radius:50%; height:200px; width:300px;}

Polaroid Image Effect:

Waterfall Photo

The HTML

<div class="polaroid"><p>Waterfall Photo</p><img src="images/waterfall.png" /></div>

The CSS

.polaroid 
{ 
position: relative; text-align: center; 
} 

.polaroid img 
{ 
border: 10px solid #fff; 
border-bottom: 45px solid #fff; 
-webkit-box-shadow: 0px 0px 10px #777; 
-moz-box-shadow: 0px 0px 10px #777; 
box-shadow: 0px 0px 10px #777;
-webkit-transform: rotate (3deg);
-moz-transform: rotate (3deg);
transform: rotate (3deg);
} 

.polaroid p 
{ 
position: absolute; 
text-align: center; 
width: 100%; 
bottom: 0px; 
font: 400 18px/1 'Kaushan Script', cursive; 
color: #888;
z-index:99; }

Description On Hover:

⇧ Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel commodo turpis. Cras et congue justo. Nullam rhoncus commodo tellus, eget fringilla lacus pellentesque et.

The HTML

<div class="image"><a href="#"><img src="images/picture.png" /></a><div class="image-desc"><h3>⇧ Description</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel commodo turpis. Cras et congue justo. Nullam rhoncus commodo tellus, eget fringilla lacus pellentesque et.</p></div></div>

The CSS

.image
{
overflow:hidden; 
width:auto;  
height:240px; /*should match your images height*/
}

.image-desc
{ 
text-align:justify;
position:relative; 
top:-40px; /*allows the first part of the description to be visible*/ 
overflow: hidden; 
font-size:14px;
padding:10px; 
height: 200px; 
color: #ffffff; 
background-color: #000066; 
opacity: 0.8;}

.image-desc:hover
{ 
position: relative; 
top:-187px; 
opacity: 0.8;
}

Map Pin Effect:

The HTML

<div class="pin"><img src="images/pin.png"></div><div class="photo"><img border="0" src="images/waterfall.png" /></div>

The CSS

div.rotate  
{
.pin
{
z-index:2; 
position:relative;
top:18px; 
left:0px;
}

.photo
{
z-index:1; 
position:relative;
}

}

Paper Clip Effect:

The HTML

<div class="paper-clip"><img src="images/paper-clip.png"></div><div class="photo"><img border="0" src="images/waterfall.png" /></div>

The CSS

 
{
.paper-clip
{
z-index:2; 
position:relative;
top:18px; 
left:5px;
}

.photo
{
z-index:1; 
position:relative;
}

}

Masking Tape Effect:

The HTML

<div class="tape"><img src="images/masking-tape.png"></div><div class="photo"><img border="0" src="images/waterfall.png" /></div>

The CSS

 
{
.tape
{
z-index:2; 
position:relative;
top:18px; 
left:5px;
}

.photo
{
z-index:1; 
position:relative;
}

}

CSS3 Media Queries For A Responsive Website Template

Common device breakpoints

At this point you have probably already heard about responsive web design and how every website needs to compatible to work well and look good across multiple devices. If so, you heard right!

With a @media query, you can write different CSS code for different screen sizes or for different devices, which is very useful when making web pages with responsive design. You can also have different layout when a user resizes a browser window up or down to a certain width, or height.

Responsive web design is vital for any web project and CSS media queries are vital for a successful responsive website. So to make things a little easier for you here are all the main CSS media queries need for a responsive website.

CSS Media Queries For a Responsive Website

/*Responsive Styles*/


/* Smartphones (portrait) ---------------- */
@media only screen 
and (max-width : 320px)
{
/* Add Your CSS Styling Here */
}

/* Smartphones (landscape) ---------------- */
@media only screen 
and (min-width : 321px)
and (max-width : 767px)
{
/* Add Your CSS Styling Here */
}

/* Tablets (portrait) -------------------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
{
/* Add Your CSS Styling Here */
}


/* Tablets (landscape) ------------------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
{   
/* Add Your CSS Styling Here */
}

/* Old Desktops and laptops ------------------ */
@media only screen 
and (min-width : 1025px) 
{
/* Add Your CSS Styling Here */
}

/* Desktops ------------------ */
@media only screen 
and (min-width : 1201px) 
{
/* Add Your CSS Styling Here */
}

By inserting the relevant CSS code in each section you can have elements of your web page responding to the screen size or device orientation of your user.

More web tips,templates and tutorials coming soon as part of our "month of web" at OnlineDesignTeacher. Follow us on Twitter and Facebook to be sure you don't miss out.

3 Uses For CSS3 Border-Radius

As part of the month of web at OnlineDesignTeacher we are going to look at 3 good uses for the CSS border-radius tag. First off the obvious one....

Border-Radius For Rounded Edges

In the examples above each box is 200px high and wide. The first box has a border-radius of 10px, the second has 15px and the third 20px.

#box1{background:#660000; border-radius:5px; height:100px; width:100px}

#box2{background:#660000; border-radius:5px; height:100px; width:100px}

#box2{background:#660000; border-radius:5px; height:100px; width:100px}

So that's the basic one, now for the more interesting effects...

Border-Radius Creates Circles

In the examples above each box is 200px high and wide with a border-radius of 100px. The key to creating circles is for the border radius to be half of the height and width.

#box1{background:#660000; border-radius:100px;height:200px; width:200px;}

img{border-radius:100px; height:200px; width:200px;}

Border-Radius Creates Ellipses

In the examples above each box is 200px high and 300px wide with a border-radius of 50%. The key to creating ellipses is for the border radius to be 50%.

img{border-radius:50%; height:200px; width:300px;}

More web tips,templates and tutorials coming soon as part of our "month of web" at OnlineDesignTeacher. Follow us on Twitter and Facebook to be sure you don't miss out.

HTML Symbol Codes

A Selection Of Some HTML Symbols

Below is an extensive list of the character codes for use in your HTML. Some characters are reserved in HTML. Reserved characters in HTML must be replaced with character entities, for example if you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML. Characters, not present on your keyboard, can also be replaced by entities.

Find the symbol or charcter code you need in the table below

Description	Entity Name	Hex Code	Symbol
Latin small f with hook = function	ƒ	ƒ	ƒ
Greek capital letter alpha	Α	Α	Α
Greek capital letter beta	Β	Β	Β
Greek capital letter gamma	Γ	Γ	Γ
Greek capital letter delta	Δ	Δ	Δ
Greek capital letter epsilon	Ε	Ε	Ε
Greek capital letter zeta	Ζ	Ζ	Ζ
Greek capital letter eta	Η	Η	Η
Greek capital letter theta	Θ	Θ	Θ
Greek capital letter iota	Ι	Ι	Ι
Greek capital letter kappa	Κ	Κ	Κ
Greek capital letter lambda	Λ	Λ	Λ
Greek capital letter mu	Μ	Μ	Μ
Greek capital letter nu	Ν	Ν	Ν
Greek capital letter xi	Ξ	Ξ	Ξ
Greek capital letter omicron	Ο	Ο	Ο
Greek capital letter pi	Π	Π	Π
Greek capital letter rho	Ρ	Ρ	Ρ
Greek capital letter sigma	Σ	Σ	Σ
Greek capital letter tau	Τ	Τ	Τ
Greek capital letter upsilon	Υ	Υ	Υ
Greek capital letter phi	Φ	Φ	Φ
Greek capital letter chi	Χ	Χ	Χ
Greek capital letter psi	Ψ	Ψ	Ψ
Greek capital letter omega	Ω	Ω	Ω
Greek small letter alpha	α	α	α
Greek small letter beta	β	β	β
Greek small letter gamma	γ	γ	γ
Greek small letter delta	δ	δ	δ
Greek small letter epsilon	ε	ε	ε
Greek small letter zeta	ζ	ζ	ζ
Greek small letter eta	η	η	η
Greek small letter theta	θ	θ	θ
Greek small letter iota	ι	ι	ι
Greek small letter kappa	κ	κ	κ
Greek small letter lambda	λ	λ	λ
Greek small letter mu	μ	μ	μ
Greek small letter nu	ν	ν	ν
Greek small letter xi	ξ	ξ	ξ
Greek small letter omicron	ο	ο	ο
Greek small letter pi	π	π	π
Greek small letter rho	ρ	ρ	ρ
Greek small letter final sigma	ς	ς	ς
Greek small letter sigma	σ	σ	σ
Greek small letter tau	τ	τ	τ
Greek small letter upsilon	υ	υ	υ
Greek small letter phi	φ	φ	φ
Greek small letter chi	χ	χ	χ
Greek small letter psi	ψ	ψ	ψ
Greek small letter omega	ω	ω	ω
Greek small letter theta symbol	ϑ	ϑ	ϑ
Greek upsilon with hook symbol	ϒ	ϒ	ϒ
Greek pi symbol	ϖ	ϖ	ϖ
bullet = black small circle	•	•	•
horizontal ellipsis = three dot leader	…	…	…
prime = minutes = feet	′	′	′
double prime = seconds = inches	″	″	″
overline = spacing overscore	‾	‾	‾
fraction slash	⁄	⁄	⁄
blackletter capital I = imaginary part	ℑ	ℑ	ℑ
blackletter capital R = real part symbol	ℜ	ℜ	ℜ
trade mark sign	™	™	™
alef symbol = first transfinite cardinal	ℵ	ℵ	ℵ
leftwards arrow	←	←	←
upwards arrow	↑	↑	↑
rightwards arrow	→	→	→
downwards arrow	↓	↓	↓
left right arrow	↔	↔	↔
downwards arrow with corner leftwards = carriage return	↵	↵	↵
leftwards double arrow	⇐	⇐	⇐
upwards double arrow	⇑	⇑	⇑
rightwards double arrow	⇒	⇒	⇒
downwards double arrow	⇓	⇓	⇓
left right double arrow	⇔	⇔	⇔
for all	∀	∀	∀
partial differential	∂	∂	∂
there exists	∃	∃	∃
empty set = null set = diameter	∅	∅	∅
nabla = backward difference	∇	∇	∇
element of	∈	∈	∈
not an element of	∉	∉	∉
contains as member	∋	∋	∋
n-ary product = product sign	∏	∏	∏
n-ary sumation	∑	∑	∑
minus sign	−	−	−
asterisk operator	∗	∗	∗
square root = radical sign	√	√	√
proportional to	∝	∝	∝
infinity	∞	∞	∞
angle	∠	∠	∠
logical and = wedge	∧	∧	∧
logical or = vee	∨	∨	∨
intersection = cap	∩	∩	∩
union = cup	∪	∪	∪
integral	∫	∫	∫
therefore	∴	∴	∴
tilde operator = varies with = similar to	∼	∼	∼
approximately equal to	≅	≅	≅
almost equal to = asymptotic to	≈	≈	≈
not equal to	≠	≠	≠
identical to	≡	≡	≡
less-than or equal to	≤	≤	≤
greater-than or equal to	≥	≥	≥
subset of	⊂	⊂	⊂
superset of	⊃	⊃	⊃
not a subset of	⊄	⊄	⊄
subset of or equal to	⊆	⊆	⊆
superset of or equal to	⊇	⊇	⊇
circled plus = direct sum	⊕	⊕	⊕
circled times = vector product	⊗	⊗	⊗
up tack = orthogonal to = perpendicular	⊥	⊥	⊥
dot operator	⋅	⋅	⋅
left ceiling = APL upstile	⌈	⌈	⌈
right ceiling	⌉	⌉	⌉
left floor = APL downstile	⌊	⌊	⌊
right floor	⌋	⌋	⌋
left-pointing angle bracket = bra	⟨	〈	〈
right-pointing angle bracket = ket	⟩	〉	〉
lozenge	◊	◊	◊
black spade suit	♠	♠	♠
black club suit = shamrock	♣	♣	♣
black heart suit = valentine	♥	♥	♥
black diamond suit	♦	♦	♦

More web tips,templates and tutorials coming soon as part of our "month of web" at OnlineDesignTeacher. Follow us on Twitter and Facebook to be sure you don't miss out.