7 Brand New Free Fonts for Your Designs

Fabrica

Afta Serif

Network Font

Absinthe

Fox Type

Ostrich Sans

Rokkitt

[ Visto AQUI ]

55 Inspiring and Clever Online Portfolios

If you’re a designer/creative, you probably already know that having an online portfolio is very important. Not only do you need to have something to show your potential clients, but these days it’s important to be present online for many reasons. If you leave the address of your portfolio when you’re communicating in social media, through blog comments, contests and so on, you’ll see that you can even get work from that alone.

Inspiring and Clever Portfolios

A portfolio can make or break you. It’s important to show your best work, your variety and stand out. In this showcase we’ve put together a collection of 55 portfolios we’ve found online that we think stand out as clever, creative and inspiring. We hope these can inspire you when you’re making your own portfolio, when creating web designs and in other projects. We find these pleasant to look at and invite the visitors to want to learn more about the people behind them.

Marie Bocquet

Tobias Wenzel

Teodora

Jason Murphy

Thorsten Haak

Mintz

Nicolas Beaufils

Ryan Lum

Josh Sender

Adham Dannaway

Matt Bango

Leon

Felix Menard

Ryan O’Rourke

Gabriel Ceniza

Sam Clarke

Will Phillips

Steven Hylands

Joshua Giblette

David Bushell

Valentine Makhouleen

Nick Jones

Ralph Millard

Vasjen Katro

Mohan Balaji

Jay Dalisay

Mikal Morello

Tom Bradshaw

James Charlick

Conway Anderson

Rosekilly

Steve Schoger

Bryant Taylor

David Arazim

Christopher Meeks

Wing Cheng

Gareth Dickey

Andrew

Mike Peters

Thom Bennett

Giancarlo Fajardo

Maurice Krijtenberg

Jesse Willmon

Arun Pattnaik

Daniel Hellier

Jiri Tvrdek

Bogdan Teodorescu

Sean Halpin

Steven Little

Leah Haggar

Vincent Mazza

Phil Renaud

Tor Burrows

Derry Hoyland

Cyril Bath

We hope you’ve enjoyed these online portfolios and gotten some inspiration for your own one. Remember that if you’re not quite ready to make a dedicated portfolio website this way, there are several services where you can show off your work until you have your own website ready.

Did You Get Inspired?

We’d love to hear your comments on these, and feel free to share a link to your own online portfolio if you have one. Which one is your favorite? Remember to share the article if you liked it. Thanks!

3D Autodesk Maya: Prácticas básicas con nurbs

Nuevo episodio destinado a practicar y extender nuestros conocimientos adquiridos durante las anteriores entregas, generando superficies y curvas Nurbs que nos ayudaran a crear diferentes elementos.

Ayudados por las diferentes herramientas que hemos ido probando, pasaremos a la creación de formas desde el punto de vista de un uso más relacionado con el mundo real y el flujo de trabajo de Maya.

Como primera de muchas practicas que veremos relacionadas con las Nurbs, mostraremos los primeros pasos que nos serán de vital utilidad a la hora de adentrarnos mas y mas en este universo del modelado de superficies paramétricas.

Descárgalo desde:

Megaupload
Rapidshare

@font-face gotchas

Over the past few months, I've collected a few worthwhile notes on @font-face that are worth reading over if you geek out about this stuff…

• in Webkit (Chrome/Safari), applying font-weight:bold to faux-bold some @font-face'd text will not succeed. Same applies for font-style:italic. You can fix by adding the following to your @font-face declaration: (via doctype, crbug/31883, crbug/35739, webk.it/34147)

      font-weight:normal; 
      font-style:normal; 
      font-variant:normal; 
      /* these values are defaults in FF/Opera/IE but not webkit */

• FF/Linux cannot serve webfonts from the file:// protocol. (Also, a tome on type quality with linux from Evan Martin)
• TrueType format renders with a better quality than Opentype CFF. (sez Typekit) (fontsquirrel default)
• In IE6-8, using createStyleSheet and then setting styleElem.styleSheet.cssText to a text value that includes a @font-face declaration going into will crash IE6-8. (src)
• font-size-adjust (only supported in Firefox) normalizes x-height and may improve the FOUT.
• text-transform doesn't play well with @font-face in current implementations. (via snook & Gary Jones)
• @font-face doesnt play nice with css transitions. (via ethan marcotte)
• IE6 under High Security settings will pop a security dialog when a site tries to use @font-face. (via Wouter Bos)
• There have been reports that when a font is segmented into multiple files, a css text-shadow can overlap in a weird way. (pics plz?
• Aaron James Young dug into @font-face on obscure linux-only browsers.
• If a @font-face declaration is within a media query @media screen { ..., it will fail in Firefox. (Thx Ben Kulbertis) http://bugzil.la/567573
• Hosting the fonts on a different domain? Firefox requires some extra effort; you'll need to add the Access-Control-Allow-Origin header, whitelisting the domain you're pulling the asset from. Example .htaccess config here. Alternatively, you can use the base64 encoding in CSS (create it with the fontsquirrel generator) to avoid setting headers. details here
• If you're using @font-face will fillText() with <canvas>, then you might notice fillText NEEDS the font resource to load completely before you use it. And that's up to you to manage. crbug.com/32879
• SVG Fonts - Currently SVG is the only way to get webfonts working on iPhone and iPad. It is the most rudimentary format for fonts on the web.
  • SVG Fonts lack kerning and other complementary information
  • SVGz is a format that bakes compression right in and will save you bandwidth overhead. But you'll need to add this to to your .htaccess for this benefit. AddType image/svg+xml svg svgz AddEncoding gzip svgz (via @fontsquirrel)
  • SVG fonts don't work with a cache manifest. Due to the manifest treating # as comments and Mobile Safari requiring the font ID reference in the URL. [Unverified] (via Tristan Dunn)
  • Using text-overflow: ellipsis; turned the contents into only "…" and nothing else. (via Tristan Dunn)
  • Letter-spacing css doesnt appear to work with SVG fonts.
• IIS Needs some custom mimetype configuration for serving webfonts. To enable, go to: Default Web Site > Properties > HTTP Headers > File Types > New Type…
  • .otf : font/otf
  • .svg : image/svg+xml

  (thx ProtectedVoid & Tom Nelson) — Test page

@font-face links that might have sneaked past you

• @font-face internationalization tests from the W3C
• Kernest open-sourced its font server, Fontue
• Bert Bos gave the full history of webfonts at SXSW

And.. regarding @font-face syntax

I now recommend the bulletproof smiley variation over the original bulletproof syntax.

@font-face { 
  font-family: 'Graublau Web'; 
  src: url('GraublauWeb.eot'); 
  src: local('?'), 
         url('GraublauWeb.woff') format('woff'),

 url('GraublauWeb.ttf') format('truetype'); 
}

From the bulletproof post:

Yes, it's a smiley face. The OpenType spec indicates any two-byte unicode characters won't work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name.

There are a few reasons why smiley is a better solution:

• Webkit+Font Management software can mess up local references, like turning glyphs into A blocks. (crbug.com/33173)
• On OS X, Font Management software may alter system settings to show a dialog when trying to access a local() font that's accessible outside of Library/Fonts. More detail on my bulletproof post. (crbug.com/29729) Font Explorer X is also known to mess up other stuff in Firefox: bugzil.la/531771
• Although it's unlikely, you could reference a local() font which is completely different than what you think it is. (Typophile post on different fonts, same name) At the very least its a risk, and you're ceding control of the type to both the browser and host machine. This risk may not be worth the benefit of avoiding the font download.

These are all pretty edge case issues, but it's worth considering. FontSquirrel has already made the smiley syntax the new default in the Generator, and you should use it going forward as well.

10+ useful tools to simplify CSS3 development

CSS3 is indeed a great improvement to the CSS specification. It allow web developers to add stylish effects to their websites, without any headaches. That said, several tools can definitely be life savers when building websites using CSS3. In this article, I have compiled the 10+ most useful tools for all your CSS3 coding.

CSS3 Pie

Are you surprised that Internet Explorer 6/8 CSS3 support is almost non existent? I guess most of you aren’t. Unfortunately, some clients may want you to create a website that look like in a modern browser in IE. This is when CSS3 Pie is useful: It allows you to use most of the CSS3 cool features on IE.
→ Visit href="http://css3pie.com/">CSS3 Pie

CSS3 Builder

With this tool, you can design complex CSS3 boxes using an interface looking exactly like the one used for applying Photoshop effects. Definitely a great tool to save lots of time.
→ Visit href="http://www.layerstyles.org/builder.html">CSS3 Builder

CSS3 Drop shadow generator

This one is quite similar to CSS3 builder, just use the sliders to visually design your drop shadow. Once done, just copy the CSS code which have been automatically created. Paste it to your css file, and you’re ready to go!
→ Visit href="http://www.wordpressthemeshock.com/css-drop-shadow/">CSS3 Drop shadow generator

Cascader

This tool isn’t CSS3 specific, but it is so useful that it would have been a shame not to include it on that list. Cascader lets you input some HTML code and it will detect all inline CSS, remove it from the HTML and add it to a separate stylesheet. A true time saver for those looking for clean HTML.
→ Visit href="http://www.cascader.co/">Cascader

Border Radius.com

border-radius is one of the most popular CSS3 properties. Those who remember how boring it was to create boxes with rounded corners using images certainly know why. This tool allow you to quickly create a box and get the appropriate CSS3 code.
→ Visit href="http://border-radius.com/">Border Radius.com

Button Maker

CSS3 allows you to create href="http://www.catswhocode.com/blog/top-10-css3-buttons-tutorials">awesome buttons. This tool, created by Chris Coyier, makes CSS3 button design extremely easy: Just pick colors, adjust radius, and get the code, ready to be pasted into your CSS file.
→ Visit href="http://css-tricks.com/examples/ButtonMaker/">Button Maker

CSS3 Generator

Need help with CSS3 declarations? This very handy generator helps you create declarations for most popular CSS3 properties: @font-face, RGBA, text-shadow, border-radius, and more.
→ Visit href="http://css3generator.com/">CSS3 Generator

Modernizr

Modernizr is a small script that detect support for CSS3 and adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. For example, if the browser does not support the multiple backgrounds functionality, a no-multiplebgs class will be added to the <html> element. then it will be pretty easy for you to fall back.
→ Visit href="http://www.modernizr.com/">Modernizr

HTML5 & CSS3 Support

Need to know if Internet Explorer 8 supports the text-shadow property? Just have a look to this very useful chart, which reveals CSS3 support for all major browsers. Definitely a page to have in your bookmarks!
→ Visit href="http://www.findmebyip.com/litmus/#target-selector">HTML5 & CSS3 Support

CSS3 Gradient Generator

As you can guess, this tool is a gradient generator. Just pick your colors using the picker, preview it in the preview area, and grab your ready-to-be-pasted code. It’s easy as that!
→ Visit href="http://gradients.glrzad.com/">CSS3 Gradient Generator

CSS3 Please

CSS3 Please is another very helpful site which allow you to copy and paste most common CSS3 declarations. It also has a preview area so you can live test your declarations.
→ Visit href="http://css3please.com/">CSS3 Please

CSS3 Cheat Sheet

When coding, cheat sheets are very helpful to quickly remember properties and their syntax. Smashing Magazine has created this CSS3 cheat sheet that you can download and print. A preview version in .gif format is also available href="http://media.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/preview.gif">here.
→ Visit href="http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/">CSS3 Cheat Sheet

[ Visto aquí ]