본문 바로가기

디자인194

CSS 애니메이션 18가지 예제 최근에 점점 더 많은 CSS 애니메이션 예제가 웹 사이트에 게재되고 있음을 눈치 챘을 것입니다 . 애니메이션은 올해 웹의 주요 트렌드였으며 아무데도가는 흔적을 보이지 않고 있습니다. 웹 전반에서 디자이너는 창의력을 발휘하고 CSS 애니메이션을 사용하여 사이트에 개성을 부여하고 복잡한 아이디어를 손쉽게 캡처하며 사용자의 행동을 미묘하게 안내합니다.여기서 가장 중요한 규칙은 CSS 애니메이션이 지나치게 강조되어서는 안되며 미묘한 움직임조차도 큰 영향을 미칠 수 있으며 너무 많은 경우 사용자를 혼란스럽게하거나 자극적으로 만들 수 있습니다. 온라인에서 볼 수있는 최고의 애니메이션은 여전히 ​​디즈니의 고전 12 애니메이션 원칙에 뿌리를두고 있습니다. 여기서는 전 세계 웹 사이트에서 가장 우수한 CSS 애니메이션.. 2019. 1. 2.
2019년 5가지 일러스트 트렌드 국경과 여러 미디어에 걸쳐있는 일러스트레이션과 같은 광범위한 분야에서 추세를 정확하게 식별하는 것은 지뢰밭입니다. 그러나 2018 년이 다가옴에 따라 우리는 고객으로부터 어떤 종류의 일러스트레이션이 요구되는지에 대한 폭 넓은 주제를 추출 할 수 있다고 믿습니다. (당신이 그것들을 찬성하든 그렇지 않든간에 그것은 다른 이야기입니다.)그래서 이번 포스트에서 우리는 지난 해를 지배하고 다음 연도를 지배 할 가능성이있는 일러스트레이션 세계의 다섯 가지 큰 트렌드를 지적합니다. 우리는 당신이 이러한 경향을 스스로 따라야한다는 말은 아니지만 그것이 존재한다는 것을 아는 것은 확실히 편리합니다 ...01. 밝은 색상과 단순한 모양Olimpia Zagnoli의 파스타 브랜드 Barilla 포장 디자인브랜딩, 광고 및 .. 2019. 1. 2.
CSS Grid로 반응형 레이아웃 만들기 CSS 그리드 레이아웃 은 매일 브라우저 지원에서 성장하고 있으며 CSS 그리드를 프로덕션에 제공 할 수 있습니다. CSS Grid의 신속한 채택은 정말 주목할 가치가 있습니다.CSS Grid를 사용하여 반응 형 포트폴리오 사이트 레이아웃을 작성하기 전에 몇 가지 사항을 정리해 보겠습니다 . CSS Grid는 Flexbox를 대체하지 않습니다 . 그것은 부유물을 대체하지 않습니다. 실제로 CSS Grid가 훨씬 더 잘하는 일을하기 위해 Flexbox를 사용하고 있다는 것을 알 수 있습니다. 그러나 교체의 관점에서 생각하는 대신, 우리는 조합의 관점에서 생각할 수 있습니다.15 가지 유용한 웹 디자인 튜토리얼땅콩 버터와 젤리 샌드위치를 ​​상상해보십시오. 땅콩 버터와 젤리는 그 자체만으로도 굉장히 훌륭합니.. 2019. 1. 1.
CSS[4] 그리드로 웹 사이트 레이아웃 만들기 여기서 CSS 그리드 레이아웃의 "ASCII art"구문을 사용하여 3 열 웹 사이트 레이아웃을 생성합니다.그리드에는 직관적 인 "ASCII 아트"구문이 포함되어있어 코드 내에서 레이아웃을 사실상 볼 수 있으므로 레이아웃을 쉽게 작성하고 수정할 수 있습니다. 심지어 몇 초 안에 큰 변화가 일어날 수 있습니다. 이 직관적 인 구문은 반응 형 웹 디자인에도 도움이됩니다. 그리드를 사용할 때 다른 장치에 대한 다른 레이아웃을 만드는 것은 아주 간단합니다.이제 다음과 같은 웹 사이트 레이아웃을 만듭니다.CSS 그리드 레이아웃이 나오기 전에이 레이아웃은 제대로 작동하도록하는 것과 관련하여 종종 "거룩한 레이아웃"이라고 불 렸습니다. CSS 그리드 레이아웃을 사용하면 이러한 레이아웃을 쉽게 만들 수 있습니다.코드는.. 2018. 12. 20.
CSS[3] 그리드 레이아웃 소개 CSS 그리드 레이아웃 은 2 차원 레이아웃에 최적화 된 새로운 레이아웃 모델입니다. 웹 사이트 레이아웃, 양식, 이미지 갤러리 및 정확하고 반응이 좋은 위치 지정이 필요한 모든 것에 이상적입니다.CSS는 웹 사이트 레이아웃에 도움이되는 많은 속성을 포함합니다. 그러나 2017 년 초까지 CSS에는 2 차원 웹 사이트 레이아웃을 만드는 메커니즘이 없었습니다. CSS 그리드 레이아웃이 도입되면서 모든 것이 바뀌 었습니다.CSS 그리드 레이아웃 모듈은 CSS에서 웹 사이트 레이아웃을 생성하는 더 나은 방법을 제공하기 위해 CSS 워킹 그룹에 의해 개발되었습니다. 2017 년 2 월에 후보 추천이되었으며, 주요 브라우저는 2017 년 3 월에 그리드 레이아웃을 지원하기 시작했습니다.CSS 그리드 레이아웃 (또.. 2018. 12. 19.
CSS[2] 그리드 만들기 여기에서는 그리드 트랙 사이에 작은 간격을 가진 기본 3x3 그리드를 생성합니다.다음과 같은 기본 그리드를 생성합니다 :기본 3x3 격자 (3 행 및 3 열).코드는 다음과 같습니다. Example #grid { display : grid ; grid-template-rows : 1fr 1fr 1fr ; grid-template-columns : 1fr 1fr 1fr ; grid-gap : 2vw ; }#grid > div { text-size : 5vw ; padding : 0.5em ; background : gold ; text-align : center ;} 1 2 3 4 <.. 2018. 12. 19.
CSS Grid로 신속하게 웹사이트 프로토타입을 만드는 방법 CSS 그리드 모듈은 웹 사이트의 모형을 만드는 환상적인 도구입니다. 그것은 내가 시도한 다른 시스템보다 빠르게 레이아웃을 실험 할 수있게 해줍니다.이 기사에서 나는 당신에게 방법을 가르쳐 줄 것이다.또한 무료 CSS 그리드 과정을 만들었습니다. 여기를 클릭하면 전체 내용을 볼 수 있습니다.또는 과정 전반에 걸쳐 배울 내용을 설명하는 이 기사를 확인하십시오 .CSS Grid를 배우고 싶습니까? 여기 내 무료 전체 길이 코스입니다. 메리 크리스마스! 초보자부터 고급자까지 13 가지 대화 형 스크린 캐스트.medium.freecodecamp.org그리드우리는 고전적인 웹 사이트를 모방하는 아주 기본적인 그리드부터 시작할 것입니다.우리 예제를 약간의 스타일로 만들었지 만 CSS Grid와는 아무런 관련이 없다.. 2018. 12. 18.
CSS 배치 방법 Positioning Elements on the Web CSS에서 요소를 배치하는 방법을 선택하는 것은 어떤 부작용이 가장 적합한지를 선택하는 경우가 있습니다.레이아웃을 CSS로 배치하는 일은 한때 매우 힘든 일이었고 전체 레이아웃에 테이블을 사용하는 것과 같은 해킹이 매우 흔했습니다. 수년에 걸쳐, 더 나은 레이아웃 도구에 대한 요구로 꾸준히 더 나은 지원과 기술이 생겨났습니다. 오늘날 우리는 옵션을 가지고 있으며 이러한 각 기법을 관리하는 방법은 여러 화면 크기를 처리 할 수있을만큼 유연하고 유연한 복잡한 레이아웃을 만드는 열쇠입니다.수레플로트 는 CSS에서 가장 일반적으로 사용되는 레이아웃 기법이지만 인접 요소에 어떻게 영향을 미치는지 모르는 경우 좌절 할 수 있습니다. 로 요소를 스타일링 flo.. 2018. 12. 17.
마크 업 및 레이아웃 웹을 디자인 할 때 독특한 도전이되는 것에 대해 조금 이야기 해 봅시다.도전의 한 부분은 단순히 화면에 콘텐츠를 표시하는 방법입니다. 그것은 다양한 해상도와 물리적 차원에서 작동해야하며, 꼭지점이나 마우스 클릭에 적절하게 응답해야하며, 사용자가 사용할 수있는 어포던스가 무엇인지와 관련되어야합니다. 브라우저는 평범한 텍스트를 잘 렌더링 할 것입니다.하지만 그것은 결코 우리가 원하는 바가 아니기 때문에 약간의 도움을 주어야합니다. 우리 스타일을 적용하는 방법뿐만 아니라 각 내용이 다른 스타일과 어떻게 관련되는지 또는 현대적인 브라우저 기능을 사용하는 방법을 알아야합니다. 브라우저는 지리적 위치 확인 및 하드웨어 가속과 같은 작업을 위해 앱에서 운영 체제를 이용할 수 있도록 마크 업을 사용하는 사례가 늘고 있.. 2018. 12. 17.
디자인 상품 판매를 위한 8가지 비즈니스 팁 디자이너 제작자로서 돈을 벌 수있는 중요한 조언. Not Street High Street 과 Etsy 와 같은 온라인 소매 업체 들은 디자인 상품을 온라인으로 판매하고자하는 사람들에게 진입 장벽을 상당히 낮추었습니다. 즉, 점점 더 혼잡 한 시장이되어 온라인 상점 의 성공을 결코 쉽게 얻지는 못합니다 . 이 기사에서는 판매를 고려해야 할 종류의 제품에 대한 조언과 비즈니스가 상업적으로 실행 가능한지 확인하는 방법에 대해 설명합니다. 01. 자료를 알아라. 제품 디자이너의 사고 방식을 조정하는 것은 처음에는 어려울 수 있지만, 가능한 한 한계를 이해하기 위해 설계 프로세스를 시작할 때 재료를 염두에 두는 것이 중요합니다. "Perspex와 관련된 어려움을 사랑합니다." Finest Imaginary의 창.. 2018. 10. 22.
[일러스트] 비치 가드 타워 만드는 방법 당신은 무엇을 창조 할 것인가?오늘의 튜토리얼에서는 Adobe Illustrator의 해변에서 외로운 비치 가드 타워를 만드는 동안 여름의 분위기에 빠지게 될 것입니다. 우리는 간단한 도구와 기술을 사용할 것입니다.늘 그렇듯이, 결과 를 GraphicRiver의 Summer Seaside 컬렉션 의 일부로 구입할 수 있습니다 .1. 새 문서를 만드는 방법먼저 다음 설정으로 새 문서 ( 파일> 새로 만들기 또는 제어 / 명령 -N )를 설정합니다.대작의 수 : 1너비 : 1200신장 : 1200단위 : 픽셀로부터 고급 탭 :색상 모드 : RGB래스터 효과 : 화면미리보기 모드 : 기본값픽셀 그리드에 새 객체 정렬을 선택 취소하십시오. 2. 타워 윗부분을 만드는 법1 단계127 x 127 픽셀의 직사각형을 .. 2018. 9. 11.
[일러스트] 플랫 아이스크림 캐릭터 만드는 방법 당신은 무엇을 창조 할 것인가?오늘의 튜토리얼에서는 Affinity Designer에서 귀엽고 작은 아이스크림 캐릭터 일러스트레이션을 만드는 과정을 살펴볼 것입니다. 여기서는 여기저기서 조정할 기본 기하학적 모양을 사용합니다.또한 벡터 일러스트레이션 의 훌륭한 선택을 찾을 수있는 GraphicRiver 로 넘어 가서 라이브러리를 확장 할 수 있다는 것을 잊지 마십시오 . 자, 당신이 이미 백그라운드에서 실행되는 소프트웨어를 가지고 있다고 가정하면, 그것을 가져 와서 바로 그것에 뛰어 들자! 1. 새 프로젝트 파일을 설정하는 방법우리는 우리의 모든 프로젝트와 마찬가지로, 우리는 설정으로 시작하려고하고 새 문서를 할 향하는으로 > 새 파일 (또는 사용하여 제어-N의 키보드 단축키) 우리가 다음 다음과 같이 .. 2018. 9. 11.
반응 형 타임 라인 포트폴리오 페이지 구축 이 자습서 에서는 Tomas Laurinavicius 의 이전 자습서 에서 볼 수 있듯이 환상적인 Timeline 포트폴리오를 구축 할 것 입니다. CSS3 애니메이션, Sass 및 약간의 jQuery뿐 아니라 응답 기술도 사용할 예정입니다.파일 및 디렉토리 구조첫 번째 단계는 필요한 파일과 폴더를 만드는 것입니다. 아래 이미지는 우리의 루트 구조를 보여줍니다.보시다시피, 여기에는 아주 간단한 설정이 있습니다. "css"디렉토리에서 styles.scss 파일을 만들고 normalize.css 사본을 가져 옵니다 . 이 프로젝트에서 Sass 를 사용 하려면 Sass가 컴퓨터에 설치되어 있어야합니다. 그렇지 않으면 시청 및 컴파일을 위해 앱이 필요합니다. 현재 Mac 용 CodeKit 을 사용 하고 있지만 .. 2018. 8. 19.
아이콘 그리드 사용방법 + BONUS GRIDS 파일첨부 + BONUS GRIDS 첨부파일 다운로드 그리드, 아, 강력한 격자! 나는 이것이 언제나 가장 많이 요구되는 기사라고 생각합니다. 그리고 내 의견으로는 그리드가 과대 평가되었습니다. 네, 전이 말을했습니다. 나쁘게 지내지 마라. 때로는 위대한 그리드가 멋진 아이콘 세트의 핵심 부분이지만, 꼭 필요한 것은 아니다. 그리드를 설정하는 방법을 모르기 때문에 처음으로 아이콘을 시작하지 않은 사람들로부터 많은 이메일을 받고 있습니다. 오 어서! 비밀을 말하게하십시오 : 첫 번째 아이콘 집합에 그리드가 필요 없습니다. 그리드에 몇 가지 아이콘을 만드는 것은 좋은 방법이지만 자신 만의 그리드를 만들려고하기 전에 수천 개의 아이콘을 만들어 그리드를 만드는 동안 고려해야 할 사항을 이해해야합니다.아이콘 격자가 정확히 .. 2018. 6. 19.
아이콘 디자인을위한 Illustrator 문서 만들기 이번 주 기사는 정말 기술적 일 것입니다. 하지만 초심자들과이 기법을 사용하지 않는 사람들에게 지옥이 될 것이라고 믿습니다. 처음으로 작업을 시작했을 때 워크 플로를 얼마나 크게 변경했는지 기억합니다. 그렇다면 아이콘 디자인을 위해 Illustrator 문서를 만드는 방법은 무엇입니까?시작은 어디에서 시작하나요?Illustrator 문서를 만드는 것이 중요하지는 않으나 과소 평가하지 마십시오. 결국, 그것은 당신의 워크 플로우를 결정하고 진정한 차이를 만듭니다. 사실, 모든 아이콘을 한 시간 만 보내는 것에서부터 몇 번의 간단한 클릭만으로 지출 할 수 있습니다.하나의 커다란 아트 보드에 아이콘 아이콘을 만드는 많은 아이콘 디자이너를 보았습니다. 나는 오랫동안 나 자신도하고 있었다. 그러나 이것은 개발자를.. 2018. 6. 19.

티스토리툴바