10가지 유용한 머티리얼 디자인 코드 스니펫

게시 됨: 2020-10-24

머티리얼 디자인 열풍이 웹 세계를 강타하고 있습니다. 매달 저는 프레임워크 또는 사용자 정의 UI 키트를 사용하여 머티리얼 스타일에서 실행되는 새로운 사이트를 찾습니다.

그러나 이것은 나쁜 것이 아니라 그 반대입니다! 이는 Google이 자체적으로 선호하는 디자인 언어로 인식하는 입증된 트렌드를 사용하여 디자인 프로세스를 단순화하는 방법입니다.

머티리얼 디자인 스타일에 관심이 있다면 이 코드 조각이 적합합니다. 이것들은 선택할 수있는 다양한 디자인과 구성 요소를 제공하는 내가 가장 좋아하는 10개에 불과합니다.

반응형 테이블

다음은 독특한 트위스트가 있는 머티리얼 디자인 스니펫입니다. Sergey Kupletsky가 만든 이 반응형 테이블은 실제로 머티리얼 디자인 스니펫에 대한 다른 링크 를 호스팅합니다. 정말 멋진!

이것은 머티리얼 디자인 기법을 사용하여 자연스럽게 생성되므로 테이블은 자신의 레이아웃에 완벽하게 맞아야 합니다. 그러나 모바일 디자인에서 가장 어려운 부분은 더 작은 화면에서 작동하는 테이블을 만드는 것입니다.

이 방법이 가장 좋은 처리 방법 중 하나라고 생각합니다. 또한 코드가 깔끔하게 유지되므로 테이블 크기에 관계없이 매우 쉽게 코딩, 정리 및 관리할 수 있습니다.

개발자 Ivan Villamil은 아주 독특한 애니메이션으로 이 독특한 카드 UI 디자인을 만들었습니다.

페이지를 살펴보고 카드 중 하나를 클릭해 보십시오. 카드 콘텐츠가 컨테이너 위에서 애니메이션되고 보기에 나타나는 고유한 애니메이션 효과를 얻을 수 있습니다. 모바일 앱에서 찾을 수 있을 것으로 예상되지만 웹으로 이식된 것과 같습니다!

애니메이션 효과는 완벽하며 오늘날 웹에서 얼마나 많은 작업을 수행할 수 있는지 보여줍니다. 이 콤보 웹/모바일 UI의 재질 스타일은 말할 것도 없습니다.

디자이너로 일하면서 몇 년 동안 매우 멋진 로그인 양식을 보았습니다. 그러나 이 미친 디자인은 대화형 기능과 독특한 스타일로 인해 케이크를 가져갈 수 있습니다.

오른쪽 상단 모서리에 있는 밝은 분홍색 아이콘을 클릭하면 페이지 위에 나타나는 등록 필드가 나타납니다. 그것은 매우 독특하고 진정으로 사용 가능한 인터페이스를 만듭니다.

그래서 캐치는 무엇입니까? 이것은 많은 JavaScript를 사용하므로 코드 측면에서 가장 깔끔한 솔루션이 아닙니다. 그러나 여전히 컴팩트한 기능으로 디자인한 훌륭한 예입니다.

Scott Kellum은 페이지가 로드되면 자동으로 채워지는 흥미로운 자료 카드 레이아웃을 개발했습니다. 이것은 각 카드를 가리키면 머티리얼 디자인 기능이 작동하는 것을 볼 수 있는 그리드에서 발전합니다.

이것이 직접적인 프로젝트에서 얼마나 유용한지 또는 얼마나 많은 것을 얻을 수 있는지 말할 수 없습니다. 그러나 이것은 웹용 오프 그리드 디자인을 보여주는 재미있는 스니펫으로, 호버 애니메이션과 함께 머티리얼 풍미를 혼합합니다.

온라인에서 사용할 수 있는 많은 부트스트랩 템플릿 중에서 일부는 머티리얼 디자인을 사용한다고 믿는 것이 좋습니다. 그리고 이 펜은 Bootstrap 4에서 머티리얼 디자인으로 할 수 있는 모든 멋진 것들을 보여줍니다.

실제로 이것은 Google의 재료 언어로 재구성된 버튼 모음일 뿐입니다. 그러나 모두 최신 BS4 프레임워크에서 실행되므로 부트스트랩 기반 페이지에 추가할 수 있습니다.

Bootstrap에 대해 진지하게 생각하고 있다면 최신 릴리스를 보고 어떻게 생각하는지 확인하십시오. 그것은 무엇이든 기초로 훌륭하게 작동하며 특히 재료 사이트에 해당됩니다.

드롭다운 선택 메뉴는 양식 디자인의 필수 요소입니다. 이를 통해 사용자는 주, 국가, 언어 등과 같은 관련 주제에 대한 소수의 답변에서 선택할 수 있습니다.

이 머티리얼 디자인 선택은 일반적인 HTML 선택 메뉴를 완전히 새로운 수준으로 끌어 올립니다.

옵션을 선택하기 위해 일반적인 문서 스타일에 의존하지 않습니다. 대신 애니메이션 및 선택 프로세스를 처리하는 jQuery와 함께 정렬되지 않은 목록을 사용합니다. 그리고 내가 말해야 할 것은 이것이 재료 스타일을 잘 보여줍니다.

Google은 자료 문서에서 깊이를 위해 그림자를 밀어넣습니다. 이것이 이 펜에서 볼 수 있는 모든 원이 고유한 그림자 효과를 가지고 있는 것입니다.

그림자를 사용하면 페이지 요소에 계층을 지정하여 일부는 맨 위에 표시되고 다른 일부는 아래에 나타나도록 할 수 있습니다. 터치 스크린에서 특히 유용한 화면에 공간의 환상을 만듭니다.

꽤 멋진 효과와 확실히 자신의 프로젝트에서 복사할 수 있는 것입니다.

개발자 Thomas Valez는 순수한 HTML 및 CSS에서 실행되는 이 멋진 날씨 카드를 만들었습니다. 페이지 로드 시 단순한 페이드 인 효과를 사용하지만 여기서 진정한 아름다움은 머티리얼 디자인 스타일입니다.

색상에서 글꼴, 날씨 아이콘까지 모든 것이 자연 소재 스타일에 의존합니다.

이 템플릿을 사용하여 거의 모든 유형의 카드 레이아웃에 사용할 수 있습니다. 이것은 경이로운 일이며 확실히 이 목록에서 가장 간단한 프로젝트 중 하나입니다.

여기 머티리얼 디자인 탭에 대한 아이디어를 기반으로 하는 흥미로운 프로젝트가 있습니다. Michael Richins는 기본적인 JavaScript와 Google의 디자인 지침에 대한 지식을 바탕으로 이 펜을 만들었습니다.

탭은 Android 스마트폰이나 태블릿과 같은 다른 유사한 기기에서 예상한 대로 작동합니다. 말할 것도 없이 이것은 일반 바닐라 JavaScript 에서 실행되므로 jQuery나 그 어떤 것에 대해서도 걱정할 필요가 없습니다.

사이트에서 탭을 찾고 있다면 꽤 멋진 효과입니다. 스타일을 테스트하여 페이지와 자연스럽게 조화되는지 확인하십시오.

개발자 Emmanuel Pilande는 Google의 머티리얼 마이크로인터랙션을 복제하는 간단한 방법으로 이 멋진 반응 효과를 만들었습니다.

효과를 보려면 재료 카드의 아무 곳이나 클릭하십시오. 그리고 이것을 버튼에서 페이지 컨테이너 또는 입력 필드에 이르기까지 거의 모든 것에 적용할 수 있습니다.

일부 JavaScript에 의존하지만 모든 프로젝트에 간단하게 추가할 수 있습니다. 따라서 자연스러운 소재 룩을 원하신다면 저장하기에 좋은 스니펫입니다.