Mr.Agron

Process work from Mr.Agron

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…

Advertisements

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))

);

 

Work Backwards to Understand CSS Structural Pseudo Classes

USEFUL VIDEO: Nth child.

I am beginning to change the layout on my online portfolio.

I have added a small navigation bar and applied rounded corners to “content holder”. I also set up a twitter badge on my about page… Planning on changing it to a better looking, less common one.

I have added two more images of a classmate’s page who used multiple backgrounds to create the effect of clouds overlapping each other when the page is shrunk or stretched.

CSS Print Style Sheet

This is a pretty good Print Style Sheet that I found online. It is really helpful that it shows the full URL next to links. Something that you wouldn’t be able to see if you printed it with a Print.css (it would probably just look underlined).

Print.css

body {
background: white;
font-size: 12pt;
}
#menu {
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent none;
}
div#content {
margin-left: 10%;
padding-top: 1em;
border-top: 1px solid #930;
}
div#mast {
margin-bottom: -8px;
}
div#mast img {
vertical-align: bottom;
}
a:link, a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
#content a:link:after, #content a:visited:after {
content: ” (” attr(href) “) “;
font-size: 90%;
}

Reading: Chapter 2 of “Stunning CSS3”

From reading this chapter I learned how to style speech bubbles in CSS. I am not sure how to code an actual website with working comment section, but it is very useful for websites that already have a comment section. This way if a website already has a comment section (like a blog with comments) I could make that look like speech bubbles.
It is all smoke and mirrors! The tail on the speech bubble is completely made in CSS and rotated around and placed right in that section of the text box to make it look as if it were a speech bubble.
CSS is a monster and I really want to know a lot more! It is amazing all the things you can do with it. Also, It is interesting to me how different browsers have little differences in the coding (ie. Webkit, Moz, O). They are little details that a true web designer would know to make sure a website he designed works in every browser.

Some Useful Links

Here is a list of webpages that I find useful. I will update this list as I discover (and remember to add) more.

http://kuler.adobe.com/
http://designerstoolbox.com
http://digitalmediaminute.com/reference/entity/

Web Optimization

I just ran my website through http://www.websiteoptimization.com/services/analyze/ and it seems that I need to combine my JavaScript into one file because right now the file size is too large. Also, I am hoping to learn how to use sprites to use less images and icons.

—–Here is a summary—–

Ok! First Post

Iphone banh mi wayfarers raw denim freegan, portland salvia cardigan etsy locavore. Banh mi banksy helvetica, pitchfork before they sold out cliche 3 wolf moon cred next level stumptown terry richardson. Organic irony vegan fanny pack. VHS cardigan vice, high life skateboard dreamcatcher chambray DIY Austin irony raw denim. Thundercats cosby sweater iphone, banh mi keffiyeh photo booth jean shorts PBR fanny pack marfa brunch cliche lo-fi. Readymade tumblr put a bird on it sustainable +1, irony wes anderson etsy raw denim shoreditch twee portland. Freegan vice etsy, blog cardigan hoodie messenger bag salvia photo booth scenester.

Bicycle rights before they sold out vegan banksy pitchfork marfa thundercats lo-fi, portland twee. Whatever letterpress aesthetic, put a bird on it chambray craft beer leggings VHS messenger bag gluten-free iphone vice. Gentrify mustache twee carles trust fund letterpress. Next level banh mi yr, quinoa messenger bag raw denim mustache mlkshk hoodie cosby sweater. VHS fanny pack readymade, organic synth etsy stumptown squid mixtape twee cliche. Keytar gentrify wes anderson tumblr, fixie bicycle rights sartorial carles thundercats farm-to-table biodiesel high life terry richardson. You probably haven’t heard of them next level hoodie single-origin coffee, put a bird on it quinoa DIY aesthetic retro pitchfork.

Carles twee aesthetic, wes anderson put a bird on it tofu photo booth. Shoreditch art party sustainable DIY vegan pitchfork put a bird on it, high life portland etsy tattooed locavore. Fap organic viral art party, photo booth keffiyeh craft beer pitchfork terry richardson. Shoreditch lo-fi american apparel chambray, gluten-free cosby sweater butcher cliche wayfarers thundercats locavore art party. Terry richardson fap yr, sartorial brooklyn vice cliche lo-fi. Etsy terry richardson bicycle rights single-origin coffee next level. Cosby sweater food truck lomo raw denim brooklyn.

+1 terry richardson thundercats, mlkshk put a bird on it tofu squid next level cardigan iphone letterpress sartorial wes anderson. DIY etsy letterpress 3 wolf moon high life, banh mi organic vinyl craft beer fanny pack locavore williamsburg sartorial. Dreamcatcher VHS brunch, tofu terry richardson jean shorts retro locavore skateboard iphone seitan high life fixie. Squid DIY raw denim, +1 retro blog yr. Hoodie PBR art party keffiyeh. Artisan cardigan brooklyn, retro keffiyeh gluten-free DIY before they sold out tattooed ethical fixie leggings. Skateboard iphone irony, whatever fap terry richardson helvetica gentrify retro tofu letterpress sartorial bicycle rights readymade wes anderson.