728x90 반응형 CSS127 [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. [CSS]글자가 영역밖으로 넘어갔을 때 text-overflow text-overflow를 적용하기 위해서는 overflow : hideen(영역보다 길어지면 영역을 넘어가는 부분을 숨긴다.) / scroll(항상 스크롤)/ auto(영역보다 길어지면 자동으로 스크롤 만든다); white-space : nowrap; (텍스트 줄바꿈이 되지않음) 위의 두가지 값이 지정된 값일 경우에만 적용된다. clip의 경우 크기에 맞게 잘라버리고 ellipsis의 경우 "..."을 넣어서 자른다. 보통 overflow 값이 scroll이나 auto 일경우 스크롤이 생기지만 (텍스트가 길경우) text-overflow와 함께 적용하면 텍스트가 잘리기때문에 auto의 경우 영역을 넘어가지 않는것과 같아 스크롤이 생기지 않고 scroll의 경우에는 무조건 스크롤이 생기기 때문에 스크롤이.. 2019. 5. 20. [CSS]::selection 드래그로 선택했을때 영역 색 변경하기 ::selection 가상선택자를 사용한다. p::selection{ background-color:#ccc; color:#ff0; } 아래에서 결과를 확인해 볼수 있다. See the Pen selection by gahyun (@gahyun) on CodePen. 2019. 5. 20. [CSS]포토샵처럼 blend 사용하기 (mix-blend-mode) mix-blend-mode 속성을 이용해 포토샵처럼 블렌드 모드 효과를 만들 수 있다. See the Pen css blend by gahyun (@gahyun) on CodePen. 2019. 5. 16. 이전 1 ··· 19 20 21 22 23 24 25 ··· 32 다음 728x90 반응형