Adrian Le Bas

Shuffler.fm blog: Dit is de achtste titel

Tue, 07 May 2013 10:10:23 -0400

Shuffler.fm blog: Dit is de achtste titel:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla nisl a dolor cursus convallis. Fusce vel pretium dui. Proin commodo sem in eros vulputate ac bibendum dui pulvinar. Nulla ut sem quam. Pellentesque turpis velit, sagittis et tempor sed, tincidunt id urna. Sed blandit…

leongmartens: LANA DEL REY BLOG MIX OF THE WEEK De Amerikaanse...

Wed, 01 May 2013 10:27:50 -0400

leongmartens:

LANA DEL REY

BLOG MIX OF THE WEEK

De Amerikaanse zangeres Lana Del Rey, bekend van haar hit ‘Video Games’, geeft op woensdag 29 mei 2013 een optreden in de Heineken Music Hall in Amsterdam. Het uitverkochte concert in de bovenzaal van Paradiso in november 2011 was de eerste en tevens laatste keer dat ze in Nederland was. Inmiddels is haar album ‘Born To Die’ bekroond met goud (ruim 25.000 verkochte exemplaren).

Lana’s zegetocht startte, zoals zoveel recente muzikale succesverhalen, op internet. Haar opvallende verschijning en de videoclip voor ‘Video Games’ vol ogenschijnlijk toevallige, nostalgische beelden werden in korte tijd een wereldwijde bloghit. Aan de clip zit bovendien een Nederlands tintje: verschillende beelden zijn overduidelijk geschoten in ons land. Niet veel later was ‘Video Games’ ook niet van de Nederlandse radio te slaan.

‘Video Games’ werd gevolgd door ‘Born To Die’ en ‘Blue Jeans’, afkomstig van haar in januari 2012 uitgebrachte debuutalbum ‘Born To Die’. In het najaar van 2012 wordt Lana wereldwijd het gezicht van H&M en brengt ze een nieuwe editie van haar debuutalbum uit, met daarop zowel H&M-track ‘Blue Velvet’ als nieuwe single ‘Ride’.

youtube doesnt like us anymore

Fri, 26 Apr 2013 06:59:07 -0400

youtube doesnt like us anymore

this is a test :)

Thu, 28 Mar 2013 11:58:44 -0400

this is a test :)

Tasty tasty (Taken with instagram)

Tue, 17 Apr 2012 10:21:50 -0400

Tasty tasty (Taken with instagram)

Bobs! (Taken with instagram)

Wed, 11 Apr 2012 15:51:44 -0400

Bobs! (Taken with instagram)

My first logo design masterpiece, back when I was only 8…...

Mon, 09 Apr 2012 15:24:23 -0400

My first logo design masterpiece, back when I was only 8… (Taken with instagram)

Meanwhile at fishland… (Taken with instagram)

Wed, 04 Apr 2012 17:13:22 -0400

Meanwhile at fishland… (Taken with instagram)

Mr. Beer of the month, aye! (Taken with instagram)

Wed, 04 Apr 2012 17:03:34 -0400

Mr. Beer of the month, aye! (Taken with instagram)

Cinemagraph tutorial… the animated gif renaissance of 2012

Tue, 27 Mar 2012 10:20:26 -0400

Cinemagraph tutorial… the animated gif renaissance of 2012

ok, just one more and im done.

Thu, 22 Mar 2012 16:45:59 -0400

ok, just one more and im done.

there is tension in the air

Thu, 22 Mar 2012 16:44:05 -0400

there is tension in the air

Gotta get out!

Thu, 22 Mar 2012 16:41:46 -0400

Gotta get out!

Jimi Hendrix reading MAD and getting his hair fixed. (title says...

Thu, 15 Mar 2012 15:08:36 -0400

Jimi Hendrix reading MAD and getting his hair fixed. (title says it all!)

fat kid is like “haha now its my turn!”

Thu, 15 Mar 2012 07:38:44 -0400

fat kid is like “haha now its my turn!”

Ohhhhh yeah!

Sun, 11 Mar 2012 07:22:36 -0400

Ohhhhh yeah!

thePENTHOUSEPROJECT

Sat, 03 Mar 2012 09:42:22 -0500

thePENTHOUSEPROJECT:

karinvsoest:

After just winning the awwwards site of the day, Adrian and myself just entered our little weekend project into the FWA! It has been a roller coaster already, but if you feel like helping us get into the shortlist, come check us out!

Using and abusing of thePHP house-style, ready to print A3...

Mon, 30 Jan 2012 09:59:23 -0500

Using and abusing of thePHP house-style, ready to print A3 posters and Tees!

Beautiful html/css sandbox

Mon, 23 Jan 2012 23:53:10 -0500

Beautiful html/css sandbox:

Was looking for the link for ages!

Goodbye Photoshop, Hello CSS3 Pseudo-elements

Sat, 21 Jan 2012 05:00:00 -0500

Good morning, woke up feeling like sharing a little trick that i’ve been implementing in my recent projects…

By now we all know CSS pseudo-elements like ::before and ::after, its great for adding dingbats before headlines or anchors, great for notifications and great for adding that little extra flair to almost anything in a website, without extra markup!

Its about styling that I’ll be talkin about, we all know that graphically bloated websites are a thing of the past, Web Designers, influenced by print, are finally realizing what “less is more” means, the mobile-first philosophy is finally acquiring a decent amount of followers (count me in!) and the top 10 websites of 2012 will most likely be almost fully populated by responsive website (which 2011 didnt see many).

Back to pseudo-elements, more specifically ::before and ::after, i do hope you know what they are if you are reading this, if you dont check http://css-tricks.com/pseudo-element-roundup/ .

Its all about layers, be it layers of objects or layers of effects, i realized that CSS3 today feels like a “chat with Photoshop”, all that is missing are those bloody blending modes (because yes, im an overlay fan), Stick with me here:

You are given 3 layers per markup, the actual object (be it a small span or your html tag), a ::before and an ::after, on each of those, you can set a different color, different shape, different size, different opacity… and stack order, wait did i say opacity and stacking? feels quite photoshopy, doesnt it?

In an era where more and more “CSS3 gradient/shadow/pattern/whatever generators” are popping up like mushrooms, its really easy to replicate your beloved gradient or amazing shadow using lines of code, which brings some questioning regarding browser compatibility and all that, but lets agree here people, that is so 2011…

Okay, enough talking around, check this example: http://jsfiddle.net/YEf2Y/3/embedded/result/

Not much happening there, i agree, but if you look at the css code, there is quite a bit under the hood,

You will find 2 markups with stacking pseudo-elements (using and abusing of transparency) to achieve “photoshop-ish” effects, what im doing is simple, lets take the DIV as an example,

1 - the main object (in this case a fixed width, works just as well fluid) gets a gradient, from half transparent black to full transparent, thanks to http://www.colorzilla.com/gradient-editor/ , and a pair of drop-shadows, specially the quite strong inset shadow (again, rgba, its all about the alpha transparency here!)

2 - the ::before layer gets positioned right behind the object with the same width/height and a padding of your choice so that it bleeds off, and we give it a nice pattern, hosted straight from http://subtlepatterns.com/ , and voila! you have a textured gradient (or a gradiented(?) texture….as you prefer)

3 - the ::after here its optional, but you could easily give that the same width/height as the object, position it between the ::before and the actual object and NO padding, give it a second pattern and you’re left with a nice textured border, pwetty pwetty..

Bear in mind that all this stacking is not possible without the amazing collaboration of the Z-Index property.

So what does all this means?

It means you don’t even need to open (or better yet, depend!) on a software like Photoshop for your graphical needs, bear in mind that im all against website psd mock-ups, what one once called “website paintings”, today is way too easy to http://code.google.com/p/zen-coding/ a clean html5 markup and starting CSSing things out, give your mouse a break (i think every mouse has a trauma of adobe softwares) and say hello to your keyboard (and your http://www.smashingmagazine.com/2010/05/13/css-2-1-and-css-3-help-cheat-sheets-pdf/ if you need one).

Its all about accepting new technologies and their qualities and knowing when to do the move, and above anything, accepting that maybe the approach that you use today are only there due to limitations or lack of proper tools in the past (or maybe they are wrong and we should just rename Photoshop to…iono….Webshop?)