728x90 반응형 분류 전체보기298 [CSS]텍스트에 이미지 넣기 shape-outside: url("https://i.ibb.co/zFZx634/testImg.png"); See the Pen shape-outside by gahyun (@gahyun) on CodePen. 2019. 5. 21. [CSS]attr()이용해서 속성가져오기 content:attr(data-title); attr 함수를 이용해 span의 속성 data-title을 가져옵니다. 아래 CSS에 마우스를 올려보세요. See the Pen CSS - attr() by gahyun (@gahyun) on CodePen. 2019. 5. 21. [CSS]그라디언트를 이용해 간단하게 원형차트/도넛차트 그리기(애니메이션으로 차트그리기 ) See the Pen chart-animation3 by gahyun (@gahyun) on CodePen. conic-gradient를 이용해 원형차트 그리기 background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%); %로 영역을 나누어 그라디언트를 이용해 배경을 칠하고, border-radius : 50% 를 이용해 원으로 만들면 원형 차트가된다. 가운데에 흰색으로 가려주면 도넛 차트도 그릴 수 있다. See the Pen chart by gahyun (@gahyun) on CodePen. css 차트 그리고 싶을때 애니메이션 효과 참고 keyframes를 이용해서 그라디언트를 조금씩 늘려준다. script 로는 set.. 2019. 5. 21. [CSS]png 이미지에 그림자 효과 넣기 보통 CSS로 그림자를 넣을 때 box-shadow 를 이용한다. .img1{box-shadow: 5px 5px 5px #000;} 그런데 이렇게 되면 박스를 기준으로 그림자가 생성되기 때문에 투명한 부분이 포함된 이미지 전체 영역에 그림자가 생긴다 . filter속성을 이용해 drop-shadow 효과로 이미지 자체에 그림자를 넣을 수 있다. .img2{filter: drop-shadow(5px 5px 5px #000); } See the Pen shadow by gahyun (@gahyun) on CodePen. 2019. 5. 21. 이전 1 ··· 50 51 52 53 54 55 56 ··· 75 다음 728x90 반응형