728x90 반응형 CSS5 테두리만 있는 글자 만들기 가끔씩 테두리만 있는 글씨를 표현할때가 있는데 그때는 css로 -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; 로 주고 color를 transparent로 투명하게 주면 된다. 속기법으로 -webkit-text-stroke: 1px #fff; 로도 줄 수 있다. See the Pen by HWANGAYOUNG (@ay9318) on CodePen. ** 역시나 IE에서는 지원이 안되는것 같다. 참고 링크 : https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke 2021. 7. 21. 마우스 hover시 background로 이미지 넣기 See the Pen mouse hover effect by HWANGAYOUNG (@ay9318) on CodePen. 2021. 6. 25. css 선택자 strong 아래에 있는 span들 선택하기 (형제 선택자) - strong ~ span span 바로 다음 형제 p 태그 첫번째만 선택하기(인접 형제 선택자) - span + p a클래스 자식을 가지고 있는 부모만 선택하기 - span .a:only-child, p .a:only-child 자식이 없는 span만 선택하기 - span:empty ** css선택자 게임으로 익히기 http://flukeout.github.io CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io - 사이트에는 32레벨까지 있고 오른쪽에는 힌트, 도움말이 첨부되어있다. 2021. 6. 24. background 2개 넣기 .content { background: url(경로 설정) no-repeat 0 50% / cover, url(경로 설정) no-repeat 100% 50% / cover } ** 차례대로 background : 경로 반복여부 위치(left top기준) / 사이즈 2021. 6. 23. input [type="checkbox"], [type="radio"] 커스텀하기 체크박스 커스텀 .check_ty01 {display: inline-block;} .check_ty01 input[type="checkbox"], .check_ty01 input[type="radio"] { display: block; overflow: hidden; width: 0; height: 0; margin: 0; border: 0; text-indent: -99999999px; appearance: none; -webkit-appearance: none; outline: none; } .check_ty01 label { position: relative; padding: 0 0 0 25px; font-size: 12px; font-weight: 400; cursor: pointer; } .ch.. 2021. 6. 23. 이전 1 다음 728x90 반응형
