Senin, 14 Februari 2011

Abduzeedo - graphic design | design inspiration | tutorials -

Abduzeedo - graphic design | design inspiration | tutorials -


Freakishly Cool Illustrations by Jeff Soto

Posted: 14 Feb 2011 06:00 PM PST


If you think that illustration is made only of cute and adorable works, you might be terribly wrong. The bizarre and freakish have their special place in our heart. Well, at least in mine.

<!--break-->

Jeff Soto came up with these amazing, freakishly cool illustrations of strange creatures and furry skulls. Oh man, the furry skull gotta be my favorite: it's really original and awesome.

Jeff Soto is an artist, illustrator and muralist who has exhibited in galleries and museums around the world. The artist's distinct color palette, subject matter and technique resonate with a growing audience and bridge the gap between Pop Surrealism and graffiti. Inspired by youthful nostalgia, nature, graffiti, hip-hop and popular culture, his bold, representational work is simultaneously accessible and stimulating.

For more of his work, you may visit his portfolio. I hope you enjoy these! Cheers. ;)


Freakishly


Freakishly


Freakishly


Freakishly


Freakishly


Freakishly


Freakishly


Freakishly


Freakishly


Freakishly

About the author

Hello, everyone! I'm Paulo Gabriel, a 26 year old designer from Porto Alegre, Brazil. I have worked as a webdesigner since 2006, but websites and blogs have been a hobby for me since 1999. Here in Abduzeedo, I try to bring only the hot stuff for you... and hope that all of you enjoy my posts! For more cool stuff, you may also follow me on Twitter.

Sponsored Links:

Daily Inspiration #745

Posted: 14 Feb 2011 02:51 PM PST


This post is part of our daily series of posts showing the most inspiring images selected by some of the Abduzeedo's writers and users. If you want to participate and share your graphic design inspiration, just send us, via email, the image with the link from where you found it, also use "Daily Inspiration" in the subject, and don't forget to send your Abduzeedo username; or via Twitter sending to http://twitter.com/abduzeedo

<!--break-->

If possible use the HTML code: <p class="imgC"><a href="Link to the page you found the image"><img src="Link to the Image" /></a></p>

Do you want to see all images from all Daily Inspirations? Check out http://daily.abduzeedo.com

al b sure

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Arthur

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Best Bookmarks

href="http://bestbookmarks.net/art/matte-painting-by-alex-popescu">Digital art selected for the Daily Inspiration #737

href="http://bestbookmarks.net/art/matte-painting-by-alex-popescu">Digital art selected for the Daily Inspiration #737

href="http://bestbookmarks.net/art/the-art-of-pene-menn">Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

coolvibeblog

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

diego_liv

Digital art selected for the Daily Inspiration #737

Fabiano

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Fabio

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Gisele

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

HdK

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Henry Hingst

Digital art selected for the Daily Inspiration #737

Khyzyl Saleem

Digital art selected for the Daily Inspiration #737

Josh Brown

Digital art selected for the Daily Inspiration #737

Matt Mackay

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Robert Marino

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Takashi

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

Via Twitter

Send your suggestions via Twitter to http://twitter.com/abduzeedo using #abdz in the end of the tweet.

@fechnerk

Digital art selected for the Daily Inspiration #737

@daniel_nelson

Digital art selected for the Daily Inspiration #737

Digital art selected for the Daily Inspiration #737

@Zola85

Digital art selected for the Daily Inspiration #737

@I4MzB

Digital art selected for the Daily Inspiration #737

About the author

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Sponsored Links:

The Perfect Office #76

Posted: 14 Feb 2011 09:30 AM PST


We've seen some great gadgets and equipment for designers. So many cool stuff, that we could actually assemble infinite perfect office spaces! Every week we'll assemble a perfect office, and we'd like you to help us. What equipment would the perfect office have?

<!--break-->

Not only gadgets and equipment, but also furniture, sound system, gaming stuff (for lunch time!). A designer is totally allowed to dream with the perfect office, and that's what we're gonna do here! Also, tell us your suggestions, or even better, you may tell us via twitter (mine and fabio's), using #abdz_ofc so we can check it. Alright? I hope you guys enjoy this brief selection. Cheers! ;)

Bamboo coat-stand


The Perfect Office #76

This coat-stand, with its plant like appearance has smart engineered plastic moulded hanging elements. The elements can be placed freely in hight and direction on the oak stick. The hanging elements are kept in place by the friction between the element, the oak stick and a loose silicon ring. Bamboo is available with one or three sticks. (at Design Spotter)

AMP FLIP USB Flash Drive


The Perfect Office #76

The FLIP is an easy to carry 4 or 8GB USB flash drive. Right at the top is a hinge for it to pivot open, so when it's closed it's well protected. The FLIP is said to be compatible with USB 3.0, 2.0 and 1.1 and work both on Mac and PC — pretty much anything with a female end. (at Crunch Gear)

Powertrekk Fuel Cell


The Perfect Office #76

We've been hearing about using fuel cells as batteries since fuel cells existed. So far, nothing too interesting has come out. But if you're interested in getting in on the tech early, check out the Powertrekk. The Powertrekk is a fuel cell and rechargeable battery in one. Similar to those portable battery chargers, the Powertrekk can charge your devices over USB from energy stored either in the fuel cell or the battery. The battery also acts a buffer between the fuel cell and your device. Check out the video for more information. (at Crunch Gear)

Cooler Master Spawn Gaming Mouse


The Perfect Office #76

The new Cooler Master Spawn gaming mouse is equipped with a high-performance 3500 DPI sensor, highly accurate scroll wheel, and includes professional grade micro switches which can take up to 5 million clicks. The Spawn gaming mouse also features anti-drift control sensor, that provides lossless performance under mouse lift and drop, with a built in angle snapping option together with DPI switching between 800, 1800, and 3500. (at Geeky Gadgets)

Acer GN245HQ With HDMI 3D Support From NVIDIA


The Perfect Office #76

The new Acer display combines Full HD 3D imagery via HDMI 3D or DVI-DL (dual link) connectivity with NVIDIA 3D vision and comes complete with a pair of NVIDIA 3D glasses, featuring advanced active shutter 3D technology. The Acer GN245HQ has a 100 million:1 contrast ratio, Full HD resolution 1920 x 1080 perfect for 1080p Full HD applications and a 16:9 aspect ratio, together with a 120Hz refresh rate, essential for creating the 3D effect and a 2ms response time. (at Geeky Gadgets)

About the author

Hello, everyone! I'm Paulo Gabriel, a 26 year old designer from Porto Alegre, Brazil. I have worked as a webdesigner since 2006, but websites and blogs have been a hobby for me since 1999. Here in Abduzeedo, I try to bring only the hot stuff for you... and hope that all of you enjoy my posts! For more cool stuff, you may also follow me on Twitter.

Sponsored Links:

Be Mine Valentine Inspiration

Posted: 14 Feb 2011 06:04 AM PST


Happy Valentine's day to everyone, to get on the feeling of valentine I selected some really cool dribbble shots of valentine. You still have time to design a nice little card to you loved one and surprise her/him with a piece of your work. Here is some lovely inspiration.

<!--break-->

Click on each image to take you to the designer's page


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration


Be Mine Valentine Inspiration

About the author

Hi there! I'm Paulo Canabarro, 25 year old web designer from Brazil currently living in Providence RI, USA. I'm truly passionate about design of all kinds. Finding and sharing inspiration has become part of my life. If you have any suggestions or requests just get @ me - pvpcanabarro@gmail.com For some cool stuff make sure to Follow me on twitter!

Sponsored Links:

Advertising banner by Media Militia Free Design Resources

How does your workspace look like?

Posted: 14 Feb 2011 02:26 AM PST


A common mistake of newcomer any scene is to think you need a big setup of hardware to do good work. That is why I collected some workspaces of designer, photographer, filmmaker & blogger.

<!--break-->

Aloa

http://abduzeedo.com/blogs/aloa

Official Workspace

This is the place whereI do all of my music, movies graphics & all the work that has to done for Abduzeedo. I have to admit that I cleaned up the desk. Usually its full of gadgets, cameras, usb sticks, and other periphericals like the USB-christmas tree you can see. I use the latest 13" MBP with 4GB RAM and a 23"inch lcd. For inspiration (and for better view) I got the "Wall & Pieces" book from Banksy always within reach. Over the monitor is a big wallpaper of Magomed Dovjenko, which you cant see right now.

Pete Harrison

http://www.peteharrison.com/

Official Workspace

Official Workspace

Basically I do all my design work on that 27" imac, its fully spec'ed out..then I have the 42" Plasma for watching movies and playing video games, the other 2 monitors are running windows and thats for internet browsing and playing music. Everything is linked up into one giant media centre. I have an xbox running through my TV and a hard drive which I can watch movies off, and the PC too, the imac is linked to the PC. I try and keep everything creative, the walls are littered with doodles, inspiration, prints and design work, you can see designer vinyl toys in the cabinet and the shelves, these are made by friends and illustrators I have worked with an inspire me, some are very rare. The most interesting thing is the girls underwear collection you can see hanging up above the bed..well thats a story for another day, but reminds me through all the creative process that i'm not a machine like some people think, but im actually human, and loving life :)

Magomed Dovjenko

www.IAMMAGO.com

Official Workspace

Official Workspace

Lucky you that I tidied up my room for this one, ha! So - this is the place where the 'Mago-Magic' happens ( understand the equivocal in this one??? haha ) for more than just a few hours a day. As you can see I got some mags and books/Portfolios by friends in here ( e.g big homie Matt W. Moore's 'Diagonal Thinking' ) for inspiration and to kill blocks, aswell as my playstation joystick to kill some of those designer guys at FIFA ( Holla at me Doug ( Alves ) ! ).

The thing I love the most beside my Wacom & the Mac in my room are some of the tee's I designed ( rest is in my closet doh ), especially the Nike one... much more of them are coming soon! ''

James White

http://signalnoise.com/

Official Workspace

Official Workspace

Here is where I can be found most of the time, in the Signalnoise home office. I like my place to be nice and tidy so I'm not knocking things over as I try to work. I also don't like gear and wires all over the place, so I take care of my desk. The wall right in front of me is covered with art, certificates, drawings and toys to keep me motivated as I create, this photo only shows half of what I have hung up. I own a lot of work from my favorite artists, such as Alex Varanese, Hydro74, Obey Giant and Darwyn Cooke so it's easy to stay inspired in this room. Hal Jordan also helps keep my desk nice.

Perttu Murto

www.perttumurto.com
www.twitter.com/perttumurto

Official Workspace

Official Workspace

Official Workspace

This is my home office. I want it to be pretty simple, black and white mainly. I have few prints on the wall by Drew Flaherty. Got my bookshelf full of design magazines and books. Our cat is usually sleeping on the chair so this is pretty regular situation in the photo. I share this with my fiance who does landscape designs.

Alex Beltechi

http://www.behance.net/alexbeltechi

Official Workspace

Official Workspace

I'm sure most people in this article have an optimized and time-tested workspace on display, but I don't. My current layout is more of a mini-desk occupied strictly on a need-to-have basis, plus a goofy analog clock that gets really annoying and loud if actually wound up. I own a computer and tablet and nothing more because so far it's all I've ever needed. I'd rather keep my worn-out drafting table than replace it with the newest and shiniest gadget out there because I believe technology is never a good substitute for knowledge and skill.

Isaac Rentz

www.isaacrentz.com

Official Workspace

Most of my job is done either on set or in an editing bay, so I really only use my work space for writing scripts or treatments. I concentrate better with the lights low and and the door closed. I enjoy solitude, although sometimes my producer, Steve, will come in and we'll pass a basketball back and forth while talking over ideas. I like keeping my space very practical and sparse. I've noticed a correlation between fancy offices with Eames furniture and ideas that I don't like very much.

Pawel Nolbert

http://www.behance.net/hellocolor/

Official Workspace

Official Workspace

Usually, during the creative mess going on there, the creative part gets digitalized & the mess stays there, so I tidied it up a little for this photo. I like having a clean space around my tablet so it doesn't interact with my elbows & distract me. Just a regular IKEA desk so far - I wait till I get my own place & get a real badass designer desk!

Sorin Bechira

http://www.bechira.com/

Official Workspace

Official Workspace

As you can see this is my little corner where the magic happens. Nothing fancy though and because of the lack of useless stuff on my desk, I'm panicking and I'm quickly getting on some image effects to compensate those.

On my desk:
- Dell U2711 27" - a big and high quality display is a big plus
- Wacom Intuos4 Large Tablet - it's like my digital right hand.
- Airbook 13" - for mobility and perfect for presentations
- Motorola Razr V3 - old but nice and thin
- Apple Numeric Keyboard - because it's thin and comfortable
- Samsung Mouse - an basic old mouse but it's still my fav: precise and light

Nikolas Konstantin

http://nikolaskonstantin.tumblr.com/
http://www.ideasmagazine.eu/

Official Workspace

Official Workspace

Art for art itself is shallow. Only by pointing towards the moon can it take out to lead people on a journey with the engine of their own imagination. Hence, an artists working place should be foremost the soul, heart & mind. What is the heartbeat of my creations? What is at core of my works? If the framework is right every idea has the potential to set fire, to give birth to revolutions. But before we work on the outside we should listen to our deepest sentiment. What revolution is it we want? I personally give praise to the words of the magnificent soul lu xun: "The revolution must give people life, not take it from them". What can your art give?

Michael O.

http://www.bymichaelo.com/

Official Workspace

Official Workspace

I have been using computers since the Apple IIGS so I have seen my share of various setups and components. I settled with PC because of their ease of customization, affordable prices and user-friendliness. This system evolved over a number of years and has seen many upgrades. The monitor on the left is a separate computer that use for email and music. It is a simple system that I bought at a thrift store for $60. Since its only function is to run Outlook, Winamp and Rhapsody, it does not need to be high tech.

The 2 monitors in the middle are a dual monitor setup for my main computer – a quadcore with 6GB RAM. The monitors are 24" Dell UltraSharp. The graphics card is top-of-the-line which I needed in order to rotate both monitors 90 degrees. I prefer the vertical orientation of the monitors on this computer because most of the artwork I create is vertical. Call me stubborn but I still use Windows XP and Photoshop CS2. I prefer very plain and simple components that do the work I need them to do without the extra bells and whistles that I will never use. The operating system is even running in 'classic mode' with a plain gray wallpaper.

The monitor on the right is obviously a TV. Sometimes I get sick of listening to music while working so turn the TV on instead, although, I try not to do that too often because it is distracting. The desk was custom built. I designed it to fit perfectly in my office using 3D Studio Max. It was built by a local craftsman.

Lastly, you will see that I do not use a tablet. I do have one but I have not found a use for it outside of making long strokes (like painting hair). I really do not know how people can stand using them all the time.

Erik Jonsson

www.your-majesty.com

Official Workspace

Official Workspace

Official Workspace

Its a rather light office. Everything is white and beige except perhaps the desks. My immediate surroundings are littered with bicycles, parts and photography equipment. Not intentional but probably because its what i use daily apart from the computer. The guitar however is not mine, it belongs to my closest college James.

While the studio seems pretty cluttered i keep my desk empty at all times except for the occasional note book and a cup.

Alexander "Diftnorm" Otto

http://www.diftnorm.com/

Official Workspace

Official Workspace

Thats how my workstation looks on a sunday when I am at work. I am working on a Quad-Core Mac Pro with 12GB RAM, a NVIDIA Quadro 4000, running Mac OS X Snow Leopard, the Adobe CS4 Master, C4D and the other stuff. I've got two Dell 24' displays, Logitech X-230 2.1 speaker, a Wacom Intuos 3 and for sure always candy and coffee within reach.

Don from Invisible Creature

http://www.invisiblecreature.com/

Official Workspace

Official Workspace

I've always preferred my workspace to live in an 'organized chaotic state', which includes my obvious love of various characters and color palettes. I love being surrounded by creativity. It makes my job that much more special.

Rob Shields

http://www.robshields.net/

Official Workspace

Official Workspace

My work space is pretty clean, just the essentials really, my tablet and sketch books, over sized headphones and some writing tools. Right now I work on the first floor of my house so I have to share space with my kitchen, dinning room, home theater set up and about a dozen instruments.

Fabio Sasso

http://fabiosasso.com/

Official Workspace

Official Workspace

This is how my office looked like, now I'm moving out to California so things will change, however I really like to have a second monitor and all my gadgets around.

Got a beautiful workspace? Post it in the comments!

About the author

Aloa is the moniker of the german/greek graphic designer/filmmaker & musician Alexis Papageorgiou. Im glad to share great artistic work with the readers on Abduzeedo. Contact me on aloa@abduzeedo.com or follow my Twitter and Facebook page

Sponsored Links:

Tutorial: Case Study with Html5 + CSS3

Posted: 14 Feb 2011 01:57 AM PST


Last month I did a talk at the Campus Party, one of the biggest technology events of the world, talking about Fireworks, HTML5 and CSS3. It was very nice, the receptivity of the audience was sensational, and thinking that many of you would also like to see the contents of the workshop, so decided to write a full case study and share here on the blog.

<!--break-->

Many people ask me about the real possibilities to start using HTML5 and CSS3 today, and I'm sure we must explore the best that the web provides us with the goal of always improving the user experience. Maybe we can not reach 100% of the users, because there are still some browsers that do not support most of these new features (we know what browser I'm talking about, right?). But I believe that working to enable the legitimacy of content and navigation to 100% of users, why not make it even easier and more enjoyable browsing for many users who use browsers that allow this?

My main bibliography for this case study were two books: Html5 for Web Designers and CSS3 for Web Designers. Definetly worth the read!

Tutorial: Case Study with Html5 + CSS3

Preview Template - Download

*This template will be best viewed at Webkit browsers, like Safari and Chrome.

Layout

To start our case study, I created a simple layout, but where it could apply different concepts of CSS3 and still assemble a structure using HTML5, using the major changes that have occurred on its semantic. The layout that we will build is below:

Tutorial: Case Study with Html5 + CSS3

From this layout we divide it into a base structure with the main areas that will make our HTML.

Tutorial: Case Study with Html5 + CSS3

HTML5

Having all the basic layout complete, the structure in the head and the images had already been exported, we will begin to assemble our HTML. Here we can notice some differences, even simplifications in relation to XHTML 1.0. See how easy it was to decorate the raw Html, or tell me that you knew by heart everything that should contain inside DOCTYPE for example?

We have one more thing to get attention here, this script. Actually this makes that our new elements are rendered in browsers that do not yet support HTML5.

 	 <!DOCTYPE html> <html lang="en"><head>   <meta charset="utf-8" />   <title>Ferris Buller on Abduzeedo</title>   <link rel="stylesheet" href="style.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body>
</body>
</html>

Since the basis of Html got ready we start to insert our element. Starting at the header, the news here are quite clear, as the elements < header > and < section >. Not to be a long post I will not go into merits of all the new tags and serving each one, but there are very good documentation on the Internet, including the two books that I refered at the beginning of the post.

Tutorial: Case Study with Html5 + CSS3

 <header id="main-header">		   <section id="block-twitter">			     <p class="tweet-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.<span class="tweet-time">21 minutes ago via Twitter</span></p>		   </section>		   <section id="block-title">			     <h1>Ferris Bueller</h1>   </section> </header> 

With the header done, we should go to the content. In the left column we have a very important element to talk about here, are the forms. It has pretty cool thing about them in HTML5, using the attributes "placeholder", "type" and "autofocus". Play around with them and if you want to read a little more in this great article at 24ways.org.

Tutorial: Case Study with Html5 + CSS3

 <div id="main-content">   <section id="content">
<section class="one-col"> <h3>Hey guys,</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section>
<section class="two-col"> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est culpa qui officia deserunt mollit anim id estmollit anim id est enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p> <ul id="social-icons"> <li class="bt-twitter"><a href="#">Twitter</a></li> <li class="bt-facebook"><a href="#">Facebook</a></li> <li class="bt-linkedin"><a href="#">Linkedin</a></li> </ul> </section>
<section class="one-col"> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section>
<aside id="form"> <form action="template_submit" method="get"> <input id="name" name="name" type="text" class="textfield nome" placeholder="Escreva seu nome" > <input id="email" name="email" type="text" class="textfield email" placeholder="Email"> <textarea id="message" name="message" type="textarea" placeholder="Mensagem"></textarea> <input type="submit" value="Enviar" class="submit"> </form> </aside> </section>

In the right column, we have the portfolio. Here are the new items < figure > and < video >. The videos and audios are now easily inserted on html without the need to make a Flash embed for an example. Each browser has (or will have) its own player, and with a single line of code we have running our video! Of course, for browsers that do not support yet, well, just insert the embed flash and it's ready, all users affected!

Tutorial: Case Study with Html5 + CSS3

  <section id="portfolio">   <figure>     <a href="#" class="link-thumbs"><img src="images/thumb-1.png" alt="Nome do projeto"></a>     <a href="#" class="link-thumbs"><img src="images/thumb-2.png" alt="Nome do projeto"></a>     <a href="#" class="link-thumbs"><img src="images/thumb-3.png" alt="Nome do projeto"></a>     <a href="#" class="link-thumbs"><img src="images/thumb-4.png" alt="Nome do projeto"></a>     <a href="#" class="link-thumbs"><img src="images/thumb-5.png" alt="Nome do projeto"></a>     <a href="#" class="link-thumbs"><img src="images/thumb-6.png" alt="Nome do projeto"></a>   </figure>   <video controls width="380" height="210" poster="images/placeholder.jpg">     <source src="video/video-1.mp4" type="video/mp4">     <object type="application/x-shockwave-flash" width="380" height="268" data="player.swf?file=video/video-1.mp4">       <param name="movie" value="player.swf?file=video/video-1.mp4">     </object>   </video> </section> </div> 

And finally the new tag < footer >. Without much news here!

Tutorial: Case Study with Html5 + CSS3

 <footer>   <p>Design by Fabiano Meneghetti<br/>   2011 - Oficina Campus Party</p> </footer>  

Aqui da pra ver o que temos ate agora.

CSS3

With the html ready we shall start our CSS. In this picture I show the key features of CSS3 that we will test here.

Tutorial: Case Study with Html5 + CSS3

To start our CSS I always like to use a reset.css, download the template and you can analyze it a little better. Moreover we need to include our new HTML5 elements as display:block, so we reach all browsers, even those that do not support html5.

 	@import url("reset.css");  	/* New HTML5 elements */  	article, aside, figure, footer, header, hgroup, nav, section {  		display:block;  	}  	/* -------- */ 

Well, now it's time to put the hand in the CSS, here are only the main elements that form the basis for our site.

 	body { 		margin: 0; 		font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 		font-size: 13px; 		line-height: 20px; 		color: #5F5E59; 		background: url(images/bg_body.jpg) left top repeat; 	} 	a:link, a:active, a:visited { 		color: #305F9B; 		text-decoration: none; 	} 	a:hover { 		color: #000; 		text-decoration: underline; 	}  	/* ID's */  	header { 		background: url(images/bg_header.jpg) left top repeat-x; 		margin-bottom: 25px; 	} 	#block-twitter { 		width: 700px; 		height: 60px; 		position: relative; 		margin: 0 auto; 		padding: 20px 200px 0 0; 	} 	#block-title { 		width: 900px; 		height: 80px; 		position: relative; 		margin: 0 auto; 		padding-top: 25px; 	} 	#main-content { 		width: 900px; 		position: relative; 		margin: 0 auto; 	} 	footer { 		width: 900px; 		position: relative; 		margin: 0 auto; 		clear: both; 		padding: 30px 0; 		background: url(images/img_star.png) left top repeat-x; 	}  	/* -------- */ 

The news on the CSS start here. Note that in the texts that we already use elements such as column-count and column-gap, for texts in multiple columns. Notice also the use of prefixes and -webkit and -moz, you can view this article a list of prefixes for all major browsers http://peter.sh/.

 	/* Header */ 	#block-twitter p.tweet-text { 		color: #FFF; 		font-family: Georgia, "Times New Roman", Times, serif; 		font-style: italic; 		font-size: 14px; 		text-shadow: 0 -1px 0 #000; 	}  	#block-twitter span.tweet-time { 		color: #E3BACA; 		font-family: Georgia, "Times New Roman", Times, serif; 		font-style: italic; 		font-size: 12px; 		text-shadow: 0 -1px 0 #000; 		padding-left: 6px; 	}  	header h1 { 		width: 454px; 		height: 53px; 		background: url(images/img_ferris.png) left top no-repeat; 		text-indent: -9000px; 		margin: 0 auto; 	}  	/* -------- */  	/* Text */  	section#content { 		width: 400px; 		float: left; 		text-shadow: 0 1px 0 #FFF; 		padding-bottom: 40px; 	} 	section#content h3 { 		margin-bottom: 15px; 		color: #949691; 		font-size: 18px; 		font-weight: bold; 	} 	section#content p { 		 margin-bottom: 15px; 	} 	section#content section.two-col { 		-moz-column-count: 2; 		-moz-column-gap: 40px; 		-webkit-column-count: 2; 		-webkit-column-gap: 40px; 		column-count: 2; 		column-gap: 40px; 		padding-bottom: 20px; 	} 	section#content section.two-col p { 		font-size: 20px; 		line-height: 28px; 	} 	ul#social-icons { 		border-top: 2px dashed #AAA19F; 		width: 180px; 		height: 55px; 		padding-top: 20px; 	} 	ul#social-icons li, 	ul#social-icons li a { 		width: 60px; 		height: 55px; 		float: left; 		display: block; 		text-indent: -9000px; 	} 	ul#social-icons li a:link, 	ul#social-icons li a:active, 	ul#social-icons li a:visited{ 		-webkit-transition: background 0.3s ease-out; 	} 	#social-icons li.bt-twitter a { 		background: url(images/social_icons.png) 2px top no-repeat; 	} 	#social-icons li.bt-twitter a:hover { 		background: url(images/social_icons.png) 2px -56px no-repeat; 	} 	#social-icons li.bt-facebook a { 		background: url(images/social_icons.png) -59px top no-repeat; 	} 	#social-icons li.bt-facebook a:hover { 		background: url(images/social_icons.png) -59px -58px no-repeat; 	} 	#social-icons li.bt-linkedin a { 		background: url(images/social_icons.png) -121px top no-repeat; 	} 	#social-icons li.bt-linkedin a:hover { 		background: url(images/social_icons.png) -121px -57px no-repeat; 	}  	/* -------- */ 

Here we begin working on our form. Note that here we use functions like box-shadow and transition, Transition I believe it is one of the main novelties of CSS3, using with care and in some places we can enrich the user experience too. It's the kind of feature that does not affect users who do not support CSS3, and using it properly can keep the loyalty of content reaching 100% of users correctly.

 	/* Form */  	aside#form input.textfield, 	aside#form textarea { 		width: 380px; 		padding-left: 8px; 		margin-bottom: 10px; 		border: 1px solid #CCC; 		padding: 10px; 		color: #6C595F; 		-webkit-box-shadow:inset 1px 1px 2px #999; 		-moz-box-shadow:inset 1px 1px 2px #999; 		-khtml-box-shadow:inset 1px 1px 2px #999; 		box-shadow:inset 1px 1px 2px #999; 		-webkit-transition: border 0.4s ease-out; 		-webkit-transition:-webkit-transform .2s ease-in; 	} 	aside#form textarea { 		height: 100px; 	} 	aside#form input.textfield:hover, 	aside#form textarea:hover { 		border: 1px solid #999; 		-webkit-transform:scale(1.1); 		-moz-transform:scale(1.1); 	} 	aside#form input.textfield:focus, 	aside#form textarea:focus { 		outline: none; 		border: 1px solid #6C595F; 		-webkit-transform:scale(1.1); 		-moz-transform:scale(1.1);  	} 	#form form input.submit { 		background: #6C595F; 		font-size: 13px; 		font-weight: bold; 		color: #FFF; 		padding: 5px 10px;	 		border: none; 		-webkit-border-radius:4px; 		-moz-border-radius:4px; 		-khtml-border-radius:4px; 		border-radius:4px; 		float: right; 		-webkit-transition: background 0.4s ease-out; 		cursor: pointer; 	} 	#form form input.submit:hover { 		background: #333; 	}  	/* -------- */ 

In the portfolio we have a very nice effect, using the "transform" with CSS3. Its hard anyone believe that this was done without JS or even Flash. Another news is the "nth-child", with it we have control over all elements of a repeat, as the thumbs of the portfolio, removing only the margin-right of the right elements. To learn more give a read on this article css-tricks.com.

 	/* Portfolio */  	section#portfolio { 		width: 410px; 		float: right; 		padding-bottom: 40px; 	} 	#portfolio figure a.link-thumbs { 		width: 190px; 		height: 156px; 		display: block; 		float: left; 		-webkit-border-radius: 8px; 		-moz-border-radius: 8px;	 		-khtml-border-radius: 8px; 		border-radius: 8px; 		-webkit-box-shadow: 1px 1px 2px #999; 		-box-box-shadow: 1px 1px 2px #999; 		-khtml-box-shadow: 1px 1px 2px #999; 		box-shadow: 1px 1px 2px #999; 		margin: 0 20px 20px 0; 		opacity: .6; 		-webkit-transition: opacity 0.4s ease-out; 		-webkit-transition: -webkit-transform 0.4s ease-out; 	} 	#portfolio figure a.link-thumbs:hover { 		opacity: 1; 		-webkit-transform:rotate(-15deg); 	} 	#portfolio figure a.link-thumbs:nth-child(2n) { 		margin-right: 0; 	} 	#portfolio video { 		background: #C9CEC8; 		padding: 10px; 		-webkit-border-radius: 8px; 		-moz-border-radius: 8px;	 		-khtml-border-radius: 8px; 		border-radius: 8px; 		-webkit-box-shadow: 1px 1px 2px #999; 		-box-box-shadow: 1px 1px 2px #999; 		-khtml-box-shadow: 1px 1px 2px #999; 		box-shadow: 1px 1px 2px #999; 		clear: both; 	}  	/* -------- */ 

And finally our footer, no big news;)

 	/* Footer */  	footer p { 		font-size: 11px; 		line-height: 18px; 		background: url(images/logo_abduzeedo.png) right center no-repeat; 		text-shadow: 0 1px 0 #FFF; 	}  	/* -------- */ 

Preview Template - Download

In general I can say that we have to start using HTML5 and CSS3 today, it is possible. There is much documentation showing tips and tricks for always reach every single user on the main principle of a website: content and navigation. Allowing access to this to 100% of users, then just work to improve the experience for those who use modern browsers!

About the author

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Sponsored Links:

Impressive Pieces by Android Jones

Posted: 13 Feb 2011 07:02 PM PST


Other day while reading the news about the situation on Egypt I stumbled in a great illustration made about the issue. I liked it a lot so I tried to find more about the artist who did it. So, researching thru the web I found that the artist was Android Jones, a really experient digital artist.

I got really surprised that I never stumbled on his art before, because this guy is beyond the awesome. His artworks are so full of details and he has a really complex creative process. I also found a interview with the artist on Youtube, what is really great due to the fact he express a lot his point of view about many questions related to his art.


You can know more about Android Jones and his artworks by accessing his Website.




















Interview



About the author

Hey buddies! I'm Marcos Torres, a 20 years old art director/freelancer from Brazil, I'm here to bring some new interesting stuff to you. You can see my portfolio at http://flickr.com/marcostorres. Any request or jobs opportunities send to marcostorres90@gmail.com, also follow me on Twitter http://twitter.com/marcos333 to get in touch with cool design news.

Sponsored Links:

Tidak ada komentar:

Posting Komentar