#dsdn112.pro1.process

[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]

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]

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.

[cmudgway-blog]

Website Reviews

  http://www.thetownthatcameinfromthecold.com/

This website is interesting because of the interactive design that makes the user want to keep scrolling. I liked the affect of traveling through the town to find out about it because it felt like I wasn’t just scrolling to find out information but also felt like a real life birds eye view of the town. The other interactive thing I enjoyed about this website was when you “arrived” at the town landmarks you can click on them. By clicking on them it brings a pop up with either a video on the town history or information. This website makes the user know what to click on because of the colour scheme and the well recognized play button and info button. The sound also appealed to me. While scrolling down the website you will notice that the sounds drain out from where your next to a river and then going pass animals and really makes the interactive with these website more fun and interesting.

2.   http://www.mixd.co.uk/

This website is clean, functional and easy to use. The colour scheme is well thought out and I enjoyed the how every page is a different set of colours. The site is easy to navigate around the pages with a clear tab of the pages at the top. This tab is good because when you hover over it with the mouse it underlines the page you are going to select. This is a great feature and makes the website more helpful and makes life easier for the user. The pages have a good mixture of text and visual images. The text is usually bold and the colours help make it stand out. This teqnique helps bring your eye towards the text and you find yourself reading it. I liked how simple yet affective this website design is. The bold yet plain colours catch your eye and the layout of the webpage is easy to navigate.

3.   http://www.toast.co.nz/

This website first caught my eye because of the introduction to bright colours as soon as you are on there home page. The slideshow of images at the top banner is a good feature and adds to the website well. This catches the users attention immediately. The tab to the rest of the pages is easy to find and stands out well and is easy to keep track on what you are going to click on by turing from white to orange. What i liked most about this website was the top banner while scrolling. It seems to not scroll with the rest of the page which is a good touch of design to add to this websites layout. The pages are fairly simple, the colours of the text and background work well together and they keep the same colour scheme on all the pages. This website is easy to navigate through because there aren’t to many pages and is goodly designed.

4.  http://thekingsofsummermovie.com/

This website is interesting because of the visual approach the designers have taken. The website is basically made up of only pictures which is entertaining for a little while. I liked how some of these images are actually small bits out of the movie that keep playing, this adds some movement to the website and makes it more compelling to the user. I enjoyed how much of the visual approach they used and that some information can be found by clicking on different animations that pop up while you are scrolling down the screen. The tab at the top of the screen is easy to miss because of its size comparison everything else on the page. The tab also doesnt change the page it actually just takes you to that part of the page which I found interesting because not a lot of websites actually do this. To me i found this a minor dislike about the website but the visuals were good and well thought out.

5.  http://fairstate.coop/index.html

I know this is an alcohol related website but its about the design right? I liked the layout of the home page of this website. While scrolling it has backgrounds which work with the over composition of the page. The colours seemed odd to me, they seemed like they didn't really have much relevance and were just used. The tab to the other pages is small and hard to notice because it is at the top right of the screen and should have been considered bigger. Once you got on to the other pages it just felt like they could have been less words and more pictures or just more pictures. Comparing the rest of the pages to the home page they lacked the creativity and needed something more done with them. The transition on the end of every page from white to black is sudden and doesn't work well. If there was more of a gradient toward the end i think they could have executed this better.