Mr.Agron

Process work from Mr.Agron

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

);

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: