View Final Result

The HTML Markup

<h1><a href=”#”>Big Bad Bob the Fish</a></h1>

That’s it for the HTML – really!

The Styles

In total, there were four HTML items that needed to be addressed with CSS:

1. h1 element
2. h1 text-shadow
3. h1 a
4. CSS-generated content that lives in the h1 element.

First thing’s first, style the h1 element:

h1 {
position: relative;
font-family: ChunkFive, arial, sans-serif;
font-size: 72px;
line-height: 66px;
text-transform: uppercase;
font-weight: normal;
}

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active{
color: rgb(114,115,113);
}

After applying the necessary font styles and text-shadows, I styled the h1 a element with the color I wanted to be at the top of the text gradient.

Now for the cool stuff – applying a mask using the CSS Mask / CSS Gradient properties in webkit browsers…

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active{
color: rgb(114,115,113);
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

-webkit-mask actually accepts a whole bunch of different things, including images. So we can use a -webkit-gradient value as a mask because it’s technically an image in it’s own right. By using the RGBA property, I was able to fade the top text layer out to transparency.

You’re not actually able to use CSS gradients on your text straight off, so unfortunately the only work around is to use the mask and RGBA properties. So, to fade to the second colour, a second copy of the text is needed to be sitting exactly behind the text that’s fading into transparency. To achieve this, I targeted the :after pseudo-selector.

h1:after{
content: “Big Bad Bob The Fish”;
color: rgb(63,63,63);
}

By all means I could put have placed another copy of the text in the markup and wrapped it in a span, but what’s the point of unnecessarily dirtying up my markup?

Because I’ve already applied the position / top / z-index attributes in the CSS markup, both texts should appear ‘stacked’ and the text gradient will be in full working order.

Now to complete the look, I added the text-shadows to the h1 element

h1 {
position: relative;
font-family: ChunkFive, arial, sans-serif;
font-size: 72px;
line-height: 66px;
text-transform: uppercase;
font-weight: normal;
text-shadow: 0 2px 2px rgb(255,255,255), 0 4px 8px rgba(0,0,0,.4);
}

There we have it, voila! Click the button below to see the final result. As you can tell, this isn’t necessarily a tutorial, but more of a guide.

View Final Result

I’m giving you the chance to win a Limited Edition copy of Andy Clarke’s latest book, Hardboiled Web Design. It really is a great book and I highly recommend that every designer / front-end web developer should have this on their book shelves.

“If you’ve been working on the web for a while, your bookshelves may already be buckling under the weight of books about HTML and CSS. Do you really need another one? …

… Hardboiled Web Design is different. It’s for people who want to understand why, when and how to use the latest HTML5 and CSS3 technologies in their everyday work. Not tomorrow or next week, but today. It won’t teach you the basics of writing markup or CSS, but if you’re hungry to learn about how the latest technologies and techniques will make your websites and applications more creative, flexible and adaptable, then this is the book for you…

… Are you ready to get hardboiled?”

All you have to do is retweet the message below and leave a comment on this here blog post explaining why you should win the book. Be original as possible, be creative, heck, why not even push the boat out and add some humour?

Don’t put things like “I should win because this would mean the world to me” – it’s a book, not an Oscar.

“WIN a Limited Edition copy of Hardboiled Web Design by Andy Clarke from @matthewleak — http://bit.ly/fgtFEq”

Retweet to Win

Don’t forget to leave your comment down below! Closes in 7 days – 02.02.2011

WINNER of the copy of Hard Boiled Web Design that i’m giving away is, according to random.org; @nocturnalmonkey —http://bit.ly/fGlmxu

So what mouse am I actually talking about?

A great feature of this mouse is the scroll wheel. It glides through web pages depending on the velocity of your flick on the wheel – It’s incredibly cool. If you click the button that’s sat just behind the scroll then the scroll wheel’s ‘glide mode’ (as I like to call it) is turned off and you have the more conventional clicky scroll wheel.

It’s a wireless mouse but comes with the necessary hardware to turn the mouse into a wired one if that’s more your thing. Another cool thing is that you can plug this mouse into your mains for a super quick recharge, or even to charge while you work because the battery has died on you.

But the best feature of all has to be this, without a doubt. On the part of the mouse where your thumb rests, there’s a button and when clicked, all of your open windows / programs are thrown into a sort of exposé-style gallery and you can click the window/program you’re needing. This is so so so cool and incredibly handy. I will no longer be needing Alt + Tab – See this screenshot.

As with any great product, there’s always a catch. Only with this product, there’s 2.

1. Sorry lefties, this is for right handers only. (as far as I’m aware there’s no left hand version of this product)

2. The price tag. At $99 it’s not that cheap. £69 on eBuyer and £58 on eBay

I highly recommend that all right handed designers purchase this mouse, it’ll definitely be a worthwhile investment.

So without further ado, let’s get to it.

The afternoon session kicked off with Tim Van Damme, who talked about web apps and how it’s important that they should be kept simple (and he’s totally right!)

He also gave some extremely good advice to designers. He said, on each project create a list of pros and cons of the finished piece and keep it. Then, on your next project have that piece of paper with you and try and correct the cons. Personally, I think that’s what every designer should be doing anyway, it’s the only way you’re really going to better your skill set as a designer.

ps. His work on Gowalla is amazing…

Next up, it’s Greg Wood. His talk about Art Direction on the Web was great, and thinking about it now, it was also a bit of an eye opener. He based his talk on a series of tests that he carried out by testing the none-designers’ response to Art Direction on the Web.

His first test was a web page containing information about the T-Rex. He had two versions of the same text, one version was formatted in a very simple way and the other was an art directed post containing diagrams and pictures which aimed to attract more interest.

His second test was based on a Jamie Oliver recipe, and he did exactly the same thing as test 1. One recipe, two versions, one formatted in a simple way, and the other an art directed post.

His conclusion (as expected) was that Art Directed posts are generally more well received, but the Web is full of consumers who don’t really care for Art Direction on the Web and take the nice sites they see for granted.

… “Art direction is about evoking the right emotion. It’s about creating that connection to what you’re seeing and experiencing.” …

Veerle Pieters was up next talking about inspiration and how to become inspired. Like most designers, I’m always looking for inspiration when working on projects and so I was eager to hear what she had to say, and the stuff that she did have to say, well, it was so true.

I don’t really know how to put her main points into a paragraph so I’m just gonna quote them directly.

… “Inspiration is Everywhere” …

… “Don’t focus too much on finding the answer. It will come when you least expect it” …

… “By using trial and error on one idea, it could inspire another” …

… “Experiment!” …

Andy Clarke was up next who compared the Web to Comic books. He said that Comic books could help with pacing in web design. In comics, the size of the comic strip / panel indicates the amount of time you will spend reading. The larger the panel, the longer you’ll spend reading on that panel and the shorter / more broken the panel, the less time you’ll spend reading.

…”Getting the reader to think can be a very good thing in the right context.” …

This guy’s talk was another eye opener and made so much sense (as you’d hope) so I went and bought his book, Hardboiled. I’ve been recommended by many to buy this book and I’m glad I did. I’m only 50 pages or so in and I’m already hooked.  I recommend you buy the book too if you haven’t already done so and you’re a fellow web geek.

Fuck me, what a great end to a brain-mashing day. This guy is hilarious, a Legend, and a stationary-obsessed fellow Mancunian. This guy really put on the perfect end to a great day. When I saw the title of his talk, “Produced for Use”, I kind of expected his talk to be about good User Interfaces and stuff, but no, it was about a fucking spaghetti measurer. Genius. (his talk that is, not the idea of a spaghetti measurer).

I emailed Magnetic North in the Summer asking if they had any work or anything going. I got a reply from the agency saying that they liked my work, but there was nothing available at that moment. If I’d have known how cool this guy actually is, I’d have worked for biscuits.

In a sad but cool way, I really do wish that this guy was my Dad.

I know I’ve already said this, but I just wanna say another Thanks to @Colly for putting together an amazing event. You can really tell how much ball ache he put into organising the event, so yeah, Thank You. This was my first conference that I’ve attended and I don’t think it’s going to be the last. I hope #naconf will return next year…

ps. the newspaper is mint.

This one goes to @craftedemz, who, after talking to for a while on Twitter, I finally met at #naconf. He’s actually quite funny and a nice all round chap.

Unfortunately though, I did miss the opportunity to catch up with @chrisspooner who I’ve been meaning to catch up with for a while now. He must be a ninja with a power to turn invisible or something because I could never see him during the breaks – Maybe next time, ey?

This was the first #naconf event (and i’m sure it won’t be the last) and it was a definite success. Props must go to Mr. Simon Collison for all the hard work he’s put into the event. I liked his little talks, and I especially liked it when he said

“… and we weren’t looking to make a profit”

Good man. I don’t think you should really try and profit from others desire to learn. For a conference, I thought the tickets were crazy cheap. I attended as a student and so my ticket cost £60 which I think is an amazing price for such a high-profile event.

Anyway, on to the days events…

8:45 am and me Pudny find ourselves in a large queue outside the Albert Hall, but what do you expect at an event like this where 600+ people have to go through the doors and the majority had been on the beer the night before? It didn’t bother me and I certainly wasn’t going to let it try and ruin the day ahead.

A little later than anticipated and the conference begins with an introduction from Simon. 10 minutes later and we’re off. On to the stage walks Dan Rubin.

Dan talked about the new language of web design and how specific words have power as our industry grows up. I especially liked it when he talked of how ‘borrowing’ words from other industries can cause confusion, the main one(s) being ‘page’ and ‘page size’. He said that we need to establish ground rules in the industry to eliminate the confusion.

(If anyone has the picture of Dan and the C*** background, send it my way!)

Next up, Mark Boulton and a New Canon. He said that by building responsive systems it will allow us to complete the task at hand. His key point, which I agreed very strongly with, is that we should

… “work with what know and define a grid based on content”

Backing this up by saying we should work content out and not canvas in. That way we create connectedness and bind the content to the device. Man, this guy’s influential. Kinda like a Superhero.

Up next, Sarah Parmenter and her talk about Crafting User Experiences. Her talk was definitely one of my favourites because I felt it was one of the most relevant to me. Not only did she talk about the actual design of user interfaces, but also the Psychology. She showed a graph of the click through rates to her Twitter account when she rephrased the ‘follow me on twitter’ text multiple times. I can’t remember what the texts were so if someone could fire over a picture of her graph then that would be cool.

Brew time – time to let the tea refuel the brain …

Back in my seat and it’s time for Elliot Jay Stocks to take to the stage. Man, this guy is an actual legend. The points he was coming out with were so unbelievably true! My favourite point of his talk was this:

… “with lots of good design, there’s a lot of shit.”

He went on to say that just because we have all these new fantastic features in CSS3, we don’t need to use them. It’s alright to use them, but there’s a line that you just don’t cross, the over kill line. I think the best way for me to help you sum up Elliot’s talks / key points would be to point you to the sketch of the talk that was done by UBelly. (click it, or can’t you because it has no gradient/round corners? tehehehe).

Resources:
Affordances and Design — http://jnd.org/dn.mss/affordances_and_design.html
Tim Brown – More Perfect Typography — http://vimeo.com/17079380

Finally for the morning session, Jon Tan. I love what this guy had to say. It was related to Language and the Lizard Brain. Apparently this part of the brain’s job is to process emotional reactions (according to his neighbours neuroscientist friend) and that is why we have emotional reactions to forms and colour. He then proved his point by showing examples of typography. He had the word death or hate (but in a different language, can’t remember which) in the Bello font and the word Love (again, translated) in an angry-looking death metal type font. But because of our reaction to the niceness of the Bello font, we immediately assumed that the word was a nice word and vice versa. Powerful stuff or what eh?
(ps. where did you get your kicks & jacket Jon? Folk & Patagonia if anyone else is interested)

I was certainly mind fucked at the end of Jon’s talk so it’s a good thing it was time for lunch after. Speaking of which, those ‘lunch in a bag’ bags were pretty awesome.

I’ll write about the afternoon’s events tomorrow in part 2 and then probably merge the two posts together or something? I dunno.

Part 2 – http://www.bigbadbobthefish.com/leakys-adventure-to-naconf-part-2/

Every item that shows up on your News Feed is considered an Object. If you have an object in your News Feed, ie: a status update, whenever users interact with that Object they’re creating an Edge, which includes such actions as ‘like’ and ‘comment’.

Each Edge has three important components:

1. Affinity Score between the viewing user and the Object creator – If you send your friend a lot of messages and regularly check their profile, then you’ll have a much higher affinity score for that specific user than you would, say, an old acquaintance you haven’t spoken to for a few years.

2. Weight – There’s a given weight to each type of Edge, for example, a ‘comment’ has more importance than a ‘like’.

3. Time – This is the most important factor in the EdgeRank algorithm. The older an Edge is, the less important it becomes.

Multiply the given factors for each Edge, add the Edge scores up and voila, you have your Object’s EdgeRank. The higher the EdgeRank is, the more likely your Object is to appear in the user’s feed.

FYI, creating an Object is also considered an Edge, which is what allows Objects to show up in your friends’ feeds before anyone has interacted with them.

Why have I blogged about this? I’m currently working on something  that will use a similar algorithm and I thought I’d share my homework in case some of you are interested.

One of Lord Sugars Aides clearly proved that he knows as much about I.T terminology as a farmer does about plumbing. Usually I’d let such an easy mistake slip but when you’re named Bordon Tkachuk and you’re the CEO of Viglen Computers, it turns into something else.

While giving Baggs a grilling over his ‘fully-licensed’ telecoms business which actually isn’t so fully licensed, he says:

“… I know what an ISP is – Internet Service Protocol”

and he talked of it allowing

“…internet connection over bandwidth”

If the man doesn’t know such a simple thing about I.T then how and why is he the CEO of Viglen Computers? Beats me. For those of you not in the know, ISP stands for Internet Service Provider.

The second this was aired, tens of thousands professionals jumped on Twitter and began to shoot from the hip:

“#WhatIsAnISP? Internet Sugar-Panderer? Internet Service Plonker?”

None of this would matter if Bordon hadn’t been hammering into Baggs about whether he really did own a telecoms company. Bordon insisted he didn’t – Baggs insisted he did.

Bagg’s company, BlueWave, offers wireless hotspots and has an IP microwave link to the UK mainland to provide IP datacomms to businesses on the Isle of Man. Now I don’t know about anybody else, but to me that’s definitely “telecoms”.

Bordon Tkachuk – you’re fired?

This time my blog is running under the alias Big Bad Bob the Fish. I’ve no idea where this came from, so don’t ask – It just seemed like a good idea at the time. I guess this is going to be a personal journal / diary type affair. So, sit back, relax and wait to read…

If you need any web design rochdale services then, be sure to Contact Me.