본문 바로가기

css32

SVG를 쉽게 만들 수 있는 유용한 툴과 SVG 애니메이션 53개 이 기사에서는, Web 디자인 제작의 귀찮은 작업을 편하게 해내는, 편리한 SVG 툴 53개 를 정리해 소개합니다. 배경 텍스처와 SVG 모양에서 온라인 SVG 도구와 SVG 최적화 도구 등 SVG와 관련된 모든 도구를 갖추고 있습니다. 새로운 툴이 발견되는 대로 업데이트해 나갈 예정이므로, 북마크 해 두면 좋을지도 모릅니다. 1 https://haikei.app/ 독특한 SVG 모양과 배경, 원활한 패턴을 만들 수 있는 온라인 도구로 그라디언트 및 웨이브 웨이브와 같은 기본 모양이 거의 갖추어져 있습니다. 배색이나 사이즈 등, 본격적인 커스터마이즈를 할 수 있는 것도 특징으로 디자인한 SVG나 PNG 파일은 무료 다운로드 가능합니다. 2 https://coolbackgrounds.io/ 원하는 컬러 구.. 2021. 11. 10.
Glassmorphism 글래스모피즘의 모든 것 (CSS 예제 포함) Glassmorphism (글래스모피즘)은 작년 말 무렵부터 화제가 되고 있는 '뉴 모피즘' 다음으로 나온 디자인 방법입니다. 이 글에서는 글래스모피즘의 기본과 작성상의 주의점, 따라서 구현할 수 있는 HTML / CSS 스니펫 까지 정리해 소개합니다. 글래스모피즘이란 무엇입니까? 2020년 말부터 인기를 끌었던 스타일로, 이것은 조용하면서 유행이 된 뉴모피즘의 플라스틱 질감에 대비해서 서리가 내린 유리처럼 보이는 흐릿한 배경을 특징으로 합니다. 2020년에 유행했던 뉴모피즘이 궁금하시다면 아래 예제를 통해 뉴모피즘 디자인을 보실 수 있습니다. 2020/02/19 - [디자인/HTML, CSS, JS] - 2020년 Web트렌드 뉴모피즘 설명, CSS 18가지 예제 2020년 Web트렌드 뉴모피즘 설명,.. 2021. 1. 13.
[CSS] 웹에서 색상 글꼴을 사용하는 방법 모든 웹 디자이너는 글꼴의 색상을 설정하는 방법을 알고 있습니까? CSS를 배우기 시작할 때 가장 먼저하는 일 중 하나입니다. 색상을 선택한 다음 스타일을 사용하여 color: blue;또는 과 같이 설정 color: purple;하므로 선택한 글꼴의 모든 글리프가 해당 색상과 해당 색상 만 바꿉니다. 그러나 글리프 당 둘 이상의 색상을 정의 할 수 있다면 어떨까요? 글자를 파란색 과 보라색으로 만들 거나, 파란색 과 보라색 사이에서 그라디언트를 실행하거나, 단일 글꼴 패밀리에 6 색 이상의 색상을 적용 할 수 있다면 어떨까요? 글쎄, Open Type 컬러 글꼴이 등장하면서 그렇게 할 수 있습니다. 위에 네 가지 다른 색상 글꼴 이미지를 확인하십시오. 고정 된 이미지가 Illustrator에 결합 된 .. 2020. 2. 26.
2020년 Web트렌드 뉴모피즘 설명, CSS 18가지 예제 Neumorphism (뉴모피즘)은 작년 말 무렵부터 새로운 디자인 트렌드가 될 것으로 화제가 되고 있는 새로운 디자인 기법입니다. 이 기사에서는 뉴모피즘의 기본 및 작성상의 주의점, 구현 할 수있는 HTML / CSS 까지 정리해 소개합니다. 뉴모피즘이란 무엇입니까? 뉴모피즘은 예전에 유행했던 "스큐어 모피즘의 리얼한 질감과 평면 및 자료 디자인 같은 단순 결합한 새로운 스타일. 말의 유래도 New (새로운) + Skeumorphism (스큐어 모피즘)에서 온 신조어. dribbble에서 4500 이상의 호가를 가진 뉴모피즘의 주동자가 된 작품 Skeuomorph Mobile Banking by Alexander Plyuto 이전까지는 구글의 머테리얼 디자인의 등장으로 '확산 형 그림자'도 인기를 끌었.. 2020. 2. 19.
예제 별 그리드 예제들다음 예제는 지원 브라우저에서 예제가 어떻게 보이는지에 대한 이미지를 포함하고 있으며, 각각의 코드는 보여지는 기술, 코드 및 예제의 CodePen에 대한 자세한 정보가있는 페이지로 연결됩니다. 별도의 언급이없는 한이 예제는 최신 그리드 사양을 지원하는 모든 브라우저에서 작동합니다. IE10, 11 또는 현재 Edge에서는 작동하지 않습니다.페이지 레이아웃 예제는 여기 에 페이지 레이아웃 컬렉션을 참조하십시오 .그리드 정의하기그리드를 정의하려면 디스플레이 속성`grid` 또는`inline-grid`의 새로운 값을 사용하십시오. 그런 다음 열과 행 트랙을 만들 수 있습니다.보기보기 | 사양 읽기라인 기반 배치행 번호를 사용하여 격자에 항목 배치보기보기 | 사양 읽기선 기반 배치 속기 - 그리드 행 및.. 2019. 1. 16.
예제 별 그리드 패턴 잡기출발점으로 사용할 기본 패턴 모음이며 대체 기능이 있습니다. 전체 페이지 레이아웃에 이들을 사용할 필요가 없다는 것을 기억하십시오. 디자인에서 작은 부품 일 수도 있습니다.머리글, 2 열, 바닥 글머리글과 바닥 글이있는 유연한 2 열 레이아웃.머리글, 2 열, 바닥 글머리글과 바닥 글이있는 반응이 빠른 2 열 레이아웃.머리글, 2 열, 바닥 글머리글과 바닥 글이있는 반응이 빠른 2 열 레이아웃. 행을 사용하여 공간 만들기만큼 적합이 레이아웃에는 다음 행으로 이동하기 전에 적합한 상자를 여러 개 표시 할 수있는 가운데 패널이 있습니다.키가 큰 사람만큼이 레이아웃에는 다음 행으로 이동하기 전에 적합한 상자를 여러 개 표시 할 수있는 가운데 패널이 있습니다. 일부 항목은 두 행에 걸쳐 있습니다.미디어.. 2019. 1. 15.
SVG에 대한 완벽한 가이드 1/6 페이지 중 1 페이지 :SVG를 사용하는 8 가지 이유Scalable Vector Graphics 는 이제 모든 브라우저 (데스크탑 및 모바일)에서 보편적으로 지원됩니다. 웹 디자인 작업에서 디자인 및 구현 방법에 대한 안내서입니다.먼저 워크 플로우의 일부로 SVG를 사용해야하고 응답 성있는 웹 디자인 을해야하는 8 가지 이유가 있습니다 .SVG에 대한 완벽한 가이드 : 빠른 링크SVG 사용 방법 웹용 SVG 작성 SVG 필터 및 효과 SVG에 애니메이션 추가 스프라이트의 힘01. 벡터가 선명하다.SVG는 좌표를 그리는 시스템을 사용하여 점을 그려서 선, 도형 또는 경로를 그리는 데 연결합니다. 벡터 그래픽은 수학을 사용하여 그려져있어 선명하고 선명하며 다른 이미지 형식처럼 픽셀 화되지 않아 로고.. 2019. 1. 5.
CSS 애니메이션 18가지 예제 최근에 점점 더 많은 CSS 애니메이션 예제가 웹 사이트에 게재되고 있음을 눈치 챘을 것입니다 . 애니메이션은 올해 웹의 주요 트렌드였으며 아무데도가는 흔적을 보이지 않고 있습니다. 웹 전반에서 디자이너는 창의력을 발휘하고 CSS 애니메이션을 사용하여 사이트에 개성을 부여하고 복잡한 아이디어를 손쉽게 캡처하며 사용자의 행동을 미묘하게 안내합니다.여기서 가장 중요한 규칙은 CSS 애니메이션이 지나치게 강조되어서는 안되며 미묘한 움직임조차도 큰 영향을 미칠 수 있으며 너무 많은 경우 사용자를 혼란스럽게하거나 자극적으로 만들 수 있습니다. 온라인에서 볼 수있는 최고의 애니메이션은 여전히 ​​디즈니의 고전 12 애니메이션 원칙에 뿌리를두고 있습니다. 여기서는 전 세계 웹 사이트에서 가장 우수한 CSS 애니메이션.. 2019. 1. 2.
CSS Grid로 반응형 레이아웃 만들기 CSS 그리드 레이아웃 은 매일 브라우저 지원에서 성장하고 있으며 CSS 그리드를 프로덕션에 제공 할 수 있습니다. CSS Grid의 신속한 채택은 정말 주목할 가치가 있습니다.CSS Grid를 사용하여 반응 형 포트폴리오 사이트 레이아웃을 작성하기 전에 몇 가지 사항을 정리해 보겠습니다 . CSS Grid는 Flexbox를 대체하지 않습니다 . 그것은 부유물을 대체하지 않습니다. 실제로 CSS Grid가 훨씬 더 잘하는 일을하기 위해 Flexbox를 사용하고 있다는 것을 알 수 있습니다. 그러나 교체의 관점에서 생각하는 대신, 우리는 조합의 관점에서 생각할 수 있습니다.15 가지 유용한 웹 디자인 튜토리얼땅콩 버터와 젤리 샌드위치를 ​​상상해보십시오. 땅콩 버터와 젤리는 그 자체만으로도 굉장히 훌륭합니.. 2019. 1. 1.
CSS 그리드로 어떻게 디자인하나요? 이전에 시도하지 않은 사람들에게 CSS 그리드를 소개 한 후, 사람들이 질문하는 그리드의 구현이 아니라 오히려 그 이전의 것임을 알게되었습니다. 레이아웃이 어떻게 설정 될지에 대한 실제 계획.이전 글을 통해 CSS 그리드 교육에 대한 새로운 글을 읽었을 때 제가 사용했던 유추 중 하나는 원예에 관한 것입니다. 즉, 수국, 장미 및 튤립이있는 곳을 정확하게 큐레이팅하는 것입니다. 좋아, 거기서 널 잃어 버렸어. 나는 원예가 모든 사람의 것이 아니라고 생각 한다 . 🤷 .그러나 솔직히 말해서 CSS 그리드로 디자인하고 제작을 시작한 이후 필자는 연필과 종이를 사용하여 내 그리드를 훨씬 더 많이 스케치했습니다. 그리드 구문 자체는 매우 시각적이며 그리드를 가르치고있을 때 항상 강조합니다.간단한 그리드의 구문을.. 2019. 1. 1.
CSS Grid Examples 코드를 복사하여 자신의 프로젝트에 붙여넣고 원하는대로 수정하십시오.사진 갤러리반응 형 - 동일한 크기의 이미지 사용반응 형 - 늘어나는 항목 정렬 (기본값)반응 형 - 정렬 할 항목 정렬반응 형 - 항목을 가운데 정렬반응 형 - 항목 정렬을 종료합니다.반응 형 (Span) - 5 열반응 형 - 3 열, 2 행반응 형 - 3 열, 3 행유체 - 같은 크기의 이미지 사용Fluid - 정렬 및 정렬 항목 스트레치유체 - 항목 정렬 및 양쪽 정렬 시작유체 - 항목 중심 맞춤 및 정렬유체 - 항목 정렬 및 양쪽 정렬유체 - 스팬 5 열유체 - 스팬 3 열, 2 열유체 - 스팬 3 열, 3 행예 3 : 반응 형 - 시작할 항목을 정렬합니다.예제 15 : Fluid - Span 3 열, 2 행.카드 예반응 형 - 늘.. 2018. 12. 24.
CSS[14] 그리드 레이아웃을위한 브라우저 지원 이 기사에서는 이전 브라우저를 계속 지원하면서 지금 그리드를 사용하는 방법을 보여줍니다.2017 년 3 월까지 그리드 레이아웃에 대한 브라우저 지원은 사실상 존재하지 않았습니다. 인터넷 익스플로러와 엣지는 그리드를 지원하는 유일한 브라우저 였지만 그때조차도 -ms-접두어 만 사용했습니다 . 게다가, 지원은 사실 이전 버전의 스펙이었습니다 (이전 스펙보다 많은 것들이 많이 변경되었습니다).사실, 파이어 폭스, 크롬, 오페라는 그리드를 지원했지만, 오직 플래그 뒤에서 만 가능했다. ( layout.css.grid.enabled파이어 폭스에서는,실험적인 웹 플랫폼 기능아래 chrome://flags) 크롬과 오페라한다.그러나 2017 년 3 월은 CSS 그리드 레이아웃에 매우 중요한 달이었습니다. 그리드 지원.. 2018. 12. 23.
CSS[13] 그리드 인스펙터 사용하기 Firefox에는 브라우저를 통해 그리드를 검사 할 수있는 inbuilt 도구가 있습니다. Chrome에서이를 수행 할 수있는 제 3 자 도구가 있습니다.Firefox DevTools는 브라우저에서 보는 모든 격자의 격자 레이아웃을 검사하는 방법을 제공합니다. 이는 많은 트랙에 걸쳐 그리드 항목이있는 복잡한 그리드 또는 매우 드문 드문 채워진 그리드가있는 경우 유용 할 수 있습니다. 이와 같은 경우 항목을 보유하고있는 실제 그리드를 시각화하는 것이 어려울 수 있습니다.DevTools의 그리드 인스펙터를 사용하면 그리드 라인과 그 사이의 거터를 볼 수 있습니다.이렇게 :파이어 폭스 DevTools에서 볼 때 격자의 예.Firefox 격자 속성을 사용하는 방법Firefox DevTools를 사용하여 그리드의.. 2018. 12. 22.
CSS[12] 눈금으로 절대 위치 지정 절대 위치 지정이 그리드 내의 정상적인 흐름에 미치는 영향의 예.일반 블록 내에서와 마찬가지로 그리드 내에서 절대 위치 지정을 사용할 수 있습니다. position: relative그리드 항목에 설정 한 다음 position: absolute하위 항목 중 하나 를 사용 하면 지정한 모든 위치가 해당 그리드 항목에 적용됩니다.다음은 절대 위치 지정을 사용하여 그리드 항목의 오른쪽 하단 모서리에 아이콘을 배치하는 예제입니다. RunStack editor Unstack editor Editor PreviewExamplebody { display: grid; grid-template-areas: "header header header" "nav article ads" "nav footer footer"; gri.. 2018. 12. 22.
CSS[11] 그리드 항목 계층화 그리드 항목은 계층화되어 교차하는 그리드 영역이 겹칠 수 있습니다.CSS 그리드 레이아웃을 사용할 때 교차하는 그리드 영역, 음수 여백 또는 기타 위치 지정 기법으로 인해 그리드 항목이 겹칠 수 있습니다. 이 경우 주문이 수정 된 문서 순서와 z-index속성 에 따라 항목이 계층화됩니다 .원시 문서 순서특별히 z-index그리드 항목을 재정렬하거나 적용하지 않으면 중복되는 항목은 원본 문서 순서에 따라 정렬됩니다. 즉, 소스 태그에 나타나는 순서입니다.예: RunStack editor Unstack editor Editor PreviewExample#grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr .. 2018. 12. 22.