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.
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.
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:
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.
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.
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!
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!
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.
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.
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.
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.
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.
7. The Counter
8. Going Up
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.
We have been testing a new way to submit your site to Design Shack recently, and it has been very well received. Express submission guarantees a 24 hour review of your website, and we will provide a personal response via email. The price was $10, and is now only $7. If you’re looking for a way to have your website reviewed quickly then this is it!
Please feel free to let us know your thoughts on the new service, we always appreciate feedback.
You’ve probably heard about Ruby on Rails by now, but it might not be something you have ever really got to grips with. A List Apart have published two great articles as an introduction to Ruby On Rails:
They look like an easy way to get started, aiming to to demystify Ruby on Rails and convince you that you can make the leap.
A common problem I encounter when designing a site in a team is the lack of a tool to easily allow us to collaborate and co-ordinate our work. There are several tools available to manage workflow and tasks, but few to actually help with the problem of overwriting someone else’s code.
Springloops is a unique source code management tool focused on web development teams. It allows you to code in parallel and share your code safely concentrated on results, not on lost changes or overwritten files. You get rapid collaboration in protected space.
In addition, using innovative deployment features, you can get rid of uploading files via ftp and overwriting others files on the server. It only takes one click to update several servers (both staging and production) in seconds. It can be a real problem solver – take a look at see if it’s for you.
In celebration of a new hosting package, designed specifically to support the Magento eCommerce application, NuBlue are offering a 25% discount for all Design Shack readers. Simply use the discount code ‘sh4ck’ when signing up for an account. NuBlue are one of very few UK hosts that are currently supporting this application and this discount is a great way to get started using Magneto.
To celebrate the arrival of Spring, Slice ‘n Dice are giving away a free project and a Gooey Carbon Bundle from GooeyTemplates.com. It looks like a great contest, something to make your spring coding a little easier!
The project up for grabs is a one page XHTML design with a three day turn-around – a value of $249. All designs are cross browser tested, with fully commented code.
Creating navigation with CSS is one of the most crucial elements of website design. Get the navigation right, and people will feel welcomed and at home. Get it wrong, and it can spell trouble for your website. This is a great collection of 10 CSS navigation examples and tutorials to get you in the creative mood.