반응형 가격표 생성을 위한 10가지 무료 CSS 스니펫

가격 페이지는 모든 온라인 상점의 필수 요소입니다. 웹 전체의 SaaS 제품, 서비스 회사 및 전자 상거래 상점에 사용됩니다.

옵션, 기능 및 (자연스럽게) 가격을 비교하는 가격표 없이는 가격 책정 페이지가 완성되지 않습니다. 그러나 처음부터 직접 디자인하는 것은 번거로울 수 있습니다.

바로 이러한 오픈 소스 가격표가 도움이 될 수 있습니다. 이것들은 모두 완벽하게 반응하며 자신을 사용자 정의하거나 기존 코드를 재사용하여 시간을 절약하려는 경우 템플릿으로 훌륭하게 작동합니다.

1. Travis Williamson의 아이콘 테이블

훌륭한 영상은 항상 판매됩니다. 제품 사진이나 맞춤형 일러스트레이션일 수 있지만 텍스트보다 시각적인 요소가 더 빨리 시선을 사로잡습니다.

이 아이콘화된 가격 테이블은 시각적 테이블 열로 가능한 작업의 훌륭한 예입니다. 아이콘을 추가하면 고객이 읽기도 전에 각 패키지로 무엇을 얻을 수 있는지 고객에게 알릴 수 있습니다. 아이콘은 다양한 기능과 기능을 보여줍니다. 가장 작은 계획에는 종이 비행기가 있고 가장 큰 계획에는 완전한 로켓 우주선이 있습니다. 대비에 대해 이야기하십시오!

펜 보기
Travis Williamson(@travisw)의 가격표

2. Zebra Striping w/ Colors by Agustin Ortiz

이 예는 훨씬 더 단순한 가격표를 가지고 있으며 보다 일반적인 디자인 규칙을 따릅니다. 얼룩말 줄무늬, 큰 가격 헤더 및 다양한 색상을 사용하여 특정 가격 형식이 나머지 형식과 차별화되도록 돕습니다.

색상이 약간 강하게 느껴질 수 있으므로 모든 레이아웃에 적합하지 않습니다. 그러나 색상을 쉽게 변경하고 동일한 형식을 유지하여 이 가격표가 귀하의 사이트에서 작동하도록 할 수 있습니다.

펜 가격표 참조 | Agustin Ortiz의 Tabla de Precios

3. Mike Torosian의 다크 퍼플 테이블

더 어둡고 풍부한 테이블 디자인을 원하시면 이 보라색 가격표를 확인하세요. 배경 그라디언트와 테두리 호버 효과를 사용하여 웹에서 가장 전문적인 가격 테이블 중 하나를 만듭니다. 또한 완전히 반응하므로 브라우저가 작아질수록 테이블 요소가 행으로 나뉩니다.

Mike Torosian의 펜 가격표 보기

4. LittleSnippets의 전문적인 가격 책정

B2B 웹사이트는 종종 독창적인 색 구성표와 관련 없는 아이콘에서 벗어나 보다 전문적인 디자인을 찾습니다. 이 가격 책정 디자인은 어둡고 밝은 색조의 일반적인 색상 구성표를 따르는 한 가지 예입니다.

한 가격 열은 진한 파란색 강조 표시를 사용하여 표의 나머지 부분에서 튀어나옵니다. 더 높은 전환율로 이어질 수 있으므로 이 기술을 따르는 것이 표준 관행입니다. 그렇기 때문에 "전문적인" 계획도 그림자를 사용하여 다른 기둥 위에 나타납니다. 그러나 더 작게 크기를 조정하면 더 쉽게 탐색할 수 있도록 스택 형태로 떨어집니다.

Pen #1214 – LittleSnippets의 가격표 참조

5. Nidheesh Balachandran의 호버 효과가 있는 테이블

이 가격표 디자인에서는 어두운 표 머리글에 색상을 추가하는 멋진 호버 효과를 찾을 수 있습니다. 그들은 각각 선택한 배경 이미지를 위한 공간을 남기고 호버 효과는 CSS를 통해 관리됩니다.

내가 좋아하는 또 다른 점은 전체 테이블 열에 연결된 클릭 이벤트입니다. 이렇게 하면 방문자가 열의 아무 곳이나 클릭하면 관련 가입 페이지로 바로 이동합니다.

Nidheesh Balachandran의 펜 가격표 참조

6. Sahar Ali Raza의 부트스트랩 가격표

프레임워크와 관련 테마로 할 수 있는 일이 너무 많기 때문에 저는 Bootstrap의 열렬한 팬입니다. 그러한 예가 이 가격표 예입니다.

기울어진 머리글 배경과 호버 애니메이션을 포함하여 이 디자인의 대부분은 사용자 지정 코딩되었습니다. 그러나 전체 레이아웃은 기본적으로 완전히 반응하도록 만드는 Bootstrap에 의존합니다. 타이포그래피가 훌륭하고 각 행을 이동할 때 호버 애니메이션이 마음에 듭니다. 이것은 거의 모든 유형의 웹 사이트에서 작동할 수 있는 깔끔한 테이블 디자인입니다.

Sahar Ali Raza의 Pen Bootstrap 가격표 보기

7. Morten Srensen의 머티리얼 디자인 가격표

Google의 머티리얼 디자인이 마음에 들면 이 가격표가 마음에 드실 겁니다. 그림자 호버 및 평면 색 구성표와 같은 Google에서 제안한 많은 기능을 따르는 재료 UI 테이블입니다.

펜 보기
Morten Srensen의 머티리얼 디자인 가격표(flexbox).

8. Daniel Hearn의 깔끔하고 단순한 가격표

매우 깨끗하고 가벼운 이 흰색 가격표를 가장 잘 설명합니다. 눈에 띄기 위해 많은 색상이나 멋진 기능에 의존하지 않습니다. 대신 헤더에 회색을 사용하고 텍스트 대비에 흑백을 사용합니다. CTA 버튼이 강한 녹색 윤곽선 효과를 유지하기 때문에 이것은 실제로 잘 작동합니다.

표에서 색상을 줄이면 색상이 있는 유일한 영역에 주의를 기울이고 일반적으로 더 많은 클릭을 유도합니다. 이것은 순수한 CSS이므로 디자인에 맞게 버튼 색상을 쉽게 업데이트할 수 있습니다.

Daniel Hearn의 펜 가격표 -1 참조

9. Dylan Mcleod의 WIP 테이블

진행 중인 작업에 대해 이 다채로운 가격 테이블 세트가 정말 대단해 보입니다. 테이블 헤더를 강조 표시하고 한 열을 다른 열보다 크게 유지하는 것과 같은 많은 기존 기술을 따릅니다.

그러나 나는 서로 잘 어울리는 다양한 색상 선택에 가장 깊은 인상을 받았습니다. 이 테이블에는 몇 가지 다른 헤더가 있고 다양한 이유로 모두 주의를 끄는 것과 같습니다.

Dylan Mcleod의 펜 가격표 보기

10. CSSGirl의 Flexbox 가격 책정 이야기

이제 실제 전방을 향한 테이블 디자인을 위해 이 플렉스박스 테이블을 확인하십시오. 테이블 위에 마우스를 놓으면 각 열이 약간 커지고 배경색이 늘어납니다. 이렇게 하면 열이 나머지 부분과 눈에 띄고 관심을 더 빨리 끌 수 있습니다. 브라우저의 크기를 조정하는 동안 테이블의 CSS 전환으로 이어지는 멋진 효과입니다.

가장 큰 특징은 flexbox를 사용하여 테이블 열의 형식을 지정한다는 것입니다. 이 예는 flexbox가 반응형 웹사이트의 미래임을 증명합니다.

Lindsey의 Pen Flexbox 요금제 보기