웹 디자이너 및 개발자를위한 새로운 리소스 (2016 년 2 월)
2015 년은 웹의 위대한 해였습니다. 웹 기술은 웹 사이트 또는 웹 응용 프로그램을 구축하는 것 이상의 다양한 폼 팩터에서 채택. 많은 모바일 및 데스크톱 응용 프로그램이 이제 HTML, CSS 및 JavaScript를 사용하여 작성됩니다. 이는 React.js, Angular 및 Node.js와 같은 웹 기술 및 라이브러리의 이식성으로 가능합니다..
오늘 시리즈의 이번 연재에서 우리는 소수의 자바 스크립트와 CSS 라이브러리.
추가 자료를 보려면 클릭하십시오.추가 자료를 보려면 클릭하십시오.
추천 자료 및 최고의 웹 디자인 및 개발 도구 모음을 찾아보십시오..
플랫 슬라이더
jQuery UI에는 Slider (사용자가 숫자 값 범위를 선택할 수있는 UI)를 포함한 일반적인 웹 인터페이스 모음이 함께 제공됩니다. 그만큼 플랫 슬라이더 한때 매우 어려운 작업이었던 jquery UI 스타일을 사용자 정의하는 웹 도구입니다..
유틸리티 개방형
유틸리티 개방형 드롭 인 클래스 모음입니다. 고급 CSS 타이포그래피 기능 적용 그러한 글꼴 합자, 작은 대문자 및 훨씬 더. 기본적으로 사용자에게 가장 좋은 독서 환경을 제공합니다. 지원되지 않는 오래된 브라우저에서는 성능이 떨어집니다..
ResponsifyJS
반응 이미지가 직면하는 악명 높은 제약 중 하나는 일반적으로 이미지의 크기를 적절하게 조정하는 것이지만 매우 작은 뷰포트 크기로 축소 할 때 이미지의 주 초점을 전환하는 것입니다..
ResponsifyJS 당신이 사용할 수있는 경량의 자바 스크립트 라이브러리 이미지 초점을 유지하기 위해 좌표를 설정한다. 크기가 조정되는 동안.
선의
선의 Mac 용 통치자 응용 프로그램입니다. 눈금자를 사용하여 웹 페이지를 측정하고 DevTools를 열지 않고도 요소의 크기를 확인하거나 요소가 완벽하게 가운데에 있는지 알아낼 수 있습니다. 여러 개의 눈금자를 사용하여 PX에서 EM으로 장치를 전환 할 수 있습니다..
StickyStack
StickyStack 는 스택 스크롤링 경험을 생성하는 jQuery 플러그인으로, 패널이 뷰포트의 상단에 도달하면 패널이 막대기에 붙어있을 때까지 계속 스크롤하면 다음 패널이 위로 당겨집니다. 스택의 상자 그림자뿐만 아니라 페이지 컨테이너, 스택 섹션을 구성하는 몇 가지 옵션이있는 간단한 플러그인입니다. 데모보기.
뷰어
뷰어 이미지 라이트 박스를위한 jQuery 플러그인 - 웹상에서 이미지를 확대하는 인기있는 방법입니다. 플러그인에는 압도적 인 옵션이 있습니다. 모든 항목을 맞춤 설정 라이트 박스 인터페이스.
플러그인은 또한 API를 통해 전체 제어를위한 API 및 맞춤 이벤트를 제공합니다. 라이트 박스 반응과 행동. 게다가 Internet Explorer 8까지 작동합니다..
DeviceMock
DeviceMock 다음을 수행 할 수있는 자바 스크립트 라이브러리입니다. 장치 프레임 또는 목업 만들기 전화, 태블릿 및 데스크톱과 같은 마찬가지로 라이브러리는 프레임의 테마 색상, 크기 및 프레임 방향을 설정하는 옵션을 제공합니다..
Photoshop을 사용하는 대신 웹 및 앱을 선보이는 좋은 대안이 될 수 있습니다..
Clrs
Clrs ~에 대한 주도권 기본 웹 색상을보다 눈에 잘 띄고 현대적인 색조로 재정의. 또한 더 나은 접근성을 위해 일련의 색상 조합을 옹호합니다. NPM, Gem (Ruby) 및 Photoshop 및 Illustrator 색상 견본을 통해 이러한 색상을 배포 할 수 있습니다..
착색하다
착색하다 초경량 자바 스크립트 라이브러리 (3 킬로바이트)가 지배적 인 색 추출 이미지와 색상을 조작 할 수있는 많은 API. 이미지가 완전히로드되기를 기다리는 동안 추출 된 색상을 자리 표시 자로 사용하거나, 그라디언트 배경을 생성하거나, 인접한 인터페이스를 조정하여 이미지 색상을 충족시킬 수 있습니다.
북 블록
북 블록 jQuery 플러그인이 있습니다. 페이지 뒤집기 효과가있는 책자 만들기. 웹 사이트에 여러 이미지를 표시하는 훌륭한 대안입니다. 특히 쇼케이스하려는 시퀀스 또는 흐름이있는 경우 유용합니다..
BookBlock이 어떻게 작동하는지 아이디어를 얻으려면 여기에서 데모를 확인하십시오..
