#dsdn112.pro1.process

[nina-estrella]

I was extremely happy to find a progress bar code! Originally I was planning to use several JPEGs, however, planned without the thought of the restriction of only using one image for my professional website.

HTML CODE BASE

<div class="meter"> <span style="width: 25%"></span> </div>

CSS

.meter { height: 20px; /* Can be anything */ position: relative; background: #555; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; padding: 10px; -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); }

.meter > span { display: block; height: 100%; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: rgb(43,194,83); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) ); background-image: -webkit-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% ); background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% ); background-image: -ms-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% ); background-image: -o-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% ); -webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); position: relative; overflow: hidden; }

[nina-estrella]

Slide In Image Boxes code

For future reference seeing as I may not use it in this current project.

footer { clear:both; overflow:hidden; font-size:16px; line-height:1.3; } #footer-boxes { -moz-column-count:2; -moz-column-gap:10px; -webkit-column-count:2; -webkit-column-gap:10px; column-count:4; column-gap:10px; } .footer-box { margin:0 0 10px 0; display:inline-block; width:262px; height:140px; padding:15px; background:#e6e2df; color:#b2aaa4; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; background-position:320px 50%; background-repeat:no-repeat; text-decoration: none; } .footer-box h5 { font: bold 24px Sans-Serif !important; text-transform:uppercase; font-size:38px; line-height:1; padding:0 0 10px 0; } .footer-box:hover h5 { text-shadow:0 0 4px rgba(0,0,0,0.4); color:white; } .footer-box:hover p { color:white; } .footer-box p { font-size:12px; width:175px; line-height:1.5; } .footer-box:hover { background-position:200px 50%; } #f-diw { background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png); background-position:290px -1288px; } #f-diw:hover { background-color:#237abe; background-position:186px -1288px; } #f-qod { background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png); background-position:290px -1448px; } #f-qod:hover { background-color:#37597a; background-position:186px -1448px; } #f-htmlipsum { background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png); background-position:290px -1608px; } #f-htmlipsum:hover { background-color:#333333; background-position:186px -1608px; } #f-qod:hover p { color:#adbde3; } #f-bookshelf { background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png); background-position:290px -1768px; } #f-bookshelf:hover { background-color:#ff8400; background-position:186px -1768px; } #f-html-ipsum:hover p { color:#fff8da; } #f-twitter { background-image:url(http://cdn.css-tricks.com/images/css-tricks.png); background-position:290px -1928px; } #f-twitter:hover { background-color:#4ed2fe; background-position:186px -1928px; } #f-forrst { background-image:url(http://cdn.css-tricks.com/images/css-tricks.png); background-position:290px -2088px; } #f-forrst:hover { background-color:#203f16; background-position:186px -2088px; } #f-forrst:hover p { color: #92c59c; }

[nina-estrella]

Code for rounded box edges:

#Example_A { height: 65px; width:160px; -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px; }

#Example_B { height: 65px; width:160px; -moz-border-radius-bottomright: 50px 25px; border-bottom-right-radius: 50px 25px; }

#Example_C { height: 65px; width:160px; -moz-border-radius-bottomright: 25px 50px; border-bottom-right-radius: 25px 50px; }

#Example_D { height: 5em; width: 12em; -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; }

#Example_E { height: 65px; width:160px; -moz-border-radius: 25px 10px / 10px 25px; border-radius: 25px 10px / 10px 25px; }

#Example_F { height: 70px; width: 70px; -moz-border-radius: 35px; border-radius: 35px; }

[nina-estrella]

CSS code for rotation.

/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

[nina-estrella]

CSS for making website background image fit for all desktop resolutions

Haven't used this code before so will have to test in when making the site.

#background { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0; } .stretch { width:100%; height:100%; }

[cmudgway-blog]

Notes on tutorial for Lynda.com

Good practice is to make a new file in notepad ++ and write all your styles.

Styles can be added to single words or group paragraphs. They can change font type, colour,layout etc.

Selectors-  Changes everything with the style it is eg p , h1 etc.

Can change classes.

ID selectors help narrow what your changing. They can only have one ID name per ID.

Descendent selectors- Elements that descend from elements eg a <p> <a> </a></p>

Hover- a:hover{}

Hovering over elements to help show where your mouse is hovering.

Declaration = propertyName : value ;

Whitespace is ignored just like HTML

Comments are used as /* comment */

 Class can be used multiply time unlike an ID

Crediting new pages for your website, these can be accessed through links on images tabs etc.

[alastairbabbagevuwdesign-blog]

Website Review 5

http://www.marcdahmen.de/

This is a website for Marc Aton Dahmen Architecture. The page is split down the middle and offers two choices either work or images, both pages then operate in the same way. They are set up like a messy photo gallery as if someone has thrown photos across a table. This can be fixed by clicking on a button at the bottom of the page which organizes them into a tidy grid. When the user first visits this page they are given a set of hot keys to use when navigating around it. Unfortunately this system does not always work which can make manoeuvring this website chaotic and irritating to say the least. Even when the hot keys do work they seem to be redundant when the user has a mouse. The best thing about the website is the layout of the information and photos once the user has selected an image to look at. The typeface and layout of the font is well done not only with the shaping of the text but with the colours chosen too, the white writing stands out from the soft light colour pellet. The images taken/made are crisp and nice to look at following the same soft light colours. This is where the success comes from in this website.

[alastairbabbagevuwdesign-blog]

Website Review 4

http://www.dqbooks.com/

DQ Books is “a variable geometry project a four hands graphic improvisation”. The website has a fairly basic boring home page. The layout is well though out it is crisp and clean but the colours do not all work with each other. The simple typeface for the title and small headlines below are effective in communicating it is a professional company. When a headline is clicked on the information under appears quickly and in a tidy layout further emphasizing the professional vibe. On the home page there are four of the companies issues. If the user selects one they are taken to a page where they can then look through the book by clicking on the pages. While the user clicks on the pages music is also played and changes through out some of the books to further engage the user. I enjoyed the smoothness in the way this website operates from quick information loading to the flicking pages in the four issue on the home page. This website is both simplistic and complex at the same time and this works well to create a harmony that is pleasing through out this website.  

[alastairbabbagevuwdesign-blog]

Website Review 3

http://www.deltainc.nl/

This website is a gallery page with photos of many peoples art works stored on it for others to view. The home page is very interesting with a lot of different images assorted into no particular shape or pattern, they are placed like building blocks given to a child, and the irregular shape draws the users eye. The images on the home page are in greyscale until you move the curser over them, as you do so the image the curser is over will change to full colour and you can see it the way the artist indented. If the user clicks on an image they are taken to a page containing a lot more images of the work and some even have the process of setting up the work and other works from the same exhibition. Along with the selected image appearing first on the page selected, the white background through out the website links everything together. This is an very well thought out and put together website. It is smooth and self explanatory there is no need for words on the homepage. Unfortunately there is very little words at all almost none through out the whole website so I found it difficult to get any information on the artist who's work is on this page. However after clicking on the @ symbol on the home page I did discover his Facebook page which had a little more information on him.

[alastairbabbagevuwdesign-blog]

Website Review 2

http://www.screenvader.com/

The Screenvader website has take interaction to an extreme the navigation of the home page is set up on a gyroscope so as the user moves the curser from side to side and up and down the user is moved in that direction around the webpage. The options on the page are contained in little broken rectangles above, below and to the side of the titles. When the user hovers the curser over the rectangle a image or a title will appear as a preview for the user. The site contains random image generators, music tracks, videos and downloads. When an item is selected such as one of the videos the loading sequence for that page is like code going down part of the screen the writing tells the user how many bytes are left to load the page selected. The typeface used has a digital and slightly pixelated look to it emphasizing the computer coding feel to the website. This is website feels like it was designed to make the user feel smart and in control of the whole page while they search through it. This is an interesting approach to engaging the user of the page.

[alastairbabbagevuwdesign-blog]

Website Review 1

http://also-online.com/

ALSO is a web design, print design, illustration and animation company I found their web page very interactive and amusing to use. The user has an engaging experience when he or she clicks on any of the four option buttons: WORK, ABOUT, CONTACT and NEWS. Each of the buttons has a different animation during the loading of the next page. Such as little cars driving on a growing motorway and stoping in a car park for the WORK option. The website works well the animations between each page are short and rather than waiting for the next page to load it occupies the user and entertains them while then next page loads. The is a great way of keeping the user on the site as people are usually drawn to moving things on websites. The home page of the ALSO website has minimal activity and feels crisp and clean with the contrasting white background and blue type. In my opinion this creates a professional look and amplifies the success of the webpage. The only thing I might change about this page is the typeface they use, it is a little simple and slightly childish in my eyes. I feel it both works and takes away from the page, it works because it is basic and flows nicely into the basic animations between each page but as a stand alone piece it looks like a school project not a professional company.