본문 바로가기
반응형

개발/UI6

체크박스 디자인-2 (checkbox Design-2 with CSS) 체크박스 디자인 2 기본 체크박스로 활용할 수 있다. ✔️ HTML ✔️ CSS .cbxBox { position: relative; left: 50%; } .box { display: flex; align-items: center; } .box input[type="checkbox"] { position: relative; height: 35px; width: 35px; appearance: none; background-color: #FFF; border-radius: 10px; cursor: pointer; overflow: hidden; } .box input[type="checkbox"]::after { content: ''; display: block; height: 15px; width: 8.. 2023. 5. 21.
체크박스 디자인-1 (checkbox Design-1 with CSS) 체크박스 디자인 1 기본 체크박스로 활용할 수 있다. ✔️ HTML ✔️ CSS .cbxBox { position: relative; } .cbxBox .cbx { position: relative; display: block; width: 25px; height: 25px; border: 1px solid #a1a1a1; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } .cbxBox .cbx:after { content: ''; position: absolute; top: 2px; left: 10px; width: 5px; height: 14px; opacity: 0; transform: rotate(45deg) scale(0); b.. 2023. 5. 9.
스위치 디자인-1 (Switch Design-1 with CSS) 스위치 디자인 1 기본 스위치로 활용할 수 있다. ✔️ HTML ✔️ CSS .switch1 { position: relative; display: inline-block; font-size: 15px; width: 60px; height: 30px; } .switch1 .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; border-radius: 20px; border: 1px solid #ccc; transition: all .4s ease-in-out; } .switch1 .slider:before { position: absolute; content: "".. 2023. 5. 2.
알림 디자인-1 (notification Design-1 with CSS) 알림 디자인 1 알림 창을 띄워 다른화면으로 이동시키는 용도로 활용할 수 있다. ✔️ HTML info Info Add your info message here. Next ✔️ CSS .notification { display: inline-flex; padding: 10px 20px; background: #fff; border-radius: 10px; justify-content: space-between; color: #212121; gap: 15px; box-shadow: 0px 10px 20px 13px rgba(0,0,0,0.1); animation: scale .5s linear alternate-reverse infinite; text-align: left; } @keyframes scal.. 2023. 5. 2.

티스토리툴바