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: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc)); background: -moz-linear-gradient(top,  #74b8d7,  #437fbc); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc'); 

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)

Using illustration in web design has become quite trendy these days. People love to see beautifully designed illustration based websites because they stand out from the rest. Not only because of the beautiful illustrative art work and carefully crafted web designs but also because of the perfect balance struck between these two important components.

Today, we want to dig into some creative ways you can work beautiful illustrations into your web design projects. We hope that this compilation will inspire some new ideas. You can see in the examples where designers have captured a certain illustrative style and wonderfully integrated it into website design in various ways. These unique illustrative styles make a website more memorable. Enjoy!

The Showcase

Plavacek.net
Plavacek.net takes a unique and gorgeous approach with its design that certainly looks great and attention grabbing. The designer imaginatively presents the underwater and above water scenes in a single frame brilliantly.

Meomi
In this web design, although the mascot is not the only bit of illustration and character work present it does add a lot of personality. The overall illustrations and style of the site make it a less formal presentation.

The Last March
This is another illustration driven web design that demonstrates the different levels of playfulness and whimsy these types of illustrated elements can add beyond pure decoration.

Pampaneo
Pampaneo’s lively use of yellow and green with idiosyncratic characters creates a bold look with depth and balance.

The Pixel
This is another site with a very stylish design, but with a much busier layout. The blue-tone gives a very strong impression.

Pojeta
With this web design, the designer conveyed his own personal and unique style with a single illustration against a vast amount of whitespace. This makes the design look hugely impactful and very beautiful.

YODAA
This website successfully manages to be unique in its own way by highlighting the illustration with carefully positioned content; and since this is accomplished effectively, the result is quite spectacular.

Aussie BBQ Legends
What makes this website stand out is not only the stunning illustrative art work or the vigilantly crafted design; rather it is the beautiful balance between these two components like was mentioned in the opening.

Ufo.lt
This website demonstrates a beautiful submersion in illustration. You can see how creatively the designer makes use of their illo skills.

Pieoneers
The illustration presented in this website although it is very colorful and has some depth, it still maintains a bit of a simplistic feel. The muted tones used for the rest of the site really make the splash of color in the pie very pleasing to the eyes.

Html5 Lab
Html5 Lab has a bold site, using large 2D illustrations and some light embellishments coupled with a sharp color scheme of grey and red with little traces of white and black to pull the design together.

Pigeon and Pigeonette
The uncharacteristic layout and quirky, vibrant illustration make Pigeon and Pigeonette worthy of exploring.

Teamnomad
Teamnomad's header reinforces its own theme simply and in an understated way, though it is still extremely apparent, creating a strong brand connection quickly. The rest of the page leaves enough room to breathe, so viewers aren't overwhelmed.

Iwit
A large stream of character illustration is paired with an otherwise simple website design, creating a very attention-grabbing result. There truly isn't much here that could use improving.

Rays-lab
Here the design uses a rich, vibrant illustration that provides a stunning foundation for the design to work off of.

Coopers kids
Coopers kids’ illustration doesn’t carry on all through the page, but it works wonderfully with the peaceful color scheme creating a look that is both simple and effective.

Ericsteuten
Although very eventful, with lots of movement to draw the eye, the design here is still balanced well. This balance seems so simply struck that it makes the whole process look easy.

Attack of the web
Attack of the web mostly confines the use of exceptional illustrative elements to the over-sized header of the single page site. This is a great example of a functionality driven site with a strong use of illustration.

Cubeclub-chemnitz
This web design has a strong letterpress print feel, with bold text and original icons. The repeated texture pattern is a nice touch.

Dedoce
In this design, the underwater scene possesses loads of grunge and texture which keep it from looking like just another vector built website.

Cool Brush Design
Cool Brush Design's site throws restraint out the window yet still manages to pull off sophistication with ease. The majority of the illustration serves both ornamental and functional purposes.

Arbel Designs
The illustration work in Arbel Designs’ site is extremely attractive and attention grabbing, however the way the tabs adjust when they are clicked is somewhat distracting; but the overall design is still extraordinary.

Toris Eye
In this web design, illustrations are put to work to create an overall theme that looks visually alluring and appealing.

Racket
Here the thematic illustrations are used establish a very surreal tone or theme for the site, and they certainly grab the attention of the users.

Get my boss to North Cape
This web design whimsically repeats its fundamental mission statement through the illustration which comically recreates the site title whilst simultaneously establishing a theme.

Egopop
This is another site with an atypical layout in this collection. The illustrations in the design let you know about the individual this site represents as well as break the normal web mindset a visitor may have.

Duirwaign Studios
Duirwaign Studios makes use of illustration in a very beautiful and breathtaking manner. It also provides some life and movement to the design putting a memorable face to it.

Mellow Mushroom
In this case, the interactive illustrative elements provide much more than mere decoration, adding an edge which smartens the design in a way that only interactive illustration can.

The Great Bearded Reef.com
The Great Bearded Reef makes use of creative illustration to create this playful masterpiece. This is a distinctively fun, tongue-in-cheek design which fits and serves its purpose well.

Moshi Monsters
Here, the illustrations are relatively strange yet tempting owing to their inimitability and innovation. The big and bold typography definitely is the first thing that gets noticed, and compliments the rest of the design well.

The Alamo Basement
The background texture of this website provides it an extraordinarily captivating and personal feel. The visual explosion of characters and colors is great for getting the reader’s attention.

Florida Flourish
This is an enormously stunning illustration full of interactive elements which comes with an unmatched style that captivates the visitors.

Webbli World
This website illustration instills a sense of enjoyment and wonder that engages the visitors with its appealing design.

Old Loft
Old Loft brings into play an artistic and inventive illustration that makes this website both unforgettable and exceptional.

Visit Cascadia
The overall style of this website feels like an illustration, and still, it doesn't have the characteristic humanistic elements.

Veerle
Here the illustration lends more backup support, with many brilliant background elements in play. Some of these are more corporeal than others, although in general they are more about visual support than anything else.

Tea Round App
This is an ideal example of illustrated design. The style is tremendously stunning, totally unique, and very appealing.

Pixel Baecker
The hand rendered design here showcases the designer’s talent. It demonstrates that they creates artwork with their hands that connects flawlessly to their animation skills.

Chernobyl heart
In this web design, the illustrated text is far more subtle than most. Rather than driving the whole direction of the design, it merely plays along nicely.

Instant Ad Legend
The somewhat singular style of this design delightfully incorporates the large illustrative elements which play several roles in the overall design.

(rb)