Feature
Post

Category
Design Focus

Published Friday June 4, 2010 at 4:21 pm
By Sophia Lucero with 3 comments

Friday Focus 06/04/10: Workspaces

This week on Friday Focus: websites that mimic a typical designer’s workspace, beverage, gadgets, litter, and all.

Designs of the Week

Marc Mendell

I love how in the inner pages the big graphic moves up and out of focus, while the scrolling text hides under the table.

Mick Evans

The shadows in the sketches are off, and I would have liked more of that look to bleed into the rest of the design, but I like me a clean design.

Real-Visuals

A collage-style design is always fun, and the variety of textures here keep things interesting.

Logo Designs Studio

I love the view from the ceiling; you don’t get that very often. Even better is that as you reach the end of the page you get the other end of the room. Great idea! Tiny nitpick: the justified text, which always looks stiff.

Icreon Design Studio

I find it interesting that they chose to emphasize the word design in the heading rather than the name of the studio itself. I quite like the shading style on the illustrated graphics too.

Social Media Weekly

Design – Complete Beginner’s Guide to Design Research
“Research actually begins the moment we learn about a project, whether we acknowledge it or not. As user experience designers we aren’t content simply designing to specification.”

Design – Perception and the design of forms – Part 1: Shape
“How is it that we can know, without thinking, that the computer monitor is closer to us than the window, which is closer again than the car parked on the street outside?”

Semantics – HTML and Semantics – Conjoined twins of the Future Web!
“Yes, that is where the web is heading towards, and that day will be called – ‘The day of Semantic Web’, and the most important players in that era will be none other than our old kid ‘HTML’ and the relatively sophisticated kid ‘Semantics’.”

Accessibility – How do Web browsers perform when copying and pasting alternate text?
“In HTML, an image is made up of visual and textual data (alternate text). Most Web browsers attempt to render alternate text when visual data is not available. However, only one browser currently uses alternate text when pasting images into other applications.”

Feature
Post

Category
Code, Design

Published Thursday June 3, 2010 at 12:00 pm
By Hyde with 6 comments

Top 20 HTML5 and CSS3 sites to inspire you

The use of HTML5 in combination with CSS3 is really starting to take off. Safari, Chrome and Mozilla are pushing more support with each new release making it possible to code really great websites.

The best way to learn new techniques is by example, trial and error. Currently you can already start using HTML5 just by changing your document type.

<!DOCTYPE HTML>

It will validate with your current code even if you are using XHTML or HTML.

To get you inspired and motivated to start using HTML5 I’ve listed the top 20 HTML5 websites.

As it goes with CSS3 and HTML5 they work best in a webkit browser such as Safari and Chrome.

Faruk Ates

Good use of HTML5 tags: header, nav, section, article and footer. The effects used for “Elsewhere” are very eye catching and unique.

http://farukat.es/

For a Beautiful Web

A website for the Andy Clarke’s series of DVD about web design, you can go wrong getting inspired by this website. Has one of the coolest use of CSS transitions I have seen yet. Look for the DVD animations.
http://forabeautifulweb.com/

Edgar Leijs

This personal site/portfolio of Edgar is one smooth site with zero loading time fool of HTML5, CSS3 and jQuery goodness. Especially the details in the portfolio section.

http://www.edgarleijs.nl/

Devinist

http://www.devinist.de/

Pelletized

http://www.pelletized.com/

Ian Devlin

http://www.iandevlin.com/

Leonardo Moreira

http://www.leonardomoreira.com.br/

Craig Ward

http://www.craigward.net/

Clevis

http://www.clevis.cz/

Chris Valleskey

http://chrisvalleskey.com/

Standardista

http://www.standardista.com/

Ryan Clark Merrill

http://ryanmerrill.net/

The Travel Agency

http://www.thetravelagency.cc/

Simply Matt D

http://www.simplymattd.com/

Eyes Styles

http://eyestylesllc.com/

The Design Grid

http://thedesigngrid.com/

Spurr Marketing

http://spurrmarketing.com/

Dots and Thoughts

http://dotsandthoughts.be/

The Energy Cell

http://www.energycell.co.uk/

Vaullt

http://vaullt.com/

Feature
Post

Category
Design

Published Wednesday June 2, 2010 at 5:42 pm
By Lorraine Nepomuceno with 6 comments

Gorgeous Headlines With @font-face And Letterpress Styles

Remember when styling website headlines meant choosing between Times New Roman and Arial? How far we’ve come. Today, I want to show you a quick way to jazz up your website or blog headlines by combining @font-face with pure CSS letterpress styles.

You can use your favorite @font-face font, although for the letterpress to shine through you’ll want to stick with a boldfaced font. Go download an @font-face kit of your choice. I’m using the lovely Acknowledgement, which is big and bold and in-your-face, in my example.

This is my sample HTML:

    <h1 class="fontface">10 Ways To Jump Over Lazy Dogs</h1>
    <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>

Now for my stylesheet. First, I want to define my @font-face style:

@font-face {
    font-family: 'AcknowledgementMedium';
    src: url('Acknowledgement-webfont.eot');
    src: local('☺'), url('Acknowledgement-webfont.woff') format('woff'), url('Acknowledgement-webfont.ttf') format('truetype'), url('Acknowledgement-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

Basically, I’m specifying that the font-family named AcknowledgementMedium can be found in the same directory. Now, for the letterpress style:

h1.fontface {font: 40px/44px 'AcknowledgementMedium', Arial, sans-serif; letter-spacing: 0;color:#222;
text-shadow: 0px 2px 3px #555;}

Here, I’m calling the AcknowledgementMedium @font-face, setting the color, and- the letterpress magic bit- the text-shadow.

Remember, the text-shadow element is defined like so (learn more about text-shadow here):

  • x-offset or the horizontal offset. Unnecessary for this effect.
  • y-offset or the vertical offset. Two pixels is all we need.
  • shadow blurriness
  • shadow color

And this is what it looks like:

You can see the live example here.

Once you have a good grasp of how text-shadow works, the possibilities are endless. Play with different shades of a color, create drop-shadows, all on a variety of fonts thanks to @font-face.

Next Entries →