38 CSS Magazine Layouts

150 阅读5分钟
原文链接: freefrontend.com

38 CSS Magazine Layouts

Collection of HTML and CSS magazine layouts. Update of May 2018 collection. 6 new items.

Related Articles

  1. CSS Masonry Examples

Demo image: CSS Grid Layout

Author

  • Brian Haferkamp

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Full spread magazine layout

Full spread magazine layout - CSS Grid Layout

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Grid Magazine Typography

Author

  • Kam Black

Made with

  • HTML / CSS (SCSS)

About the code

Grid Magazine Typography

HTML and CSS grid magazine typography.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Red Onion's: The Daily Prophet

Author

  • Ana Liza Pandac

Made with

  • HTML / CSS (SCSS)

About the code

Red Onion's: The Daily Prophet

A copy of the Red Onion's Daily Prophet using Flexbox.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Responsive Multicol Magazine Layout

Author

  • Dudley Storey

Made with

  • HTML
  • CSS/SCSS

About the code

Responsive Multicol Magazine Layout

"Visiting Vancouver, I was very impressed with the layout of "Montecristo Magazine", but disappointed that their online presence didn't reflect that. This is my design to improve on that." - Dudley Storey

Demo image: Magazine Layout

Author

  • Clara Beyer

Made with

  • HTML / CSS (SCSS)

About the code

Magazine Layout

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Dynamic Newspaper w/CSS Grid

Author

  • Jarrod Yellets

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Dynamic Newspaper w/CSS Grid

Automatically loads latest stories on refresh. Layout is done with CSS Grid. Built with HTML5, CSS3, JavaScript, jQuery and the News API.

Demo image: Grid Experiment No. 4

Author

  • Jules Forrest

Made with

  • HTML
  • CSS/SCSS

About the code

Grid Experiment No. 4

Recreation of a print menu from "The Phoenicia Diner in Phoenicia", NY using CSS grid.

Demo image: Apple Magazine

Author

  • Andrew

Made with

  • HTML / CSS (SCSS)

About the code

Apple Magazine

CSS Grid, Flexbox, blend-modes and Apple.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Grid Magazine Layout

Author

  • Elzette

Made with

  • HTML / CSS

About the code

CSS Grid Magazine Layout

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Grid Experiment No. 3

Author

  • Jules Forrest

Made with

  • HTML
  • CSS

About the code

Grid Experiment No. 3

Recreation of a print layout from "The Intelligent Lifestyle Magazine" book using CSS grid.

Demo Image: Print Layout From The Intelligent Lifestyle Magazine

Author

  • Jules Forrest
  • 03.09.2017

Links

Made with

  • HTML
  • CSS

About the code

Print Layout From The Intelligent Lifestyle Magazine #1

Recreation of a print layout from The Intelligent Lifestyle Magazine book using CSS Grid.

Demo Image: Print Layout From The Intelligent Lifestyle Magazine

Author

  • Jules Forrest
  • 03.09.2017

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Print Layout From The Intelligent Lifestyle Magazine #2

Recreation of a print layout from The Intelligent Lifestyle Magazine book using CSS Grid.

Demo Image: Magazine Layout
Demo Image: Magazine Layout

Magazine Layout

HTML and CSS emulating a fashion magazine.
Made by Raisa Y
February 6, 2017

Demo Image: Magazine Layout
Demo Image: Magazine Layout

Magazine Layout

Magazine layout with HTML and CSS.
Made by Adam Norris
January 31, 2017

Demo Image: Responsive Journal With CSS Grid
Demo Image: Responsive Journal With CSS Grid

Responsive Journal With CSS Grid

HTML and CSS responsive magazine layout.
Made by Umberto Junior
January 30, 2017

Demo Image: Magazine Layout
Demo Image: Magazine Layout

Magazine Layout

Magazine layout with HTML and CSS.
Made by Anastasia Lanz
January 28, 2017

Demo Image: Hero Effect–Magazine
Demo Image: Hero Effect–Magazine

Hero Effect–Magazine

A hero image that uses height: 100vh to cover the entire screen for a magazine cover effect. When scrolled, it has a subtle animation similar to opening a magazine.
Made by Cameron Campbell
November 15, 2016

Demo Image: London Fashion Week // CSS Grid
Demo Image: London Fashion Week // CSS Grid

London Fashion Week // CSS Grid

An example of an irregular grid based on a magazine layout.
Made by Brian Haferkamp
October 25, 2016

Demo Image: Luminous Magazine
Demo Image: Luminous Magazine

Luminous Magazine

Another layout experiment.
Made by Bart Veneman
October 8, 2016

Demo Image: Article Layout
Demo Image: Article Layout

Article Layout

Playing around with an article layout. Magazine/responsive.
Made by dominic
August 3, 2016

Demo Image: Magazine Layout
Demo Image: Magazine Layout

Magazine Layout

6 brands for the summer - magazine layout with HTML and CSS.
Made by Bart Veneman
July 22, 2016

Demo Image: Magazine Layout - A Piece Of Pierce
Demo Image: Magazine Layout - A Piece Of Pierce

Magazine Layout - A Piece Of Pierce

HTML and CSS magazine layout.
Made by Bart Veneman
July 21, 2016

Demo Image: Article For A Magazine
Demo Image: Article For A Magazine

Article For A Magazine

This is a flat, modern and responsive article for a magazine.
Made by Yves
July 10, 2016

Demo Image: Magazine Article
Demo Image: Magazine Article

Magazine Article

Magazine article with HTML and CSS.
Made by Patrick Edqvist
May 1, 2016

Demo Image: Food Magazine Template
Demo Image: Food Magazine Template

Food Magazine Template

Responsive food magazine template with HTML, CSS and JavaScript.
Made by Riccardo Zanutta
April 26, 2016

Demo Image: Responsive Layout Magazine Style
Demo Image: Responsive Layout Magazine Style

Responsive Layout Magazine Style

HTML and CSS responsive layout magazine style.
Made by Mark
April 23, 2016

Demo Image: Magazine Layout
Demo Image: Magazine Layout

Magazine Layout

Magazine layout with HTML and CSS.
Made by Chris Baker
April 21, 2016

Demo Image: Magazine Template
Demo Image: Magazine Template

Magazine Template

Magazine template with HTML, CSS and JavaScript.
Made by NOTBIGMUZZY
April 19, 2016

Demo Image: Magazine Layout Attempt #1
Demo Image: Magazine Layout Attempt #1

Magazine Layout Attempt #1

From “Gormet” magazine.
Made by Chris Coyier
January 13, 2016

Demo Image: Magazine Style Article Layout
Demo Image: Magazine Style Article Layout

Magazine Style Article Layout

Magazine style article layout with a full bleed cover hero photo. Inspired by RL Mag.
Made by Sami Taberman
December 15, 2015

Demo Image: Newspaper Style Design
Demo Image: Newspaper Style Design

Newspaper Style Design

Newspaper style design in HTML and CSS.
Made by Silke V
November 10, 2015

Demo Image: Magazine Layout
Demo Image: Magazine Layout

Magazine Layout

A slick design for a magazine on tablets.
Made by Dan Andersson
October 29, 2016

Demo image: Responsive Magazine Layout

Author

  • Heather Buchel

Made with

  • HTML / CSS (SCSS)

About the code

Responsive Magazine Layout

Playing around with the new CSS Grid module spec and Flexbox.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo Image: Responsive Magazine Layout
Demo Image: Responsive Magazine Layout

Responsive Magazine Layout

Magazine spread style tryouts with HTML and CSS.
Made by Mark
October 23, 2015

Demo Image: Another Magazine Layout
Demo Image: Another Magazine Layout

Another Magazine Layout

Another magazine layout with HTML and CSS.
Made by Mark
October 20, 2015

Demo Image: Magazine Layout Responsive
Demo Image: Magazine Layout Responsive

Magazine Layout Responsive

Responsive magazine layout with HTML and CSS.
Made by Mark
October 19, 2015

Demo Image: Magazine Layout Attempt #2
Demo Image: Magazine Layout Attempt #2

Magazine Layout Attempt #2

Magazine layout attempt #2 with HTML, CSS and JavaScript.
Made by Chris Coyier
October 10, 2015

Demo Image: Magazine Layout #2
Demo Image: Magazine Layout #2

Magazine Layout #2

Magazine layout #2 with HTML and CSS.
Made by Ricky Eckhardt
September 5, 2014