BlogmyQuery – BMQ

As we have undoubtedly heard our entire lives, a picture speaks a thousand words. And while that may be true of most, there are those who seek to tell a bit of a story with their works. Editorial photography, and perhaps some would say to a lesser degree fashion photography, is an area where a lot of effort goes into creating a story out of the piece. Through the costuming and composition, these shots come to life and their stories are told to the masses.

Below we have gathered a collection of fashion and editorial photography from some wonderfully talented shutterbug storytellers. We hope that you will enjoy this inspiring showcase of images and the tales they hold that are waiting to be told. Enjoy!

The Showcase

Black (edit1) by Roberto Zambelli

Buried in the Hollow by EmilySoto

GiFW editorial 8 by jaysu

Urbana magazine editorial by andreshernandez

LUSH Head Games Editorial II by larafairie

Claudia editorial by SophieRata

Black human… by almablanca01

Birds (edit1) by Roberto Zambelli

FASHIONERD 3 by ArtRats

Eva by AD-013

the flower keeper by Julietsound

Paper doll by MoritzMaibaum

-
Alpha by Abaddon-Maiden

Ambar Silhouette…II by almablanca01

Born to die III by BringMeMyTexasTea

Brighton Bath (edit3) by Roberto Zambelli

Superstar by LIZZYBPHOTOGRAPHY

Floral by lucbecks

Buried in the Hollow by EmilySoto

Craze 1 by ilaschaffer

Bewildered by badlydrawndoll

Editorial I by aninels

House Lana piano (edit3) by Roberto Zambelli

Untitled 2 by TheMystori

-
Paige by Staceythestrange

Danielle Editorial III by larafairie

Ambar Silhouette…VII by almablanca01

GIZEMLI 4 by ArtRats

Steampunk Couture by MoritzMaibaum

irrational bird_7 by Julietsound

BLACK SEDUCTION BEAUTY EDITORIAL4 by Aarehir

Craze 2 by ilaschaffer

Bathroom H+L (edit3) by Roberto Zambelli

Katy by lucbecks

Juliane II by LIZZYBPHOTOGRAPHY

(rb)

Creating an illustration of a sparkling disco ball might seem very complicated, and with good reason. In this new Adobe Illustrator tutorial we will try make it simple. We will be creating a really nice, shiny disco ball using only AI and our good taste in color selection. Overall, the coloring will be a real challenge. So get ready to create a vector that will have you dancing in your chair.

This is what we will be creating.

Creating the Basic Shape of the Disco Ball

In this part of tutorial we will create the basic shape of the ball with small rectangles. Grab the Ellipse Tool (L) from the Tool Panel and just click on the Artboard. It will bring up the Ellipse Options box where we can set the dimension of the circle. Let’s set it to 200 x 200.

Now, grab the Rectangle Tool (M) from the Tool Panel and click somewhere on the Artboard. It will bring up the Rectangle Options box. We will set the width to 400 pixels and the height to 200 pixels.

Now we have to divide our rectangle into small squares.  To do that, under Object click Rasterize. Leave everything at its default and hit the OK button.

Select Object again and then Create Object Mosaic.

Set the Tile Spacing to 1 and the Number of Tiles to 60 and 30.

This way we have created many small squares that we will apply to the Disco Ball later.

We have to make a small adjustment to the group of small squares. In the Layer Panel make sure to remove the last rectangle on the list. This way we’ll have only small squares.

Grab the group of the small squares and drag it to the Symbol Panel. Make sure to set the Type to Graphic and hit the OK button.

Now when we have the symbol of the squares we can remove it from the Artboard.

Now we have to prepare the circle we created in the beginning of this tutorial. Grab the Direct Selection Tool (A) from the Tool Panel and select the left anchor point on the circle. Hit the Delete button on your keyboard in order to remove it.

Under Effect select 3D > Revolve. Make sure to set the Surface to No Shading. This way we will avoid creating unnecessary parts of the ball.

Now is the time to apply our squares to the ball. To do that hit the Map Art button. A new window will pop up. In the Symbol drop down menu select the symbol of the squares.

You will notice that the squares don’t cover the whole surface of the ball. To fix that just hit the Scale to Fit button in the bottom of the window. It will stretch out our symbol and will cover the ball.

Feel free to change the rotation of the cube in the 3D Revolve Options window. This way we will change the rotation of the disco ball as well.

When you are satisfied with the basic look of the Disco Ball make sure to select Object > Expand. Ungroup (Shift + Ctrl / Cmd + G) the ball (several times). You should end up with the Layer Panel like this.

You will notice that one of the layers contains the front side of the ball, the other layer contains back side of the ball, and the other two layers contain only round paths. Remove both paths and the back side of the ball. You should end up with something like this.

This is actually the look of the Disco Ball without the nice colors which will give our illustration the fancy look we desire.

Applying Color Gradients

This is the part of the tutorial where we will show off our ability to turn something very simple (our red ball with small squares) into a stunning illustration of a shiny disco ball. In theory, all we have to do to it is Ungroup (Shift + Ctrl / Cmd + G) the ball and to change their Fill color to something more colorful. Sounds easy.

For the right look, we have to find the exact combination of colors which will create the impression of a three dimensional object (ball) and the shiny effects. This can be very tricky. Given that a disco ball is actually a ball with many small mirrors attached to the surface all with the ability to reflect light and we have to recreate this effect. What we will try in this tutorial is to make several groups of rectangles and change their Fill color with colors that will blend nicely. But let’s move from words to deeds.

As we said, Ungroup (Shift + Ctrl / Cmd + G) the disco ball. Now, with the Selection Tool (V) select the rectangles as it’s shown in the pictures below (don’t forget to hold the Shift key on the keyboard for multiple selections).

There are many rectangles that needs to be selected. It might be easier if you select the larger area at once and then holding the Shift key on your keyboard with Selection Tool (V) just deselect some rectangles.

Now, grab the Ellipse Tool (L) from the Tool Panel and click somewhere on the Artboard. In the Ellipse Options box set the dimensions to 200 x 200 (same as we did at the beginning) and hit the OK button. Send the new circle behind our disco ball (Shift + Ctrl . Cmd + [) and align it horizontally and vertically with the disco ball using the (Align Panel > Horizontal and Vertical Align Center).

Now we need to find a way to turn this boring illustration into a nice and fancy disco ball. Color gradients will help us to do that.

In this tutorial we will use a golden gradient, but feel free to use any color combination you like.

Apply the golden gradient to the circle behind the rectangles.

We will apply the same radial gradient to each part of the disco ball we’ve grouped. Make sure to use different angles when you are dragging the gradient with the Gradient Tool (G).

As you can see, we’ve made some improvements but we still need to work on details.

To emphasize the influence of the light we will set the Fill color for some rectangles to white (#FFFFFF). Feel free to use other colors as well, in order to reach the look you like. To be able to edit individual rectangles inside their groups, without ungrouping them, just enter the Isolation Mode that can be found under the right click.

Play around with colors, use different shades of the gradient until you create something you like.

To exit the Isolation Mode just click on the bar at the top of the window.

Our disco ball looks better now, but there is one more thing we can do to improve it. Grab the Ellipse Tool (L) from the Tool Panel and create a circle. Apply a radial gradient to the circle, as is shown below. Just make sure to set the Opacity of the white color on the left side of the slider to 0%.

Make a few copies (Ctrl / Cmd + C, Ctrl / Cmd + V) of the circle and place them on some of the white rectangles on the disco ball. It will create a nice glow around the sparkling mirrors.

Next Page to Continue

Almost there, but not quite done. Read more here to add the rest of the finishing touches!

There are a lot of advantages to freelancing. You will have more flexibility over the hours you work, you won’t have to commute to work any more and best of all, you are your own boss. It can be hard work landing a job. Not to mention making sure a project is completed successfully can mean working unsocial hours from time to time, however most people who leave their 9 to 5 jobs are happy with the freedom freelancing offers.

You can’t just sit at home waiting for the work to come to you though (unless you are an established freelancer with years of experience). You need to be proactive and go out and find work every month. The two most common methods of doing this are job boards and freelancing websites.

With job boards, the website owner or company posts details of the job or project that they need completed. It is then up to applicants to contact them with details of themselves, their experience online and why they are suitable for a project. Freelancing websites are a little more competitive, with many freelancers privately or publicly bidding for work from employers. Due to this, good feedback from previous clients can be an important factor on whether you are successful in a bid or not.

Today we would like to show you 18 websites perfect for finding design and programming jobs. The first 9 are on this page, and the others are on the next. Just follow the link at the bottom of the post to continue on with this hopefully useful resource.

Help Wanted Websites

1. Freelance Switch

A great freelance job board that’s updated regularly. It publishes online jobs where location isn’t an issue and location based contracts from around the world. Design, development, writing, illustration and flash positions are all listed.

2. Smashing Jobs

Used by top digital companies such as Google, Apple and Linked In; Smashing Jobs lists full time and freelance design and programming jobs.

3. Sensational Jobs

It’s not updated frequently however there are still good design and developer jobs published on Sensational Jobs every month.

4. WP Hired

A good place to find theme and plugin development work for the WordPress platform. Freelance and full time positions are advertised and you can also upload your resume so that employers contact you for work.

5. WordPress Jobs

A job board from the makers of WordPress, WordPress Jobs lists designer, programmer and blogging positions. There are also employers who simply need their WordPress installation upgraded.

6. Authentic Jobs

Online since 2005, Authentic Jobs lists positions from companies such as Facebook, Skype, Sony and Electronic Arts. Full time, contract, freelance and internship positions are available for design and development projects.

7. Coroflot

A design website that features jobs for a range of different design jobs from large well respected companies. Users can upload their portfolios so that employers can contact them directly.

8. WooJobs

Another WordPress jobs board that is actively updated. A range of WordPress design, development and support positions are advertised here.

9. Krop

A creative job board for designers, directors and freelancers. Users can create a portfolio and resume so that companies can contact them directly.

Don’t give up yet! That perfect freelancing design or programming job may still be lingering right around the corner. There are still more opportunities on the rest of the job boards and websites we have left. Read more here.

For most of us whether it was the Saturday morning programming, the Sunday morning comic strips, more, or all of the above cartoons have been a major part of our adolescent and adult lives. For whatever reason, we seem to be drawn to the often exaggerated drawings of cartoonist’s pens. Be they digital or analog, classic or modern their cartoons call to us. Connect us to other times and places. And of course, they inspire us.

That is what brings us here today. We have sought out a collection of creative cartoons that touch across a range of styles and feels to inspire Noupe’s readers. So whether your tastes tend towards the retro fashions of tooning’s yesteryear, or the more edgey stylings of more modern artists; character studies and creation, or the illustrated landscapes and scenes inspiration awaits.

The Toonage

Greg by Philipp Broemme

Santa Claus, no luck in poker by Max Golubev

Turtle by Nynke Bloembergen

Classical Animation by Ruwan Fernando

Book Cover Illustration by Dan Shefelman

Charming Pirate by Gustavo Rios

Mascot and Character Design by Dirceu Veiga

Doctor Foster (Nursery Rhyme) by Vitalij Sidorovic

micro-macro by ed jankovsky

ADVENTURES by jhon tiven

-
CE Contest II by Rizky widodo

Mallorca’s Youth stands up to the crisis by Victor Dorado Martorell

Digital Works 2012 by DJ Luongo

Sample Works by Robert Cori

THE ENDLESS ONE by Saul Salazar

Cartoon logos by Scott Evans

Angry Sheep Studio by Ann Marshall

mix of ages by KO+KO architects

Ghost in the Machine by Tom Sparke

Staedtler by Daniel Oldenburg

-
The dog by Wipawee Juntarawong

Boring Europa by Karolina Pyrcik

CARTOONS by Jmenko Musiyenko

Amy by José María Matia

The tree of hapiness by Alejandro Ovalles

MAGGU by Uzair Baig

Let’s Rock by Jira Jiramakorn

Farytale by Aleksandr Kuskov

MEGAMUERTE by felipe Niño

Local DJ In Love by Ashley Fontones

(rb)

CSS is a beautiful language but it can also be frustrating at times. Certain CSS solutions don’t work on certain browsers (cough Internet Explorer cough) and much of your time can be spent debugging code.

Thankfully there are lots of great CSS snippets available online that fix common problems and design issues. In this article we have listed 30 CSS snippets that we think you will find very useful.

The Code

1. Chris Poteet’s CSS Browser Reset

Resetting your CSS style allows you to stop cross browser differences. Chris Proteet’s reset code doesn’t work in IE6 however this shouldn’t be a concern any more with use of the browser dropping below 1% in the USA.

/*

Reset Default Browser Styles
- Place first in the listing of external style sheets for cascading.
- Be sure to explicitly set margin/padding styles.
- Styles are not reset that have to do with display (block, inline) are not reset.

By: Chris Poteet & various influences

*/

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
dt {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

2. Eric Meyer’s CSS Reset

Eric Meyer’s CSS code resets is one of the most popular CSS snippets. It even found it’s way into the Blueprint CSS Framework.

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3. How to Create Multiple Borders in CSS3

A cool technique using the box-shadow property that allows you to create multiple borders around an object.

box-shadow:
    0 0 0 2px #000,
    0 0 0 3px #999,
    0 0 0 9px #fa0,
    0 0 0 10px #666,
    0 0 0 16px #fd0,
    0 0 0 18px #000;

4. Tucked Corners

This CSS code will give you the cool ‘tucked corners’ effect that is used on the Gravatar home page.

div.tucked-corners {
	    background: #f6f6f6;
	    height: 380px;
	    margin: 50px auto;
	    padding: 10px;
	    position: relative;
	    width: 580px;
	    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
	       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
	            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
	}
	span.tucked-corners {
	    background: #c4453c;
	    display: block;
	    height: 380px;
	    position: relative;
	    width: 580px;
	    -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
	       -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
	            box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
	}

	/* Top Corner Effect */

	.top-corners:after,
	.top-corners:before {
	    background: #e6e6e6;
	    content: '';
	    height: 50px;
	    position: absolute;
	    top: -25px;
	    width: 100px;
	    z-index: 10;
	    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	}
	.top-corners:after {
	    left: -50px;
	    -webkit-transform: rotate(-45deg);
	       -moz-transform: rotate(-45deg);
	        -ms-transform: rotate(-45deg);
	         -o-transform: rotate(-45deg);
	            transform: rotate(-45deg);
	}
	.top-corners:before {
	    right: -50px;
	    -webkit-transform: rotate(45deg);
	       -moz-transform: rotate(45deg);
	        -ms-transform: rotate(45deg);
	         -o-transform: rotate(45deg);
	            transform: rotate(45deg);
	}

	/* Bottom Corner Effect */

	.bottom-corners:after,
	.bottom-corners:before {
	    background: #e6e6e6;
	    content: '';
	    height: 50px;
	    position: absolute;
	    bottom: -25px;
	    width: 100px;
	    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	}
	.bottom-corners:after {
	    left: -50px;
	    -webkit-transform: rotate(-135deg);
	       -moz-transform: rotate(-135deg);
	        -ms-transform: rotate(-135deg);
	         -o-transform: rotate(-135deg);
	            transform: rotate(-135deg);
	}
	.bottom-corners:before {
	    right: -50px;
	    -webkit-transform: rotate(135deg);
	       -moz-transform: rotate(135deg);
	        -ms-transform: rotate(135deg);
	         -o-transform: rotate(135deg);
	            transform: rotate(135deg);
	}

5. iPad-Specific CSS

Change the general layout of ipad screens and portrait and landscape modes.

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

6. Style links depending on file format

A short CSS snippet that changes the styling of external links, email links and links to pdf documents.

	/* external links */
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}

/* emails */

a[href^="mailto:"]{
padding-right: 20px;

background: url(email.png) no-repeat center right;

}

/* pdfs */

a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;

7. Drop Caps

A great cross-browser snippet that lets you make the first letter of a paragraph stand out.

.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

This can also be achieved using CSS3 however it doesn’t work on IE9.

p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

8. CSS Sticky Footer

Create a sticky footer for your page. The solution works on all major browsers including Google Chrome and IE8.

CSS

/*
Sticky Footer Solution
by Steve Hatcher 

http://stever.ca

http://www.cssstickyfooter.com

*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/* IMPORTANT

You also need to include this conditional style in the  of your HTML file to feed this style to IE 6 and lower and 8 and higher.



*/

HTML

<div id="wrap">

	<div id="main">

	</div>

</div>


<div id="footer">

</div>

9. Image Replacement Technique

A handy way of replacing a text page element with an image. The snippet addresses a problem from another solution in which Firefox users noticed a dotted border that goes to the left of the screen.

a.replacement
{
  background: url(dotted-border.png) no-repeat;
  height: 44px;
  width: 316px;
  display: block;
  text-indent: -9999px;
  overflow: hidden;  /*Add this line to the image replacement method*/
}

10. Set body font-size to 62.5% for Easier em Conversion

If you want to have a more flexible layout, you should use em instead of pixels or points. By setting your font size at 62.5% you can easily set your font using em as the value will be a tenth of pixel value.

body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.2em; /* 1.2em = 12px */
}

11. Vertically Align Text

If you set the line-height of your paragraph as the same size as it’s parent division you can easily center the text vertically.

div { width:100px; height:100px; }
div p { line-height:100px; }

12. How to Create 3D Text With CSS3

Using the text-shadow property, this snippet will help you create 3D text using CSS only.

p.threeD
{
	text-shadow:
		-1px 1px 0 #ddd,
		-2px 2px 0 #c8c8c8,
		-3px 3px 0 #ccc,
		-4px 4px 0 #b8b8b8,
		-4px 4px 0 #bbb,
		0px 1px 1px rgba(0,0,0,.4),
		0px 2px 2px rgba(0,0,0,.3),
		-1px 3px 3px rgba(0,0,0,.2),
		-1px 5px 5px rgba(0,0,0,.1),
		-2px 8px 8px rgba(0,0,0,.1),
		-2px 13px 13px rgba(0,0,0,.1)
		;
}

13. Wrapping Long URLs and Text Content with CSS

This snippet will stop long lines of text extending over the content area by making sure the content wraps to fit the content width.

pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}

14. Fancy Ampersand

Make your ampersands stand out using this short snippet. Simply change the font-family to suit your preference.

.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}

15. Pull Quotes for Improved Reading

Make your quotes stand out more by floating them to the right or left hand side of your content and wrapping content around it.

.pullquote {
width: 300px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ; }

16. Rounded Borders Around Images

With CSS3 you can easily place rounded borders around your images using this snippet.

img {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}

17. Image Preloader

Load a small gif in the background of an image first so that it is showed before the main image loads.

img
{
    background: url(img/preloader.gif) no-repeat 50% 50%;
}

18. CSS3 Opacity

By using the opacity property, which lets you see through an element, you can create a layered textured background.

div.L1 { background:#036; opacity:0.2; height:20px; }
div.L2 { background:#036; opacity:0.4; height:20px; }
div.L3 { background:#036; opacity:0.6; height:20px; }
div.L4 { background:#036; opacity:0.8; height:20px; }
div.L5 { background:#036; opacity:1.0; height:20px; }

19. Highlight links that open in a new window

This snippet allows you to easily distinguish links that open in new browser/tab windows by styling them different from other links.

a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
 }

20. The New Bulletproof @Font-Face Syntax

A cross-browser CSS snippet that lets you define your font faces.

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
	     url('myfont-webfont.woff') format('woff'),
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

21. Flip an Image

A CSS snippet that lets you flip an image. This is particularly useful if you want to flip icons such as arrows.

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

22. Email Link With An Image

A quick way of automatically adding a mail image to all of your email links.

a[href^="mailto:"] {
     background: url(images/email.png) no-repeat right top;
     padding-right:10px;
}

23. Beautiful Blockquotes

A neat way of styling your blockquotes to add a bit more punch to them.

blockquote {
     background:#f9f9f9;
     border-left:10px solid #ccc;
     margin:1.5em 10px;
     padding:.5em 10px;
     quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
     color:#ccc;
     content:open-quote;
     font-size:4em;
     line-height:.1em;
     margin-right:.25em;
     vertical-align:-.4em;
}
blockquote p {
     display:inline;
}

24. Browser CSS hacks

A large list of browser hacks to make sure your website looks consistent across all browsers.

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

25. How To Change The Default Text Selection Color on your Blog

Change the color of highlighted text by adding this little CSS snippet to your stylesheet.

::selection {
   background: #ffb7b7; /* Safari */
        color: #ffffff;
   }
::-moz-selection {
   background: #ffb7b7; /* Firefox */
        color: #ffffff;
   }

26. Clearfix

Clear floated elements easily by creating a CSS clear class.

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

27. Hide Logo Text With Text Indent

Make your logo is SEO friendly by using this snippet for your h1 tag. The snippet ensures that the logo text is not displayed on the page.

h1 {
        text-indent:-9999px;
        margin:0 auto;
        width:400px;
        height:100px;
        background:transparent url("images/logo.jpg") no-repeat scroll;
}

28. Reset all Text Colors and Background Colors

Reset all text and background colours. The snippet sets everything back to black text on a white background though you can change these colours accordingly.

* {
     color: black !important;
     background-color: white !important;
     background-image: none !important;
}

29. Multiple Background Images

Use multiple background images with this useful CSS3 snippet.

#multiple-images {
   background: url(image_1.png) top left no-repeat,
   url(image_2.png) bottom left no-repeat,
   url(image_3.png) bottom right no-repeat;
}

30. Linear Gradient

This CSS code will allow you to create a linear gradient in the background of an element. This works on all major browsers however some older browsers don’t display it properly (particularly older versions of IE).

background-image: -webkit-linear-gradient(top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -moz-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -o-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0ECE8), color-stop(1, #D8D3C8) );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#F0ECE8?, endColorstr=’#D8D3C8?,GradientType=0 );

We hope that you enjoyed the post and found it as useful as we’d hoped. If you know of any other useful CSS snippets that you keep handy that we neglected, please share them with us in the comment area.

(rb)