간단한 막대 그래프를 만들기 위한 10가지 CSS 스니펫

웹에서 간단한 CSS 막대 그래프를 만드는 방법을 찾고 계십니까? 이 컬렉션은 모두 CSS로 설계된 무료 오픈 소스 막대 차트로 가득 차 있기 때문에 도움이 될 것입니다.

이러한 그래프의 대부분은 추가 CSS 애니메이션 및 그라디언트 효과로 강력한 펀치를 제공합니다. 그러나 데이터의 위치, 크기, 모양 및 디자인도 다시 스타일화하는 몇 가지를 찾을 수 있습니다. 세련된 막대 그래프 UI를 찾는 모든 프론트엔드 개발자를 위한 완벽한 컬렉션입니다.

1. 데이터 차트

이 세트에는 아름답게 디자인되고 매우 잘 실행된 몇 가지 차트가 있습니다. 개발자 Kris Olszewski는 원시 데이터(이 경우 자리 표시자 번호)를 공유하는 각 막대의 상단과 함께 이 막대 그래프의 UX에 주로 집중했습니다.

당연히 모든 것이 CSS에서 실행되며 이는 확실히 인상적입니다. 특정 값에 따라 배경색을 변경할 수 있는 수직 및 수평 막대 및 계층화된 막대에 대한 템플릿을 제공합니다.

개발자가 선택하고 사용자 정의할 수 있는 다양한 기능을 제공하기 때문에 제가 가장 좋아하는 세트 중 하나입니다.

2. 포켓몬 막대 그래프

이 디자인이 실제 레이아웃에서 특히 유용할 것이라고 말할 수는 없지만 확실히 인상적입니다.

이 포켓몬 스타일의 막대는 웹을 위한 창의적인 그래프 디자인을 제공합니다. 각 막대는 개별 포켓몬의 눈에 대한 벡터 요소와 함께 특정 색 구성표에 의존합니다.

각각은 호버 애니메이션 효과를 제공하므로 원하는 전환에 맞게 스타일을 변경할 수도 있습니다. 그리고 이 생물을 다른 동물로 바꾸고 싶다면 변경된 색상으로 이 동일한 템플릿을 따를 수 있습니다.

3. 애니메이션 그래프

막대 그래프는 시각적 데이터를 표시하여 쉽게 사용할 수 있도록 하는 데 사용됩니다. 이는 시각적 항목 과 원시 데이터가 모두 포함되어야 함을 의미합니다.

각 막대의 상단에 백분율 레이블을 사용하는 이 그래프에서 제가 정말 좋아하는 것 중 하나입니다. 범례나 X/Y 레이블이 없지만 추가하기 어렵지 않습니다.

가장 인상적인 부분은 전체가 CSS를 통해 실행되는 방식입니다. CSS 속성 때문에 애니메이션과 백분율 텍스트가 모두 나타납니다. 미친 물건!

4. 미니멀리스트 차트

단순하고 사용하기 쉬운 것은 웹을 휩쓸고 있는 미니멀리스트 열풍을 가장 잘 설명합니다. 미니멀리즘은 반응형 웹사이트 또는 무거운 색 구성표가 필요하지 않은 단순한 레이아웃에 가장 적합한 선택입니다.

이 막대 차트를 사용하면 원하는 밝은 색상에 맞게 데이터 스타일을 변경할 수 있습니다.

임의의 배경 행을 사용하여 측정값을 표시하고 Y축에 레이블을 추가하여 데이터를 명확히 할 수도 있습니다.

5. 순수 CSS 컬러 바

CSS 그라디언트는 웹에 많은 것을 추가하며 이 막대 그래프는 그라디언트가 작동하는 또 다른 예일 뿐입니다.

각 막대는 고전적인 웹 2.0 그라디언트를 사용하여 약간 구식 느낌이 들지만 환상적으로 보입니다. 전체 디자인은 Sass 코드에서 작동하며 변수를 사용하여 애니메이션 지연, 막대 크기 및 총 그래프 높이를 설정합니다.

색상을 편집하려면 Sass/SCSS를 통해 작업하거나 CodePen을 사용하여 원시 CSS로 컴파일해야 합니다. 그러나 이것은 지나치게 복잡한 그래프가 아니므로 큰 문제가 되지 않습니다.

6. 엇갈린 수평 막대

선형 애니메이션은 관심을 빨리 끌기 때문에 제가 가장 좋아하는 것 중 일부입니다. 이 펜에서는 각 막대가 차례로 보기에 로드되는 선형 애니메이션의 예를 볼 수 있습니다.

가로로 디자인되어 막대가 화면 전체에 로드되고 막대 그래픽 내부에 레이블이 포함됩니다. 이렇게 하면 총 "스킬 레벨" 측정이 X축을 따르고 수직으로 더 많은 스킬을 추가할 수 있는 여지가 남습니다.

내가 본 더 깔끔한 막대 그래프 중 하나이며 모든 기술 기반 포트폴리오 웹 사이트에서 훌륭하게 작동할 수 있습니다.

7. 반응형 막대 그래프

모든 최신 웹 사이트는 실제로 모든 장치를 수용할 수 있도록 반응해야 합니다. 그러나 일부 요소는 다른 요소보다 대응하기가 더 어렵습니다.

탭, 큰 테이블 및 그래프는 모두 복잡한 예입니다. 이 반응형 그래프는 작은 화면을 훌륭하게 처리합니다. 막대 사이의 전체 크기와 공간 이상으로 재배열되지 않습니다.

작은 화면에서는 막대 항목이 비좁고 읽기가 거의 불가능하게 느껴질 수 있습니다. 그러나 대부분의 경우 이 반응형 스타일은 환상적이며 정적 그래프를 완벽하게 대체합니다.

8. 일일 CSS 그래프

개발자는 Daily CSS와 같은 과제를 통해 자신의 기술을 테스트하는 것을 좋아합니다. 이것은 매일 UI 디자인의 이미지를 가져와서 개발자에게 HTML/CSS로 다시 만들도록 요청합니다.

CodePen에서 많은 것을 찾을 수 있으며 이 그래프는 하나의 깨끗한 예입니다.

심플하고 깔끔한 애니메이션 효과가 각 바에 부착되어 디자인되었습니다. 말할 것도 없이 그것은 모든 웹사이트에 쉽게 적응할 수 있는 단색 색 구성표를 따릅니다.

9. 재고 차트

또 다른 멋진 Daily CSS 예제는 CSS와 일부 교묘한 HTML 기술을 사용하여 만든 포도원 인벤토리 차트입니다.

CSS를 통해서만 실행된다는 것은 꽤 독특한 아이디어이며 훨씬 더 인상적입니다. 그래프의 실제 디자인과 브라우저에서 완벽하게 렌더링되는 방식에 가장 깊은 인상을 받았습니다.

물론 이것은 대부분의 웹사이트에서 작동하지 않지만 현대 CSS에서 가능한 것에 대한 증거입니다.

10. CSS 전용 수평 기술

온라인에서 기술 측정 막대 그래프를 많이 찾을 수 있지만 Jed Trow의 이 막대 그래프는 정말 좋은 것입니다.

완벽하게 반응하도록 설계되었으며 모든 화면에서 완벽하게 작동합니다. 스마트폰의 경우 이 막대 그래프의 크기를 320px까지 줄일 수 있으며 여전히 일관성을 유지합니다.

또한 이 펜에는 모든 소스 코드와 작동 방식을 볼 수 있는 데모 아래에 작은 튜토리얼 섹션이 포함되어 있습니다. 물론 CodePen의 IDE에서 복사/붙여넣기만 할 수도 있지만 개발자가 프로세스를 분해하는 것을 보는 것은 좋습니다.

이 모든 그래프는 고유한 것을 제공하지만 한 가지 공통점도 공유합니다. 바로 순수한 CSS 코드의 놀라운 사용입니다.

당신은 또한 좋아할 수도 있습니다: 10개의 오픈 소스 JavaScript 데이터 차트 라이브러리 가치가 있습니다.