분류 전체보기 (75) [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.. [포토샵] 작업 중 흑백으로 변했을 때 이미지 출처 : Unsplash의 Elena Koycheva 포토샵 작업 중 단축키를 잘못 눌러 흑백으로 변하는 경우가 있습니다.보통은 Ctrl + 5 를 눌러 생기는 현상일 것입니다. Ctrl + 2 를 누르거나, Window - Channels를 클릭하여 RGB를 선택하면 다시 되돌릴 수 있습니다. 2025년 팬톤 올해의 컬러 - Mocha Mousse 2025년 팬톤이 선정한 올해의 컬러Mocha Mousse 모카 무스 2025년, 팬톤 컬러 연구소는 PANTONE 17-1230 Mocha Mousse를 올해의 컬러로 선정했습니다.따뜻하고 깊이 있는 브라운 톤인 이 색상은 초콜릿과 커피가 주는 풍부한 매력을 떠올리게 하며, 우리에게 위로와 편안함을 선사합니다. Mocha Mousse 17-1230HEX#A47764RGB( 164, 119, 100 )CMYK( 0%, 27%, 39%, 36% )HSB( 18°, 39%, 64% ) DP를 PX로 변환해주는 사이트 https://www.pixplicity.com/dp-px-converter PixWe’re creative technologists that harness emerging tech to disrupt entire markets. This empowers us to create cutting-edge strategies for global brands.www.pixplicity.com https://angrytools.com/android/pixelcalc/ Android Pixel Calculator angrytools.com 색상 이름을 알려주는 사이트 https://www.color-name.com/ Color-Name.com: Find name of the color you love!Color-Name.com is a great online tool to find the color name from hex code. Download palettes, patterns, wallpapers of your chosen color and get RGB, CMYK, Pantone, RAL values and more.www.color-name.com다양한 색상의 이름과 정보를 제공하는 웹사이트입니다.원하는 색상을 검색하면 해당 색상의 이름, RGB 코드, HEX 코드 등을 확인할 수 있습니다.검색한 색상과 유사한 색상, 그리고 해당 색상과 어울리는 조합의 색.. 이전 1 2 3 4 ··· 10 다음
