목록css3 (310)

비전공자 개발일기

FILP CARD

I'm IRONMAN! I'm IRONMAN! Tony Stark * { text-align: center; } .card { width: 200px; height: 220px; position: relative; background-color: transparent; transition: transform .8s; transform-style: preserve-3d; } .card:hover { transform: rotateY(180deg); cursor: pointer; } .front, .back { width: 100%; height: 100%; background-color: #fff; padding-top: 20px; position: absolute; border-radius: 10px; ..
HTML _CSS 2022. 5. 20. 00:49
Isometric Menu Hover Effects

Home About Services Portfolio Our Team Contact Home About Services Portfolio Our Team Contact @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Oswald', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #434750; } ul { posit..
HTML _CSS 2022. 5. 19. 00:24
Sprite Animation

.scene { width: 230px; height: 200px; background:url('./background.jpg') 0 90% no-repeat; background-size: cover; background-size: 500% 400%; border-radius: 20%; position: relative; overflow: hidden; transition: background-position 15s linear; } .scene:hover { background-position: 150% 90%; } .mario { width: 65px; height: 100px; background: url("./mario_sprite.png") no-repeat; transform: transla..
HTML _CSS 2022. 5. 18. 00:13
Height Converter

Height Converter Cm .container { width: 375px; height: 280px; margin: 65px 0 0 350px; background-color: #000; padding-left: 30px; color: #FFF; } h1 { padding: 25px 0 0 15px; } #cm{ width: 150px; height: 25px; margin: 30px 0 0 15px; } #result_alert { width: 100%; float: left; font-size: 35px; margin-top: 5px; text-align: center; color: #CC3333; } #result_feet, #result_inches { width: 50%; float: ..
Javascript 2022. 5. 17. 00:18
Light AND Dark Mode Toggle

Night/Day Mode Toggle Click on the moon in the upper-right corner to change to night mode Click again on the sun to change back to day mode body { transition: 1.5s; } .night-toggle { width: 33px; height: 33px; position: absolute; right: 20px; top: 20px; } .night-toggle:hover { cursor: pointer; } .moon { background-color: transparent; box-shadow: -6px 1px 0 3px #275E8E; border-left: 3px solid #27..
Javascript 2022. 5. 16. 01:06
Random Color Generator

Welcome to Random Color Generator Click on the HexCode to Copy Generate #967b28 #df9d4f #af704f #97013b #14ae2e * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient(to right, #967b28 0%, #967b28 20%, #df9d4f 20%, #df9d4f 40%, #af704f 40%, #af704f 60%, #97013b 60%, #97013b 80%, #14ae2e 80%, #14ae2e 100%); } #pallete1, #pallete2, #pallete3,#pallete..
Javascript 2022. 5. 15. 01:02
3D Gallery

* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; perspective: 800px; overflow: hidden; display: grid; place-items: center; background:linear-gradient(#3a4149, #111722); } main { position: relative; transform-style: preserve-3d; width: 50vmin; height: 75vmin; transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1); } img { width: 100%; height: 100%; object-fit: cover; transit..
Javascript 2022. 5. 14. 00:26
Image Animation Sequence

.scene { width: 230px; height: 200px; position: relative; overflow: hidden; background-color: #2598eb; } .scene img { position: absolute; } .city { width: 100%; height: 50%; bottom: -3px; object-fit: cover; } .plane { width: 45%; top: 50px; left: -50px; animation: plane-move 15s linear forwards; } .cloud { animation: clouds-move 22s linear forwards; } .cloud-1 { width: 70px; top: 0; left: 30px; ..
HTML _CSS 2022. 5. 13. 01:07
이전 Prev 1 ··· 32 33 34 35 36 37 38 39 Next 다음