Garry Aylott Design

Weekly Inspiration #1

Welcome to the first Weekly Inspiration where I scout the web and find the best looking sites for your design inspiration. Read on…

1.  First site is The Rockstar Foundation. Awesome design and build by Ryan Downie (http://twitter.com/RyanDownie), Liam McKey (http://twitter.com/liammckay) and Veerle Pieters (http://twitter.com/vpieters)




2.  Next up is Endorse. A new networking site to find an expert in a specific field or need to pass some work on to a like minded professional




3.  Nice site by graphic designer Andrew Reifman (http://twitter.com/andrewreifman)




4.  Duoh! is a nice looking site for a small agency run by Veerle Pieters and Geert Leyseele




5.  Lastly this week is not a brand new site but one I’ve visited a few times recently for it’s great visual style and awesome animation

Tweet

Interview with Matt Hamm

Some time last year I interviewed Matt Hamm as I was impressed with his web design and illustration skills. At the time I was writing for an online design magazine which unfortunately didn’t progress into anything so the interview was ditched along with the blog. Recently however, Matt has re-visited my questions and has updated them based on his current work. Here it is, finally, published for all to see.

Garry: Thank you for taking time out to answer some questions Matt.  Firstly please tell us what you are up to right now design wise?

Matt: Currently I’m building a website for nicechart.com a sheet music download website. Lately I’ve been illustrating more characters for http://www.gugafit.com and working on a rather sweet little project called http://www.hivetrader.com.  I have also illustrated a children’s book series recently, which I’m really excited about. http://www.als-pals.co.uk.

Read More

Tweet

CSS Quick Tip #2: @font-face Render Issues?

I was messing with @font-face again (as you do) and noticed that the text rendered slightly differently on different browsers and couldn’t understand why?

It was like the text had a certain level of bold applied to it, even though in my CSS I had specified the font attributes correctly. As a bit of a perfectionist I decided that I wanted it to render the same across all browsers (who wouldn’t?) and not settle for “well it looks ok in X and Y but I’m not too fussed about Z”.

After some digging around I found that all that’s required is a single font attribute that needs to be added to your CSS:

font-style: inherit;

I added this to my reset section of my CSS but if you aren’t using one then add it directly to your text element (h1, h2, p etc) that’s using @font-face.

This may not be a specific fix for all of you but it’s definately a good place to start and you should include it on anything that uses @font-face in the future.

Tweet

Create a stylish content box using only CSS3

With web designers visual methods being driven more and more by CSS lately and less of a reliance on images, it’s now pretty easy to create neat elements for your site. Here’s an example of a content box based on stylish web trends made possible with, our ever improving friend, CSS3.

There are some slight differences in the syntax between mozilla and webkit browsers, especially for the gradient, but the more you use it the more it becomes second nature. Lets go…

Step 1
We don’t need to show our html markup as it’s just a standard doctype with a div inside the body tag <div id=”container”> and inside this div a <h2> title and some lorem ipsum text inside <p> tags.

First lets start by adding a basic reset and styling for the typography

html, body, div, h1, h2, p { border: 0; margin: 0; padding: 0; }

a { color: #007ae1; }
a:hover { color: #003c6f; }

h2 {
text-align: center; padding-top: 20px; margin-bottom: 10px; font: 24px Georgia; color: #333;
}

p {
font: 13px Helvetica, Arial; color: #333; padding: 10px 15px 0 15px;
}

Step 2
In the HTML we created a div with an id of container, all of the below is encased inside #container { }, so lets move on to the fun part of styling it up

Firstly the sizing and positioning:
margin: 30px auto;
width: 250px;
height: 270px;
A subtle border and rounded corners:
border: 1px solid #fff;
border-radius: 10px; /*Fallback for if/when IE supports it*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
Then the background colour elements:
We need to declare a fallback colour for IE (we could use a background image for IE users but currently I’m conforming to the “it doesn’t need to look the same in every browser” so for users with supporting browsers, they get a more visually pleasing experience) then apply a linear gradient going from a subtle grey at the top downwards but finishing 15% from the top:background: #ffffff; /*fallback for IE*/
background: -moz-linear-gradient(top, #f1f1f1, #fff 15%);
background: -webkit-gradient(linear, 0 0, 0 15%, from(#f1f1f1), to(#fff));
And lastly the box shadow:

By declaring a 0px distance for the X and Y directions we get a nice shadow all around our box and by using rgba we can alter the alpha channel to drop the opacity to make it more of a subtle effect:box-shadow: 10px 10px 5px #999;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);

The end result:



An easy to style content box with CSS3 and not a single image in sight. It also degrades ok for non-supporting browsers (IE!) and is easier to edit at short notice without having to re-slice and upload images. Give it a go on your next build.

Tweet