CSS 검색 결과

해당 글 4건

CSS - opaciy, rgba, filter (투명도 조절 _ IE8)

opacity 와 rgba 는 둘 다 IE8 이하에서 동작하지 않으므로 다르게 처리해야 한다. opacity .box { -ms-filter:alpha(opacity=0.5); /* IE8 */ filter:alpha(opacity=0.5); /* IE7 */ opacity:0.5; } filter : alpha 값을 함께 넣어준다. rgba .box { background: rgba(255,255,255,0.3); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#50ffffff, endColorstr=#50ffffff); } filter : ...gradient 값을 함께 넣어준다. 투명도 부분은 opacity와 다르게 0~100%..
코딩/HTML & CSS 2023. 7. 11. 17:16

css만으로 SVG 이미지 애니메이션 효과 적용하기

SVG 코드 확보 이미지를 SVG 확장자로 저장하고 브라우저나 editor로 열어보면 아래와 같은 코드가 확인 되는데, html 페이지에 붙여넣으면 이미지가 그대로 표시된다. 태그는 그래픽 툴에서의 레이어 개념이므로 필요에 따라 삭제해도 무관 여기서는 태그 하나 당 애니메이션을 지정할 수 있으므로 id 또는 class 등 지시자를 지정 포토샵에서 저장한 SVG 파일 내 각각의 레이어가 , , 태그일 수 있다 css 애니메이션 설정 .logo_svg { -webkit-animation: kaboom 2s ease alternate; animation: kaboom 2s ease alternate; } .logo_svg:nth-child(2) { -webkit-animation-delay: 0.1s; ani..
코딩/HTML & CSS 2022. 7. 1. 15:25

글자수 길이 제한

게시판 글들을 리스팅할 때 제목은 길이에 맞게 절삭하고, 뒷부분에 '...' 을 붙이는 것이 일반적이다.PHP 등 개발 코드에서 자르는 경우 데이터 타입(한글/영문/숫자)을 신경 써서 처리하다 보면 제목의 길이가 일정하지 못하고 결과적으로 예쁘게 표시하기 힘들다. .main_box .main_notice li span.text { display:inline-block; width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .main_box .main_notice li span.date { float:right; color:#b3b3b3; font-size:11px; *margin-top:-20px} 상황에 따라 displa..
코딩/HTML & CSS 2016. 8. 22. 17:05