Explore new ideas in website design and layout

  • Article

With strong support for Cascading Style Sheets, Level 3 (CSS3) in Internet Explorer 10 and Windows Internet Explorer 9, you can be sure that your website's design "just works" across all popular browsers. This portion of the Windows Internet Explorer Dev Center shows you some of the potential that enhanced support for the Cascading Style Sheets (CSS) standard creates for your website's content design and layout. This topic contains the following sections:

  • Internet Explorer 10 how-to topics
  • Internet Explorer 9 how-to topics
  • Designer guide to new CSS features
  • Internet Explorer team blog posts
  • Internet Explorer samples gallery
  • Internet Explorer Test Drive demos
  • Other essential resources

Internet Explorer 10 how-to topics

The following topics highlight several new CSS capabilities in Internet Explorer 10:

Topic Description

How to prevent (or enable) text selection on your webpage using CSS

The -ms-user-select property is a new CSS property that enables web and app developers to control where users are able to select text within their webpages or Windows Store apps using JavaScript.

How to create an adaptive layout with CSS Grid

Here we guide you through the creation of a simple light box page for viewing photos in a photo gallery. We use Grid layout to organize the page's content and media queries to optimize the layout for viewing in either a portrait or landscape orientation.

How to bring your webpage to life with CSS transforms, transitions, and animations

Internet Explorer 10 (and Windows Store apps using JavaScript) adds to the support for CSS 2-D transforms introduced in Internet Explorer 9 by supporting CSS 3-D transforms, CSS transitions, and CSS animations.

How to add fun text effects using CSS

Internet Explorer 10 introduces support for hardware-accelerated text shadows using the text-shadow CSS property.

 

Internet Explorer 9 how-to topics

The following topics highlight several CSS features starting with Internet Explorer 9:

Topic Description

Add rounded corners with CSS3

By using CSS3 to round the corners of layout elements, you can refine the appearance of your website. Here we learn a few basic ways to make your website layout more compelling by using the new built-in support for rounded corners in Internet Explorer 9.

Add drop shadows with CSS3

You can add drop shadows to the outside or inside of your layout elements by using Internet Explorer 9 and CSS3. Shadows even follow the corner curves that you create with the new rounded corner support in Internet Explorer 9.

Create stylish buttons with CSS3

With CSS3 and Internet Explorer 9, you can create visually compelling buttons with just a little bit of markup. You learn here how to transform a simple hyperlink into a button styled completely with CSS.

Enhance your website's type design with CSS3

This topic shows you how to incorporate new CSS3 Fonts features into your website so that your type design is emphasized in both Internet Explorer 9 and other modern browsers.

 

Designer guide to new CSS features

If you're a seasoned web designer, you know how frustrating it can be when different browsers offer varied levels of support for the cutting-edge features you want to use. Microsoft has worked hard with both standards bodies and other browser vendors to close this feature gap. We're a member of the CSS Working Group (CSSWG), and we know that regular engagement with the World Wide Web Consortium (W3C), other browser vendors, specification editors, and experts invited from the broader community is necessary to advance the state of the web for all users.

To that end, we have added support for many CSS3 features in Internet Explorer 9, and even more in Internet Explorer 10. You can see a full list of new features in the Internet Explorer 10 Guide for Developers and the Internet Explorer 9 Guide for Developers.

Here are some highlights from Internet Explorer 10:

Here are highlights from Internet Explorer 9:

Internet Explorer team blog posts

The IEBlog is your direct line to the Internet Explorer team at Microsoft. You can find out about the latest developments in content design and layout by viewing the posts tagged with "CSS."

Here are several recent blog posts you might find useful:

Title Description

Full-page Animations Using CSS

Internet Explorer 9 introduced support for CSS 2-D Transforms. Internet Explorer 10 added support for CSS 3-D Transforms and CSS Animations.

Unprefixed CSS3 Gradients in IE10

Internet Explorer 10 supports the W3C Candidate Recommendation for CSS Gradients in their unprefixed form.

CSS3 3D Transforms in IE10

CSS3 features make it easier to build rich and immersive web experiences.

Controlling Selection with CSS user-select

Internet Explorer 10 includes support for a new CSS property, -ms-user-select, which makes it easier for web developers to control exactly what text can be selected on their websites.

CSS Corner: Using the Whole Font

With cross-browser support for both the CSS3 @font-face rule and the Web Open Font Format (WOFF) font packaging format, modern web typography has expanded far beyond the realm of "Web-safe fonts."

Adding Personality with CSS3 Transitions and Animations

Advancements like high-performance compiled JavaScript and hardware-accelerated rendering of HTML5 and CSS3 in Internet Explorer 9 and Internet Explorer 10 allow web developers to create richer experiences than they previously could. Two related features, CSS3 Transitions and CSS3 Animations, give web developers a declarative way to add personality to webpage interactions easily.

Building Rich Text-Centric Pages in IE10

Internet Explorer 10 introduces two new CSS features designed to make it easier for developers to create rich text-centric webpages and apps. CSS3 Regions provides a lightweight mechanism to flow content through multiple non-contiguous areas. Internet Explorer 10's support of CSS3 Hyphenation gives developers a simple mechanism to hyphenate text in a wide range of languages.

CSS3 text-shadow in IE10

Internet Explorer 10 introduces support for hardware-accelerated CSS3 text-shadow. The text-shadow property is one of the top requested features from web developers. It enables text effects that were previously difficult or impossible to accomplish in a standards-friendly way without resorting to inline images of text.

Internet Explorer 10 and CSS Features for Adaptive Layouts

Internet Explorer 10 contains many new CSS3 features all developed as implementations of evolving web standards. This post looks at three of those CSS features—CSS3 Grid Layout, Flexible Box Layout, and Multi-column Layout.

 

The Internet Explorer Samples Gallery can inspire you to implement some of the new design and layout features in Internet Explorer.

Here are just a few samples:

Sample Description

CSS Flexbox

CSS Flexbox lets you create webpages with elements, controls, forms, toolbars, and menus that can resize and reposition themselves when the user changes the size of the browser window.

CSS Multi-column layout

While printed newspapers are giving in to electronic versions, the column is alive and well online. CSS Multi-column layout enables you to create attractive text layouts in a number of variations.

CSS Grid overlay

CSS Grid enables you to create webpages with a layout where the elements overla​p and respond to changing window size, without requiring complicated pixel calculation.

CSS Exclusions

CSS Exclusions enable you to create webpages where text and other content can wrap around specific elements. This sample shows how to use exclusions to create complex layouts with elements absolutely positioned relative to a container.

 

Internet Explorer Test Drive demos

The Internet Explorer Test Drive is a great way to explore the possibilities of content design and presentation in both Internet Explorer 9 and Internet Explorer 10. For the full list of available demos, see the Test Drive Site Map. Some of our favorite CSS demos are listed here:

Other essential resources