├── 3D Card Effect V2 ├── img │ ├── 1-back.png │ ├── 1-shadow.png │ ├── 1-up.png │ ├── 2-back.png │ ├── 2-shadow.png │ ├── 2-up.png │ ├── 3-back.png │ ├── 3-shadow.png │ └── 3-up.png ├── index.html ├── script.js └── style.css ├── 3D Card Effect ├── index.html ├── script.js └── style.css ├── 3D Card Hover ├── img │ ├── 1.png │ ├── 2.png │ └── back.jpg ├── index.html └── style.css ├── 3D Card ├── index.html └── style.css ├── 3D Carousel ├── index.html ├── script.js └── style.css ├── 3D Image Hover ├── index.html └── style.css ├── 3D Thumb Image Hover ├── img │ └── thumb.jpg ├── index.html └── stype.css ├── Border Effect ├── index.html └── style.css ├── Button Effects(3D) ├── index.html └── style.css ├── Button Effects(Simple) ├── index.html └── style.css ├── Image Caption v1 ├── index.html └── style.css ├── Image Caption v2 ├── index.html └── style.css ├── Image Caption v3 ├── index.html └── style.css ├── LICENSE ├── README.md ├── screenshot ├── 3D_Card │ └── screenshot.jpg ├── 3D_Card_Effect │ └── 3D_Card_Effect.jpg ├── 3D_Card_Effect_V2 │ └── Screenshot.jpg ├── 3D_Card_Hover │ └── Screenshot.jpg ├── 3D_Carousel │ └── Carousel.jpg ├── 3D_Image_Hover │ └── 3DImageHover.jpg ├── 3D_Thumb_Image_Animation │ └── Screenshot.jpg ├── Button_Effect_Simple │ └── Screenshot.jpg ├── Image_Caption_v1 │ └── Screenshot.jpg ├── Image_Caption_v2 │ └── Screenshot.jpg └── Image_Caption_v3 │ └── Screenshot.jpg └── src ├── 3D Card ├── dark_rider-character.webp ├── dark_rider-cover.jpg ├── dark_rider-title.png ├── force_mage-character.webp ├── force_mage-cover.jpg └── force_mage-title.png └── 3D_Caoucel ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg └── 8.jpg /3D Card Effect V2/img/1-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/1-back.png -------------------------------------------------------------------------------- /3D Card Effect V2/img/1-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/1-shadow.png -------------------------------------------------------------------------------- /3D Card Effect V2/img/1-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/1-up.png -------------------------------------------------------------------------------- /3D Card Effect V2/img/2-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/2-back.png -------------------------------------------------------------------------------- /3D Card Effect V2/img/2-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/2-shadow.png -------------------------------------------------------------------------------- /3D Card Effect V2/img/2-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/2-up.png -------------------------------------------------------------------------------- /3D Card Effect V2/img/3-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/3-back.png -------------------------------------------------------------------------------- /3D Card Effect V2/img/3-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/3-shadow.png -------------------------------------------------------------------------------- /3D Card Effect V2/img/3-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Effect V2/img/3-up.png -------------------------------------------------------------------------------- /3D Card Effect V2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 3D Card Effect v2 8 | 9 | 10 | 11 |
12 |
13 |
14 |
18 |
19 |
20 |

Hover me!

21 |

Assidua praxis clavis est ad res gestas.

22 |
23 |
24 |
25 |
26 |
30 |
31 |
32 |

Hover me!

33 |

Assidua praxis clavis est ad res gestas.

34 |
35 |
36 |
37 |
38 |
42 |
43 |
44 |

Hover me!

45 |

Assidua praxis clavis est ad res gestas.

46 |
47 |
48 |
49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /3D Card Effect V2/script.js: -------------------------------------------------------------------------------- 1 | const angle = 20; 2 | 3 | const remap = (value, oldMax, newMax) => { 4 | const newValue = ((value + oldMax) * (newMax * 2)) / (oldMax * 2) - newMax; 5 | return Math.min(Math.max(newValue, -newMax), newMax); 6 | }; 7 | 8 | const lerp = (start, end, amount) => { 9 | return (1 - amount) * start + amount * end; 10 | }; 11 | 12 | window.addEventListener("DOMContentLoaded", (event) => { 13 | const cards = document.querySelectorAll(".card"); 14 | cards.forEach((e) => { 15 | e.addEventListener("mousemove", (event) => { 16 | const rect = e.getBoundingClientRect(); 17 | const centerX = (rect.left + rect.right) / 2; 18 | const centerY = (rect.top + rect.bottom) / 2; 19 | const posX = event.pageX - centerX; 20 | const posY = event.pageY - centerY; 21 | const x = remap(posX, rect.width / 2, angle); 22 | const y = remap(posY, rect.height / 2, angle); 23 | e.dataset.rotateX = x; 24 | e.dataset.rotateY = -y; 25 | }); 26 | 27 | e.addEventListener("mouseout", (event) => { 28 | e.dataset.rotateX = 0; 29 | e.dataset.rotateY = 0; 30 | }); 31 | }); 32 | 33 | const update = () => { 34 | cards.forEach((e) => { 35 | let currentX = parseFloat( 36 | e.style.getPropertyValue("--rotateY").slice(0, -1) 37 | ); 38 | let currentY = parseFloat( 39 | e.style.getPropertyValue("--rotateX").slice(0, -1) 40 | ); 41 | if (isNaN(currentX)) currentX = 0; 42 | if (isNaN(currentY)) currentY = 0; 43 | const x = lerp(currentX, e.dataset.rotateX, 0.05); 44 | const y = lerp(currentY, e.dataset.rotateY, 0.05); 45 | e.style.setProperty("--rotateY", x + "deg"); 46 | e.style.setProperty("--rotateX", y + "deg"); 47 | }); 48 | }; 49 | setInterval(update, 1000 / 60); 50 | }); 51 | -------------------------------------------------------------------------------- /3D Card Effect V2/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"); 2 | 3 | html, 4 | body { 5 | width: 100%; 6 | height: 100%; 7 | font-family: "Montserrat", sans-serif; 8 | } 9 | 10 | .centered { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | gap: 3rem; 15 | height: 100%; 16 | } 17 | 18 | .card { 19 | position: relative; 20 | height: 28rem; 21 | width: 20rem; 22 | aspect-ratio: 5/7; 23 | color: #ffffff; 24 | perspective: 50rem; 25 | } 26 | 27 | .card::after, 28 | .card::before { 29 | content: ""; 30 | position: absolute; 31 | inset: 1.5rem; 32 | border: #e2c044 0.5rem solid; 33 | transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) 34 | translate3d(0, 0, 2rem); 35 | } 36 | 37 | .card::before { 38 | z-index: 4; 39 | } 40 | 41 | .card.border-left-behind::before { 42 | border-left: transparent; 43 | } 44 | 45 | .card.border-right-behind::before { 46 | border-right: transparent; 47 | } 48 | 49 | .card.border-bottom-behind::before { 50 | border-bottom: transparent; 51 | } 52 | 53 | .card .shadow { 54 | position: absolute; 55 | background: var(--url); 56 | background-size: cover; 57 | background-position: center; 58 | inset: 0; 59 | opacity: 0.8; 60 | filter: blur(2rem) saturate(0.9); 61 | box-shadow: 0 -1.5rem 2rem -0.5rem rgba(0, 0, 0, 0.7); 62 | transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) 63 | translate3d(0, 2rem, -2rem); 64 | } 65 | 66 | .card .image { 67 | position: absolute; 68 | inset: 0; 69 | background: linear-gradient(to top, #00000088, transparent 40%), var(--url); 70 | background-size: cover; 71 | background-position: center; 72 | -webkit-mask-image: var(--url); 73 | mask-image: var(--url); 74 | -webkit-mask-size: cover; 75 | mask-size: cover; 76 | -webkit-mask-position: center; 77 | mask-position: center; 78 | } 79 | 80 | .card .image.background { 81 | transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) 82 | translate3d(0, 0, 0rem); 83 | } 84 | 85 | .card .image.cutout { 86 | transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) 87 | translate3d(0, 0, 4rem) scale(0.92); 88 | z-index: 3; 89 | } 90 | 91 | .card .content { 92 | position: absolute; 93 | display: flex; 94 | flex-direction: column; 95 | justify-content: flex-end; 96 | padding: 3.5rem; 97 | transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) 98 | translate3d(0, 0, 6rem); 99 | z-index: 4; 100 | inset: 0; 101 | } 102 | 103 | h2 { 104 | font-size: 1.25rem; 105 | font-weight: 700; 106 | margin-bottom: 0.5rem; 107 | text-shadow: 0 0 2rem rgba(0, 0, 0, 0.5); 108 | } 109 | 110 | p { 111 | font-weight: 300; 112 | text-shadow: 0 0 2rem rgba(0, 0, 0, 0.5); 113 | } 114 | -------------------------------------------------------------------------------- /3D Card Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 3D Card effect 5 | 6 | 7 | 8 |
9 |
10 |
11 | 15 |
16 |

Adidas ZX

17 |

18 | FUTURE-READY TRAINERS WITH WRAPPED BOOST FOR EXCEPTION COMFORT. 19 |

20 |
21 | 22 | 23 | 24 | 25 |
26 | 27 |
28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /3D Card Effect/script.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector(".container"); 2 | const card = document.querySelector(".card"); 3 | const heading = document.querySelector(".heading"); 4 | const purchaseBtn = document.querySelector(".purchase-btn"); 5 | 6 | container.addEventListener("mousemove", (e) => { 7 | let X = (window.innerWidth / 2 - e.pageX) / 30; 8 | let Y = (window.innerHeight / 2 - e.pageY) / 30; 9 | 10 | card.style.transition = "none"; 11 | card.style.transform = `rotateX(${X}deg) rotateY(${Y}deg)`; 12 | }); 13 | 14 | container.addEventListener("mouseenter", (e) => { 15 | heading.style.transform = `translateZ(45px)`; 16 | purchaseBtn.style.transform = `translateZ(75px)`; 17 | }); 18 | 19 | container.addEventListener("mouseleave", (e) => { 20 | card.style.transition = "transform 0.75s"; 21 | card.style.transform = "none"; 22 | heading.style.transform = "none"; 23 | purchaseBtn.style.transform = "none"; 24 | }); 25 | -------------------------------------------------------------------------------- /3D Card Effect/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); 2 | 3 | * { 4 | font-family: "Poppins", "sans-serif"; 5 | padding: 0; 6 | margin: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | min-height: 100vh; 15 | background: #f4f4f4; 16 | perspective: 1000px; 17 | } 18 | 19 | .container { 20 | width: 50%; 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | } 25 | 26 | .card { 27 | transform-style: preserve-3d; 28 | background: linear-gradient( 29 | to left, 30 | rgba(245, 70, 66, 0.75), 31 | rgba(8, 83, 156, 0.75) 32 | ); 33 | margin: 5rem; 34 | width: 600px; 35 | padding: 2rem 5rem; 36 | display: flex; 37 | flex-direction: column; 38 | border-radius: 30px; 39 | box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.2), 0 0 50px 0 rgba(0, 0, 0, 0.19); 40 | } 41 | 42 | .gradient { 43 | border-radius: 50%; 44 | background: linear-gradient( 45 | to right, 46 | rgba(245, 70, 66, 0.75), 47 | rgba(8, 83, 156, 0.75) 48 | ); 49 | height: 250px; 50 | width: 250px; 51 | margin: 0 auto; 52 | } 53 | 54 | img { 55 | width: 350px; 56 | position: relative; 57 | top: 20px; 58 | left: -20px; 59 | transition: all 0.75s; 60 | } 61 | 62 | h1 { 63 | font-size: 3rem; 64 | margin-top: 2rem; 65 | transition: all 0.75s; 66 | } 67 | 68 | p { 69 | font-size: 1.3rem; 70 | margin-top: 1.5rem; 71 | line-height: 2rem; 72 | color: #555; 73 | font-weight: bold; 74 | transition: all 0.75s; 75 | } 76 | 77 | .btn-container { 78 | display: flex; 79 | justify-content: space-between; 80 | align-items: center; 81 | margin-top: 1.5rem; 82 | transition: all 0.75s; 83 | } 84 | 85 | .btn-container button { 86 | border: 0; 87 | border-radius: 50px; 88 | font-size: 1rem; 89 | box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2); 90 | color: black; 91 | padding: 3px 1.7rem; 92 | cursor: pointer; 93 | } 94 | 95 | .btn-container button:hover { 96 | background-color: #555; 97 | color: #fff; 98 | } 99 | 100 | .btn-container button.active { 101 | background-color: #555; 102 | color: #fff; 103 | } 104 | 105 | .purchase-btn { 106 | border: 0; 107 | border-radius: 30px; 108 | margin-top: 3.5rem; 109 | color: #fff; 110 | background-color: #f54642; 111 | padding: 12px; 112 | transition: all 0.75s; 113 | cursor: pointer; 114 | } 115 | -------------------------------------------------------------------------------- /3D Card Hover/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Hover/img/1.png -------------------------------------------------------------------------------- /3D Card Hover/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Hover/img/2.png -------------------------------------------------------------------------------- /3D Card Hover/img/back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Card Hover/img/back.jpg -------------------------------------------------------------------------------- /3D Card Hover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 3D Card Hover 6 | 7 | 8 | 9 |
10 | Necromancer 11 |
The Necro
12 |
13 |
14 | Druid 15 |
The Druid
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /3D Card Hover/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Exoct"; 3 | src: url("https://assets.codepen.io/1480814/films.EXH_____.ttf"); 4 | } 5 | 6 | body { 7 | margin: 0; 8 | min-height: 100vh; 9 | display: grid; 10 | grid-auto-flow: column; 11 | grid-auto-columns: min(230px, 35vmin); 12 | place-content: end center; 13 | gap: 50px; 14 | background: linear-gradient(#0000, rgb(50 50 50 / 88%)), 15 | url("img/back.jpg") top/cover; 16 | } 17 | 18 | figure { 19 | width: 100%; 20 | aspect-ratio: 1; 21 | margin: 0 0 60px; 22 | padding: 5px 20px 0; 23 | box-sizing: border-box; 24 | display: grid; 25 | grid-template-rows: 100%; 26 | cursor: pointer; 27 | position: relative; 28 | filter: drop-shadow(0 0 20px rgb(0 0 0/50%)); 29 | } 30 | 31 | figure:before { 32 | content: ""; 33 | position: absolute; 34 | z-index: -1; 35 | inset: 0; 36 | background: top/cover; 37 | transform-origin: bottom; 38 | filter: brightness(0.9); 39 | transition: 0.5s; 40 | } 41 | 42 | figure:before { 43 | background-image: url(https://assets.codepen.io/1480814/necro-back.jpg); 44 | } 45 | 46 | figure + figure:before { 47 | background-image: url(https://assets.codepen.io/1480814/druid-bac.jpg); 48 | } 49 | 50 | figure:hover::before { 51 | filter: brightness(0.3); 52 | transform: perspective(500px) rotateX(60deg); 53 | } 54 | 55 | figcaption { 56 | grid-area: 1/1; 57 | width: calc(100% + 40px); 58 | font-family: Exoct; 59 | color: white; 60 | font-size: min(32px, 5vmin); 61 | text-align: center; 62 | place-self: end center; 63 | transform: perspective(500px) translateY(100%) rotateX(-90deg); 64 | backface-visibility: hidden; 65 | transform-origin: top; 66 | background: #000; 67 | transition: 0.5s; 68 | } 69 | 70 | figure:hover figcaption { 71 | transform: perspective(500px) translateY(100%) rotateX(-30deg); 72 | } 73 | 74 | img { 75 | grid-area: 1/1; 76 | width: 100%; 77 | height: 100%; 78 | object-fit: cover; 79 | object-position: top; 80 | filter: contrast(0.8) brightness(0.7); 81 | place-self: end center; 82 | transition: 0.5s; 83 | } 84 | 85 | figure:hover img { 86 | width: 130%; 87 | height: 255%; 88 | filter: contrast(1); 89 | } 90 | -------------------------------------------------------------------------------- /3D Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SecretariatV-3D card 6 | 7 | 8 | 9 | 10 |
11 |
12 | cover-image 17 |
18 | title 23 | character 28 |
29 |
30 | 31 |
32 |
33 | cover-image 38 |
39 | title 44 | character 49 |
50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /3D Card/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --card-height: 300px; 3 | --card-width: calc(var(--card-height) / 1.5); 4 | --bg-color: #191c29; 5 | } 6 | * { 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | width: 100vw; 12 | height: 100vh; 13 | margin: 0; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | background: var(--bg-color); 18 | } 19 | 20 | .card { 21 | width: var(--card-width); 22 | height: var(--card-height); 23 | display: flex; 24 | justify-content: center; 25 | align-items: flex-end; 26 | padding: 0 36px; 27 | margin: 0 50px; 28 | perspective: 2500px; 29 | } 30 | 31 | .cover-image { 32 | width: 100%; 33 | height: 100%; 34 | object-fit: cover; 35 | } 36 | 37 | .wrapper { 38 | transition: all 0.5s; 39 | position: absolute; 40 | width: 100%; 41 | z-index: -1; 42 | } 43 | 44 | .card:hover .wrapper { 45 | transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); 46 | box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); 47 | -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); 48 | -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); 49 | } 50 | 51 | .wrapper::before, 52 | .wrapper::after { 53 | content: ""; 54 | opacity: 0; 55 | width: 100%; 56 | height: 80px; 57 | transition: all 0.5s; 58 | position: absolute; 59 | left: 0; 60 | } 61 | 62 | .wrapper::before { 63 | top: 0; 64 | height: 100%; 65 | background-image: linear-gradient( 66 | to top, 67 | transparent 46%, 68 | rgba(12, 13, 19, 0.5) 68%, 69 | rgba(12, 13, 19) 97% 70 | ); 71 | } 72 | 73 | .wrapper::after { 74 | bottom: 0; 75 | opacity: 1; 76 | background-image: linear-gradient( 77 | to bottom, 78 | transparent 46%, 79 | rgba(12, 13, 19, 0.5) 68%, 80 | rgba(12, 13, 19) 97% 81 | ); 82 | } 83 | 84 | .card:hover .wrapper::before { 85 | opacity: 1; 86 | } 87 | 88 | .card:hover .wrapper::after { 89 | height: 120px; 90 | } 91 | 92 | .title { 93 | width: 100%; 94 | transition: transform 0.5s; 95 | } 96 | 97 | .card:hover .title { 98 | transform: translate3d(0%, -50px, 100px); 99 | } 100 | 101 | .character { 102 | width: 100%; 103 | opacity: 0; 104 | position: absolute; 105 | transition: 0.5s; 106 | z-index: -1; 107 | } 108 | 109 | .card:hover .character { 110 | opacity: 1; 111 | transform: translate3d(0%, -30%, 100px); 112 | } 113 | -------------------------------------------------------------------------------- /3D Carousel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SecretariatV-3D carousel 5 | 6 | 7 |
8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

3D Carousel

18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /3D Carousel/script.js: -------------------------------------------------------------------------------- 1 | var radius = 240; 2 | var imgWidth = 120; 3 | var imgHeight = 170; 4 | var autoRotate = true; 5 | var rotateSpeed = -60; 6 | 7 | setTimeout(init, 10); 8 | 9 | var wheel = document.getElementById("wheel-container"); 10 | var img_container = document.getElementById("img-container"); 11 | var imgs = img_container.getElementsByTagName("img"); 12 | 13 | img_container.style.width = imgWidth + "px"; 14 | img_container.style.height = imgHeight + "px"; 15 | 16 | function init(delayTime) { 17 | for (var i = 0; i < imgs.length; i++) { 18 | imgs[i].style.transform = 19 | "rotateY(" + 20 | i * (360 / imgs.length) + 21 | "deg) translateZ(" + 22 | radius + 23 | "px)"; 24 | imgs[i].style.transition = "transform 1s"; 25 | imgs[i].style.transitionDelay = delayTime || (imgs.length - i) / 4 + "s"; 26 | } 27 | } 28 | 29 | function applyTransform(obj) { 30 | if (tY > 180) tY = 180; 31 | if (tY < 0) tY = 0; 32 | 33 | obj.style.transform = "rotateX(" + -tY + "deg) rotateY(" + tX + "deg)"; 34 | } 35 | 36 | function playSpin(flag) { 37 | img_container.style.animationPlayState = flag ? "running" : "paused"; 38 | } 39 | 40 | if (autoRotate) { 41 | console.log(autoRotate); 42 | var animation = rotateSpeed > 0 ? "spin" : "spinRevert"; 43 | img_container.style.animation = `${animation} ${Math.abs( 44 | rotateSpeed 45 | )}s infinite linear`; 46 | } 47 | 48 | var desX = 0, 49 | desY = 0, 50 | tX = 0, 51 | tY = 10; 52 | 53 | document.onpointerdown = function (e) { 54 | clearInterval(wheel.timer); 55 | e = e || window.event; 56 | var sX = e.clientX, 57 | sY = e.clientY; 58 | 59 | this.onpointermove = function (e) { 60 | e = e || window.event; 61 | var nX = e.clientX, 62 | nY = e.clientY; 63 | desX = nX - sX; 64 | desY = nY - sY; 65 | tX += desX * 0.1; 66 | tY += desY * 0.1; 67 | applyTransform(wheel); 68 | sX = nX; 69 | sY = nY; 70 | }; 71 | 72 | this.onpointerup = function (e) { 73 | wheel.timer = setInterval(function () { 74 | desX *= 0.95; 75 | desY *= 0.95; 76 | tX += desX * 0.1; 77 | tY += desY * 0.1; 78 | applyTransform(wheel); 79 | playSpin(false); 80 | if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) { 81 | clearInterval(wheel.timer); 82 | playSpin(true); 83 | } 84 | }, 17); 85 | this.onpointermove = this.onpointerup = null; 86 | }; 87 | 88 | return false; 89 | }; 90 | 91 | document.onmousewheel = function (e) { 92 | e = e || window.event; 93 | var d = e.wheelDelta / 20 || -e.detail; 94 | radius += d; 95 | init(1); 96 | }; 97 | -------------------------------------------------------------------------------- /3D Carousel/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-color: #111; 3 | } 4 | 5 | html, 6 | body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-color: var(--bg-color); 12 | overflow: hidden; 13 | perspective: 1000px; 14 | transform-style: preserve-3d; 15 | display: flex; 16 | } 17 | 18 | #wheel-container, 19 | #img-container { 20 | position: relative; 21 | margin: auto; 22 | transform-style: preserve-3d; 23 | transform: rotateX(-10deg); 24 | display: flex; 25 | } 26 | 27 | img { 28 | transform-style: preserve-3d; 29 | position: absolute; 30 | left: 0; 31 | top: 0; 32 | width: 100%; 33 | height: 100%; 34 | line-height: 200px; 35 | font-size: 50px; 36 | text-align: center; 37 | box-shadow: 0 0 8px #fff; 38 | -webkit-box-reflect: below 10px 39 | linear-gradient(transparent, transparent, #0005); 40 | } 41 | 42 | img:hover { 43 | box-shadow: 0 0 15px #fffd; 44 | -webkit-box-reflect: below 10px 45 | linear-gradient(transparent, transparent, #0007); 46 | } 47 | 48 | p { 49 | font-family: serif; 50 | color: white; 51 | top: 100%; 52 | left: 50%; 53 | position: absolute; 54 | transform: translate(-50%, -50%) rotateX(90deg); 55 | } 56 | 57 | #ground { 58 | height: 900px; 59 | width: 900px; 60 | top: 100%; 61 | left: 50%; 62 | position: absolute; 63 | transform: translate(-50%, -50%) rotateX(90deg); 64 | background: -webkit-radial-gradient( 65 | center center, 66 | farthest-side, 67 | #9993, 68 | transparent 69 | ); 70 | } 71 | 72 | @keyframes spin { 73 | from { 74 | transform: rotateY(0deg); 75 | } 76 | to { 77 | transform: rotateY(360deg); 78 | } 79 | } 80 | 81 | @keyframes spinRevert { 82 | from { 83 | transform: rotateY(360deg); 84 | } 85 | to { 86 | transform: rotateY(0deg); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /3D Image Hover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 3D Image Hover 5 | 6 | 7 | 8 |
9 | 12 | 15 | 18 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /3D Image Hover/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100%; 5 | height: 100vh; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | 11 | .container { 12 | position: relative; 13 | width: 360px; 14 | height: 640px; 15 | margin-top: 150px; 16 | background: rgba(0, 0, 0, 0); 17 | transform: rotate(-30deg) skew(25deg) scale(0.8); 18 | transition: 0.5s; 19 | } 20 | 21 | img { 22 | position: absolute; 23 | width: 100%; 24 | transition: 0.5s; 25 | } 26 | 27 | .container:hover img:nth-child(4) { 28 | transform: translate(160px, -160px); 29 | opacity: 1; 30 | } 31 | 32 | .container:hover img:nth-child(3) { 33 | transform: translate(120px, -120px); 34 | opacity: 0.8; 35 | } 36 | 37 | .container:hover img:nth-child(2) { 38 | transform: translate(80px, -80px); 39 | opacity: 0.6; 40 | } 41 | 42 | .container:hover img:nth-child(1) { 43 | transform: translate(40px, -40px); 44 | opacity: 0.4; 45 | } 46 | -------------------------------------------------------------------------------- /3D Thumb Image Hover/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/3D Thumb Image Hover/img/thumb.jpg -------------------------------------------------------------------------------- /3D Thumb Image Hover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 3D Thumb Image 7 | 8 | 9 | 10 |
11 | 12 | hte optimist lives on 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /3D Thumb Image Hover/stype.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Open+Sans); 2 | 3 | body { 4 | background: #ddd; 5 | font-family: "Open Sans", sans-serif; 6 | height: 100vh; 7 | margin: 0; 8 | } 9 | 10 | .thumb { 11 | width: 400px; 12 | height: 300px; 13 | margin: 70px auto; 14 | perspective: 1000px; 15 | } 16 | 17 | .thumb a { 18 | display: block; 19 | width: 100%; 20 | height: 100%; 21 | background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 22 | url("img/thumb.jpg"); 23 | background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) 24 | url("img/thumb.jpg"); 25 | background-size: 0, cover; 26 | transform-style: preserve-3d; 27 | transition: all 0.5s; 28 | } 29 | 30 | .thumb:hover a { 31 | transform: rotateX(80deg); 32 | transform-origin: bottom; 33 | } 34 | 35 | .thumb a:after { 36 | content: ""; 37 | position: absolute; 38 | left: 0; 39 | bottom: 0; 40 | width: 100%; 41 | height: 36px; 42 | background: inherit; 43 | background-size: cover, cover; 44 | background-position: bottom; 45 | transform: rotateX(90deg); 46 | transform-origin: bottom; 47 | } 48 | 49 | .thumb a:before { 50 | content: ""; 51 | position: absolute; 52 | top: 0; 53 | left: 0; 54 | width: 100%; 55 | height: 100%; 56 | background: rgba(0, 0, 0, 0.5); 57 | box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); 58 | transition: all 0.5s; 59 | opacity: 0.15; 60 | transform: rotateX(95deg) translateZ(-80px) scale(0.75); 61 | transform-origin: bottom; 62 | } 63 | 64 | .thumb:hover a:before { 65 | opacity: 1; 66 | box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); 67 | transform: rotateX(0) translateZ(-60px) scale(0.85); 68 | } 69 | 70 | .thumb a span { 71 | color: white; 72 | text-transform: uppercase; 73 | text-align: center; 74 | position: absolute; 75 | top: 100%; 76 | left: 0; 77 | width: 100%; 78 | transform: rotateX(-89.99deg); 79 | transform-origin: top; 80 | font: bold 12px/36px "Open Sans"; 81 | z-index: 1; 82 | } 83 | -------------------------------------------------------------------------------- /Border Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Border Effect 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /Border Effect/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-family: sans-serif; 7 | line-height: 1.15; 8 | } 9 | 10 | body { 11 | background: #003; 12 | margin: 0; 13 | } 14 | 15 | .container { 16 | height: 100vh; 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | overflow: hidden; 21 | } 22 | 23 | .box { 24 | width: 60vmin; 25 | height: 60vmin; 26 | border: 1px dashed rgba(255, 255, 255, 0.4); 27 | position: relative; 28 | } 29 | 30 | .box::before { 31 | content: ""; 32 | position: absolute; 33 | top: 0; 34 | left: 0; 35 | bottom: 0; 36 | right: 0; 37 | border-radius: 50%; 38 | border: 1px dashed rgba(255, 255, 255, 0.4); 39 | transform: scale(1.42); 40 | } 41 | 42 | .spin-container { 43 | width: 100%; 44 | height: 100%; 45 | -webkit-animation: spin 12s linear infinite; 46 | animation: spin 12s linear infinite; 47 | position: relative; 48 | } 49 | 50 | .shape { 51 | width: 100%; 52 | height: 100%; 53 | transition: border-radius 1s ease-out; 54 | -webkit-animation: morph 8s ease-in-out infinite both alternate; 55 | animation: morph 8s ease-in-out infinite both alternate; 56 | border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; 57 | position: absolute; 58 | overflow: hidden; 59 | z-index: 5; 60 | } 61 | 62 | .bd { 63 | width: 120%; 64 | height: 120%; 65 | position: absolute; 66 | left: -10%; 67 | top: -10%; 68 | background: url("img/1.jpg"); 69 | background-size: 100%; 70 | background-position: center -9%; 71 | display: flex; 72 | align-items: center; 73 | justify-content: center; 74 | animation: spin 12s linear infinite reverse; 75 | z-index: 2; 76 | } 77 | 78 | @-webkit-keyframes morph { 79 | 0% { 80 | border-radius: 40% 60% 60% 40%/60% 30% 70% 40%; 81 | } 82 | 100% { 83 | border-radius: 40% 60%; 84 | } 85 | } 86 | 87 | @keyframes morph { 88 | 0% { 89 | border-radius: 40% 60% 60% 40%/60% 30% 70% 40%; 90 | } 91 | 100% { 92 | border-radius: 40% 60%; 93 | } 94 | } 95 | 96 | @-webkit-keyframes spin { 97 | to { 98 | transform: rotate(1turn); 99 | } 100 | } 101 | 102 | @keyframes spin { 103 | to { 104 | transform: rotate(1turn); 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /Button Effects(3D)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Effect 3D 8 | 9 | 10 | 11 |
12 |
13 | 18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /Button Effects(3D)/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Raleway"); 2 | 3 | :root { 4 | --glow-color: hsl(186 100% 69%); 5 | } 6 | 7 | *, 8 | *::before, 9 | *::after { 10 | box-sizing: border-box; 11 | } 12 | 13 | html, 14 | body { 15 | height: 100%; 16 | width: 100%; 17 | overflow: hidden; 18 | margin: 0; 19 | } 20 | 21 | .container { 22 | height: 100%; 23 | width: 100%; 24 | display: grid; 25 | grid-template-columns: repeat(3, 1fr); 26 | grid-template-rows: repeat(3, 1fr); 27 | } 28 | 29 | .glow { 30 | background: black; 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | } 35 | 36 | .glowing-btn { 37 | position: relative; 38 | color: var(--glow-color); 39 | cursor: pointer; 40 | padding: 0.15em 0.5em; 41 | border: 0.1em solid var(--glow-color); 42 | border-radius: 0.45em; 43 | background: none; 44 | font-family: "Raleway", sans-serif; 45 | font-size: 1em; 46 | font-weight: 700; 47 | letter-spacing: 0.5em; 48 | perspective: 2em; 49 | 50 | -webkit-box-shadow: inset 0 0 0.2em 0 var(--glow-color), 51 | 0 0 0.2em 0 var(--glow-color); 52 | box-shadow: inset 0 0 0.2em 0 var(--glow-color), 0 0 0.2em 0 var(--glow-color); 53 | animation: border-flicker 2s linear infinite; 54 | } 55 | 56 | .glowing-btn::before { 57 | content: ""; 58 | position: absolute; 59 | top: 0; 60 | bottom: 0; 61 | left: 0; 62 | right: 0; 63 | filter: blur(1em); 64 | background: var(--glow-color); 65 | transform: translateY(120%) rotateX(95deg) scale(1, 0.35); 66 | pointer-events: none; 67 | } 68 | 69 | .glowing-btn::after { 70 | content: ""; 71 | position: absolute; 72 | top: 0; 73 | left: 0; 74 | right: 0; 75 | bottom: 0; 76 | opacity: 0; 77 | z-index: -1; 78 | border-radius: 0.45em; 79 | background: var(--glow-color); 80 | box-shadow: 0 0 2em 0.2em var(--glow-color); 81 | transition: opacity 100ms linear; 82 | } 83 | 84 | .glowing-txt { 85 | float: left; 86 | margin-right: -0.2em; 87 | text-shadow: 0 0 0.125em hsl(0, 0%, 100% / 0.3), 0 0 0.45em var(--glow-color); 88 | animation: text-flicker 3s linear infinite; 89 | } 90 | 91 | .faulty-letter { 92 | opacity: 0.5; 93 | animation: faulty-flicker 2s linear infinite; 94 | } 95 | 96 | .glowing-btn:hover { 97 | color: rgba(0, 0, 0, 0.8); 98 | text-shadow: none; 99 | animation: none; 100 | } 101 | 102 | .glowing-btn:hover .glowing-txt { 103 | animation: none; 104 | } 105 | 106 | .glowing-btn:hover .faulty-letter { 107 | animation: none; 108 | text-shadow: none; 109 | opacity: 1; 110 | } 111 | 112 | .glowing-btn:hover:before { 113 | filter: blur(1.5em); 114 | opacity: 1; 115 | } 116 | 117 | .glowing-btn:hover:after { 118 | opacity: 1; 119 | } 120 | 121 | @keyframes border-flicker { 122 | 0% { 123 | opacity: 0.1; 124 | } 125 | 2% { 126 | opacity: 1; 127 | } 128 | 3% { 129 | opacity: 0.1; 130 | } 131 | 8% { 132 | opacity: 1; 133 | } 134 | 70% { 135 | opacity: 0.7; 136 | } 137 | 100% { 138 | opacity: 1; 139 | } 140 | } 141 | 142 | @keyframes text-flicker { 143 | 0% { 144 | opacity: 0.1; 145 | } 146 | 2% { 147 | opacity: 1; 148 | } 149 | 8% { 150 | opacity: 0.1; 151 | } 152 | 9% { 153 | opacity: 1; 154 | } 155 | 12% { 156 | opacity: 0.1; 157 | } 158 | 20% { 159 | opacity: 1; 160 | } 161 | 25% { 162 | opacity: 0.3; 163 | } 164 | 30% { 165 | opacity: 1; 166 | } 167 | 70% { 168 | opacity: 0.7; 169 | } 170 | 72% { 171 | opacity: 0.2; 172 | } 173 | 77% { 174 | opacity: 0.9; 175 | } 176 | 100% { 177 | opacity: 0.9; 178 | } 179 | } 180 | 181 | @keyframes faulty-flicker { 182 | 0% { 183 | opacity: 0.1; 184 | } 185 | 2% { 186 | opacity: 0.1; 187 | } 188 | 4% { 189 | opacity: 0.5; 190 | } 191 | 19% { 192 | opacity: 0.5; 193 | } 194 | 21% { 195 | opacity: 0.1; 196 | } 197 | 23% { 198 | opacity: 1; 199 | } 200 | 80% { 201 | opacity: 0.5; 202 | } 203 | 83% { 204 | opacity: 0.4; 205 | } 206 | 207 | 87% { 208 | opacity: 1; 209 | } 210 | } 211 | -------------------------------------------------------------------------------- /Button Effects(Simple)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Effects (Simple Animation) 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 21 | 22 | 23 | 24 | HOVER ME 25 |
26 |
27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /Button Effects(Simple)/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Lato:100&display=swap"); 2 | 3 | body, 4 | html { 5 | width: 100%; 6 | height: 100%; 7 | margin: 0; 8 | padding: 0; 9 | background: #5ca4ea; 10 | overflow: hidden; 11 | font-family: "Lato", sans-serif; 12 | } 13 | 14 | .container { 15 | display: grid; 16 | grid-template-columns: repeat(5, 1fr); 17 | grid-template-rows: repeat(4, 1fr); 18 | gap: 12px; 19 | } 20 | 21 | .btn-one { 22 | height: 100px; 23 | width: 200px; 24 | position: absolute; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | } 29 | 30 | .btn-one .center { 31 | width: 180px; 32 | height: 60px; 33 | position: absolute; 34 | } 35 | 36 | .btn-one .center .btn { 37 | width: 180px; 38 | height: 60px; 39 | cursor: pointer; 40 | background: transparent; 41 | border: 1px solid #91c9ff; 42 | outline: none; 43 | transition: 1s ease-in-out; 44 | display: flex; 45 | align-items: center; 46 | justify-content: center; 47 | } 48 | 49 | svg { 50 | position: absolute; 51 | left: 0; 52 | top: 0; 53 | fill: none; 54 | stroke: #fff; 55 | stroke-dasharray: 150 480; 56 | stroke-dashoffset: 150; 57 | transition: 1s ease-in-out; 58 | } 59 | 60 | .btn-one .btn:hover { 61 | transition: 1s ease-in-out; 62 | background: #4f95da; 63 | } 64 | 65 | .btn-one .btn:hover svg { 66 | stroke-dashoffset: -480; 67 | } 68 | 69 | .btn-one .btn span { 70 | color: white; 71 | font-size: 18px; 72 | font-weight: 100; 73 | } 74 | -------------------------------------------------------------------------------- /Image Caption v1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Caption V1 8 | 9 | 10 | 11 |
12 | sample74 16 |
17 |

Jason Response

18 |

Just makes people try to do everything at onece.

19 |
20 | 21 |
22 |
23 | sample74 27 |
28 |

Jason Response

29 |

Just makes people try to do everything at onece.

30 |
31 | 32 |
33 |
34 | sample74 38 |
39 |

Jason Response

40 |

Just makes people try to do everything at onece.

41 |
42 | 43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /Image Caption v1/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Raleway:400,500); 2 | 3 | html { 4 | height: 100%; 5 | } 6 | 7 | body { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | flex-flow: wrap; 12 | margin: 0; 13 | background-color: #212121; 14 | height: 100%; 15 | } 16 | 17 | figure.caption { 18 | position: relative; 19 | font-family: "Raleway", Arial, sans-serif; 20 | color: #fff; 21 | overflow: hidden; 22 | margin: 10px; 23 | min-width: 220px; 24 | max-width: 310px; 25 | max-height: 220px; 26 | width: 100%; 27 | color: black; 28 | text-align: center; 29 | } 30 | 31 | figure.caption * { 32 | box-sizing: border-box; 33 | transition: all 0.6s ease; 34 | } 35 | 36 | figure.caption img { 37 | opacity: 1; 38 | width: 100%; 39 | transition: opacity 0.35s; 40 | } 41 | 42 | figure.caption::after { 43 | content: ""; 44 | background: #ffffff; 45 | width: 100%; 46 | height: 100%; 47 | position: absolute; 48 | left: 0; 49 | bottom: 0; 50 | opacity: 0.75; 51 | transform: skew(-45deg) scaleX(0); 52 | transition: 0.3s ease-in-out; 53 | } 54 | 55 | figure.caption:hover::after { 56 | transform: skew(-45deg) scaleX(1); 57 | transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 58 | } 59 | 60 | figure.caption figcaption { 61 | position: absolute; 62 | top: 50%; 63 | left: 0; 64 | width: 100%; 65 | transform: translateY(-50%); 66 | z-index: 1; 67 | } 68 | 69 | figure.caption h2, 70 | figure.caption p { 71 | margin: 0; 72 | width: 100%; 73 | opacity: 0; 74 | } 75 | 76 | figure.caption h2 { 77 | padding: 0 30px; 78 | display: inline-block; 79 | text-transform: uppercase; 80 | font-weight: 400; 81 | } 82 | 83 | figure.caption p { 84 | padding: 0 50px; 85 | font-size: 0.8em; 86 | font-weight: 500; 87 | } 88 | 89 | figure.caption:hover figcaption h2 { 90 | opacity: 1; 91 | } 92 | 93 | figure.caption:hover figcaption p { 94 | opacity: 0.7; 95 | } 96 | 97 | figure.caption a { 98 | left: 0; 99 | right: 0; 100 | top: 0; 101 | bottom: 0; 102 | position: absolute; 103 | z-index: 1; 104 | } 105 | -------------------------------------------------------------------------------- /Image Caption v2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Caption v2 8 | 9 | 10 | 11 |
12 | sample2 16 |
17 |

Fletch Skinner

18 |

19 | I don't need to compromise my principles, because they don't have the 20 | slightest bearing on what happens to me anyway. 21 |

22 |
23 | 24 |
25 |
26 | sample2 30 |
31 |

Indigo Violet

32 |

33 | What's the point of wearing your favorite rocketship underpants if 34 | nobody ever asks to see 'em? 35 |

36 |
37 | 38 |
39 |
40 | sample2 44 |
45 |

Gunther Beard

46 |

47 | Given that sooner or later we're all just going to die, what's the 48 | point of learning about integers? 49 |

50 |
51 | 52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /Image Caption v2/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,700); 2 | 3 | html { 4 | height: 100%; 5 | } 6 | 7 | body { 8 | height: 100%; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | background-color: #212121; 13 | flex-wrap: wrap; 14 | } 15 | 16 | .caption { 17 | position: relative; 18 | font-family: "Raleway", Arial, sans-serif; 19 | color: white; 20 | min-width: 250px; 21 | max-width: 310px; 22 | width: 100%; 23 | margin: 10px; 24 | background-color: black; 25 | } 26 | 27 | .caption * { 28 | box-sizing: border-box; 29 | transition: all 0.4s ease-in; 30 | } 31 | 32 | .caption img { 33 | position: relative; 34 | max-width: 100%; 35 | vertical-align: top; 36 | } 37 | 38 | .caption figcaption { 39 | position: absolute; 40 | top: 0; 41 | right: 0; 42 | z-index: 1; 43 | width: 100%; 44 | height: 100%; 45 | padding: 20px 30px; 46 | opacity: 0; 47 | } 48 | 49 | .caption figcaption:before, 50 | .caption figcaption:after { 51 | width: 10px; 52 | height: 0%; 53 | } 54 | 55 | .caption figcaption::before { 56 | right: 0; 57 | top: 0; 58 | } 59 | 60 | .caption figcaption::after { 61 | left: 0; 62 | bottom: 0; 63 | } 64 | 65 | .caption h3, 66 | .caption p { 67 | line-height: 1.5rem; 68 | } 69 | 70 | .caption h3 { 71 | margin: 0 0 5px; 72 | font-weight: 700; 73 | text-transform: uppercase; 74 | } 75 | 76 | .caption p { 77 | font-size: 0.8em; 78 | font-weight: 500; 79 | margin: 0 0 15px; 80 | } 81 | 82 | .caption a { 83 | position: absolute; 84 | top: 0; 85 | bottom: 0; 86 | right: 0; 87 | left: 0; 88 | z-index: 1; 89 | } 90 | 91 | .caption::before, 92 | .caption::after, 93 | .caption figcaption::before, 94 | .caption figcaption::after { 95 | content: ""; 96 | position: absolute; 97 | background-color: white; 98 | z-index: 1; 99 | transition: all 0.4s ease-in; 100 | opacity: 0.8; 101 | } 102 | 103 | .caption::before, 104 | .caption::after { 105 | height: 10px; 106 | width: 0%; 107 | } 108 | 109 | .caption::before { 110 | top: 0; 111 | left: 0; 112 | } 113 | 114 | .caption::after { 115 | bottom: 0; 116 | right: 0; 117 | } 118 | 119 | .caption:hover img { 120 | opacity: 0.4; 121 | } 122 | 123 | .caption:hover figcaption { 124 | opacity: 1; 125 | } 126 | 127 | .caption:hover::before, 128 | .caption:hover::after { 129 | width: 100%; 130 | } 131 | 132 | .caption:hover figcaption::before, 133 | .caption:hover figcaption::after { 134 | height: 100%; 135 | } 136 | 137 | .caption:hover:before, 138 | .caption:hover:after, 139 | .caption:hover figcaption::before, 140 | .caption:hover figcaption::after { 141 | opacity: 0.1; 142 | } 143 | -------------------------------------------------------------------------------- /Image Caption v3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Caption v3 8 | 9 | 10 | 11 |
12 | sample67 16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 |
24 |
25 | sample67 29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 |
37 |
38 | sample67 42 |
43 |
44 |
45 |
46 |
47 |
48 | 49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /Image Caption v3/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | height: 100%; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | flex-wrap: wrap; 11 | background-color: #212121; 12 | } 13 | 14 | .caption { 15 | position: relative; 16 | min-width: 230px; 17 | max-width: 315px; 18 | width: 100%; 19 | -webkit-box-sizing: padding-box; 20 | box-sizing: padding-box; 21 | box-shadow: none !important; 22 | -webkit-transform: translateZ(0); 23 | transform: translateZ(0); 24 | margin: 7px; 25 | padding: 6px; 26 | } 27 | 28 | .caption img { 29 | width: 100%; 30 | vertical-align: top; 31 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 32 | } 33 | 34 | .caption .border { 35 | position: absolute; 36 | opacity: 0.45; 37 | } 38 | 39 | .caption .border::before, 40 | .caption .border::after, 41 | .caption .border div::before, 42 | .caption .border div::after { 43 | content: ""; 44 | background-color: #f4b043; 45 | position: absolute; 46 | display: block; 47 | transition: all 0.4s ease-in-out; 48 | } 49 | 50 | .caption .border::before, 51 | .caption .border::after { 52 | width: 0; 53 | height: 1px; 54 | } 55 | 56 | .caption .border div::before, 57 | .caption .border div::after { 58 | width: 1px; 59 | height: 0; 60 | } 61 | 62 | .caption .border.one { 63 | left: 0; 64 | top: 0; 65 | right: 12px; 66 | bottom: 12px; 67 | } 68 | 69 | .caption .border.one::before, 70 | .caption .border.one div::before { 71 | left: 0; 72 | top: 0; 73 | } 74 | 75 | .caption .border.one::after, 76 | .caption .border.one div::after { 77 | bottom: 0; 78 | right: 0; 79 | } 80 | 81 | .caption .border.two { 82 | left: 12px; 83 | top: 12px; 84 | right: 0; 85 | bottom: 0; 86 | } 87 | 88 | .caption .border.two:before, 89 | .caption .border.two div:before { 90 | right: 0; 91 | top: 0; 92 | } 93 | 94 | .caption .border.two:after, 95 | .caption .border.two div:after { 96 | bottom: 0; 97 | left: 0; 98 | } 99 | 100 | .caption a { 101 | left: 0; 102 | right: 0; 103 | top: 0; 104 | bottom: 0; 105 | position: absolute; 106 | z-index: 1; 107 | } 108 | 109 | .caption:hover .border::before, 110 | .caption:hover .border::after { 111 | width: 100%; 112 | } 113 | 114 | .caption:hover .border div::before, 115 | .caption:hover .border div::after { 116 | height: 100%; 117 | } 118 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS-SCSS 2 | This repo is a project to design and implement various animations including 3D and slider using CSS and SCSS. 3 | All animations were inspired and implemented by CodePen. 4 | - [CSS-SCSS](#css-scss) 5 | - [Table of contents](#table-of-contents) 6 | - [3D Card](#3d-card) 7 | - [CSS](#css) 8 | - [3D Carousel](#3d-carousel) 9 | - [Start Effect](#start-effect) 10 | - [Image 3D Effect](#image-3d-effect) 11 | - [Mouse Event Effect](#mouse-event-effect) 12 | - [3D Card Hover](#3d-card-hover) 13 | - [Caption Animation](#caption-animation) 14 | - [Image Effect](#image-effect) 15 | - [3D Card Effect](#3d-card-effect) 16 | - [Add mouse event listener](#add-mouse-event-listener) 17 | - [3D Card Effect V2](#3d-card-effect-v2) 18 | - [Mouse Event](#mouse-event) 19 | - [3D Image Hover](#3d-image-hover) 20 | - [Animation](#animation) 21 | - [3D Thumb Image Effect](#3d-thumb-image-effect) 22 | - [Book Effect](#book-effect) 23 | - [Shadow Effect](#shadow-effect) 24 | - [Image Caption v1](#image-caption-v1) 25 | - [Caption Animation](#caption-animation-1) 26 | - [Image Caption v2](#image-caption-v2) 27 | - [Caption Animation](#caption-animation-2) 28 | - [Image Caption v2](#image-caption-v2-1) 29 | - [Border Effect](#border-effect) 30 | - [Border Animation](#border-animation) 31 | - [Image Effect](#image-effect-1) 32 | - [Button Effect (Simple)](#button-effect-simple) 33 | - [Line Hover Effect](#line-hover-effect) 34 | - [Button Effect (Simple)](#button-effect-simple-1) 35 | - [Glow Button](#glow-button) 36 | - [Neon Animation](#neon-animation) 37 | - [Glow Effect](#glow-effect) 38 | 39 | ## Table of contents[](#table-of-contents) 40 | - 3D Card 41 | 42 | ## 3D Card[](#3d-card) 43 |
44 | 3D Card 45 |
46 | This project is a project that implements a 3D card using CSS. 47 | 48 | ### CSS 49 | ``` 50 | .card:hover .wrapper { 51 | transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); 52 | box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); 53 | -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); 54 | -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); 55 | } 56 | ``` 57 | 58 | ## 3D Carousel[](#3d-carousel) 59 |
60 | 3D_Carousel 61 |
62 | This project is a project that implements the image carousel effect using CSS and JavaScript. 63 | 64 | ### Start Effect 65 | ``` 66 | for (var i = 0; i < imgs.length; i++) { 67 | imgs[i].style.transform = "rotateY(" + i * (360 / imgs.length) + "deg) translateZ(" + radius + "px)"; 68 | imgs[i].style.transition = "transform 1s"; 69 | imgs[i].style.transitionDelay = delayTime || (imgs.length - i) / 4 + "s"; 70 | } 71 | ``` 72 | 73 | ### Image 3D Effect 74 | ``` 75 | img { 76 | transform-style: preserve-3d; 77 | position: absolute; 78 | left: 0; 79 | top: 0; 80 | width: 100%; 81 | height: 100%; 82 | line-height: 200px; 83 | font-size: 50px; 84 | text-align: center; 85 | box-shadow: 0 0 8px #fff; 86 | -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005); 87 | } 88 | ``` 89 | 90 | ### Mouse Event Effect 91 | ``` 92 | document.onpointerdown = function (e) { 93 | clearInterval(wheel.timer); 94 | e = e || window.event; 95 | var sX = e.clientX, sY = e.clientY; 96 | 97 | this.onpointermove = function (e) { 98 | e = e || window.event; 99 | var nX = e.clientX, nY = e.clientY; 100 | desX = nX - sX; 101 | desY = nY - sY; 102 | tX += desX * 0.1; 103 | tY += desY * 0.1; 104 | applyTransform(wheel); 105 | sX = nX; 106 | sY = nY; 107 | }; 108 | 109 | this.onpointerup = function (e) { 110 | wheel.timer = setInterval(function () { 111 | desX *= 0.95; 112 | desY *= 0.95; 113 | tX += desX * 0.1; 114 | tY += desY * 0.1; 115 | applyTransform(wheel); 116 | playSpin(false); 117 | if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) { 118 | clearInterval(wheel.timer); 119 | playSpin(true); 120 | } 121 | }, 17); 122 | this.onpointermove = this.onpointerup = null; 123 | }; 124 | 125 | return false; 126 | }; 127 | ``` 128 | 129 | ## 3D Card Hover[](#3d-card-hover) 130 | 3D Card Hover 131 | This project shows 3D animation using characters. 132 | 133 | ### Caption Animation 134 | ``` 135 | figcaption { 136 | grid-area: 1/1; 137 | width: calc(100% + 40px); 138 | font-family: Exoct; 139 | color: white; 140 | font-size: min(32px, 5vmin); 141 | text-align: center; 142 | place-self: end center; 143 | transform: perspective(500px) translateY(100%) rotateX(-90deg); 144 | backface-visibility: hidden; 145 | transform-origin: top; 146 | background: #000; 147 | transition: 0.5s; 148 | } 149 | ``` 150 | 151 | ### Image Effect 152 | ``` 153 | figure { 154 | width: 100%; 155 | aspect-ratio: 1; 156 | margin: 0 0 60px; 157 | padding: 5px 20px 0; 158 | box-sizing: border-box; 159 | display: grid; 160 | grid-template-rows: 100%; 161 | cursor: pointer; 162 | position: relative; 163 | filter: drop-shadow(0 0 20px rgb(0 0 0/50%)); 164 | } 165 | 166 | figure:before { 167 | background-image: url(https://assets.codepen.io/1480814/necro-back.jpg); 168 | } 169 | 170 | figure + figure:before { 171 | background-image: url(https://assets.codepen.io/1480814/druid-bac.jpg); 172 | } 173 | ``` 174 | 175 | ## 3D Card Effect[](#3d-card-effect) 176 | 3D Card Effect 177 | This project is a project that shows a 3D card using mouse events. 178 | 179 | ### Add mouse event listener 180 | ``` 181 | container.addEventListener("mousemove", (e) => { 182 | let X = (window.innerWidth / 2 - e.pageX) / 30; 183 | let Y = (window.innerHeight / 2 - e.pageY) / 30; 184 | 185 | card.style.transition = "none"; 186 | card.style.transform = `rotateX(${X}deg) rotateY(${Y}deg)`; 187 | }); 188 | ``` 189 | 190 | ## 3D Card Effect V2[](#3d-card-effect-v2) 191 | 3D Card Effect V2 192 | 193 | ### Mouse Event 194 | ``` 195 | window.addEventListener("DOMContentLoaded", (event) => { 196 | const cards = document.querySelectorAll(".card"); 197 | cards.forEach((e) => { 198 | e.addEventListener("mousemove", (event) => { 199 | const rect = e.getBoundingClientRect(); 200 | const centerX = (rect.left + rect.right) / 2; 201 | const centerY = (rect.top + rect.bottom) / 2; 202 | const posX = event.pageX - centerX; 203 | const posY = event.pageY - centerY; 204 | const x = remap(posX, rect.width / 2, angle); 205 | const y = remap(posY, rect.height / 2, angle); 206 | e.dataset.rotateX = x; 207 | e.dataset.rotateY = -y; 208 | }); 209 | 210 | e.addEventListener("mouseout", (event) => { 211 | e.dataset.rotateX = 0; 212 | e.dataset.rotateY = 0; 213 | }); 214 | }); 215 | 216 | const update = () => { 217 | cards.forEach((e) => { 218 | let currentX = parseFloat( 219 | e.style.getPropertyValue("--rotateY").slice(0, -1) 220 | ); 221 | let currentY = parseFloat( 222 | e.style.getPropertyValue("--rotateX").slice(0, -1) 223 | ); 224 | if (isNaN(currentX)) currentX = 0; 225 | if (isNaN(currentY)) currentY = 0; 226 | const x = lerp(currentX, e.dataset.rotateX, 0.05); 227 | const y = lerp(currentY, e.dataset.rotateY, 0.05); 228 | e.style.setProperty("--rotateY", x + "deg"); 229 | e.style.setProperty("--rotateX", y + "deg"); 230 | }); 231 | }; 232 | setInterval(update, 1000 / 60); 233 | }); 234 | ``` 235 | 236 | ## 3D Image Hover[](#3d-image-hover) 237 | 3D Image Hover 238 | This project implemented multiple sliders animation using CSS. 239 | 240 | ### Animation 241 | ``` 242 | .container:hover img:nth-child(4) { 243 | transform: translate(160px, -160px); 244 | opacity: 1; 245 | } 246 | 247 | .container:hover img:nth-child(3) { 248 | transform: translate(120px, -120px); 249 | opacity: 0.8; 250 | } 251 | 252 | .container:hover img:nth-child(2) { 253 | transform: translate(80px, -80px); 254 | opacity: 0.6; 255 | } 256 | 257 | .container:hover img:nth-child(1) { 258 | transform: translate(40px, -40px); 259 | opacity: 0.4; 260 | } 261 | ``` 262 | 263 | ## 3D Thumb Image Effect[](#3d-thumb-image-effect) 264 | 3D Thumb Effect 265 | 266 | ### Book Effect 267 | ``` 268 | .thumb a:after { 269 | content: ""; 270 | position: absolute; 271 | left: 0; 272 | bottom: 0; 273 | width: 100%; 274 | height: 36px; 275 | background: inherit; 276 | background-size: cover, cover; 277 | background-position: bottom; 278 | transform: rotateX(90deg); 279 | transform-origin: bottom; 280 | } 281 | ``` 282 | 283 | ### Shadow Effect 284 | ``` 285 | .thumb a:before { 286 | content: ""; 287 | position: absolute; 288 | top: 0; 289 | left: 0; 290 | width: 100%; 291 | height: 100%; 292 | background: rgba(0, 0, 0, 0.5); 293 | box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); 294 | transition: all 0.5s; 295 | opacity: 0.15; 296 | transform: rotateX(95deg) translateZ(-80px) scale(0.75); 297 | transform-origin: bottom; 298 | } 299 | 300 | .thumb:hover a:before { 301 | opacity: 1; 302 | box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); 303 | transform: rotateX(0) translateZ(-60px) scale(0.85); 304 | } 305 | ``` 306 | 307 | ## Image Caption v1[](#image-caption-v1) 308 | Image Caption v1 309 | 310 | ### Caption Animation 311 | ``` 312 | figure.caption::after { 313 | content: ""; 314 | background: #ffffff; 315 | width: 100%; 316 | height: 100%; 317 | position: absolute; 318 | left: 0; 319 | bottom: 0; 320 | opacity: 0.75; 321 | transform: skew(-45deg) scaleX(0); 322 | transition: 0.3s ease-in-out; 323 | } 324 | 325 | figure.caption:hover::after { 326 | transform: skew(-45deg) scaleX(1); 327 | transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 328 | } 329 | ``` 330 | 331 | ## Image Caption v2[](#image-caption-v2) 332 | Image Caption v2 333 | 334 | ### Caption Animation 335 | ``` 336 | .caption::before, 337 | .caption::after { 338 | height: 10px; 339 | width: 0%; 340 | } 341 | 342 | .caption::before { 343 | top: 0; 344 | left: 0; 345 | } 346 | 347 | .caption::after { 348 | bottom: 0; 349 | right: 0; 350 | } 351 | 352 | .caption:hover::before, 353 | .caption:hover::after { 354 | width: 100%; 355 | } 356 | ``` 357 | 358 | ## Image Caption v2[](#image-caption-v2) 359 | Image Caption v3 360 | 361 | 362 | ## Border Effect[](#border-effect) 363 |
364 | Border Effect 365 |
366 | This project uses Vanilla CSS to apply a floating border effect to image. 367 | 368 | ### Border Animation 369 | ``` 370 | @-webkit-keyframes morph { 371 | 0% { 372 | border-radius: 40% 60% 60% 40%/60% 30% 70% 40%; 373 | } 374 | 100% { 375 | border-radius: 40% 60%; 376 | } 377 | } 378 | 379 | @keyframes morph { 380 | 0% { 381 | border-radius: 40% 60% 60% 40%/60% 30% 70% 40%; 382 | } 383 | 100% { 384 | border-radius: 40% 60%; 385 | } 386 | } 387 | 388 | .shape { 389 | width: 100%; 390 | height: 100%; 391 | transition: border-radius 1s ease-out; 392 | -webkit-animation: morph 8s ease-in-out infinite both alternate; 393 | animation: morph 8s ease-in-out infinite both alternate; 394 | border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; 395 | position: absolute; 396 | overflow: hidden; 397 | z-index: 5; 398 | } 399 | ``` 400 | 401 | ### Image Effect 402 | To fix the image, the same effect is applied to the image and the border container. 403 | ``` 404 | .bd { 405 | width: 120%; 406 | height: 120%; 407 | position: absolute; 408 | left: -10%; 409 | top: -10%; 410 | background: url("img/1.jpg"); 411 | background-size: 100%; 412 | background-position: center -9%; 413 | display: flex; 414 | align-items: center; 415 | justify-content: center; 416 | animation: spin 12s linear infinite reverse; 417 | z-index: 2; 418 | } 419 | 420 | @-webkit-keyframes spin { 421 | to { 422 | transform: rotate(1turn); 423 | } 424 | } 425 | 426 | @keyframes spin { 427 | to { 428 | transform: rotate(1turn); 429 | } 430 | } 431 | ``` 432 | 433 | ## Button Effect (Simple)[](#button-effect-simple) 434 | Button Effect Simple 435 | This project is collections of simple effects of Button hovers. 436 | 437 | ### Line Hover Effect 438 | CSS 439 | ``` 440 | svg { 441 | position: absolute; 442 | left: 0; 443 | top: 0; 444 | fill: none; 445 | stroke: #fff; 446 | stroke-dasharray: 150 480; 447 | stroke-dashoffset: 150; 448 | transition: 1s ease-in-out; 449 | } 450 | 451 | .btn-one .btn:hover svg { 452 | stroke-dashoffset: -480; 453 | } 454 | ``` 455 | 456 | HTML 457 | ``` 458 | 459 | 460 | 461 | 462 | ``` 463 | 464 | ## Button Effect (Simple)[](#button-effect-simple) 465 | Button Effect Simple 466 | This project is using Vanilla CSS to 3D effect. 467 | 468 | ### Glow Button 469 | 470 | #### Neon Animation 471 | ``` 472 | @keyframes border-flicker { 473 | 0% { 474 | opacity: 0.1; 475 | } 476 | 2% { 477 | opacity: 1; 478 | } 479 | 3% { 480 | opacity: 0.1; 481 | } 482 | 8% { 483 | opacity: 1; 484 | } 485 | 70% { 486 | opacity: 0.7; 487 | } 488 | 100% { 489 | opacity: 1; 490 | } 491 | } 492 | ``` 493 | 494 | #### Glow Effect 495 | ``` 496 | .glowing-btn::before { 497 | content: ""; 498 | position: absolute; 499 | top: 0; 500 | bottom: 0; 501 | left: 0; 502 | right: 0; 503 | filter: blur(1em); 504 | background: var(--glow-color); 505 | transform: translateY(120%) rotateX(95deg) scale(1, 0.35); 506 | pointer-events: none; 507 | } 508 | ``` -------------------------------------------------------------------------------- /screenshot/3D_Card/screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Card/screenshot.jpg -------------------------------------------------------------------------------- /screenshot/3D_Card_Effect/3D_Card_Effect.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Card_Effect/3D_Card_Effect.jpg -------------------------------------------------------------------------------- /screenshot/3D_Card_Effect_V2/Screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Card_Effect_V2/Screenshot.jpg -------------------------------------------------------------------------------- /screenshot/3D_Card_Hover/Screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Card_Hover/Screenshot.jpg -------------------------------------------------------------------------------- /screenshot/3D_Carousel/Carousel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Carousel/Carousel.jpg -------------------------------------------------------------------------------- /screenshot/3D_Image_Hover/3DImageHover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Image_Hover/3DImageHover.jpg -------------------------------------------------------------------------------- /screenshot/3D_Thumb_Image_Animation/Screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/3D_Thumb_Image_Animation/Screenshot.jpg -------------------------------------------------------------------------------- /screenshot/Button_Effect_Simple/Screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/Button_Effect_Simple/Screenshot.jpg -------------------------------------------------------------------------------- /screenshot/Image_Caption_v1/Screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/Image_Caption_v1/Screenshot.jpg -------------------------------------------------------------------------------- /screenshot/Image_Caption_v2/Screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/Image_Caption_v2/Screenshot.jpg -------------------------------------------------------------------------------- /screenshot/Image_Caption_v3/Screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/screenshot/Image_Caption_v3/Screenshot.jpg -------------------------------------------------------------------------------- /src/3D Card/dark_rider-character.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D Card/dark_rider-character.webp -------------------------------------------------------------------------------- /src/3D Card/dark_rider-cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D Card/dark_rider-cover.jpg -------------------------------------------------------------------------------- /src/3D Card/dark_rider-title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D Card/dark_rider-title.png -------------------------------------------------------------------------------- /src/3D Card/force_mage-character.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D Card/force_mage-character.webp -------------------------------------------------------------------------------- /src/3D Card/force_mage-cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D Card/force_mage-cover.jpg -------------------------------------------------------------------------------- /src/3D Card/force_mage-title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D Card/force_mage-title.png -------------------------------------------------------------------------------- /src/3D_Caoucel/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/1.jpg -------------------------------------------------------------------------------- /src/3D_Caoucel/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/2.jpg -------------------------------------------------------------------------------- /src/3D_Caoucel/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/3.jpg -------------------------------------------------------------------------------- /src/3D_Caoucel/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/4.jpg -------------------------------------------------------------------------------- /src/3D_Caoucel/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/5.jpg -------------------------------------------------------------------------------- /src/3D_Caoucel/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/6.jpg -------------------------------------------------------------------------------- /src/3D_Caoucel/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/7.jpg -------------------------------------------------------------------------------- /src/3D_Caoucel/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SecretariatV/CSS-SCSS/69829d4fcc177c62f1a6951c79d321358a7ba465/src/3D_Caoucel/8.jpg --------------------------------------------------------------------------------