목록Software Development Engineering/HTML & CSS (2)

between 0 and 1

[DropDown UI] UL - LI 구조를 Select (Drop Down) UI 로 만들기

HTML [SELECT] Option 1 Option 2 Option 3 CSS body{ padding:30px; } ul { height: 30px; width: 150px; border: 1px #000 solid; } ul li { padding: 5px 10px; z-index: 2; } ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; } ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; } li.init { cursor: pointer; } a#submit { z-index: 1; } JS $("ul").on("click", "..
Software Development Engineering/HTML & CSS 2020. 12. 1. 01:39
배경이미지에 Fading 효과 주기

HTML & CSS 예제 HTML CSS body { padding: 0; margin: 0;} .image { position: relative; background-color:red;} .image img { display: block; position: relative; z-index: 1; width: 100%; } .image .fade { position: absolute; bottom: 0; width: 100%; height: 350px; z-index: 2; background: rgba(255, 255, 255, 0) linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1.0) 60%) repeat scro..
Software Development Engineering/HTML & CSS 2019. 4. 12. 08:09
이전 Prev 1 Next 다음