![Page 1: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/1.jpg)
CSS Design Tipsyou know enough css to be dangerous
![Page 2: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/2.jpg)
“Anything design related - push to extremes and then dial back for taste”
-me
![Page 3: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/3.jpg)
“Designing in the browser with any value - nudge, nudge, nudge, too far, back one”
–also me
![Page 4: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/4.jpg)
Hypertext Narrative common design problems
portal project link
images NOT optimized
background image too “busy”
css hover state (should be a hyperlink not hyperactive)
![Page 5: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/5.jpg)
Optimize your imagesREQUIRED
some were 6000x4000 and 9mbNO NO NO NO NO NO NO NO NO and NO
should be 100-150kb not 9000kb
body background images -save for web in PSresize width to 1024px and compress as jpg
foreground images - resize in save for web (PS) to ACTUAL SIZE for the web page
html img tag attributes height and width now banned
![Page 6: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/6.jpg)
Background Image (careful….)
can be distracting/conflict with your content
put a transparent color layer behind your content to separate it from background image
![Page 7: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/7.jpg)
css hover state
visual feedback = good
disruptive experience = bad
text should not jump around on the page when you “mouse over”
![Page 8: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/8.jpg)
nav links
links are a list <ul><li><a href=“#”>link</a></li></ul>
use css to get rid of underline, bullet points, and put them in a row (horizontal nav)
![Page 9: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/9.jpg)
nav a -define font family, size, padding, remove underline
nav ul li -remove bullet points, display inline-block (horizontal row), add margin-right to space apart
nav a:link, nav a:visited, nav a:hover, nav a:active -define colors.
![Page 10: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/10.jpg)
css resetuser agent styles (browser styles)
problem is every browser defines the user agent styles differently
solution is to reset them all
* {margin:0; padding:0;} = easy
add back in margin-bottom to headings, paragraphs and lists
![Page 11: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/11.jpg)
advanced css reset
normalize
https://necolas.github.io/normalize.css/
covered in “creative dev tools” course
![Page 12: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/12.jpg)
Moodboard
type of collage consisting of images, text, and samples of objects in a composition
visually illustrate the style they wish to pursue
![Page 13: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/13.jpg)
![Page 14: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/14.jpg)
![Page 15: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/15.jpg)
![Page 16: CSS Design Tips - creative.colorado.edu€¦ · css hover state (should be a ... foreground images - resize in save for web (PS) ... put a transparent color layer behind your content](https://reader035.vdocument.in/reader035/viewer/2022071107/5fe1e2f55586814a0b7095b6/html5/thumbnails/16.jpg)