tag Layouts

標籤
貢獻25
25
11:50 AM · Nov 17 ,2025
vitaly-friedman 頭像 zoe-mickley-gillenwater 頭像 matt-cronin 頭像 newsletter-team 頭像 karenmenezes 頭像 sean-hodge 頭像 alma-hoffmann 頭像 ben-gremillion 頭像 zellliew 頭像 dirk-jesse 頭像 geir-wavik 頭像 obinwanne-hill 頭像

@Layouts / 博客 RSS 訂閱

divya-manian 頭像

Divya Manian - Six CSS Layout Features To Look Forward To

At W3Conf, I gave a talk on how the CSS Working Group is attempting to solve the concerns of Web developers with multiple proposals. There are six layout proposals that are relevant to us, all of wh

css3 , Layouts , coding , Css

收藏 評論

gabriel-shoyombo 頭像

Gabriel Shoyombo - Solving Media Object Float Issues With CSS Block Formatting Contexts

Let’s imagine we’re making a small component. It can be anything, really, but let’s use a media object as an example. Nicole Sullivan had a solid definition of media objects from way back in 2010, a

Tutorials , Layouts , coding , Css

收藏 評論

christopher-gammon 頭像

CJ Gammon - Killer Responsive Layouts With CSS Regions

As Web designers, we are largely constrained by the layout features available to us. Content placed inside a container will often naturally extend the container vertically, wrapping the content. If

Layouts , coding , Css , HTML

收藏 評論

john-imbong 頭像

John Imbong - The Definitive Guide to Using Negative Margins

Since the recommendation of CSS2 back in 1998, the use of tables has slowly faded into the background and into the history books. Because of this, CSS layouts have since then been synonymous with co

Layouts , coding , Css , Essentials

收藏 評論

newsletter-team 頭像

The Smashing Newsletter Team - Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

This article discusses the pros and cons of each type of layout. Either one can be used to make a successful website layout, as long as you keep usability in mind. Why all the debate? Web page desi

Layouts , coding , Css

收藏 評論

sven-lennartz 頭像

Sven Lennartz - 45 More Excellent Blog Designs

We, designers, are creative folks. And being creative, we permanently strive for inspiration — innovative approaches, crazy ideas, smashing concepts and, in general, unique designs which can help us

Showcases , Layouts , Inspiration , Blogging

收藏 評論

matt-cronin 頭像

Matt Cronin - 8 Layout Solutions To Improve Your Designs

In this article, we’ll discuss 8 useful layout solutions and techniques that will help you create a clean and organized content layout. The 8 techniques include sliders, tabs, progressive layouts, s

Techniques , Layouts , User Interaction , Design

收藏 評論

louis-lazaris 頭像

Louis Lazaris - The Z-Index CSS Property: A Comprehensive Look

Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results — as soon as you refresh the page, the value set for the prop

Layouts , coding , Css , Essentials

收藏 評論

michellebarker 頭像

michellebarker - Smarter Grids With Sass And Susy

If you’re a designer, you’ll know that grids are your friends. More often than not, they’re the vital architecture that holds a beautiful design together; they create rhythm, structure your page, le

sass , Grids , Layouts

收藏 評論

vitaly-friedman 頭像

Vitaly Friedman - 50 New Beautiful Blog Designs

There are things that can’t be showcased too often. For instance, beautiful blog designs. We have presented hundreds of beautiful blog designs in the past and now it’s time to provide our readers wi

Showcases , Layouts , Inspiration , Blogging

收藏 評論

enrique-ramirez 頭像

Enrique Ramirez - Coding An HTML 5 Layout From Scratch

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled devel

Layouts , coding , HTML , html5

收藏 評論

vitaly-friedman 頭像

Vitaly Friedman - 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)

This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overvie

Techniques , Layouts , coding , Css

收藏 評論

zoe-mickley-gillenwater 頭像

Zoe Mickley Gillenwater - Modern CSS Layouts: The Essential Characteristics

Now is an exciting time to be creating CSS layouts. After years of what felt like the same old techniques for the same old browsers, we’re finally seeing browsers implement CSS 3, HTML 5 and other t

Layouts , coding , Css , Essentials

收藏 評論

vitaly-friedman 頭像

Vitaly Friedman - CSS3 Design Ideas

This process has taken a lot of time as it wasn’t easy, because we received quite a few creative submissions: however, a decision had to be taken and so we thoroughly went from one competition entry

css3 , Layouts , coding

收藏 評論

cristian-diaz 頭像

Cristian Díaz - A Guide To Hover And Pointer Media Queries

The Internet is filled with a lot of interactivity, and more often than not the way we choose to show we can interact with an element is by using the hover pseudo-class. After all, changing an eleme

Techniques , Tools , Layouts , Css

收藏 評論

newsletter-team 頭像

The Smashing Newsletter Team - Adaptive CSS-Layouts: New Era In Fluid Layouts?

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

Layouts , coding , Css

收藏 評論

geir-wavik 頭像

Geir Wavik - Table Layouts vs. Div Layouts: From Hell to… Hell?

This article covers common problems with layout structure in web design. The first part goes through what table and div hells are, including lots of examples. The next section shows how to write cle

Tables , Layouts , coding

收藏 評論

karenmenezes 頭像

Karen Menezes - Harnessing Flexbox For Today’s Web Apps

Although the syntax might be initially confounding, flexbox lives up to its name. It creates intelligent boxes that are stretchable, squeezable and capable of changing visual order. It provides simp

flexbox , Tools , Layouts , coding , Css

收藏 評論

tyler-tate 頭像

Tyler Tate - The Semantic Grid System: Page Layout For Tomorrow

CSS grid frameworks can make your life easier, but they’re not without their faults. Fortunately for us, modern techniques offer a new approach to constructing page layouts. But before getting to th

Semantics , Grids , Layouts , coding , Css

收藏 評論

david-storey 頭像

David Storey - Flexbox Is As Easy As Pie: Designing CSS Layouts

Flexbox (or flexible box layout) is a new box model optimized for UI layout. As one of the first CSS modules designed for actual layout (floats were really meant mostly for things such as wrapping t

flexbox , Tools , Layouts , coding , Css

收藏 評論

vitaly-friedman 頭像

Vitaly Friedman - Applying Divine Proportion To Your Web Designs

Effective web design doesn’t have to be pretty and colorful — it has to be clear and intuitive; in fact, we have analyzed the principles of effective design in our previous posts. However, how can y

Mathematics , Layouts , Web Design , Design

收藏 評論

richard-shepherd 頭像

Richard Shepherd - CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started

The flexible box layout module — or “flexbox,” to use its popular nickname — is an interesting part of the W3C Working Draft. The flexbox specification is still a draft and subject to change, so kee

flexbox , Layouts , coding , Css

收藏 評論

matt-cronin 頭像

Matt Cronin - Creative Print Typography Layouts

In print, typography doesn’t have to be plain and boring. It can be beautiful, creative, and colorful. There are a number of ways to liven up typography, such as creative and original layouts, using

Print , Showcases , Typography , Layouts , Inspiration , Posters

收藏 評論

vitaly-friedman 頭像

Vitaly Friedman - CSS Float Theory: Things You Should Know

The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability pro

Tutorials , Layouts , coding , Css , Essentials

收藏 評論