View
16
Download
0
Category
Preview:
Citation preview
CSS Design Tipsyou know enough css to be dangerous
“Anything design related - push to extremes and then dial back for taste”
-me
“Designing in the browser with any value - nudge, nudge, nudge, too far, back one”
–also me
Hypertext Narrative common design problems
portal project link
images NOT optimized
background image too “busy”
css hover state (should be a hyperlink not hyperactive)
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
Background Image (careful….)
can be distracting/conflict with your content
put a transparent color layer behind your content to separate it from background image
css hover state
visual feedback = good
disruptive experience = bad
text should not jump around on the page when you “mouse over”
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)
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.
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
advanced css reset
normalize
https://necolas.github.io/normalize.css/
covered in “creative dev tools” course
Moodboard
type of collage consisting of images, text, and samples of objects in a composition
visually illustrate the style they wish to pursue
Recommended