목록Design (98)

로메오의 블로그

CSS 가상요소(before)에 svg로 만든 font넣기

SVG 폰트 만들기 위 포스트에서 만든 폰트 아이콘을 before content엔 넣는 방법입니다. .bubble {border-radius: 10px; background: #fff; padding: 10px} .bubble::before {content: '\e909'; font-family: "icomoon"; color: #fff}
Design/Markup 2022. 3. 30. 16:00
css 가상요소[Pseudo Element] before, after

가상요소 종류 ::first-line 첫 번째 줄에 스타일 적용 ::first-letter 첫 번째 글자에 스타일 적용 ::before 콘텐츠 시작 부분에 추가 ::after 콘텐츠 마지막 부분에 추가 ::selection 사용자가 마우스 드래그로 선택한 영역에 스타일 적용 ::placeholder input 필드에 힌트 텍스트에 스타일 적용 ::before, ::after content 속성은 필수 한국 미국 중국 일본 한국 | 미국 | 중국 | 일본
Design/Markup 2022. 3. 30. 15:54
css 텍스트 말줄임 - text ellipsis

한줄 줄이기 .call-summary p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 여러줄 줄이기 .call-summary p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; /* 3줄 */ -webkit-box-orient: vertical; overflow: hidden; }
Design/Markup 2022. 3. 29. 14:05
customer scrollbar - webkit-scrollbar

.list-group {margin-top: 12px; height: calc(100vh - 190px); overflow-y: scroll;} .list-group::-webkit-scrollbar {width: 10px;} .list-group::-webkit-scrollbar-thumb {background-color: #999; opacity: .5; border-radius: 10px;} .list-group::-webkit-scrollbar-track {opacity: 0 } .list-group {margin-top: 12px; height: calc(100vh - 190px); overflow-y: scroll;} .list-group::-webkit-scrollbar {width: 10p..
Design/Markup 2022. 3. 29. 13:54
SVG 폰트 만들기

Figma 목록 SVG를 선택하고 export SVG 합니다. https://icomoon.io/app/#/select 위 사이트에서 import icon을 누릅니다. svg 파일을 모두 선택합니다. Select All을 누릅니다. Generate Font를 누릅니다. 아이콘 이름을 설정하고 Download 합니다. 압축을 풀고 style.css를 열어보면 .icon-contract:before { content: "\e900"; } 위와 같은 형태로 아이콘이 적용되어 있습니다. demo.html 파일을 열어서 코드를 변경해 봅니다. 브라우저에서 열어 확인 해봅니다. size와 color도 변경해 봅니다. Figma 목록
Design/Markup 2022. 3. 23. 09:33
Figma에서 Font Awesome 적용하기

Figma 목록 https://fontawesome.com/search?m=free Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com font를 검색합니다. 복사합니다. 피그마에서 붙여넣기하고, font: Font Awesome 5 Free 또는 Font Awesome 5 Brands 스타일은 Regular 또는 Solid를 선택합니다. Figma 목록
Design/Markup 2022. 3. 17. 17:19
[blender + unity + GIMP] Texturing

Blender, Unity 목록 UV > Export UV Layout 2048 사이즈로 PNG 저장 GIMP GIMP에서 Barrel_UV.png를 엽니다. Barrel_UV로 레이어 이름을 변경하고 새로운 레이어를 추가하고 Walls로 이름을 변경합니다. 퍼지선택툴로 몸통을 선택합니다. 선택 > 늘리기 > 10px 늘립니다. 채우기 툴로 b57f4f 색상으로 Walls 레이어에 채웁니다. 각 파트별 레이어를 생성해서 채우기 합니다. BG레이어를 만들고 c58e5d 색상으로 채우기 합니다. Barrel_Albedo.xcf로 저장해 놓고, Barrel_Albedo.png로 내보내기 합니다. Blender Open image해서 Barrel_Albedo.png를 선택합니다. UV Editing 창에서 Ba..
Design/Blender 2022. 1. 23. 21:17
[blender + unity] UV 매핑

Blender, Unity 목록 control + A : Apply 속성 재설정 Rotate and Scale 재설정 UV Editing 열기 New Image UV_Grid를 생성합니다. tab: Object 모드 Material Properties > New 새로운 Material 생성 Base Color > Image Texture 선택 생성한 UV_Grid를 선택합니다. Viewport Shading해서 UV를 표시합니다. Tab: Edit mode A: 모두 선택 Unlink Data Block을 누릅니다. option + a 선택 해제 2: edge option + 클릭해서 상단 edge를 선택합니다. 오른쪽 클릭 Mark seam a: 모두 선택 U: UV Mapping Unwrap 통의 윗..
Design/Blender 2022. 1. 17. 23:24
Prev 1 ··· 4 5 6 7 8 9 10 ··· 13 Next