농부처럼 코딩하기

  • 홈
  • 태그
  • 방명록

css mask 1

CSS의 Mask 기능 사용하기(border에 gradient color 적용하기) + tailwind

border에 gradient color를 적용해보며 css mask에 대해 알아보자.  CSS Mask로 뭘 할 수 있는데??css mask를 사용하면 특정 요소를 그릴 때 source element와 destination element를 가지고 mask 속성값이 따라 무엇을 어떤식으로 그릴지에 대한 것을 정할 수 있다.  위 이미지의 경계선과 같은 효과를 주는 방법을 알아보자.  // 내부 내용 코드를 간단히 설명하면1. 먼저 최상위 element를 만들어 준다.2. 자식 요소를 absolute를 사용하여 부모와 같은 크기로 만들어준다. (Mask 속성이 적용될 gradation border ) 우리는 일단 2번 자식요소만 보면된다. CSS Mask 속성자식요소를 보면 중간에 co..

📚 html & css 2024.09.17
이전
1
다음
더보기
프로필사진

농부처럼 코딩하기

오늘 뿌린 씨앗은 내일 열매를 맺지 않는다.

  • 🌞 ALL (36)
    • 📚 html & css (1)
    • 👨‍💻 javascript (8)
    • 🦈 react (7)
    • 🌱 next (5)
    • 🎲 threejs (2)
    • 🐊 aws (5)
    • 💾 database (1)
    • 🐳 docker (1)
    • 🌍 terraform (1)
    • 🎸 etc (5)

Tag

rsbuild source, React, react canvas, 티스토리챌린지, rsbuild, whiteboard, insufficient buffer size, rsbuild entry, git commit 사라짐, rspack, gradient color border, css mask, 오블완, docker db, react tetris, docker, gradient color animation, WebGPU, 그라데이션 색상 border, webgpu tutorial,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/10   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바