All posts tagged css

10 Typography Tools for CSS

02/11/2011 | css, tools


If you have spent any amount of time in the website design game, you know that CSS is a staple you can’t ignore. As Flash takes a back seat more and more, this method of coding is becoming more necessary by the day. It is also becoming a basic for graphic forms, one example being typography.

More than just a font, typographic art has become a movement on the online world. From creation of new lettering to the use of those fonts on website design to more clearly altered context or providing visual appeal, you can’t get away from it. CSS makes it easier than ever to manipulate and utilize typography for your web designs. Tools to use CSS typography pop up every so often, but not all of them are as great as others. Here is a collection of excellent typography-related, CSS-compatible applications for you to use in your own work.

Read More

Guide to CSS Animations – Resources and Tutorials

01/11/2011 | css


CSS animations are becoming quite popular and I decided to compile a list of useful resources and tutorials for those that haven’t spent that much time with them. Here you’ll find the main guidelines and tips on how to take the first steps with it.
Get ready to step in the world of CSS animations and learn how to apply them to your own sites.

Read More

10 Helpful Free CSS3 Generator

07/10/2011 | css


CSS 3 is the modularization of Cascading Style Sheets to let additions to the specification. It boasts some outstanding features that have revolutionized Web layout and design. Although it has many advantages, but that doesn’t mean it doesn’t have any disadvantages — and taking care of those disadvantages need you to be really smart. CSS3 is new, so there is still a lot to ameliorate. One of the biggest problem is that the properties are browser-specific, which means that it is not easy to implement them across browsers. Developers are required to add extra code to implement the properties the same way across browsers. But you need not worry as many tools are available out there that let you generate CSS3 to assist you. The best part is that these tools allow for full customization, and that means anyone can use them easily.

Read More

The Guide To CSS Animation: Principles and Examples

14/09/2011 | css


With CSS animation now supported in both Firefox and Webkit browsers, there is no better time to give it a try. Regardless of its technical form, whether traditional, computer-generated 3-D, Flash or CSS, animation always follows the same basic principles. In this article, we will take our first steps with CSS animation and consider the main guidelines for creating animation with CSS. We’ll be working through an example, building up the animation using the principles of traditional animation. Finally, we’ll see some real-world usages.

Read More

Create a Swish CSS3 Folded Ribbon in Five Minutes

23/08/2011 | css


Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes. Let’s see how.. We’ll begin with an empty HTML document; doctype, charset declaration, head, body, the usual suspects. You’ll also notice we’re linking to the Google Web Fonts API so we can make use of the pleasantly decorative Montez typeface.

Read More

100 Great CSS Menu Tutorials

23/08/2011 | css


Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content.

CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Don’t be alarmed if your own CSS skills are fairly limited as there are a lot of great tutorials out there that walk you through how to add clean and professional looking CSS menus to your website. You can either copy and paste the code into your own design or modify the menu to suit your needs. Today we would like to show you 100 of these tutorials; 75 horizontal CSS menu tutorials and 25 vertical CSS menu tutorials.

Read More

Real World CSS Practices

19/08/2011 | css


I’ve been working with CSS for quite a few years now. Based on that experience, this article will share some of the best habits and practices that I have found to be helpful and beneficial in the areas of organization, performance, readability and typography. By now, I think it’s safe to say that most designers on the web are using CSS in some capacity. Even those (misguided) individuals who are still using table-based layouts have a tendency to use CSS for some basic styling, such as establishing fonts and link colours. With that in mind, I thought it might be worthwhile cover some of what I have found to be best practices.

Before getting started, it’s important to note that these are practices and habits that I have developed based on my own experience, which includes developing different sites, my own experiments and reading from a variety of sources. While I have my own reasons for the way I do things, I am in no way presenting the following as CSS gospel that absolutely needs to be followed. As with anything, take what you read, weigh it against your own knowledge, values and experience in order to formulate your own methodology.

Read More

40 Useful CSS Tutorials, Techniques And Resources

27/07/2011 | css


We have previously posted many articles on CSS tutorials and resources you can learn CSS from. Today, again we come up with yet another great list of 40 CSS tutorials, techniques and resources that you will enjoy exploring. Every developer knows very well how important it is to learn and use CSS effectively. Therefore, tall the developers keep themselves updated with the latest development and advancement in the technology. Below is the list of 40 useful CSS tutorials and resources you cannot afford to miss. We hope this broad list will train you something innovative, or moreover jog your memory and help you recall some methods you haven’t used for a while.

View Post …

Read More

How To Create a Slick Features Table in HTML & CSS

25/07/2011 | css, Development


We’ve all grown up as web designers staying well away from table based layouts, but we don’t often brush up on our table building skills ready for when we will actually need them. Follow this step by step tutorial to create a slick looking data table to compare the features of various Harley Davidson motorcycles. We’ll build the table in clean HTML then polish it up with CSS to create a cool and easily readable HTML table.

View Post …

Read More