Using Cool Fonts

Problem: I want use really cool typography on my website! i am tired of Georgia, Arial and all the other “web safe” malarkey. I want something nice!

Solution:  User the font-face rule in CSS3!

so what do you need to do that?

there are several ways and even on-line services that will help you with that. I think the most robust way of achieving this is still to hold and serve the font file yourself. You should get the font file from somewhere.

You can find loads of them here at http://www.fontsquirrel.com/ . Then you should stick it in a folder of your website lets say “fonts”. That’s it now you are serving a font-file, hooray. The next step is to actually declare it on your style sheet. It should be one of the top declarations and it would look something like this:

@font-face{
font-family:"superNiceFont";
src: url("fonts/supernicefont.ttf");
format: ("truetypefont");
}

now you can set the font using the usual way something like


p{
font-family:"superNiceFont", Arial;
}


and there you go job done 🙂

HTML5 Game development

so you want to get into web game development?

this is just an amazing intro / tutorial  to html 5 game development!

check this out

 

Creating Graphics with CSS3

These guys go a bit far, but quite interesting still

 

check it out, CSS3 graphics

CSS3 3D Carousel

want to build a 3D carousel with CSS3 and Jquery?

check this article (only for safari though)

TRON Effects with CSS

Problem:

I want to give a Tron effect to my website/widget/page etc…

Solution:

Well to achieve a Tron effect you just need to style it  using borders and box-shadow. these kind of theme works better in a dark background for obvious reasons. Let’s say you a have an element that will have some content on it.

to create the border you need:

border:Solid 1px #22AFCA;

now to give the extra glow effect you can add:

-webkit-box-shadow:#22AFCA 0 0 5px; ( this is for webkit browsers, get the rules for the rest of the browsers)

you could get really creative and add some CSS3 animations to make the user even more aware of it, but be careful you might end up with a xmas tree.

have a look at the menu in this website : www.quicks.co.uk

CSS 3 Border Radius Tool

Problem:

I want to add Round corners to my designs. but I am in a rush,  don’t want to code it, just want to set the values and copy the code!

 

Solution:

Border-Radius.com – this is cool tool. Its simple and straight to the point. you can set the values and it will spit up the code and will show how it looks, if you are happy then just  copy and paste.

 

Can’t ask much more can you?

gradients with css3

Hi guys a quick one today!

So you want to use CSS3 gradients. but getting the colours and where they should stop its tricky.

well not necessarily, there is some stuff around the internet to help you out.

just like this one here. which was the first I used. have a look its cool!

Create Nice Buttons with CSS3

Hello guys.

As promised a post about creating buttons with CSS3.

This is just a simple example, you can take this away and make it even better.

In this example I have created 3 buttons and then duplicated them but changed the color.

so if you check the example page.

You will see 3 red buttons and 3 blue buttons.

there is no image on them, everything is css3. So starting from left to right, the first is a “div” with some round corners, then I used the Box-shadow rule to make it look

like its hovering or is just a bit elevated in relation to the page. To fill the button I used this the new Background Gradient feature of CSS3. where you can define loads of stuff

to achieve the perfect gradient, to make it even more exciting I used the Text-Shadow rule on the button text so it stands out.

On the second button the difference is that the Gradient is not quite the normal gradient. Basically you have half of the button with one colour and the other half with another colour.

the rest is pretty much the same.

On the Third button I have rounded the corners to the maximum so it becomes a circle. The gradient inside is not linear but radial which goes well with shape of it.

Hey they are bouncing!

Yeah if you opened the page, and hover on the buttons they will bounce a little bit, I did that with animations, they are happy buttons you know. so if they feel you are about to click on them they start

to jump around. the Circle one is a bit of an idiot as I made it jump when you hover out too.

On the animation I manipulate the margin and the box-shadow, if I was to change the margin only and let the shadow remain the same it would look pretty weird, but have a go. Finally I added that buttonish feeling, so if you click on the button it goes down and makes the impression you have squeezed it.

Have a look at the example source code.

Thats all folks. hope you enjoyed!

OOCSS

Is this the way to go with CSS?

Object Oriented CSS is this really a good thing?

have a look here and let me know?

PS. Preparing a post about buttons with CSS3 . watch this space soon

Spice up you images part 2

Hi all,

Last post about spicing up your pictures was a bit of a let down for some people. so  I came up with a better one.

This time we have a working example and the source code too.

you can see what I am talking about here

On the example page you will see the images I used( my next xmas purchase by the way).

then you will see the images with a kind of a framed border. I achieved that by putting some padding on

the image class and setting the background to white.

the next strip is using rounded corners this should work on Internet explorer thanks to PIE.

the last strip shows what you can do with the transform property that exist on CSS3 ( probably won’t work on IE even with PIE).

all the images in the strips have a nice “interactive” feel, they nudge a bit when you hover them.

I did this by removing a couple of pixels from the top margin.

if you want to play around you can get the source code here

 

ok thats all folks!

hope you enjoyed this and don’t find this too lame.

Any feedback is appreciated.