STYLING TABLES
STYLING TABLES
- Give cells plenty of padding
- Shade alternate rows
- Align content using the text-align property
Style for readablility
STYLING TABLES
- width
- padding
- text-transform
- letter spacing/font-size
- borders
- text-align
- background-color
- :hover
- empty-cells (show, hide inherit)
- border-collapse
- border-spacing
- separate
Properties that can used on tables
STYLING TABLES
STYLING FORMS
STYLING FORMS
- text inputs and text areas
- submit buttons
- labels
Target to improve the design and readability
- checkboxes
- radio inputs
- select/dropdown box
Difficult to style
STYLING FORMS
- font-size
- color
- background-color
- border
- border-radius
- :focus
Properties to use
STYLING FORMS
- color
- text-shadow
- border
- background-color
- :hover
Submit buttons
STYLING FORMS
cursor: (auto, crosshair, default, pointer, move text, wait, help)
Cursor styles
Embedding video
Embedding video
- Easiest way is to embed from youtube or vimeo
- HTML5 video tag <video> but it doesn't work on lower videos
Embedding video
- Need to convert the video to H264 (IE and safari) AND WebM (Andrioid, Chrome, Firefox, Opera)
- You can't style the controls. They vary from browser to browser
<video> tag
Embedding video
<video src="video/myvideo.mp4"
poster="images/puppy.jpg"
width="400" height="100"
preload
controls
loop>
</video>
<video> tag
Embedding video
<video poster="images/puppy.jpg"
width="400" height="100">
<source src="videos/video.mp4" type='video/mp4;codecs="avc1.42E01E. mp4a.40.2"'/>
<source src="videos/video.webm" type='video/webm;codecs="vp8.vorbis"'/>
</video>
<video> tag
Embedding video
Resources for embedding multiple files
ADDING AUDIO
<audio>
<audio src="audio/mysound.ogg" controls autoplay>
- preload
- loop
- souce
MP3- Safari 5+, Chrome6+, IE9
Ogg- Firefox 3.6, Chrome 6, Opera 1.5
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN
Steps:
1. Set the viewport using the meta tag in the head tag:
<meta name="viewport" content="device-width, initial-scale=1">
2. Create a "fluid" layout in CSS. Use ems for font-size
3. Add media queries in your CSS doc to add "break-points"
RESPONSIVE WEB DESIGN
Common breakpoints
320px
480px
600px
768px
1024px
RESPONSIVE WEB DESIGN
Media query:
@media (max-width: 480px) {
h1{
font-size:.75em;
}
}
RESPONSIVE WEB DESIGN
Media query:
@media (min-width: 768px) and (max-width: 979px) {
h1{
}
}
Text
deck
By shadow4611
deck
- 998
