In Modern CSS Layouts, Part 1: The Essential Characteristics, you learned that modern, CSS-based web sites should be progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich. Now that you know what characterizes a modern CSS web site, how do you build one? Here are dozens of essential techniques and tools to learn and use to achieve the characteristics of today’s most successful CSS-based web pages.
Just as in the previous article, we’re not going to be talking about design trends and styles; these styles are always changing. Instead, we’re focusing on the specific techniques that you need to know to create modern CSS-based web pages of any style. For each technique or tool, we’ll indicate which of the five characteristics it helps meet. To keep this shorter than an encyclopedia, we’ll also just cover the basics of each technique, then point you to some useful, hand-picked resources to learn the full details.
Read more…
Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.
Read more…
Almost every movie has a scene in which a character pull the protagonist aside and says, “There’s something you should know about [insert another character’s name here].” Most of the time, we find out some dark secret about a supposed friend of the protagonist or that the main ally is actually an evil overlord.
Read more…
Design is everywhere. We see it in on billboards as we drive down the street. When we go to a restaurant and look at the menus, we see it. When we sit down on our couch and watch television, it’s visible on the commercials, advertisements, and even the movies and TV shows. [Links checked March/10/2017]
It is all around us and it stimulates and motivates much of our decisions subconsciously every day. The encyclopedia refers to graphic design as, “the process of communicating visually using text and images to present information. Graphic design practice embraces a range of cognitive skills, aesthetics and crafts, including typography, visual arts and page layout. Like other forms of design, graphic design often refers to both the process (designing) by which the communication is created and the products (designs) which are generated.”
Read more…
CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers.
Read more…
CSS and JavaScript are extremely powerful tools, designers and developers come up with fresh and clever CSS tricks and techniques that are shared with other developers online.
Read more…
In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer’s toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding.
Read more…
CSS3 is the partially implemented sequel to the CSS2 spec we all know and love. It’s already popping up in new browsers such as Firefox 3.5, Safari 4 and Chrome. In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons.
Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We’ll show you here how to create nice button styles without any hacks or cheats.
Read more…
Let’s look at some clever techniques developed and used by top professionals in the Web design industry. We can use their examples to develop our own alternative solutions.
Read more…
Buttons, whatever their purpose, are important design elements. They could be the end point of a Web form or a call to action. Designers have many reasons to style buttons, including to make them more attractive and to enhance usability. One of the most important reasons, though, is that standard buttons can easily be missed by users because they often look similar to elements in their operating system. Here, we present you several techniques and tutorials to help you learn how to style buttons using CSS. We’ll also address usability.
Before we explain how to style buttons, let’s clear up a common misconception: buttons are not links. The main purpose of a link is to navigate between pages and views, whereas buttons allow you to perform an action (such as submit a form).
Read more…
