Mr.Agron

Process work from Mr.Agron

Monthly Archives: February 2012

CSS Zen Garden

Our next assignment in class is to create a CSS theme for http://www.csszengarden.com/

I have a couple ideas in mind but I am not sure if I want to use a heavy illustration style or a more simple style.
It all depends on how much time I am willing to spend on it and with all of the other projects I have to work with for graduation, I am not sure that I can go crazy on this. Still, I will do my best.

I am thinking of doing something with paper airplanes or ice-cream…

Something I looked up… CSS Sprites

Here is a tutorial that I got from: http://www.dave-woods.co.uk/index.php/css-hover-icon-menu-using-css-sprites/
I wanted to find out how to animate or add effects to icons in a website to make it more interactive and engaging and less static. It could be useful for doing certain things will I need an icon to disappear and display another one. It also places images in with CSS which I need to start doing…
“”””””
HTML
The HTML is really simple an is just an unordered list with an ID applied to each list item and an empty span which we’ll be replacing with an image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Icons Demo</title>
</head>
<body>
<ul id="navigation">
<li id="digg"><a href="#"><span></span>Digg</a></li>
<li id="reddit"><a href="#"><span></span>Reddit</a></li>
<li id="delicious"><a href="#"><span></span>Del.icio.us</a></li>
<li id="facebook"><a href="#"><span></span>Facebook</a></li>
<li id="technorati"><a href="#"><span></span>Technorati</a></li>
</ul>
</body>
</html>

CSS
Within the CSS, we’ll start off with some generic styling.
* {
padding: 0; margin: 0;
}
body {
font: 85%/1.5 verdana, arial, helvetica, sans-serif;
padding: 10px;
}
#navigation {
list-style: none;
}
#navigation a {
color: #CCC;
text-decoration: none;
}
#navigation a:hover {
color: #666;
}

Next, we can start dealing with the icons themselves and can simply apply the set of icons to the span using the following CSS.

#navigation span {
background: url(icons.gif);
float: left;
width: 16px;
height: 16px;
margin: 3px 5px 0 0;
}

You’ll notice at this stage that all this does is apply the icon in the top left of the image to all the list items. So, in order to change this, we need to move the background image accordingly to display the relevant image within the 16×16 box.
We can do this by using the following CSS to positioning the image accordingly.

#reddit span {
background-position: -16px 0;
}
#delicious span {
background-position: -32px 0;
}
#facebook span {
background-position: -48px 0;
}
#technorati span {
background-position: -64px 0;
}

And finally, we can create the hover effect by moving each icon in turn up by 16px on hover by simply adjusting the background position.

#digg a:hover span {
background-position: 0px -16px;
}
#reddit a:hover span {
background-position: -16px -16px;
}
#delicious a:hover span {
background-position: -32px -16px;
}
#facebook a:hover span {
background-position: -48px -16px;
}
#technorati a:hover span {
background-position: -64px -16px;
}

“””””

A few things I have learned. (Tutorial?)

Here are a few of my favorite things that I have learned in my “Introduction to Web Design” class.

 

Media Queries: this determines the way you will see the website layout, in different devices.

 

You can specify how wide the screen is in your CSS or even tell it that it will be designed for print.
For example:

@media screen and (max-width: 600px) {

body {

font-size: 88%;

}

#content-main {

float: none;

width: 100%;

}

}

 

 

You can change the navigation bar to fit different medias simply by specifying what media it is, like so:
@media screen and (min-width: 1200px) {

#nav-main {

position: fixed;

top: 136px;

width: 13%;

margin: 0;

}

#content-main {

width: 58%;

margin-left: 18%;

}

#content-secondary { width: 20%; }

}

 

There is also a way to change the navigation bar from horizontal to vertical so that it fits better when the webpage is shrunk.

 

First we have to make sure each is link is in its own line. Then we can also apply the following after the “li” and “a” styles:

#nav-main li {

float: none;

margin: 0;

}

#nav-main a {

-moz-border-radius: 0;

-webkit-border-radius: 0;

border-radius: 0;

}

#nav-main {

position: fixed;

top: 136px;

width: 13%;

margin: 0;

-moz-box-shadow: 0 0 8px hsla(0,0%,0%,.1);

-webkit-box-shadow: 0 0 8px hsla(0,0%,0%,.1);

box-shadow: 0 0 8px hsla(0,0%,0%,.1);

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

background: hsla(0,0%,100%,.3);

text-align: right;

}

 

Something really useful that I want to do in my portfolio website is have the navigation links shift upwards when I hove over them. This would be done similar to this:

ICON:hover {
top:-8px;
left:-2px;
-moz-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
-webkit-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
box-shadow: 1px 1px 2px hsla(0,0%,0%,.3); }

 

This is how I create a linear gradient on the background using CSS:

background-image: linear-gradient(bottom, rgb(158,84,108) 12%, rgb(190,118,141) 56%, rgb(228,154,170) 78%);

background-image: -o-linear-gradient(bottom, rgb(158,84,108) 12%, rgb(190,118,141) 56%, rgb(228,154,170) 78%);

background-image: -moz-linear-gradient(bottom, rgb(158,84,108) 12%, rgb(190,118,141) 56%, rgb(228,154,170) 78%);

background-image: -webkit-linear-gradient(bottom, rgb(158,84,108) 12%, rgb(190,118,141) 56%, rgb(228,154,170) 78%);

background-image: -ms-linear-gradient(bottom, rgb(158,84,108) 12%, rgb(190,118,141) 56%, rgb(228,154,170) 78%);

 

background-image: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0.12, rgb(158,84,108)),

color-stop(0.56, rgb(190,118,141)),

color-stop(0.78, rgb(228,154,170))

);