WEB (53) [CSS] 마우스 오버시 버튼 배경이 슬라이드로 채워지는 효과 마우스를 올렸을 때 버튼 안으로 배경색이 부드럽게 슬라이드되며 채워지는 효과입니다. Click 1. CSS button { position: relative; display: inline-block; padding: 10px 30px; background: #f5f5f5; border:1px solid #000; border-radius: 5px; font-size: 20px; color: #000; cursor: pointer; overflow: hidden; }button > span { position: relative; display: inline-block; z-index: 1; }button::before { content: ''; position: absolute; top: 0; l.. [CSS] 마우스 오버시 테두리 그리는 효과 마우스를 올리면 테두리를 따라 선이 그려지는 CSS 효과입니다. Click 1. CSS .box { position: relative; padding: 50px 80px; cursor: pointer; background: #f5f5f5; border: 1px solid #000; overflow: hidden;}.box::before, .box::after { content: ''; position: absolute; background: #000; transition: all 0.4s ease; }.box::before { height: 1px; width: 0; top: 0; left: 0; }.box::after { width: 1px; height: 0; top: 0; right: 0; }... [CSS] 배경색 반반 설정하기 1. 배경색 방향 - 상하 div { background: linear-gradient(to bottom, #0026DD 50%, #EEEEEE 50%); } to bottom 의 자리에 to top, to left, to right의 방향 값이나 0deg, 90deg 등의 각도 값을 통해 배경의 방향과 각도를 설정할 수 있습니다. 2. 배경색 방향 - 좌우 div { background: linear-gradient(to right, #0026DD 50%, #EEEEEE 50%); } 3. 배경색 비율 div { background: linear-gradient(to right, #0026DD 20%, #EEEEEE 20%); } 색상값 뒤의 % 값을 조정하면 배경색.. [CSS] 마우스 오버시 이미지 확대 마우스 오버시 이미지가 확대되는 효과입니다. 이미지 출처 : Unsplash의 Mae Mu 1. CSS .img_list { list-style: none; width: 100%; overflow: hidden; }.img_list li { float: left; width: 33.3%; padding: 2%; box-sizing: border-box; }.img_list li:nth-child(3n+1) { clear: both; }.img_list li a { display: block; position: relative; width: 100%; height: 0; padding-top: 75%; border-radius: 20px; overflow: hidden; }.img_list li a.. [CSS] 2줄 이상 말줄임 2줄 이상의 텍스트를 생략하는 CSS 코드입니다. div { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 나타낼 텍스트 행 수 */ text-overflow: ellipsis; overflow: hidden;} [CSS] 로딩 애니메이션 효과 로딩 애니메이션 효과를 CSS로 간단하게 표현하는 방법입니다. 로딩 중 1. CSS .loading_box { position: relative; width: 60px; height: 20px; line-height: 20px; }.loading_box span { display: inline-block; width: 10px; height: 10px; margin-left: 25px; background: #d1d3d7; border-radius: 50%; font-size: 0; animation: loading_ani 1s infinite linear alternate; animation-delay: 0.5s; }.loading_box span::before, .loading_box span:.. [CSS] div 위로 올라오는 애니메이션 효과 페이지 실행시 해당 요소가 아래에서 위로 올라오는 애니메이션을 CSS로 구현합니다. Content 1. CSS .content { position: relative; animation: fade_up 1s; }@keyframes fade_up { 0% { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); }} 2. HTML Content [CSS] 텍스트 마우스 오버시 밑줄 애니메이션 효과 텍스트에 마우스를 올리면 밑줄이 그려지는 애니메이션 효과입니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 1. CSS .menu { width: 90%; margin: 0 auto; } .menu li { position: relative; float: left; width: 20%; text-align: center; } .menu li a { display: block; padding: 20px 0; font-size: 15px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu li a:hover { color: #0026dd; } .menu li::after { content: ''; display: .. 이전 1 2 3 4 ··· 7 다음
