Posts Tagged ‘CSS’

We are pleased to present below all posts tagged with ‘CSS’.

How To Use CSS3 Pseudo-Classes

CSS3 is a wonderful thing, but it’s easy to be bamboozled by the transforms and animations (many of which are vendor-specific) and forget about the nuts-and-bolts selectors that have also been added to the specification. A number of powerful new pseudo-selectors (16 are listed in the latest W3C spec) enable us to select elements based on a range of new criteria.

Screenshot

[fblike]

Before we look at these new CSS3 pseudo-classes, let’s briefly delve into the dusty past of the Web and chart the journey of these often misunderstood selectors.

Read more...

Styling Elements With Glyphs, Sprites and Pseudo-Elements

In 2002, Mark Newhouse published the article "Taming Lists", a very interesting piece in which he explained how to create custom list markers using pseudo-elements. Almost a decade later, Nicolas Gallagher came up with the technique pseudo background-crop which uses pseudo-elements with a sprite.

Displaying icons in links and as custom list markers

[fblike]

Today, on the shoulders of giants, we'll try to push the envelope. We'll discuss how you can style elements with no extra markup and using a bidi-friendly high-contrast proof CSS sprite technique (you'll find an example below). The technique will work in Internet Explorer 6/7 as well.

Read more...

Technical Web Typography: Guidelines and Techniques

The Web is 95% typography, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now — reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs?

[fblike]

Unfortunately, for every person who is obsessed with even the tiniest details of typography, a dozen or so people seem to be indifferent. It’s a shame; if you’re going to spend time writing something, don’t you want it to look great and be easy to read?

Read more...

CSS: Innovative Techniques and Practical Solutions

Although CSS isn't that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don't have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable. We also hope that these tutorials and articles will help you solve common design problems and find new ways of approaching tricky CSS issues.

Screenshot

[fblike]

The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article. Next week we will present even more useful new tools and resources for front-end developers. We sincerely appreciate the efforts of the design community — thank you, guys!

Read more...

The Bright (Near) Future of CSS

This article is an excerpt from Eric Meyer's recent book Smashing CSS, published by Wiley in cooperation with Smashing Magazine.

In this article, the focus is on what's coming: styling techniques you'll use in the immediate and near-term future. From styling HTML 5 elements to rearranging layout based on display parameters to crazy selection patterns to transforming element layout, these are all techniques that you may use tomorrow, next month, or next year. With partial browser support, they're all on the cutting edge of Web design.

The Bright (Near) Future of CSS

[fblike]

Accordingly, be careful not to get cut! A number of useful sites can help you figure out the exact syntaxes and patterns you need to use these techniques. Furthermore, a number of JavaScript libraries can extend support for advanced CSS back into older browsers, in some cases as far back as IE/Win 5.5.

Read more...

Responsive Web Design: What It Is and How To Use It

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.

Responsive Web Design

[fblike]

In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?

Read more...

Why We Should Start Using CSS3 And HTML5 Today

For a while now, here on Smashing Magazine, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day. When in reality, they are effectively waiting for Godot.

Screenshot

Just like the elusive character from Beckett’s classic play, this day of complete cross-browser support is not ever truly going to find its dawn and deliver us this wonderful new Web where our work looks the same within the window of any and every Web browser. Which means that many of us in the online reaches, from clients to designers to developers and on, are going to need to adjust our thinking so that we can realistically approach the Web as it is now, and more than likely how it will be in the future.

Read more...

Using the LESS CSS Preprocessor for Smarter Style Sheets

As a Web designer you're undoubtedly familiar with CSS, the style sheet language used to format markup on Web pages. CSS itself is extremely simple, consisting of rule sets and declaration blocks—what to style, how to style it—and it does pretty much everything you want, right? Well, not quite.

[fblike]

You see, while the simple design of CSS makes it very accessible to beginners, it also poses limitations on what you can do with it. These limitations, like the inability to set variables or to perform operations, mean that we inevitably end up repeating the same pieces of styling in different places. Not good for following best practices—in this case, sticking to DRY (don't repeat yourself) for less code and easier maintenance.

Read more...

Photoshop-Inspired Techniques with 100% CSS

Since the beginning of CSS3, Web designers have begun experimenting with different code-based solutions to add to design, and even to make up a design entirely. Even with older versions of CSS there are many design solutions that can be done with 100% code, no images necessary.

Polaroids

In this article, we're going to take a look at some design solutions that are now possible with CSS, whether it be with the new, more advanced CSS3 or with prior versions. Everything from small details to entire features can be created with CSS and a bit of markup, and it's amazing to see the solutions created and advancements made in just the last few years.

Despite some of the interesting things we can do with CSS, how practical is it? We'll also take into consideration the practicality of some of these uses, and whether they should just be for fun and experimentation, or perhaps someday a real part of Web design. It's intriguing to think about what kind of imagery and Photoshop-inspired effects could soon be completely replaced with only code, and how this will affect the future of Web development.

Read more...

Equal Height Column Layouts with Borders and Negative Margins in CSS

"What? Another "Equal Height Columns" article? Enough already!" If this is what you think, then think again because this solution is different. It does not rely on any of the usual tricks. It does not use images, nor extra markup, nor CSS3, nor pseudo-classes, nor Javascript, nor absolute positioning. All it uses is border and negative margins. Please note that this article will also demonstrate different construct techniques and will brush up on a few concepts.

Two column layout

[fblike]

In this post we will build three layouts using CSS: a two column layout with no wrapper div, a two column layout with two vertical borders between the columns and a three column layout with a single wrapper. All layouts have coding examples and demos for your convenience.

Read more...

↑ Back to top