목록Design/Markup (24)

로메오의 블로그

Figma Layer 아이콘 타입

Figma 목록 Figma 목록
Design/Markup 2022. 5. 11. 14:07
Figma에서 Material Design Icon 사용하기

Figma 목록 Manage plugins를 선택합니다. Browse plugins in Community를 선택합니다. material design icon을 검색합니다. Material Design Icons를 설치합니다. 설치되었습니다. Plugins > Material Design Icons를 실행합니다. 아이콘을 드래그해서 캔버스에 옮깁니다. 컬러도 바꿔봅니다. Figma 목록
Design/Markup 2022. 5. 11. 13:18
css backdrop-filter

backdrop-filter: none; /* SVG 필터를 가리키는 URL */ backdrop-filter: url(commonfilters.svg#filter); /* 값 */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia..
Design/Markup 2022. 4. 28. 14:39
css 애니메이션

Transition Keyframe
Design/Markup 2022. 4. 20. 09:30
checkbox 이미지 처리

아이디 저장 .checkbox-control input+label { display: block; width: 154px; height: 24px; padding-left: 35px; background: url(../img/uncheck.png) no-repeat 0 0px / contain; } .checkbox-control input:checked+label { background: url(../img/check.png) no-repeat 0 0px / contain; } .checkbox-control input { display: none; }
Design/Markup 2022. 4. 14. 14:09
CSS flex

flex 선언 .container { display: flex /* display: inline-flex */ } flex 방향 .container { flex-direction: row; /* flex-direction: column; */ /* flex-direction: row-reverse; */ /* flex-direction: column-reverse; */ } 줄넘김 .container { flex-wrap: nowrap; /* flex-wrap: wrap; */ /* flex-wrap: wrap-reverse; */ } nowrap: 영역 밖으로 삐져나감 wrap: 줄 넘김 wrap-reverse: 위로 줄 넘김 메인축 방향 정렬 .container { justify-content: fl..
Design/Markup 2022. 3. 30. 16:35
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
Prev 1 2 3 Next