Smashing Magazine ~ we smash you with the information that will make your life easier. really.
Smashing Magazine we smash you with the information that will make your life easier. really.

  • 35 CSS-Lifesavers For Efficient Web Design

    By Gerri Elder, June 25th, 2009 in CSS | 102 Comments

    CSS-design is not easy. We need to find workaround across browser inconsistencies, not that easy CSS-concepts and quite counterintuitive CSS-solutions. However, there are effective and useful CSS-tools and Smashing Magazine reviewed many of them in our previous posts. Now it's time to present you with some fresh (or not mentioned earlier) tools that can assist designers in their work.

    Less CSS Tool

    Today, we will look at 35 new and useful CSS tools, generators and resources that can significantly improve your workflow and reduce your time efforts for CSS-coding. Whether you're writing, compiling, refining or experimenting with CSS code – or all of the above – these tools can help you get the job done faster and better than ever before.

    You may want to take a look at the following related articles:

    Read more...

  • Module Tabs in Web Design: Best Practices and Solutions

    By Jacob Gube, June 24th, 2009 in Design Showcase | 54 Comments

    A module tab is a design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking (or in some instances hovering over) the content's corresponding tab control.

    Module tabs are seeing an increase of use as websites and web applications push for optimizing web page screen areas without sacrificing the amount of information presented at once. For example, in weblogs, they are used in secondary content sections (such as the sidebar) to present relevant and interesting information such as a listing of blog posts which users can interact with to get to web pages quicker. This inevitably allows for an unobtrusive and compact manner of presenting content.

    Vyniknite dot s k uses red highlights for hovers.

    This article discusses the use of the module tabs design pattern for use in websites and web-based applications. We share with you some best practices to consider when using module tabs, a listing of real-world examples of websites the take advantage of module tabs, as well as tutorials and free downloadable scripts for building and deploying module tabs in your sites.

    Read more...

  • Take Your Design To The Next Level With CSS3

    By Inayaili de Leon, June 15th, 2009 in CSS | 210 Comments

    Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it's clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.

    So why is it that, when it comes to CSS, we're stuck in the past and so afraid of experimenting? Why is it that we still use inconvenient CSS hacks and JavaScript-dependent techniques for styling? Why can't we make use of the rich CSS3 features and tools available in modern Web browsers and take the quality of our designs to the next level?

    Beak uses the text-shadow-property of CSS 3

    It's time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.

    In this article, we'll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we'll know a bit of what to expect from CSS3 and how we can use its new features in our projects.

    Read more...

  • Adaptive CSS-Layouts: New Era In Fluid Layouts?

    By Kayla Knight, June 9th, 2009 in CSS | 108 Comments

    Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. With bad coding structure, however, a fluid layout can be disastrous. Because of this, we need to find ways to work around most, if not all, of the cons of fluid design.

    Fixed-width version of our final result

    If you as a designer are going to go through all the extra work of creating a functional fluid layout, why not go a bit further and make it compatible with all resolutions, instead of just most? You can use a few techniques to create an incredibly versatile, adaptive layout that will stay perfectly functional with the constantly changing screen sizes.

    In this article, we'll discuss effective techniques to create 100%-functional adaptive CSS-layouts, and provide details on other tutorials and practices.

    Also consider our previous articles:

    Read more...

  • Ask SM: CSS Quick-Question Edition

    By Chris Coyier, May 25th, 2009 in CSS | 103 Comments

    This is our sixth installment of Ask SM, featuring reader questions about Web design focusing on HTML, CSS and JavaScript. These entries are not all questions, but rather quick Twitter responses to the query, "What has been your most difficult CSS challenge?" Among other things, this post covers the sticky footer issues, positioning elements at bottom of a div, on having layout, aligning labels and inputs, auto top and bottom padding, z-index and more.

    float order

    If you have a question related to this challenge, feel free to reach me (Chris Coyier) by one of these methods:

    1. Send an email to ask [at] smashingmagazine [dot] com with your question.
    2. Post your question in our forum.
    3. Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier.

    Please note: I will do what I can to answer questions, but I will certainly not be able to answer all of them. However, I hope you use the forums to post questions because that gives you the best opportunity to get help from the community.

    Read more...

  • DelliStore: A Free Professional CSS/XHTML/PSD-Template

    By Smashing Editorial, May 2nd, 2009 in Freebies | 89 Comments

    Over the last months we’ve heard numerous complaints about the lack of quality in our freebie releases. We are aware that our readers have high expectations and we try to do our best to meet them in our posts. In this post we release a beautiful high-quality (X)HTML/CSS-template (including its PSD-source) that will hopefully meet your expectations and come in handy in your projects.

    Screenshot

    This template, designed by the design agency Dellustrations and released for Smashing Magazine and its readers, is a full px-based, cross-browser-compliant (X)HTML/CSS-template (IE 6, IE 7, Firefox, Safari, Google Chrome). It consists of 4 custom pages; the PSD-source is included in the release package. You may modify this template for a e-commerce web site, restaurant, pool and spa web-sites and other caters, ventures and facilities.

    You may be interested in other freebies that were released on Smashing Magazine recently:

    Read more...

  • The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

    By Smashing Editorial, April 27th, 2009 in CSS | 157 Comments

    CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven't heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects.

    CSS Sprites Screenshot

    The term "sprite" (similar to "spirit," "goblin," or "elf") has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware. Because the complexity of video games has continually increased, there was a need for smart techniques that could deal with detailed graphic objects while keeping game-play flowing. One of the techniques developed saw sprites being plugged into a master grid (see the image below), then later pulled out as needed by code that mapped the position of each individual graphic and selectively painted it on the screen.

    You may want to take a look at the following related posts:

    Read more...

  • [Ask SM] Transparent Background, Positioning Problem

    By Chris Coyier, April 17th, 2009 in CSS | 43 Comments

    This is our fifth installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post we’ll cover how you can style only the text inputs, refreshing a content-block automatically, how to avoid some positioning problems and create and use transparent div-backgrounds; we also discuss further CSS-related problems and deliver answers to a couple of quickfire questions.

    tweets

    If you have a question about CSS or JavaScript, feel free to reach me (Chris Coyier) via one of these methods: a) send an email to ask [at] smashingmagazine [dot] com with your question; b) Post your question in our forum or c) if you have a quick question, just tweet us @smashingmag or @chriscoyier with the hashtag #asksmcss.

    Please note: I will do what I can to answer questions, but I will certainly not be able to answer all of them. However, I hope you use the forums to post questions because that gives you the best opportunity to get help from the community.

    Read more...

  • Table Layouts vs. Div Layouts: From Hell to… Hell?

    By Geir Wavik, April 8th, 2009 in CSS | 224 Comments

    Over the last several years, developers have moved from table-based website structures to div-based structures. Hey, that’s great. But wait! Do developers know the reasons for moving to div-based structures, and do they know how to? Often it seems that people are moving away from table hell only to wind up in div hell.

    Photo of a road sign containing heaven and hell

    This article covers common problems with layout structure. The first part goes through what table and div hells are, including lots of examples. The next section shows how to write cleaner and more readable code. The final part looks at what features await in future. Please join us on this journey from hell to heaven.

    You're in table hell when your website uses tables for design purposes. Tables generally increase the complexity of documents and make them more difficult to maintain. Also, they reduce a website’s flexibility in accommodating different media and design elements, and they limit a website's functionality.

    Read more...

  • 8 Simple Ways to Improve Typography In Your Designs

    By Antonio Carusone, April 3rd, 2009 in CSS | 196 Comments

    Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it's in the details that designers often neglect.

    Screenshot

    These details give the designer total control, allowing them to create beautiful and consistent typography in their designs. While these details can be applied across different types of media, in this articles we're going to focus on how to apply them to web design using CSS. Here are 8 simple ways you can use CSS to improve your typography and hence the overall usability of your designs.

    Read more...

  • [Ask SM: CSS] Equal Spacing, CSS Font Replacement

    By Chris Coyier, March 23rd, 2009 in CSS | 71 Comments

    This is our fourth installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post we’ll cover how you can distribute the horizontal space between elements evenly, how you can achieve maximum sides on images; you'll also learn best practices for CSS font replacement and answers to a couple of quickfire questions.

    If you have a question about CSS or JavaScript, feel free to reach me (Chris Coyier) via one of these methods: a) Send an email to ask [at] smashingmagazine [dot] com with your question; b) post your question in our forum, c) or, if you have a quick question, just tweet us @smashingmag or @chriscoyier.

    floaties

    Antoine Nicolas writes: Do you know how to perfectly and dynamically distribute objects horizontally in a container using CSS? This is a classic example of something that is fairly difficult to do in CSS but probably shouldn't be. I have approached this problem in a number of different ways in the past. I have revisited it a little now, and I'll present what I believe is the best solution here.

    Read more...

  • Ask SM [CSS/JS]: Divs of Equal Height, Dealing with IE 6

    By Chris Coyier, February 20th, 2009 in CSS | 74 Comments

    This is our third installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post we'll cover how you can take care of a smooth page scrolling and Internet Explorer 6 bugs. You'll also learn how to aggregate RSS Feeds, how to create dynamic width list images and how to create div-containers of equal height.

    IE Bugs

    If you have a question on HTML, CSS or JavaScript, feel free to reach me (Chris Coyier) using one of these methods:

    Please note: I will answer as many questions as I can, but I will certainly not be able to answer them all. I hope that you will use the forums to post questions because that will give you an opportunity to get help from the community as well.

    Read more...

  • Ask SM [CSS/JS]: Pixel Width Decisions, Modal Boxes

    By Chris Coyier, February 5th, 2009 in CSS | 47 Comments

    This is our second installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. If you have a question about one of these topics, feel free to reach me (Chris Coyier) through one of these methods: send an email to ask [at] smashingmagazine [dot] com with your question, post your question in our forum (you will need to sign up and yes, the forum is not officially launched yet, but it is running!) or, if you have a quick question, just tweet us @smashingmag or @chriscoyier with the tag “[Ask SM].”

    Screenshot

    Please note: I will do what I can to answer questions, but I certainly won't be able to answer them all. However, posting questions to the forum gives you the best opportunity to get help from the community.

    Read more...

  • 50 Useful Design Tools For Beautiful Web Typography

    By Noura Yehia, January 27th, 2009 in CSS, Fonts | 165 Comments

    Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right.

    TypeChart

    Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website.

    Below we cover typographic tools, useful typographic references, font browsers, typographic CSS- and JavaScript-techniques, hyphenation techniques, sIFR tools and resources, grids and related tools, free and commercial fonts, a guide to Web typography, examples of great Web typography.

    Please feel free to suggest further tools and resources in the comments to this post. And if you like this post please feel free to subscribe to our RSS-feed and follow us on Twitter.

    You may want to take a look at the following related articles:

    Read more...

  • Ask SM: How Do I Create A Colorful Sitemap With jQuery?

    By Chris Coyier, January 22nd, 2009 in CSS | 81 Comments

    We like to experiment with new ideas and concepts. We like to challenge ourselves and provide our readers with new formats. This post is the first in our "Ask Smashing Magazine" series, in which well-known developers from the web design community answer our readers' questions and suggest solutions to common problems.

    Today, we are glad to welcome Chris Coyier, who you may know from his articles on CSS-Tricks, to our Smashing Magazine Editorial Team. From now on, Chris will regularly answer your CSS- and jQuery-related questions and present answers to the most interesting, useful and original ones in his articles on Smashing Magazine. Welcome, Chris!

    example

    Of course, you can send any CSS- and jQuery-related question you want. To ask a question, you can do any of the following:

    1. Send an email to Chris at ask [at] smashingmagazine [dot] com with your question,
    2. Post your question in our forum, putting "[Ask SM]" in the thread title (yes, the forum is not officially launched yet, but it is running!),
    3. Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier with the tag "[Ask SM]."

    Please note: Chris will do what he can to answer most questions, but he will certainly not be able to answer all of them. However, we hope that our forum may help you to solve your problem in case Chris couldn't help you out.

    Read more...

  • 12 Useful Techniques For Good User Interface Design

    By Dmitry Fadeyev, January 19th, 2009 in How-To | 112 Comments

    Last week, we presented 10 Useful Web Application Interface Techniques, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in page.

    Yammer feed update

    This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. We also discuss how to implement these techniques so that they are properly used. Please feel free to suggest further ideas, approaches and coding solutions in the comments below.

    You may also want to take a look at the following related articles:

    Read more...

  • Push Your Web Design Into The Future With CSS3

    By Chris Spooner, January 8th, 2009 in CSS | 220 Comments

    There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification.

    CSS Shadow

    Realistically, you won't be able to use these on your everyday client projects for another few years, but for design blogs and websites aimed at the Web design community, these features can help you push the boundaries of modern Web design today, adding that extra spice to your design and helping the industry move forward. Here are five techniques snatched from the future that you can put into practice in your website designs today.

    Read more...

  • 50 Extremely Useful And Powerful CSS Tools

    By Smashing Editorial, December 9th, 2008 in CSS | 251 Comments

    We love useful stuff. For months, we have been bookmarking interesting, useful and creative CSS tools and related resources. We have been contacting developers, encouraging them to improve their tools and release their handy little apps to the public. Last year we prepared and published some of them in a series of smashing posts about CSS. Now again is the time to give these tools the attention they deserve. Big thanks to all designers and developers who contributed to the design community over the last months and years. We — our community and the design community — truly appreciate your efforts.

    TypeChart

    Below, we present 50 extremely useful CSS tools, generators, templates and resources. We did not include “traditional” CSS tools, such as Firebug or the Web Developer extension, but tried to focus on rather unknown tools that are definitely worth a look. Some tools are new and some are old, but hopefully everybody will find a couple of new useful or at least inspiring tools.

    We strongly encourage you to develop these tools further, build on the ideas presented here, release new tools for the public and let us know about them. We would love to feature your handy tool in our next review.

    Please take a look at the following related posts:

    Read more...

  • 100 Free High-Quality XHTML/CSS Templates

    By Steven Snell, December 1st, 2008 in Developer's Toolbox | 172 Comments

    If you haven’t taken a look at the (X)HTML/CSS templates that are available for free from a variety of sources, you may be surprised by the quality you can find. WordPress themes tend to get a lot of exposure and attention in the design community right now, but there is also a wide variety of high-quality (X)HTML/CSS templates that are free of charge.

    Template Screenshot

    In this post, we’ll showcase 100 free high-quality templates. Hopefully some of them will save you some time in your design and development. While they are generally free for personal or commercial use, always remember to check the license first for any restrictions or guidelines.

    You may want to take a look at other collections as well (some are from Smashing Magazine, some are not):

    Read more...

  • 12 Principles For Keeping Your Code Clean

    By Chris Coyier, November 12th, 2008 in CSS | 320 Comments

    Beautiful HTML is the foundation of a beautiful website. When I teach people about CSS, I always begin by telling them that good CSS can only exist with equally good HTML markup. A house is only as strong as its foundation, right? The advantages of clean, semantic HTML are many, yet so many websites suffer from poorly written markup.

    body class example

    Let's take a look at some poorly written HTML, discuss its problems, and then whip it into shape! Bear in mind, we are not passing any judgment on the content or design of this page, only the markup that builds it. If you are interested, take a peek at the bad code and the good code before we start so you can see the big picture. Now let's start right at the top.

    Read more...


Page 1 of 3123Next »

Advertisement
 

All Posts

Follow us on Twitter!
Subscribe to our RSS-feed!

Advertisement

Fresh Bookmarks

22 Free Seamless Vector Pattern Resources Perfect For Web Design
A collection of resources and articles related to vector patterns.

10 New PHP Content Management Systems
All based on PHP.

25 Beautiful Logos with Sequential Concept
Sequential logos maybe is a new trend among logo designers.

Designing a blog with HTML5
Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages.

20+ CSS Data Visualization Techniques
Get inspired.

CSS3 – a big storm is coming
With CSS3 media queries and multi-column layouts it will be a whole new ballgame.

Woodgrain: A Free Social Media Icon Set
With 18 social networks represented alongside astandard RSS icon in PNG format,

Webdesign: Five Minute Upgrade
Making Your Design Pop.

45 Stylish Typographical Desktop Wallpapers
These beautifully designed wallpapers are not solely about typography.

The Light CMS Trend
A new trend in CMSs I’m calling “light” CMSs.

  • 9Rules Logo
  • Quicksprout Logo