Blueprint tumblr theme – Personal/Commercial

I have been developing a theme for tumblr and its now almost complete you can see an example of the theme on the link below a few things to iron out before I submit the build to Tumblr.

View the theme preview

I’ve finally got round to submitting the blueprint theme to tumblr, its been a long time in the waiting. Hopefully it will be accepted but as its my first time doing this there will probably be a few changes I’ll need to make before it will be available for you all to use. Fingers crossed

Finally going to be able to get back on treehouse and finish off all the html and Css badges, then I might get to take a look at the IOS4 foundation projects which will be fun learning something completely new to me. Just listened to an interview with Ryan Carson (the founder) and some exciting things in the works for treehouse particularly interesting is the partnerships they have set up with some big businesses who will be using treehouse to potentially hire employees sounds great!

Check out my team treehouse profile at http://teamtreehouse.com/Jakedickinson theres also a link in my nav bar on the left

A responsive wood inspired design

So been playing around tonight with Less CSS and responsive design and have thrown this together its nothing overly special but I like playing around with new things

After I’ve finished my other theme off I might turn this into a theme what do you think?

I’ve been a member of dribbble for a while now and enjoy looking through the galleries at what people have been creating, but I have always wanted to post my own shots, and now I can!

Hopefully I’ll get some invites of my own sooner or later and can draft some other people in to post there images, link to my profile is with the other nav links on my site (although my dribbble is a bit empty for now)

So I’ve been working a bit more on this website(the one your on now) and I have implimented media queries so the site should now work on smartphones now – to some degree (its tailored to iPhones at the moment). I’m quite pleased with how its working you can check it out by resizing the browser to under 420px, Still needs a bit of tweaking and I need to impliment a design in-between full res and the mobile version for ipads and smaller screens as the content currently gets chopped off.

If your interested in media queries and responsive design I recommend a list apart blog the author Ethan Marcotte founded the term and has written an excellent short book on the subject and its well worth a read. I’ll update this post with a link as soon as I get a chance.

How to create completely Css3 3D buttons with hover effects (like the ones on the left)

To view what we are about to create click here

Lets first start with the HTML all we need here is an anchor link

 <a href="#" class="button blue">A nice CSS3 Button</a>

I’ve given our anchor tag a class of button and blue. The button class is for the base button style and blue is to colour this button blue. Lets move onto these Styles I’ve tried to comment to show what we are doing. If theres anything else you want to know just leave a comment.

Base button class

 .button{ font-family: adelle,serif; font-style: italic; font-weight: 300; /* Set out text background color*/ color: #ffffff; display: inline-block; /*give the button some padding 5px top and bottom and 10 on each side*/ padding: 5px 10px; margin: 5px 0; /* remove the underline from our text*/ text-decoration: none; /* add a transition so when we hover the button will move down over .1s*/ -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; /* give our button some fancy rounded corners*/ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } 

Hover class for button

 .button:hover{ /* make the positon relative so we can move the button*/ position: relative; /* move the button down 4px*/ top: 4px; /*remove the shadow of the button we are yet to add this we will add the shadow with the colour class*/ -moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; } 

Adding different colours

We now have the base styles for our buttons done but they wont work right yet we need to add a colour class. You can alternatively add these colour class styles into the above styles but if you want to make multiple different coloured buttons this is a good way to do it.

Blue

 .blue{ /* adding a border darker than our background colour*/ border: 1px solid #0b4678; /* a 3 stop gradient to add a nice button colour effect change the colours for different buttons */ background: -moz-linear-gradient(90deg, #2e88e4 0%, #4badee 93.4%, #8cd7f3 100%) #3da1e9; background: -webkit-gradient(linear, left bottom, left top, from(#2e88e4), color-stop(0.934, #4badee), to(#8cd7f3)) #3da1e9; /* adding a shadow use a similar colour to your border and a bit of opacity */ -moz-box-shadow: 0 4px 0 rgba(16, 51, 106, 0.85); -webkit-box-shadow: 0 4px 0 rgba(16, 51, 106, 0.85); box-shadow: 0 4px 0 rgba(16, 51, 106, 0.85); } 

Green

 .green{ border: 1px solid #085f0b; background: -moz-linear-gradient(90deg, #30de31 0%, #88f88f 93.9%, #c2fbd1 100%) #5ced70; background: -webkit-gradient(linear, left bottom, left top, from(#30de31), color-stop(0.939, #88f88f), to(#c2fbd1)) #5ced70; -moz-box-shadow: 0 4px 0 rgba(7, 95, 25, 0.85); -webkit-box-shadow: 0 4px 0 rgba(7, 95, 25, 0.85); box-shadow: 0 4px 0 rgba(7, 95, 25, 0.85); } 

Extra things

changing the colour of the button on hover as well – add a hover effect to .blue or your other colour of choice

 .blue:hover{ /* add border bottom if you remove it from your colour choice*/ border-bottom: 1px solid #0b4678; background: -moz-linear-gradient(90deg, #4badee 0%, #2e88e4 94%, #8cd7f3 100%) #3da1e9; background: -webkit-gradient(linear, left bottom, left top, from(#4badee), color-stop(0.94, #2e88e4), to(#8cd7f3)) #3da1e9; } 

If you found this at all useful please tweet this and leave a comment letting me know and I may do more in the future.

View Demo

So was looking through the 9-eyes site and got a bit addicted. Some interesting images all from google street view. Spent a bit to long going through them, it’s a good idea for a blog. Check it out on the above link if you have some spare minutes.
]]> http://www.jakedickinson.co.uk/google-street-view/feed/ 0 http://www.jakedickinson.co.uk/treehouse/ http://www.jakedickinson.co.uk/treehouse/#comments Tue, 08 Nov 2011 14:02:38 +0000 JakeDickinson http://www.jakedickinson.co.uk/?p=633 Continue Reading »]]>

Team Treehouse

So last night I signed up to treehouse from carsonified! I had been looking at think vitamin for a while and watched their free tutorials but had never signed up. What better time to sign up than the day they launched there new site?

I think its worth the money, I seem to learn better completing tasks and watching short videos than reading a big chunky book on JavaScript

I’ve done a few quizzes and picked up a couple of badges I haven’t watched all the videos as some are aimed at completely web beginners which is good, and I’m yet to look at the more complex videos but I’m sure they will be great.

I’ll be posting updates here on my blog and hopefully collecting all the badges soon and more importantly learning new skills! if you want to take a look at my Treehouse profile or the site itself check it out here. I was a little slow on sign up so couldn’t get just /Jake…

Might add a Nav link on the side of my site they are pitching it as a showcase of skills also…

Saw this online trying look at it for about 10 seconds. I’ve always liked optical illusion things like this. Personally never been much good at magic eye books staring aimlessly into a school of fish and only ever seeing the fish so I really like the simple ones

I have a few other cool images like this on my hard-drive I’ll upload them when I get a chance