Design Shack — Web Design Gallery, Articles & Community

Introduction to CSS3 – Part 3: Text Effects

The third part in this series on CSS3 will be delving into the new text effects. Typography is, without any doubt, one of the most important aspects to get right when designing a layout. Type can draw the reader through a page, give a certain impression, provide impact, be subtle, or aid in separating content.

CSS is already reasonably versatile in the way in which text can be displayed, but still constricts design in quite a few areas. CSS3 goes some way towards removing those limitations.

All the examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:

View the live examples page

Text Shadow

Text shadows sound a little tacky, but it all depends how they are executed. When experimenting for this article I found some combinations to look terrible, and some to give an attractive, subtle effect. Shadows could definitely be put to good use in headings and titles – there are some great examples of their use at Matthias Kretschmann’s blog.

.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}

Word Wrapping

At present, if a word is too long to fit within one line of an area, it expands outside. This isn’t a very common occurrence, but does crop up from time to time. The new word wrapping ability allows you to force the text to wrap – even if it means splitting it mid-word. The code is incredibly straight forward:

.text_wrap {
word-wrap:  break-word;
}

Web Fonts

Whilst these are not classed as a ‘text effect’, we are going to cover them here briefly. A Web Font is simply a way to use any font in your page, being downloaded automatically by the browser. This will be a revolutionary change to web design, which previously has been limited to 10-15 widely supported fonts. However, this new feature brings bring copyright into debate as only properly licensed fonts should be used.

Currently, the latest version of Safari (3.1) is the only browser supporting Web Fonts. Opera is suggested to be another which will soon be enabling support, and the others will no doubt follow at some point in the future. An example of how this could be achieved would be:

@font-face {
font-family: 'Name of the new font';
src: url('http://www.designshack.net/fonts/font.ttf');
}

A few examples of pages have been mocked up using this technique. The following are examples in the vein of CSS Zen Garden, created by A List Apart. The linked versions will only work on certain browsers:

In conclusion…

Many of the missing features of CSS2 have been rectified in this update. This article doesn’t cover all the additions in terms of text – if you’re interested, you can read more about the text module. All these additions are great when used in a subtle way, enhancing the typographic layout of the page.

The next article in this series will be expanding on some of the user interface enhancements in CSS3. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds

Silverback Previews

Silverback is a new app which lets you run your own usability tests really easily. It looks set to be a great new tool for designers who want to analyze how users interact with their site. After a recent request for beta testers, a few interesting details are emerging:

• Read Kyle Meyer’s initial impressions
• Quicktime movies are created which show the user’s interaction with the site
• A video and audio recording is also taken of the user, showing their expressions and remarks
• It can also be used for testing desktop applications
• It’s Mac only for now, likely due to the standard hardware features of Apple laptops

It’s certainly an application which could bring the idea of usability testing to a large market. There’s no substitute to actually watching someone using your website when testing it. Keep your eyes peeled for a release and give it a try for yourself.

Follow Silverback on Twitter

And the Winner Is…

Once again, thank you to everyone who entered our competition and filled out the survey. We have randomly selected a winner and the proud recipient of a new CSSEdit 2.6 copy is Domantas Jankauskas. Congratulations!

If you are interested in the outcome of the survey, please feel free to read on. We’ll be discussing some of your responses and how Design Shack has changed as a result.

Number of designs per day

There was a huge consensus that a small number of quality designs are preferred over quantity. With this in mind, we plan to continue showcasing only a select few CSS designs each day (our entry requirements may become even tighter!) Many of you expressed the fact that you like how designs are organised by colour and layout, and we have started to integrate that information underneath each design on the homepage and gallery as well.

What time to add designs

As you can see, there is more of a split for this question. As a result, we are changing from offering one gallery update per day, to two – both one in the morning and one in the afternoon / evening (obviously varying depending upon where you live!).

Anything else?

Here are a few comments which we particularly enjoyed from the survey:

• Stop posting “10 best xxx”,”20 great xxx” or similar. It’s boring. You’re not Digg. I’m mean. But I mean what I said. We hear you – mainly original content from now on!
• The most important thing? Good quality and good taste of tutorial material and showcased designs.
• I don’t like that it’s .co.uk! We do own designshack.net but have yet to get around to moving over. It’s trickier than you’d think!
• Design Shack is for everybody. From beginners to advanced designers. But always a step ahead in design trends – that’s the coolest thing – the vision :)
• I don’t believe you when you say “be mean” , soooo I love Design Shack!

Future surveys

We have a couple more questions which we’d love to ask you, relating to the possibility of a combined links post and the idea of integrating both our RSS feeds into one. But those are for another day!

9rules Submission Open

For the next few hours, the blog network 9rules have opened their doors to website submissions. They run a high quality network of sites and provide a central way to access all their content. Members includes sites such as Smashing Magazine, CSS Globe and PSDTuts.

If you think that your site has a great design, great quality content and regular updates then it is definitely worth submitting. There are some great tips to help with deciding whether you will qualify as well.

Submit your site to 9rules

Introduction to CSS3 – Part 2: Borders

For the second part of our series on CSS3, we’ll be taking a look at borders. Everyone who uses CSS is familiar with the border property – it’s a great way to structure content, create effects around images and improve page layout.

CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. We are going to look at each of these in a bit more detail, using examples where possible.

All the examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:

View the live examples page

Rounded Borders

Achieving rounded borders using current CSS coding can be tricky – there are numerous methods available, but none are extremely straight forward. Creating individual images for each border is often needed in addition. Using CSS3, creating a rounded border is incredibly easy. It can be applied to each corner or individual corners, and the width/colour are easily altered. The CSS code is:

.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}

Gradients

Gradient borders can look effective if used correctly. This code is a little more complex, requiring you to define each colour of the gradient. The CSS code is:

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

Box Shadows

Adding a shadow to an element is difficult at present – it is a good way to differentiate a certain area, but as with any effect, it should be used sparingly. The CSS code is:

.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}

Border Images

Border images are one of the most useful additions – I’m really looking forward to discovering how people choose to use them. CSS has the ability to repeat, or stretch a border image as you choose. The CSS code is similar to the following (it varies between browsers at present):

.border_image {
-webkit-border-image: url(border.png) 27 27 27 27 round round;
}

In conclusion…

Borders are revolutionized! These additions in CSS3 are bound to save you a huge amount of time as a designer. They go a long way towards simplifying layouts and allow you to create visually appealing boxes without even opening Photoshop.

The next article in this series will be expanding on a new area in CSS3, Text Effects. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds

Follow Us on Twitter

A few of our kind readers wouldn’t stop pestering us…! All updates to the CSS gallery and news will now be sent to Twitter, providing another yet another way to subscribe to Design Shack.

Follow us on Twitter

We are also likely to use this method to notify you of competitions, updates and new features to the site – so make sure you don’t miss out and become a follower.

See you there!

Introduction to CSS3 – Part 1: What Is It?

This article marks the first of several, providing an introduction to the new CSS3 standard which is set to take over from CSS2. We will be starting from the very beginning – taking you from not having even heard of CSS3, to feeling ready to hit it running as various features start to become more widely adopted.

What is it?

CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes. This first tutorial will give you a very basic introduction to the new possibilities created by the standard.

Modules

The development of CSS3 is going to be split up into ‘modules’. The old specification was simply too large and complex to be updated as one, so it has been broken down into smaller pieces – with new ones also added. Some of these modules include:

• The Box Model
• Lists Module
• Hyperlink Presentation
• Speech Module
• Backgrounds and Borders
• Text Effects
• Multi-Column Layout

View the full list of modules

Timescale

Several of the modules have now been completed, including SVG (Scalable Vector Graphics), Media Queries and Namespaces. The others are still being worked upon.

It is incredibly difficult to give a projected date when web browsers will adopt the new features of CSS3 – some new builds of Safari have already started to.

New features will be implemented gradually in different browsers, and it could still be a year or two before every module is widely adopted.

How will CSS3 affect me?

Hopefully, in a mainly positive way. CSS3 will obviously be completely backwards compatible, so it won’t be necessary to change existing designs to ensure they work – web browsers will always continue to support CSS2.

The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and achieve current design features in a much easier way (e.g. using columns).

Future articles in this series will each focus on a different module of the CSS3 specification, and the new features they will bring. The next one relates to CSS3 borders.

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds

Win a CSSEdit License in 30 Seconds

Update: The survey is now over, thank you to all those who participated – we will be contacting the winner shortly

We have four questions to ask you – it will take somewhere between 30 seconds and a minute to answer them and you stand a chance of winning a copy of CSSEdit.

CSSEdit is a highly acclaimed piece of software, allowing you to design beautiful websites with greater ease. Our introduction to CSSEdit highlighted some of the application’s features, along with how to get started using it.

You can click the link below to fill out the survey – be sure to include your email address and we will be in touch if you are a winner!

Changing for the Better

First of all, a huge thank you to the hundreds of people who responded to our survey – we’ve had some great suggestions of improvements to the site. The survey will be running for the next few days before we announce the winner of the contest so if you haven’t filled it in yet, please do!

After hearing what you had to say, a few minor design and functionality changes to the site have been made. From the annoying fact you had to click twice to get to a featured site, to the scroll bar in the middle of our homepage – we’ve listened. Here are some of the changes that have been made today:

1. We have placed more visual emphasis on news and tutorials
2. Designs are now updated twice daily
3. We are increasing our regular CSS gallery updates to 4 per day
4. We are aiming to post more regular news and tutorials – so you can get your inspiration and news all in one place
5. You can now search by colour or layout from the top of the homepage
6. We are accepting reader submitted news articles
7. Only one click is required to get to a featured website
8. … and quite a few more random improvements!

We hope that some of your niggles have been fixed and you’ll enjoy Design Shack even more!

10 Website Statistic Tools

Keeping track of visitors to your website is vital, and these ten tools can allow you to monitor and review traffic in different ways. Some are free, some require a small charge – all of them will help you optimize your website and know exactly who is passing eyes over your design.

1. Google Analytics

Analytics is a great word, meaning “sophisticated data analysis and modeling, including developing customer profiles, determining customer and merchandise price profitability”. Google Analytics is certainly a great statistical tool, and is completely free. It integrates into your website using a small piece of code and is hosted by Google so it doesn’t require you to install anything. The downside is the inability to install plug-ins to track extra aspects of your site.

2. Mint

Mint is a tool created by a designed called Shaun Inman (who has a great personal site design to boot). It is a locally run piece of software, which means installing it on your web server. The advantages are that it is very customizable and looks great. ‘Pepper’ can be used to add plug-ins and extra features not included by default, created using the Mint API. Mint costs $30, which is a small price to pay for an in-depth knowledge of your visitors.

3. AWStats

AWStats is a different style of tool as, rather than tracking hits in real-time through a piece of code on your site, it reads web server log files to generate statistical reports. There is a good chance that your web server already has AWStats installed and it may just need turning on. A degree of technical knowledge is required to install and configure AWStats yourself, but it can be a useful tool for another perspective on your traffic.

4. StatCounter

StatCounter comes highly recommended by many people as a free, hosted tracking service. They offer a huge variety of different statistics, from entry and exit pages to country/state/city information. It is completely free, so may be worth giving a try to see if it fits well with your tracking needs.

5. Urchin

6. Webalizer

7. The Counter

8. Going Up

9. Omniture

10. Webtrends

We would recommend only using one or (at the most) two of these tools at a time. Most of them slow the loading of your page to an extent, and adding several at a time could impact the experience of a visitor.