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

  • 916