Skip to main content

Prettyfying with CSS


The internet is filled with tutorials on how to do nice effects with CSS,so I decided to fill it more by doing a tutorial on 3 effects: Rounded corners,Shadows and gradients. At the end I will show you an example of what can be done when you string these 3 together.

WARNING: A lot of this stuff may not work in Older browsers,if your browser does not support these styles ,the following link may help http://www.mozilla.org/.
If you need to see the pictures below more clearly,click them.
First off ,lets create two files one html file and one CSS file hello.html and style.css.

Lets start with setting up the CSS so we can get a nice layout.

body
{
font-family:Arial;
background-attachment:fixed;
width:800px;
margin:5px auto;
background-color:#696969;
font: normal 10pt Arial,Helvetica,sans-serif;
}
#pageDiv
{
background-color:#ffffff;
padding:3px;
}

Then set up the html file.

<html>
<link rel="stylesheet" href="style.css" type="text/css">
<head>Hello world</head>
<body>
<div id="pageDiv">
Here is some content<br/>
There isnt much
</div>
</body>
</html>

Opening hello.html with your browser should result in something like this:
Rounded corners

Now lets round the corners of pageDiv by adding the following code to the #pageDiv block of the css.

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

The three lines all do the same thing but for different browsers.

Your website should now look like this:

Shadows

To Add shadows ,simply add this code to #pageDiv:

-moz-box-shadow: 5px 5px 5px #424242;
-webkit-box-shadow: 5px 5px 5px #424242;
box-shadow: 5px 5px 5px #424242;

Result below:

Gradients

Now lets add a gradient to the background,do this by adding the following code to the #pageDiv block of your CSS

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DEDEDE', endColorstr='#B3B3B3');
background: -webkit-gradient(linear, left top, left bottom, from(#DEDEDE), to(#B3B3B3));
background: -moz-linear-gradient(top, #DEDEDE, #B3B3B3);


The result is shown below:
Example

Below is a web page I made using only these styles,the only thing that is on this page that I haven’t listed is the inner shadows I used on the navigation links in the header.

To make an Inner shadow ,you can use the following code:

-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;




Popular posts from this blog

Running Node.js alongside IIS on Windows

Most of the time when you are looking for a way to run Node.js as a production server on Windows you will just run into IISNode , now IISNode is a great thing ,but I'm a fan of choice and most importantly , not a fan of XML web config files.

I wanted to run my node server on what ever port I wished,or maybe even a different server and just have IIS reroute the traffic from a particular URL to the node process(so a proxy), this allows you to still manage your own load balancing and possibly scale up from that point without having to bother with IIS again.

So first things first you will want to download and install the URL Rewrite and ARR modules for IIS

ARR (Application Request Routing)URL Rewrite Once thats done lets crack open IIS and open up Application Request Routing, then navigate to Server Proxy Settings and Check Enable Proxy and Apply.







Now lets create an an application on our Default Website that will link our url to the node process, here im directing it to an empty direc…

Half-Life 2 for OSX , how well does it run?

Earlier this week Valve advertised Half-Life 2 for the Mac with the best advert I have ever seen. They took the old 1984 Mac advert and re-created it using the source engine and characters from the game. As if the awesome(albeit 35 second) entertainment wasn't enough they offered the game at $3.40 for a limited period. It was not shortly afterwards that I made my first ever purchase on Steam(its kind of strange buying a game and not getting a box with it).




The game purchase actually allows you to download the OSX or Windows version of the game , depending on the platform you are logged in to .This is great , because I have a PC with some decent gaming power and my Mac Mini (which I naturally wanted to test on) and wow ,the OSX version runs pretty darn well,especially considering that my mac mini is running only an intel HD3000.



Performance
I was surprised how well the game performed on high settings , the gameplay was smooth with the default high settings , reaching frame-rates up …

Controlling an LED on an Arduino over HTTP

Prerequisites
You will need node.js and npm installed , and should have at least some knowledge when it comes to node, if you do not , I suggest you try some example code in node before diving into controlling hardware with it. You must have the Arduino IDE installed on your machineYou must know how to get an LED working on pin 13 of an Arduino
Set up the Arduino
Wire up an LED to the Arduino on pin 13 and plug it into your development machine. Now we need to get it ready to talk to johnny-five. To do this simply follow the instructions under johnny-five's readme
Set up the project 

Create a folder on your development machine for the project , in this folder create the server.js and index.html files. Copy the code from the files in this gist to the respective files.

Loading ....
We aren't done yet , we need johnny-five and the narf for this to work. In your project directory run the following command:

npm install narf johnny-five

If that succeeded we now have the johnny-five libra…