12 CSS Infographics

212 阅读2分钟
原文链接: freefrontend.com

12 CSS Infographics

Collection of hand-picked free HTML and CSS infographic code examples by Ana Tudor.

Demo image: Responsive Infographic

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic

Responsive infographic with CSS variables, calc() and flexbox.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic

Responsive infographic with CSS variables, grid layout. Nosupport due to CSS variable + calc() bugs.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic

Responsive infographic with CSS variables, flexbox and clip-path.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic

Responsive infographic with CSS variables, grid layout.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic

Responsive infographic with CSS variables, grid layout.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic

Responsive infographic with CSS variables and grid layout.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic

Responsive infographic with CSS variables, grid, clipping and masking.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic

Responsive infographic with CSS variables, calc(), grid layout.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic

Responsive infographic with CSS variables, grid.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Infographic in HTML and CSS

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Infographic in HTML and CSS

Infographic with CSS grid and variables.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Infographic with CSS Variables

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic with CSS Variables

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic

Responsive infographic with CSS variables and flexbox tricks.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -