• 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
  • Services
    • WordPress Websites
    • WordPress Maintenance Package
    • WordPress Security Package
    • WordPress Turbo Tune‑Up
    • For Designers & Agencies
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Articles tagged: css

css

Build Responsive Sites Quickly with Foundation

31 July 2012 / 3 Comments

Build Responsive Sites Quickly with Foundation

Responsive design is a big topic these days. A website with a responsive layout adapts to different devices — from widescreen desktops down to mobile phones — by resizing and rearranging the content in the page, as well as showing or hiding content.

While a basic responsive layout isn’t too hard to create, things can get fiddly once your layout starts getting more complex. On top of that, there are cross-browser issues to deal with, as well as setting up nice defaults for typography, colours, buttons, forms, menus, and so on.

This is where frameworks like Foundation come in. Foundation takes care of a lot of the “grunt work” involved in setting up a new site, with a responsive grid, cross-browser CSS, and good-looking default settings for all sorts of page elements.

In this introduction to Foundation, you’ll get an overview of Foundation’s features, and see how you can use the framework to rapidly prototype and build your next website. Enjoy!

[Read more…] about Build Responsive Sites Quickly with Foundation

LESS Is More: Make Your CSS Coding Easier with LESS

18 May 2011 / 8 Comments

LESS Is More: Make Your CSS Coding Easier with LESS

In recent years, CSS has matured into a very powerful way to style web pages. It’s now possible to create a website’s look almost entirely in CSS, with minimal use of images.

This is great, but one drawback is that CSS stylesheets are becoming longer, more complex, and harder to manage. It’s not uncommon for a typical stylesheet to run into hundreds of lines of code, with a large number of interdependent rules.

For this reason, various dynamic stylesheet languages are starting to spring up. These allow you to write your CSS rules using a more flexible, powerful language that is then turned into regular CSS for the browser to interpret.

In this article you’ll learn how to use LESS, an increasingly popular dynamic CSS language that you can use to streamline your CSS coding, saving you time and effort.

[Read more…] about LESS Is More: Make Your CSS Coding Easier with LESS

Cover Flow Remade with CSS and jQuery

6 May 2011 / 10 Comments

Cover Flow Remade with CSS and jQuery

View Demo »

Download Code

(Requires Safari)

If you’ve used a Mac or iTunes at all, you’ve probably come across the Cover Flow view. This shows you a series of album covers, photos, or other documents in 3D, allowing you to flip between them by clicking them, dragging a scrollbar, or using the arrow keys.

It’s a nice effect, but it requires a fair bit of processing power to accomplish. I thought it’d be a fun challenge to recreate it as closely as possible in a browser using CSS and JavaScript. At the start I had no idea if this was even possible, but I’m pretty happy with the result!

[Read more…] about Cover Flow Remade with CSS and jQuery

Free Pretty Web Fonts in 5 Minutes with Google Font API

26 November 2010 / 7 Comments

Free Pretty Web Fonts in 5 Minutes with Google Font API

View Demo »

Download Code

For years, us web designers and coders were stuck with a pretty poor range of fonts that we could use across all platforms: Times, Arial, Verdana, and a handful more. If you wanted anything more original then you had to create your text as an image in Photoshop.

Well, times they are a-changin’, in the form of web fonts. These are online font files that you link to from within your page. The browser downloads the font you linked to, and you can then use that font for text within your web pages, just as if it was a regular system font. Lovely!

Web fonts are really starting to take off now, with services such as Typekit, Font Squirrel and Ascender giving you access to a range of free and paid web fonts.

In this tutorial I’ll show you how to use the Google Font API to add nice-looking web fonts to your pages. This service is a relative newcomer to the scene, but it has a couple of big strengths:

  • All the fonts are free
  • It’s very easy to use

So, let’s see how we can use the Google Font API to add pretty fonts to our web pages — in less than 5 minutes!

[Read more…] about Free Pretty Web Fonts in 5 Minutes with Google Font API

The Top 30 Websites, Viewed in IE6

12 November 2010 / 10 Comments

The Top 30 Websites, Viewed in IE6

Internet Explorer 6. Nine years on, it’s still a headache for web designers and developers across the globe!

Most of us would like to forget about this horrid old browser — first launched in 2001, for crying out loud — but there’s always that client or user who insists on using it (or is forced to by their employer). Even among the audience of W3Schools — a web-savvy crowd if ever there was one — there are still around 5% of visitors using IE6 at the time of writing.

The result of all this is that we are forced to spend hours of extra coding time, just to make our sites work in this outdated browser.

How many big sites these days actually bother supporting IE6?

But how many big sites these days actually bother supporting IE6? One might think that they all would, considering their huge user bases. But is this the case?

[Read more…] about The Top 30 Websites, Viewed in IE6

Create Smooth Rotatable Images with CSS3 and jQuery

25 August 2010 / 18 Comments

Create Smooth Rotatable Images with CSS3 and jQuery
View Demo »

Download Code

With the advent of CSS3 transforms, we can do some nice tricks with elements in a web page, including rotation, scaling, and skewing. Once we start throwing jQuery into the mix too, we can start doing some really nice tricks!

In this tutorial I’ll show how you can use CSS3 transforms, along with some jQuery, to add smoothly rotatable photos to a web page. You can try it out right now by clicking the “View Demo” button above. Hold down Shift, then click and drag on a photo to rotate it.

I’ve based the code on this photo light table tutorial that I wrote a couple of months ago. In that tutorial, you could drag photos around the table, and click a photo to view it in a lightbox. Now, with this latest addition, you can also Shift-drag a photo to rotate it smoothly about its centre. Nice!

I should point out that this tutorial won’t work in IE at all, since IE (as of version 8) doesn’t support CSS transforms. I suspect it might work in IE9, although I don’t have it to test with. It also won’t work in touchscreen mobile browsers (yet) due to the lack of a Shift key!

Here’s how to code this baby up. Bear in mind that we’re starting with the script from the last tutorial, so if you want to follow along then you can download that code and work from it.

[Read more…] about Create Smooth Rotatable Images with CSS3 and jQuery

Kitchen Table: Adding a Lightbox

1 July 2010 / Leave a Comment

Kitchen Table: Adding a Lightbox
View Demo »
Download Code

In Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery, we created a nice-looking “light table” of draggable photos. This is a fun, novel way to display a handful of images in an image gallery. However it would be nice if the user could click a photo to enlarge it.

In this tutorial you’ll learn how to enhance the light table by adding a lightbox to display a bigger version of a photo when it’s clicked. You’ll also display a caption for the image within the lightbox.

[Read more…] about Kitchen Table: Adding a Lightbox

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

How to Make a Website

7 July 2009 / Leave a Comment

So you want to know how to make a website. Where do you begin? This article walks you through the basic steps:

  1. Making your Web pages
  2. Designing your website, and
  3. Getting your website online.

[Read more…] about How to Make a Website

A JavaScript Accordion to Show and Hide HTML

19 January 2009 / 28 Comments

In this tutorial you learn how to create a JavaScript accordion script using the Document Object Model. What’s an accordion? Click the link below to find out!

JavaScript accordion screenshot
See the JavaScript accordion in action

As you can see, a JavaScript accordion is a useful way to squeeze lots of page content into a small space. It consists of a list of items, of which only one is expanded at any one time. When you click on another item’s heading, the first item collapses and the second item expands.

Let’s see how the accordion is put together.

[Read more…] about A JavaScript Accordion to Show and Hide HTML

  • Go to page 1
  • Go to page 2
  • 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-2021 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits