Skip to main content

Prettyfying with CSS

Image
By

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;




Labels:

Comments

Post a Comment

Popular posts from this blog

Setting up Qt Creator for assembly

By
After fiddling with inline asssembly (not very successfully) ,I recently decided to try writing proper assembly and compiling with NASM in Linux. After writing a hello world using gedit and having a terminal open for compiling,linking and running I had a thought.,there has to be a better way to do this. So I tried Qt Creator ,because I know it's easy to add custom build and run commands,and what do you know? I got it to work. Here's how,my screenshots and assembly code are in Linux but the set up should be the same regardless of the operating system,if you are not using Linux then just use the same commands you use to assemble in your operating system. First off ,create a new console application: I named mine ASM Rename the main.cpp to main.asm and delete all the text inside.then insert some assembly: Now open up the “Project” tab and edit the build settings,remove the current build and clean steps and remove the “-build-desktop” from the en
7 comments
Read more

Using delegates in Objective-C

By
Why use delegation? Well when writing Objective-C programs in Xcode we are encouraged to use the MVC(Model View Controller) structure.In MVC a model cannot send messages directly to a specific controller.This can become a problem if data in your model changes independantly and you need to update this information in your view via the controller(The model must never communicate directly with the view).This is where a delegate comes in,it allows messages to be sent from the model to a controller that is not specified in the model but is rather specified by the controller,in other words the controller specifies itself. If you dont really understand what im talking about so far ,don't worry.I didn't understand delegates either until I needed one,but hopefully by the end of this tutorial you will understand not only how to use a delegate ,but the reason you would want to use one. Program breakdown For this tutorial we will write a program that has a model that will change an
13 comments
Read more

Software Developers Experience building a robot Part 2(Tank treads and blue smoke)

By
Tanked As I mentioned in  part 1 , I had drawn the conclusion that legs were not what I wanted and that tank treads are probably the most overkill for weight bearing. So , I ordered a Rover 5 base. Rover 5 robot base Unforeseen requirements When the Rover base arrived I opened the box to discover something I had completely overlooked; I didn't have a motor controller. With no clue of what an H-Bridge was and a new found determination I decided to build my own motor controller using about 6 relays. It was finally time to get serious about soldering on those proto-boards. I used a breadboard to prototype a system that used 6 relays and 4 transistors. You could hear the loud clickity clack of the relays as the direction changed but I was pretty proud of my ingenuity. It was time to solder! This was the most intricate soldering task I had ever undertaken and it really showed that I'm more of a software kind of guy. I perceived it to be the longest time I have eve
Post a Comment
Read more