learn.

Search

Primary Menu

Skip to content
  • ArtSpeak
    • Elements: Line
    • Elements: Shape
    • Elements: Space
    • Elements: Texture
    • Elements: Value
    • Elements: Color
      • Primary Colors of Light and Pigment
      • Hue, Value, Saturation
    • Principles of Art
    • Art Vocabulary
  • Courses
    • MAT-120 Syllabus
      • Free Media Resources
    • MAT-210 Syllabus
      • Free Media Resources
      • MAT-210 :: P1 Painterly Compositing
      • MAT-210 :: P2 Graphic Campaign Collateral
      • MAT-210 P3 :: Movie Genre Film Still (Advanced Creative Compositing)
  • Tutorials
    • Art & Design
      • Color Theory
    • Software
      • Code Editors
      • Dreamweaver
      • Google Drawing Application
      • Illustrator
      • MAMP
      • Photoshop
      • S/FTP
      • XAMPP
    • Web
      • Apache
      • CSS
      • HTML
      • Javascript
      • MySQL
      • PHP
  • About This Site
  • Food For Thought
CSS, HTML, Web

CSS – Examining Ways to Display Images

08/27/2011 lcotnoir

This demonstration uses a mock-up site that allow you to see via video demos below how images are commonly displayed using CSS and HTML. It also shows you how you can examine other websites to see how things have been constructed.

  • Video Demo of Live Site “John Doe” Part 1
  • Video Demo of Live Site “John Doe” Part 2
  • Video Demo of Live Site “John Doe” Part 3
  • Check out the live site to follow along.

Post navigation

Previous PostWEB – Image Preparation LessonNext PostPHOTOSHOP – Making Image Navigation For the Web

Digital Art, Design, and Communication Education

Browser + Standards Links

  • Can I Use
  • Colorzilla – Firefox Color Picker
  • Firebug – Firefox Web Utility
  • Firefox Web Developer Toolbar
  • Firefox XML Developer Toolbar
  • Typetester – test font choices!
  • Yahoo's Browser Grading (browser use stats)

Color Links

  • Colorzilla – Firefox Color Picker
  • Paletton (a color scheme tool)

CSS

  • A List Apart
  • Best CSS Vault
  • Can I Use
  • Code Academy
  • CSS Beauty
  • CSS Positioning 101
  • CSS Positioning Explained
  • CSS Tricks (AWESOME)
  • CSS Zen Garden
  • CSS3 Transitions
  • Fixed, Fluid, Elastic Layouts Explained
  • Paletton (a color scheme tool)

Font Links

  • Adobe Typekit
  • Blue Vertigo Resources
  • Font Squirrel Web Font Generator
  • Google Web Fonts
  • Typetester – test font choices!

Free Image Resources

  • Internet Archive
  • Morguefile
  • NY Public Library Digital Resources
  • Unsplash

Free Video Resources

  • Internet Archive
  • NY Public Library Digital Resources

HTML

  • A List Apart
  • Can I Use
  • Code Academy
  • CSS Tricks (AWESOME)
  • htmlentities reference list

Illustrator

  • Blue Vertigo Resources

Javascript

  • Can I Use
  • Code Academy
  • CSS Tricks (AWESOME)
  • CSS Tricks (loads of jQuery tools)
  • jQuery
  • jQuery Sliders
  • jQuery User Interface (UI)

MySQL

  • MYSQL.COM

Photoshop

  • Blue Vertigo Resources

PHP

  • Code Academy
  • PHP.NET

SEO

  • SEO tips from Google's Matt Cutter

Software Purchasing

  • Collegebuys
Proudly powered by WordPress