• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / CSS

CSS

Using Style Sheets to make your web building faster and easier.

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

11 June 2010 / 14 Comments

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery
View Demo »
Download Code

In this tutorial you’re going to learn how to create a virtual light table using jQuery and CSS3. A traditional light table is a flat illuminated panel that you can place transparent slides on for viewing. Our “light table” is going to be an image of a wooden kitchen table, and the photos will be prints rather than transparencies, but the basic idea is the same!

The aim is to make our table and photos look as realistic as possible. Here’s our desired feature list:

  • A wooden table background image for the photos to sit on
  • Each photo “floats” onto the table as it loads
  • Each photo is given a random position and orientation to create a “scattered” effect
  • The photos have a white border and drop shadow to add a 3D effect, and are ever-so-slightly transparent
  • Once on the table, a photo can be dragged around by using the mouse

Ready? Let’s go!

[Read more…] about Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

Book Review: Getting StartED with CSS

28 January 2010 / Leave a Comment

Getting StartED with CSS by David Powers - cover imageGetting StartED with CSS by David Powers is published by “friends of ED” / Apress. It was first published in late 2009. As the title implies, this is a book for CSS newbies or casual CSS coders who want to deepen their knowledge.

The timing of this book is spot on. Microsoft has finally produced a reasonably CSS-capable browser in the form of IE8, and IE6’s usage is starting to dwindle. Now is a great time to learn CSS 2.1 in depth, and discover what it can really do.

This book thoroughly explains pretty much all the features of CSS 2.1, and also touches on some of the features of the upcoming CSS 3.

Here’s my full review of the book.

[Read more…] about Book Review: Getting StartED with CSS

Using CSS To Centre Content

23 June 2009 / 2 Comments

Centring things horizontally with CSS is straightforward once you learn a couple of techniques. In this article you learn how to centre any type of content, such as a block of text, an image, a table, a div element, or an entire page, all using CSS.

[Read more…] about Using CSS To Centre Content

Styling Links with CSS

18 August 2008 / Leave a Comment

CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:

  • normal links
  • links that have already been visited
  • links that are being clicked on, and
  • links that are hovered over with the mouse.

You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.

[Read more…] about Styling Links with CSS

Using CSS Shorthand for Fast-loading Websites

11 July 2008 / Leave a Comment

Nothing is more certain to turn away visitors than a slow-loading website, so it’s worth doing everything you can to make your site load as quickly as possible. Common techniques include compressing images and removing unnecessary markup from your pages; however, one often-overlooked aspect is your site’s CSS. With a complex page layout, a CSS file can easily run into the tens of kilobytes, adding significantly to a website’s initial load time.

Fortunately there are a number of CSS shorthand tricks you can use to dramatically reduce the size of your CSS files, and save typing at the same time! Let’s explore them.

[Read more…] about Using CSS Shorthand for Fast-loading Websites

Styling Tables with CSS

19 February 2008 / 8 Comments

In this tutorial, we’ll take a plain old HTML table:

… and transform it into something beautiful using nothing but CSS:

Techniques we’ll cover include:

  • Adjusting the spacing, padding and margin of table cells
  • Styling the borders of the table and the cells within the table
  • Changing text and background colours, and using background images
  • Creating alternately-coloured table rows to aid legibility
  • Adding a mouse hover effect to table rows
  • Styling the table caption

[Read more…] about Styling Tables with CSS

Making CSS Rollover Buttons

16 April 2007 / 191 Comments

Rollovers are a nice way to add visual feedback to your website’s buttons. As a visitor moves their mouse over a rollover button, it changes to indicate that it’s clickable.

In the bad old days of HTML, the only way to create a rollover was to use JavaScript to swap the two button images. While this works, it does rely on JavaScript being enabled in the browser. It also adds a fair bit of code bloat to the page, meaning longer download times, and more coding for you.

Thankfully, these days you can create a nice rollover effect using pure CSS; no JavaScript required! Roll your mouse over this button, which is created using just HTML, CSS and a single image:

So how’s it done? Well, it all centres around the :hover pseudo-class in CSS. Using this pseudo-class, you can style a link both in its normal state and in its hover (rollover) state. By making the link a block element and giving it a background image, we can turn the link into a button. We then simply jiggle the background image around to create the rollover effect.

[Read more…] about Making CSS Rollover Buttons

Styling Forms with CSS

22 November 2006 / Leave a Comment

HTML forms are fantastically useful things, but by default they tend to look like something only a mother could love. Fortunately, with the aid of CSS, you can really transform the look of an HTML form, and make it much easier on the eye. This tutorial shows you how.

[Read more…] about Styling Forms with CSS

Internet Explorer Conditional Comments

1 August 2006 / Leave a Comment

What are conditional comments?

Conditional comments are a simple Internet-Explorer-only feature that Microsoft added to IE5 Windows and later. (Mac IE doesn’t support them.) They provide an easy way to detect that the visitor is using an IE browser (and which version they’re using). You can then serve IE users different blocks of HTML as required.

[Read more…] about Internet Explorer Conditional Comments

CSS Floats

17 July 2006 / 15 Comments

What are floats?

This box is floated right.

A float is simply a box (for example, a div) that is shifted to the left side or the right side of its container. We then say that the box is floated left or floated right.

One of the key benefits of floats is that they allow you to have bits of content sitting side by side, rather than one below the other (much like you can do with table columns, but better!). This allows you to do cool stuff like text columns, boxouts (like the one above), and advanced positioning of your page elements.

Floats are a bit like the align="left" and align="right" attributes in img elements.

[Read more…] about CSS Floats

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to Next Page »

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits