28 가지 뛰어난 CSS 예제

요즘 CSS로 할 수있는 일이 놀랍습니다. 최신 CSS3 속성에 대한 지원은 모든 주요 브라우저 (Internet Explorer까지 포함)의 최신 버전과 타이포그래피, 애니메이션의 가능성에서 강력합니다. 상호 작용이 그 어느 때보 다 커졌습니다. 그러나 웹 디자인 영감을 찾는 것은 까다로울 수 있습니다.

훌륭한 웹 사이트의 핵심은 매끄러운 비주얼과 위즈 뱅 기능으로 과시하는 것이 아니라 사용자가 원하는 위치로 빠르고 쉽게 이동하도록 안내하는 레이아웃 및 탐색을 통해 사용자에게 훌륭한 경험을 제공하는 데 있습니다. 즉, 그것이 또한 아름답게 보일 수 있다면 그것은 케이크의 장식입니다.



여기에 웹 디자인 영감을 제공 할 CSS 사이트의 28 가지 훌륭한 예가 나열되어 있습니다. CSS는 사이트에 모션을 추가하는데도 유용합니다. 다음 가이드를 참조하세요. CSS 애니메이션 예 그리고 몇 가지 포인터를 위해 그것들을 다시 만드는 방법.



01. 유형 용어

유형 용어는 CSS 애니메이션을 실험하기위한 핑계로 일부 생성되었습니다.

유형 용어는 CSS 애니메이션을 실험하기위한 핑계로 일부 생성되었습니다.

Type Terms는 맨체스터의 웹 디자인 에이전시 인 Supremo의 팀이 만든 애니메이션 치트 시트입니다. 몇 가지 조사를 한 후, 그들은 인쇄 용어에 대한 대부분의 기존 온라인 정보가 단순하고 정적 인 이미지를 사용한다는 것을 발견했습니다. 팀은 SVG 및 CSS 애니메이션을 실험 할 이유를 찾고 있었는데 이것이 완벽한 기회였습니다.



디자이너 댄 헤이우드 (Dan Heywood)는 '새로운 디자이너가 모든 주요 타이포그래피 용어를 즉시 배울 수 있도록 시각적으로 더 매력적인 무언가를 만들기로 결정했습니다.

팀은 타이포그래피를 잘 이해하는 디자이너의 중요성을 강조합니다. 처음으로 규칙을 배우는 사람이나 복습이 필요한 숙련 된 디자이너에게이 치트 시트는 교육적이며 탐색하는 즐거움입니다. 내용이 집중되고 정보가 명확하며 애니메이션이 부드럽고 매끄 럽습니다. 타이포그래피 어휘로 디자이너 친구들에게 깊은 인상을 남기세요.

02. MIT 기술 검토

Tech Review는 CSS를 사용하여 깔끔하고 스위스 느낌을 만듭니다.



Tech Review는 CSS를 사용하여 깔끔하고 스위스 느낌을 만듭니다.

누구나 이해할 수있는 방식으로 기술을 다루는 117 년 된 간행물 인 MIT Technology Review는 올 여름 보스턴 디자인 스튜디오 Upstatement에 의해 재 출시되었습니다. Upstatement의 파트너 인 Mike Swartz는 이렇게 말합니다. '우리는 Tech Review의 열성 팬이기 때문에 Erik Pelletier [제품 담당 부사장]가 현장 작업을 위해 우리에게 접근했을 때 매우 기뻤습니다.

요즘에는 이미지를 중심으로 디자인되지 않은 간행물의 웹 사이트를 보는 것은 드문 일이므로 Tech Review의 깨끗하고 겉보기에 스위스에서 영감을 얻은 디자인으로 처음 탐색하면 새로 고침됩니다. Swartz는 '우리는 사이트의 디자인 시스템으로 Tech Review의 정신과 영혼을 포착하고 아트 디렉터가 창의적으로 사용할 수있는 캔버스를 만들고 싶었습니다. '크리에이티브 디렉터 티토 보티 타 (Tito Bottitta)와 디자인 리드 네이선 하스 (Nathan Hass)는 훌륭한 예술을 선보이고 읽기를 즐겁게하는 시스템을 설계했습니다.'

오늘날 우리 모두가 알고있는 Helvetica의 시스템 기본 버전을 사용하는 대신,이 사이트는 실제로 현대적인 느낌을주는 Helvetica의 원래 버전 인 Neue Haas Grotesk를 사용합니다. 본문 카피를 위해 Miller Text와 결합 된 타이포그래피는 고전적이면서도 현대적인 느낌을줍니다. 이미지의 사용은 사려 깊고 신중하며 타이포그래피를 빛나게합니다.

03. BucketListly

웹 디자인 영감 : BucketListly

Bucketlistly는 여행자와 모험가가 자신의 이야기를 공유하고 다른 사람들이 자신 만의 모험을하도록 장려합니다.

BucketListly는 사용자가 실생활에서 성과를 달성하도록 돕고 다른 사람들도 똑같이 할 수 있도록 영감을주는 커뮤니티입니다. HTML5, SCSS, CoffeeScript 및 jQuery와 함께 Ruby on Rails를 사용하여 구축 된이 플랫폼은 여행자와 모험가가 연결된 소셜 네트워크는 물론 사이트에서 친구들과 이야기를 공유 할 수있는 기능을 제공합니다.

사용자가 BucketListly에서 스토리를 공유하면 플랫폼이 자동으로 무엇이, 언제, 어디서 인생 목표를 완료했는지 추적하여 특별한 배지를 획득하고 모든 데이터를 아름다운 타임 라인과지도에 표시 할 수 있습니다.

04. 96 코끼리

웹 디자인 영감 : 96 코끼리

96 코끼리는 아프리카에서 매일 죽는 코끼리의 수를 따서 명명되었습니다.

미국에 기반을 둔 Viget Labs는 아프리카 코끼리 보호를위한 야생 동물 보호 협회의 사명을 지원하기 위해 인식 중심의 웹 경험을 만들었습니다. 가장 최근의 캠페인은 아프리카에서 매일 얼마나 많은 코끼리가 죽는가하는 소위 96 코끼리입니다.

교육 내러티브는 일련의 단일 페이지 장을 통해 전달되며, 각 장은 엄니를 위해 코끼리를 죽이는 불법 행위를 끝내기위한 지속적인 노력의 실제 문제를 자세히 설명합니다. 청원서 가입을 유도하는 주요 목표에도 불구하고 Viget 팀은 편재하는 클릭 유도 문안이보다 감정적으로 설득력있는 스토리 중심 콘텐츠에 대해 제공하는 즉각적인 균형을 조정하는 교묘 한 작업을 수행했습니다.

nvidia 그래픽 카드가 장착 된 2 in 1 노트북

정면과 중앙은 당신이 정서적 사명을 멈추고 직면하도록 강요하는 잊혀지지 않는 예술 방향입니다. 아름답고 엣지 투 엣지 사진과 잡지와 같은 레이아웃으로 인해 반응 형으로 제작하는 데 어려움이있었습니다. 데스크톱에서 시작하는 대신이 사이트는 모바일 중심으로 구축되었습니다. 이를 통해 데스크톱 경험의 물을 뿌린 대리 역할을하는 대신 작은 화면에 대해 의도적으로 디자인 결정을 고려할 수있었습니다.

05. 레코드 병합

웹 디자인 영감 : 레코드 병합

Arcade Fire, Superchunk 및 The Mountain Goats와 같은 밴드가 명단에 올라와 함께 North Carolina의 Durham에있는 Merge Records는 현지 디지털 파트너를 찾았습니다. 새로운 아티스트의 품질에 맞는 세계적 수준의 전자 상거래 경험을 구축합니다.

HTML5 및 CSS3와 함께 Newfangled의 독점 PHP 기반 CMS 인 NewfangledCMS에 구축 된이 사이트는 다양한 장치 크기에 아름답게 반응합니다. 이제 새 시스템이 자동화되어 레이블의 자산이 모두 중앙에서 관리되고 사용 가능하도록합니다. 신인 COO Chris Butler는 다음과 같이 말합니다.

'제품이 추가 될 때마다 우리는 이것이 다른 데이터베이스에있는 실제 재고와 어떻게 대응하는지, 그리고 다른 시스템에있는 디지털 재고를 어떻게 설명하는지 파악해야합니다. 우리는 그 물류를 파악해야했습니다. ' 각 페이지에서 다양한 데이터베이스 호출을 수행 할 때 데이터의 우선 순위를 올바르게 지정하는 것이 중요했습니다.

06. 사절

CSS 전환은 Envoy 데모를 지원하는 데 사용됩니다.

CSS 전환은 Envoy 데모를 지원하는 데 사용됩니다.

사절 사무실 방문자 등록에 초점을 맞춘 제품인, 이름 수집, 서명 캡처 및 현장 방문자 배지 인쇄를위한 우아한 iPad 기반 인터페이스를 제공합니다. 공동 창립자이자 디자이너 인 Vítor Lourenço는 앱을 홍보하는 웹 사이트의 '주요 목표는 고객이 자신의 방문자가 사무실에서 Envoy를 어떻게 경험할 수 있는지 시각화 할 수 있도록하는 것이 었습니다. '우리는 대화 형 데모가이를 시연하는 가장 시각적으로 매력적인 방법이라고 결정했습니다.'

이를 위해 사이트는 iPad 모형 위에 앱의 기능과 화면 상태를 표시합니다. 한 페이지 사이트를 스크롤하면 데모에서 상태가 업데이트됩니다. CSS 전환은 데모를 돕고 콘텐츠를 방해하지 않고 경험을 향상시키는 데 사용됩니다.

공동 창립자이자 엔지니어 인 Larry Gadea는 '우리는 아주 작은 세부 사항에 대해 많은 시간을 보냈습니다. 'NDA 화면을 스크롤 할 때 방문자의 서명이 그려지는 방식이나 흐름이 끝날 때 방문자 배지가 인쇄되는 방식이 마음에 듭니다.'

07. 더 많이

더 많이 베를린의 크리에이티브 에이전시 인은 대담한 사이트를 운영하고 있습니다. 기술 디렉터 인 Torsten Bergler는 '우리의 목표는 지금까지 수행 한 모든 작업을 보여주는 대신 우리의 전문성을 나타내는 세 가지 프로젝트를 보여주는 것이 었습니다.'라고 말합니다.

큰 글꼴 크기 값, 깔끔한 스크롤 효과 및 빨간색과 짙은 대비 색상 구성표는이 사이트를 돋보이게합니다. '독특한 것은 작품의 프레젠테이션입니다. 프로젝트 프로세스를 시각화하고, 방문자를 안내하고, 우리가 한 작업에 대한 이야기를 들려줍니다.'아트 디렉션 책임자 인 Stefan Schuster가 말합니다.

CSS 전환을 사용하면 페이지와 콘텐츠를 더 원활하게 탐색 할 수 있습니다. 배경 크기 속성은 다양한 크기의 이미지 크기 조정을 제어하는 ​​데 사용됩니다. 뉴스 레터 가입 양식도 깔끔한 모양과 느낌에 맞게 스타일이 지정됩니다.

08. 감사 레지스트리

감사 레지스트리 커플은 인터넷 어디에서나 원하는 선물로 독특하고 개인화 된 결혼 기록을 만들 수 있습니다. 사이트 작성자 크러시 + 러블리 ; 프론트 엔드 팀의 Jeff Schram과 Michael Phillips는 CSS가 디자인만큼 아름답기를 원했습니다. 그들은이 애플리케이션을위한 SCSS 구조를 신중하게 계획하는 데 시간을 투자했습니다.

'다중 개발자 환경에서는 코드를 구성하고 쉽게 탐색 할 수 있으며 철저하게 주석을다는 것이 중요합니다.'라고 Phillips는 설명합니다. 힘든 작업은 강력한 타이포그래피와 크고 강력한 이미지로 사이트의 미학을 보여줍니다. 팀은 어떤 뷰포트에서도 이러한 요소를 가리고 중요성을 잃을 위험이있는 것을 원하지 않았습니다.

'우리는 전체 페이지를 아래로 슬라이드하여 기본 탐색 옵션을 표시하는 반응 형 시스템을 만들었습니다. 이를 통해 멋진 이미지에 집중할 수 있었고 사용자에게 고유 한 반응 형 경험을 제공 할 수있었습니다. '라고 Schram은 말합니다.

09. 내 신발 속의 삶

Life In My Shoes는 다음을 목표로하는 강력한 멀티 플랫폼 캠페인입니다.
HIV를 둘러싼 두려움과 오해에 도전하는 젊은이들. 런던 기반 디지털 에이전시 교통 청소년 청중의 관심을 끌 수있는 웹 사이트 개발에 대한 브리핑을 받았습니다.

브랜드 글꼴 인 Houshka Rounded Medium은 웹 사이트에 신선한 모양과 느낌을주기 위해 글꼴을 사용하여 구현되었습니다. 전체적으로 장식적인 이미지와 극적인 노란색 액센트가 매혹적인 미학을 제공합니다.

'회사 소개'페이지에는 태블릿과 스마트 폰에 맞게 조정 된 생생한 시차 효과가 있습니다. 트래픽 팀은 '배경 첨부를 고정에서 스크롤로 변경하고 개별 배경 위치를 설정하여 이미지가 올바른 위치에 배치되도록 이러한 장치에 대한 미디어 쿼리를 작성했습니다.

10.

Solo는 프리랜서가 사용하도록 설계된 올인원 프로젝트 관리 도구입니다. 비용 효율적이고 사용하기 쉬운이 응용 프로그램은 뛰어난 기능, 유용성 및 아름다운 디자인을 결합합니다.

제품을 홍보하는 사이트는 CSS3 굉장함으로 가득 차 있습니다. '오프셋에서 HTML5 및 CSS3를 사용하기로 결정했으며 최신 웹 브라우저에만 적용됩니다.' 제롬 아이브 슨 , 앱 디자이너. '우리 사이트 방문자의 3 ​​%만이 Internet Explorer를 사용합니다. 우리의 목표 시장이 그것을 사용하지 않는 것 같기 때문에 Solo가 그것을 지원할 이유가 거의 없었습니다. '

이 디자인 전체에서 이러한 CSS 규칙이 작동하는 것을 볼 수 있으며, 이로 인해 과다한 다채로운 CSS 상자 그림자로 프로젝트 관리가 더욱 재미있어집니다. Clarendon 및 Bryant와 같은 글꼴은 정교함과 재미의 좋은 균형을 제공합니다.

사이트의 크기를 조정하거나 휴대폰에서 볼 때 다양한 화면 크기와 해상도에 맞게 레이아웃이 조정되는 것을 볼 수 있습니다. '나는 미디어 쿼리 측면에 갇혀있는 것을 아주 좋아했습니다. 디자인 관점에서 보면 매우 흥미 롭습니다. '라고 Iveson은 말합니다.

열한. 형태는 기능을 따른다

CSS의 예

스타일은 최소한이며 황금 비율과 흥미로운 타이포그래피를 사용합니다.

형태는 기능을 따른다 (FFF)는 한국 개발자의 HTML5 및 CSS 실험을 아름답게 디자인 한 쇼케이스입니다. 김종민 대화 형 개발자로 일하는 Firstborn 멀티미디어 뉴욕에서.

Kim은 자신의 사이트 이름이 항상 '플러스 디자인이 아닌 마이너스 디자인'을 추구하는 그의 목표를 반영하고 있으며 형태는 기능을 따른다는 점을 명심했습니다. 그는 그의 스타일이 최소한이고 황금 비율 흥미로운 타이포그래피. FFF는 '재미를 위해'만들어졌고 김정은이 작업하는 데 휴가를 보내는 것을 포함하여 3 주가 걸렸습니다.

12. 부드럽게 미친

웹 디자인 영감 : The Gently Mad

큰 헤더와 잘 디자인 된 에피소드 목록은이 디자인에 개인적인 느낌을 전달합니다.

부드럽게 미친 웹 제작자에 대한 주제에 구애받지 않는 팟 캐스트입니다. 아담 클락 , 그 뒤에있는 마음은 좀 더 영향력있는 무언가를 만들기 위해 디자인 할 때 전통적인 블로그 레이아웃에서 멀어졌습니다.

큰 헤더와 잘 디자인 된 에피소드 목록은이 디자인에 개인적인 느낌이 있음을 나타냅니다. Clark은 '더 미친'CSS3 전환 및 페이드로 시작했지만이를 제거했다고 그는 말합니다. '제가 선택한 디자인 (색상, 레이아웃, 타이포그래피)이 훨씬 더 잘 작동한다고 느꼈습니다.

13. Amazee Labs

CSS의 예

능력과 자신감이있는이 웹 사이트는 CSS의 아름다운 예입니다.

새로운 웹 사이트와 커뮤니티 솔루션을 만들고, Amazee Labs 최신 오픈 소스 프레임 워크 Drupal을 기반으로 브랜드를 온라인 세계로 가져옵니다. 능력과 자신감을 가진 그들의 웹 사이트는 CSS의 아름다운 예입니다.

이미 텔레비전 네트워크, 디지털 대행사, 자선 단체 및 기업을위한 사이트를 만들고 있으며, 해당 사이트가 거의 모든 사람에게 깊은 인상을 남겼다는 것은 분명합니다. 우리는 더 이상 동의 할 수 없습니다.

만화책을 만드는데 얼마나 걸리나요?

14. A & W

CSS 회전 변환이 헤더 텍스트에 사용되어 A & W 사이트에 재미있는 인쇄 메뉴 느낌을줍니다.

CSS 회전 변환이 헤더 텍스트에 사용되어 A & W 사이트에 재미있는 인쇄 메뉴 느낌을줍니다.

그룹 코넷 IMS 사이트를 원했습니다 A & W 그것은 로고, 버거, 루트 맥주 그 이상이었습니다.

``A & W에 대한 우리의 사랑은 고향 식당에서 공유 된 추억으로 많은 일을해야했기 때문에 우리는 각 매장의 독특함을 초월하여 새로운 세대의 팬들과 지역 A & W를 연결하고 싶었습니다 .``라고 CFO David Coomer는 설명합니다. 사이트의 목적.

@ font-face를 사용하여 Metroscript 및 Century Gothic 글꼴을 제공하면 사용자 정의하고 즐거운 문자 시스템이 만들어집니다. CSS 회전 변환이 헤더 텍스트에 사용되어 사이트에 재미있는 인쇄 메뉴 느낌을 제공합니다.

25. 놀로 엔 노박

CSS의 예

Nolowene Nowak은이 재미있는 온라인 포트폴리오로 자신의 기술을 선보입니다.

웹 디자이너 및 일러스트 레이터 놀로 엔 노박 재미있는 온라인 포트폴리오를 만들었습니다. 멋진 효과를 내기 위해 사용되는 CSS의 좋은 예입니다. 아래로 스크롤하여 타임 라인 섹션을 확인하면 CSS 기반 레이아웃이 기본 규칙을 지능적으로 지정하여 작은 화면에서 수평 레이아웃에서 수직 레이아웃으로 변경되는 모듈을 생성한다는 것을 알 수 있습니다.

이 사이트는 만드는 것만 큼 즐겁습니다. '단순히 나만의 독특한 무언가를 만들 수있는 능력을주는 정말 풍부한 경험이었습니다.'라고 개발자는 말합니다. 크리스토프 뒤몽 . '우리는 방문객에게 새로운 장난감을 발견하는 어린 시절과 똑같은 경험을 제공하고 싶었습니다.'

개발 과정에서 Dumont는 Zurb의 기초 : Sass로 구축 된 반응 형 CSS 프레임 워크. '그 지원 덕분에 반응 형 디자인이 실제로 살아납니다.'라고 그는 말합니다.

16. Caava 디자인

웹 사이트는 스크롤 애니메이션 및 시차 기능에 대한 힌트를 통해 사용자를 끌어들입니다.

웹 사이트는 스크롤 애니메이션 및 시차 기능에 대한 힌트를 통해 사용자를 끌어들입니다.

디자인 스튜디오 Caava 아름다운 새 사이트가 있습니다. 사용자는 스크롤링 애니메이션과 시차 기능에 대한 힌트에 끌리지 만 주요 초점은 포트폴리오에 있습니다. Caava의 소유주 인 Cody Small은 이렇게 설명합니다. '우리는 사람들의 머리를 때리지 않고 신선하고 독특한 선형 경험을 제공하려고 노력했습니다.

사이트를 스크롤하면 서로 다른 섹션을 연결하는 화살표가 상단 및 왼쪽 위치에 애니메이션을 적용하여 경험을 일관되게 유지합니다. 개발자 Brandon Lavigne은 '많은 애니메이션 플레어가 진행되고 있기 때문에 자연스럽고 디자인을 지원하는 느낌을주는 데 시간이 걸렸습니다.

화살표는 작업 영역을 탐색 할 때와 같이 디자인 전체에서 일관됩니다. 자세히 살펴보면 CSS 테두리 및 변형으로 생성되었음을 알 수 있습니다. 프로젝트의 색상 구성이 다르기 때문에 매우 깔끔하고 유용합니다. 그러면 CSS 속성을 사용하여 화살표 색상을 쉽게 변경할 수 있습니다.

17. Fitbit

웹 디자인 영감 : Fitbit

아이콘과 다채로운 통계 그래픽이 특징 인 Fitbit의 사이트 디자인은 밝고 생생합니다.

Fitbit 활동을 기록하고 수면을 모니터링하며 체중과 지방을 문서화하기 위해 활동 추적기와 체중계를 만듭니다. 이 정보는 사용자가 그래프를보고, 목표를 설정하고, 경쟁하고 다른 사람들과 진행 상황을 공유 할 수있는 Fitbit에 무선으로 게시됩니다. '우리의 사명은 기술을 사용하여 세상을 더 건강한 곳으로 만드는 것입니다!' 비고 개발자 Biagio Azzarelli.

사이트 디자인은 밝고 생생합니다. 아이콘과 다채로운 통계 그래픽은 사용자를 지루하게하지 않고 유익한 스 니펫에 생명을 불어 넣는 데 도움이됩니다. 잘 사용되는 그리드는 향후 사이트를 유동적 인 레이아웃으로 쉽게 변환 할 수 있도록해야합니다.

Azzarelli는 사용자 분석을 기반으로 사이트를 개발하는 것을 즐겼다 고 말합니다. '사용자 기반이 A 급 브라우저를 계속 채택함에 따라 IE7 및 8에서 허용 가능한 성능 저하로 CSS3의 즐거운 부분을 활용할 수 있습니다.'

18. 매머드 부스

CSS의 예

MammothReach 팀이이 멋진 포토 부스 MammothBooth를 만들었습니다.

디트로이트 기반 아티스트 매머드 리치 세상에서 가장 뻔뻔스러운 포토 부스를 만들고 싶었습니다. 매머드 부스 웹 사이트가 탄생했습니다.

디자이너이자 개발자 인 Nick Keebaugh는 이렇게 회상합니다. '우리는 유연하고 즉각적이며 재미있는 사이트를 원했습니다. 이것이 바로 우리 부스의 모습입니다. 대체로 우리는 회사로서 우리가 누구인지, 그리고 우리 제품이 핵심에서하는 일을 반영하는 사이트 전체에 걸쳐 완전히 맞춤화 된 느낌을 원했습니다. 웹 사이트는 MammothBooth의 온라인 확장입니다. '

MammothReach는 지속적으로 회전하는 대형 나선형 버스트 이미지와 함께 회전 변환 속성을 활용했습니다. 애니메이션 스타일 속성이있는 사이트의 여러 섹션을 방문하면 재미있는 콘텐츠가 슬라이드됩니다. 장난기 많은 Arvil Sans 글꼴은 미학에 매우 적합하며 'name your price'글꼴로 잃어버린 유형 협동 .

19. 랩 파트너

CSS의 예

Lab Partners는 화려하고 장식적인 웹 사이트를 통해 작업을 선보입니다.

남편과 아내 팀 Ryan Meis와 Sarah Labieniec이 운영하는 예술 및 디자인 스튜디오 Lab Partners는 CSS의 가장 좋은 예 중 하나 인 다채롭고 장식적인 웹 사이트를 시작했습니다.

세부 사항에 대한 관심은 각 페이지를 통해 빛납니다. 작업 섹션에는 선별 된 레이아웃이있어 포트폴리오가 특히 독창적 인 느낌을받을 수 있습니다. 프로젝트 썸네일에는 호버 상태를 명확하게 구분하여 불투명도 속성을 이용하는 큰 호버 영역이 있습니다. 쇼핑 섹션은 Big Cartel 쇼핑 카트에서 실행되지만 사용자 지정 CSS가 요소에 적용된 사이트의 통합 된 부분처럼 느껴집니다.

Meis는 '웹은 형태와 기능의 궁극적 인 조합 중 하나 인 것처럼 느껴집니다. 그는 계속해서 둘 사이의 균형을 찾는 것이 즐겁고 어려웠다 고 설명합니다. 결국 모든 문제는 내가 원래 생각하지 못했던 해결책을 만들 수있는 기회로 밝혀졌습니다. '

이십. 피자 브레인

CSS의 예 : 피자 브레인

Pizza Brain은 완전히 반응하며 작은 레이아웃에서 멋지게 보입니다.

CSS의 예는 이것보다 훨씬 나아지지 않습니다! Brian Dwyer가 설립 한 Pizza Brain은 세계 최초의 피자 박물관 및 레스토랑입니다. 이 웹 사이트는 보도 자료와 노력의 진행 상황을 설명하는 블로그를 홍보하고 Michael Almquist가 디자인 한 브랜딩을 특징으로합니다.

Fonts Pacifico Regular 및 Bebas Neue는 따뜻하고 피자와 같은 색상 팔레트와 결합되어 흥미롭고 재미 있으면서도 읽기 쉬운 친근한 미학을 만듭니다. 개발자 인 Arjun Mehta는``오렌지색은 아름답고 콘텐츠의 무대를 설정합니다.

다양한 둥근 모서리와 불투명도 효과가이 깔끔한 모습을 완성합니다. Mehta는 '각 게시물을 둥근 직사각형 콘텐츠 섹션에 올리는 것은 실제로 Pizza Brain의 명함에있는 시각적 언어를 차용 한 것입니다.'라고 덧붙였습니다. 완벽하게 반응하는 사이트는 작은 레이아웃에서 멋지게 보입니다.

작동중인 CSS의 가장 좋은 예 중 하나입니다. 앞으로 더 많이 올 것으로 예상되는 사이트를 주시하십시오. Mehta는 '이 놀라운 벤처가 시간이 지남에 따라 실현됨에 따라 사이트가 어떻게 성장하고 더욱 개선되고 구축 될 수 있는지에 대해 기대하고 있습니다.

이십 일. 게시 가능

CSS의 예 : 게시 가능

Postable은 우편 주소를 쉽게 캡처 할 수있는 방법을 제공합니다.

주로 청첩장과 크리스마스 카드를 보내려는 방문자 또는 단순히 온라인 주소록을 원하는 방문자를 대상으로하는 Postable은 우편 주소를 쉽게 캡처 할 수있는 방법을 제공합니다.

'Postable은 특히 웹 애플리케이션의 경우 놀랍도록 유쾌한 모양을 가지고 있으며, 이러한 디자인에 충실하고 싶었습니다.'라고 프론트 엔드 개발자 인 Kevin Kneife는 말합니다. 봉투에서 영감을받은 줄무늬 테두리부터 재미있는 배경 질감, 견고하게 둥근 Omnes Pro 글꼴에 이르기까지이 사이트는 즉시 주소 수집을 덜어줍니다.

재미 있고 유용한 일러스트레이션이 전체적으로 사용됩니다. 둥근 모서리, 리본 및 영리한 호버 상태는 사이트 참여를 즐겁게합니다. 이것은 우리가 본 CSS 변환의 가장 좋은 예 중 하나이며, 배경 이미지의 회전 값을 업데이트하는 데 사용되어 사용자가 사이트 사용이 얼마나 쉬운 지에 대한 지침을 안내합니다.

Photoshop CC에서 색상을 바꾸는 방법

계정을 만든 후 Kneife가 완전히 제작 한 순수한 CSS 선택 상자를 특징으로하는 사용하기 쉬운 양식을 통해 연락처를 추가합니다. 그는 '이것은 외부 div로 양식의 선택 상자를 마스킹하고 투명도를 추가하고 -webkit-appearance를 사용하는 것과 관련이 있습니다. 그 결과 모든 브라우저에서보기 좋고 우아하게 성능이 저하되는 상자가 생겼습니다. '

22. 로비 레오나르디

CSS의 예 : Robby Leonardi

웹 사이트에는 다채로운 삽화와 만화 스타일이 있습니다.

디자이너 Robby Leonardi의 집은 다채로운 삽화와 만화 스타일로 작업에 쾌활한 개성을 더합니다. Leonardi가 말했듯이 '사람들을 웃게 만드는 것은 항상 좋은 일이며,이 웹 사이트가 그렇게 할 것이라고 생각합니다.'

놀라운 비주얼을 만드는 데 사용되는 CSS의 훌륭한 예 중 하나입니다. 배경 이미지는 계층화되어 헤더 영역에 깔끔한 수평 시차 효과를 만듭니다. 페이지 아래에서 CSS 회전 변환을 사용하여보기 영역의 측면에서 기어를 이동합니다. 포트폴리오 조각은 움직이는 호버가있는 나무 창 안에 프레임이 있습니다.

나무 블록은 Leonardi의 3D 모델 렌더링으로 만들어졌습니다. 그는 '모든 렌더링을 단일 이미지로 결합하고 사용자가 페이지를 스크롤 할 때마다 CSS left 속성을 변경했습니다. 간단한 CSS 트릭이 좋은 효과를 낼 수 있다는 것은 꽤 놀랍습니다! '

2. 3. 리 보르 제 줄카

CSS의 예 : Libor Zezulka

Libor Zezulka는 깨끗하고 영리한 개인 포트폴리오입니다.

Libor Zezulka의 한 페이지 웹 사이트는 CSS 텍스트 그림자의 현명한 사용 덕분에 팝업되는 그라디언트와 읽기를 구걸하는 텍스트 사이에 설정된 깨끗하고 영리한 개인 포트폴리오입니다.

수석 디자이너이자 프런트 엔드 개발자 인 Martin Pospisil Madeo 사이트 작업을 즐겼습니다. '[우리는] 디자인과 기술을 가지고 놀 수있는 자유를 가졌습니다. 이것은 사이트의 재미 요소를 보여줍니다. 섹션이 명확하게 구분된다는 점에서 디자인은 간단하지만 효과적입니다. Pospisil은 '힘은 아이콘과 색상 조합에있다'고 생각합니다.

또 다른 독특한 터치는 라이트 박스 팝업입니다. 이 사이트의 버튼은 아래의 그림자 이미징으로 실행 가능한 것으로 구분되어 있습니다. 닫기 버튼은 상자에서 약간 떨어져있어 사용하기 쉬운 인터페이스를 제공합니다.

3. 4. 엠포 리움 파이

Emporium PIes 웹 사이트에서 모든 것을 시도해보고 싶을 것입니다.

Emporium PIes 웹 사이트에서 모든 것을 시도해보고 싶을 것입니다.

'그만큼 Emporium Pies 웹 사이트 한 가지 직업이 있습니다. 파이를 더 먹고 싶게 만드는 것입니다. ' 파운드리 콜렉티브 주장합니다. 그리고 소년, 그는 진실을 말하는 것입니다. 달라스에 기반을 둔 파이 및 커피 숍의 잘 디자인 된 반응 형 사이트는 당신을 배고프 게 만들 것입니다. 정말 배고파.

'Operations Director Paul Wilkes는 정말 훌륭한 파이 사진을 몇 장 찍었고 우리는 가능한 한 디자인 계층에서 우선 순위를 정했습니다.'라고 Turman은 계속합니다. '우리는 파이가 스스로 말하게하는 것이 중요하다고 생각했습니다. 사이트를 엉뚱한 카피로 채우지 않는 것입니다.'

파이 페이지에서 호버 효과를 확인하십시오. 파이 이미지의 뒷면 가시성 속성과 결합 된 CSS 3D 변환을 사용하여 디저트에 대한 이름과 추가 정보를 표시합니다.

25. 카 셰어 링의 미래

CSS의 예 : 자동차 공유의 미래

이 매력적인 가로 스크롤 사이트로 쉽게 만든 UX

자동차 공유의 미래, 협력 기금Hyperakt 지원 스타트 업 아메리카 파트너십 , 자동차 소유권에 대한 점점 인기있는 대안에 대한 정보로 가득 차 있습니다. 이 매력적인 가로 스크롤 사이트를 통해 P2P, B2C 및 비영리 자동차 공유의 차이점을 쉽게 해독 할 수 있습니다.

Hyperakt의 정보 설계자 인 Simon Corry는 '처음부터이 부분을 최대한 밀어 내기로 결정했습니다. '이는 가능한 경우 이전 브라우저에 대한 하위 호환성을 제공하는 동안 CSS3 속성의 한계를 테스트하는 데 중점을 두었습니다. 저는 항상 비디오 게임의 팬이었으며 CSS3에 대한 현재 수준의 브라우저 지원을 통해 CSS를 통해 해당 수준의 애니메이션과 엔지니어링을 즐길 수있었습니다.

Corry는 'CSS3의 장점은 단순성에있어 모든 창작자에게 완벽한 언어가됩니다.

26. 그린빌에서의 생활

CSS의 예 : Greenville

이 사이트는 Kulturista 서체로 당신을 맞이합니다

Greenville에서의 생활은 사우스 캐롤라이나 주 그린빌에서의 생활과 일을 살펴 봅니다. '우리 모두 코 워크 Greenville을 사랑했고 사람들이 그 이유를 이해하는 데 도움이되는 웹 사이트를 만들고 싶었습니다. '라고 수석 개발자 Sean Gaffney는 말합니다.

이 사이트는 전체 너비의 반응 형 영웅 이미지 위에 눈길을 사로 잡는 53px 글꼴 크기의 Kulturista 서체로 여러분을 맞이합니다. 깔끔한 디자인 덕분에 쉽게 접근 할 수있는 콘텐츠로 더 많은 것을 배우고 싶어 할 수 있습니다. 호버의 약간 애니메이션 로고도 약간의 즐거움을 제공합니다.

팀은 스켈레톤 보일러 플레이트를 활용하여 스타일을 구축했습니다. 'Skeleton은 디자인 할 수있는 정말 멋진 기본 너비 세트를 제공하기 때문에 각 화면 크기에 맞게 레이아웃에서 몇 가지 항목을 조정했습니다.'라고 Gaffney는 말합니다.

27. 진정한 물고기 이야기

CSS의 예

True Fish Tales는 CSS3와 JavaScript의 조합을 사용하여 제작되었습니다.

진정한 물고기 이야기 그것은 어부들이 바다 밑에 숨어있는 괴물들의 놀라운 '진정한 이야기'를 모아서 큰 이야기를하는 것으로 유명하다는 생각을 담고 있습니다. 차별화 된 점은 부드럽고 사용자 친화적 인 상호 작용으로 콘텐츠 검색을 재미 있고 즐거운 경험으로 만듭니다.

인포 그래픽은 브라이언 마이어마크 쉘튼 켄터키 에이전시 DBS> 대화 형 새로운 콘텐츠를 추가하려는 지속적인 노력의 일환으로 유나이티드 마린 웹 사이트.

Maier와 Shelton은 CSS3와 JavaScript를 조합하여 인포 그래픽을 구축했습니다. Lewis는 '많은 애니메이션과 그래픽이 CSS3로 처리되지만 일부 지역에서는이 기술을 지원하지 않는 구형 브라우저를 수용하기 위해 JavaScript를 사용했습니다.

28. 스테이션 4

CSS의 예

올해 스테이션 4는 브랜드를 개선하기 위해 재 설계되었습니다.

웹 에이전시 스테이션 4 리 브랜딩 과정을 거쳤으며 개성과 브랜드를 개선하기 위해 새로운 웹 사이트를 디자인했습니다. Station Four의 크리에이티브 디렉터이자 공동 소유주 인 Christopher Olberding은 이렇게 설명합니다.

iphone 6s를위한 제일 휴대용 충전기

결과적으로 새 홈페이지는 스테이션 4의 최신 작업을 보여주기 위해 큰 기능의 작업 배너를 사용합니다.

'전문가'페이지에는 흥미로운 탐색 디자인이 있습니다. 큰 원 이미지를 링크로 사용합니다. 테두리 반경 속성을 활용하여 모양을 만들고 애니메이션도 적용합니다.

당신이 가장 좋아하는 CSS 예제를 놓쳤습니까? 아래 댓글로 알려주세요!

기여자 : 크리스 캐시 달러리치 클락

이 리뷰는 원래 넷 매거진 , 웹 디자이너와 개발자를위한 세계 베스트셀러 잡지입니다.