목록hover (29)

비전공자 개발일기

Dark Card Hover Effect

Design Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at. Read More Code Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at. Read More Launch Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at. Read More body{ margin: 0; padding:..
HTML _CSS 2022. 6. 25. 03:38
CSS Simple Animation

RED BUTTON YELLOW BUTTON GREEN BUTTON BLUE BUTTON ul li { font-size: 16px; font-weight: 600; display: block; text-align: center; cursor: pointer; border-radius: 15px; padding: 5px 0; margin: 10px 0; transition: all .5s ease-in; } .btn-red { border: 2px solid #F0514E; color: #F0514E; } .btn-red:hover { box-shadow: #F0514E 100px 0 0 2px inset; } .btn-yellow { border: 2px solid #F5E234; color: #F5E..
HTML _CSS 2022. 6. 8. 00:56
Link Hover Animation

Mac iPad iPhone * { font-size: 50px; } .list { list-style: none; text-align: center; } .link { display: inline-block; margin-block: 2px; text-decoration: none; color: #2598eb; position: relative; } .link::after { content:""; width: 100%; height: 1px; background-color: #6667ab; border-radius: 4px; position: absolute; left: 0; bottom: 0; transform: scaleX(0); transform-origin: left; transition: tr..
HTML _CSS 2022. 4. 19. 00:20
Javascript - Hoverboard

Write number to draw a square (Range : 1 ~ 700) Clear * { box-sizing: border-box; } body { background-color: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } label { color: #fff; text-align: center; margin: 10px; font-size: 50px; } label input, #clear { font-size: 25px; text-align: center; margin: 10px; width..
Javascript 2021. 10. 20. 00:33
HTML CSS - Dropdown menu Hover

Home main01 menu1 menu2 menu3 main02 .dropmenu{ border:none; border:0px; margin:0px; padding:0px; font: "sans-serif"; font-size:18px; } .dropmenu ul{ background: #666; height:100px; list-style:none; margin:0; padding:0; } .dropmenu li{ float:left; padding:0px; } .dropmenu li a{ background: #666; color:#fff; display:block; line-height:100px; margin:0px; padding:0px 25px; text-align:center; text-d..
HTML _CSS 2021. 10. 16. 00:30
이전 Prev 1 2 3 4 Next 다음