정중식’ 블로그
정중식’ 블로그/
::before, ::after로 그림자효과 내기
::before, ::after로 그림자효과 내기

::before, ::after로 그림자효과 내기

카테고리
CSS
날짜
2024년 06월 13일
작성자
JeongjungsikJeongjungsik
태그
💡
제가 나중에 살펴보기 위한 기록 글 입니다.
 
notion image
위의 사진에서 빨간색 테두리부분 처럼 구현하는 방법에 대해서 말해보려 합니다.

before,after에 속성줘서 구현하기

여러 방법이 있겠지만 자주 쓰이는 방식입니다.
::before{
    content: "";
    width: 100%;
    height: 20%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    background-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
 }
 
 ::after{
    content: "";
    width: 100%;
    height: 20%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
 }

댓글

guest