3D 2D Box-Shadow Fish

Developer
Brandon Kennedy
Size
6,333 Kb
Views
14,168
  1. 3D 2D Box-Shadow Fish Previews
  2. 3D 2D Box-Shadow Fish HTML Codes
  3. 3D 2D Box-Shadow Fish CSS Codes

How do I make an 3d 2d box-shadow fish?

Just making some examples of animations and box-shadows. This one is a concept i started a while back and i finally found the time to solidify it. Used sass maps to generate the image.. What is a 3d 2d box-shadow fish? How do you make a 3d 2d box-shadow fish? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.

3D 2D Box-Shadow Fish Previews
IQ Test

3D 2D Box-Shadow Fish - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D 2D Box-Shadow Fish</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.css'>
<link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="aquarium"> <div class="seaweed seaweed--one"></div> <div class="seaweed seaweed--two"></div> <div class="seaweed seaweed--three"></div> <div class="fish animated"> <div class="segment segment-1"> <div class="segment segment-2"> <div class="segment segment-3"> <div class="segment segment-4"> <div class="segment segment-5"> <div class="segment segment-6"> <div class="segment segment-7"> <div class="segment segment-8"> <div class="segment segment-9"> <div class="segment segment-10"> <div class="segment segment-11"> <div class="segment segment-12"> <div class="segment segment-13"> <div class="segment segment-14"> <div class="segment segment-15"> <div class="segment segment-16"> <div class="segment segment-17"> <div class="segment segment-18"> <div class="segment segment-19"> <div class="segment segment-20"> <div class="segment segment-21"> <div class="segment segment-22"> <div class="segment segment-23"> <div class="segment segment-24"> <div class="segment segment-25"> <div class="segment segment-26"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
</div>
</body>
</html>

3D 2D Box-Shadow Fish - Script Codes CSS Codes

// includes modifiers mixin
// includes colors mixin
$color-settings: ( 'colors': ( 'a': ( 0: #222 ), 'b': ( 0: darkorange ), 'c': ( 0: gold ), 'd': ( 0: forestgreen ), )
);
@include define-color-set;
$size: 12px;
$fish-colors: ( 0: color(transparent), 1: color(b), 2: color(b, 1), 3: color(b, 2), 4: color(b, 3), 5: color(b, 4), 6: color(c), 7: color(c, 1), 8: color(a), 9: color(white),
);
@function buildSegment($color-list) { $shadow: 0 0 0 0 transparent; $x: 0; @each $color in $color-list { $x: $x + 1; $shadow: $shadow, 0 (($size * $x) * -1) 0 0 map-get($fish-colors, $color); } @return $shadow;
}
$seaweed-colors: ( 0: color(transparent), 1: color(d, -1), 2: rgba(color(d, -1), .4), 8: color(d, 1), 9: color(white),
);
@mixin buildSeaweed($color-list) { $shadow: 0 0 0 0 transparent; @for $i from 1 through length($color-list) { $x: 0; @each $color in map-get($color-list, $i) { $x: $x + 1; $shadow: $shadow, ($size * $i) (($size * $x) * -1) 0 0 map-get($seaweed-colors, $color); } } box-shadow: $shadow;
}
body { background: linear-gradient(20deg, royalblue, deepskyblue, mix(darkturquoise, deepskyblue, 70%)); overflow: hidden; perspective: $size * 100; position: relative; &:after { border-radius: 50%; box-shadow: ( 0 0 20vh 20vh rgba(black, .2), 20vw -5vh 20vh 20vh rgba(black, .2), 40vw 3vh 20vh 20vh rgba(black, .2), 60vw -2vh 20vh 20vh rgba(black, .2), 80vw 5vh 20vh 20vh rgba(black, .2), 100vw 0 20vh 20vh rgba(black, .2), ); content: ''; height: 2px; left: 0%; position: absolute; top: 100%; width: 2px; }
}
.fish { // opacity: 0; align-items: flex-end; display: flex; flex-wrap: nowrap; justify-content: flex-center; height: $size * 21; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); transform-style: preserve-3d; width: $size * 26; z-index: 10; &.animated { display: block; margin-left: $size * 26; margin-top: $size * 21; .segment { animation: swim 1.6s ease-in-out infinite alternate; display: inline-block; left: -$size; margin-left: 1px; position: relative; transform: { origin: right; style: preserve-3d; } @for $i from 1 through 7 { &-#{$i} { animation: none; } } @for $i from 8 through 26 { &-#{$i} { animation: { delay: #{$i * .1}s; } } } } @keyframes swim { from { transform: rotateY(-4deg); } to { transform: rotateY(4deg); } } }
}
.segment { height: $size; width: $size; $segment-colors: ( 26: (0 0 0 0 0 0 8 8 8 8 8 8 8), 25: (0 0 0 0 0 8 3 3 3 3 3 3 3 8), 24: (0 0 0 0 0 0 8 2 1 1 1 2 8), 23: (0 0 0 0 0 0 0 8 9 9 9 8), 22: (0 0 0 0 0 0 0 8 9 9 9 8), 21: (0 0 0 0 0 0 8 1 1 1 2 2 8), 20: (0 0 0 0 0 0 8 1 1 2 2 2 3 8), 19: (0 0 0 0 0 8 7 1 8 8 8 2 2 3 8), 18: (0 0 0 0 0 8 9 8 5 5 8 9 9 9 8), 17: (0 0 0 0 8 9 8 5 1 1 2 8 9 9 9 8), 16: (0 0 0 0 8 9 8 5 1 2 2 8 9 9 9 8), 15: (0 0 0 0 8 7 8 1 1 1 2 8 3 3 9 4 8 8), 14: (0 0 0 8 7 7 8 1 1 2 2 8 3 3 3 4 3 5 8), 13: (8 8 8 4 7 7 7 1 1 1 2 2 2 3 3 4 3 3 5 8), 12: (8 5 1 4 7 7 1 1 1 2 2 2 3 3 3 4 1 1 3 8), 11: (8 5 1 4 7 9 9 9 9 9 9 9 2 3 3 4 3 3 5 8), 10: (8 5 1 4 9 9 9 9 9 9 9 9 9 9 3 4 1 1 3 8), 9: (0 8 8 4 9 9 9 9 9 9 9 9 9 9 9 4 3 5 5 8), 8: (0 0 0 8 9 7 1 1 1 2 2 2 9 9 9 4 8 8 8), 7: (0 0 0 8 7 7 7 1 1 1 2 2 2 3 9 8), 6: (0 0 0 0 8 7 1 1 1 6 6 2 3 3 8), 5: (0 0 0 0 8 7 7 1 1 8 8 2 2 8), 4: (0 0 0 0 8 7 4 6 6 1 2 2 2 8), 3: (0 0 0 0 0 8 4 8 6 1 2 2 8), 2: (0 0 0 0 0 8 4 4 6 1 8 8), 1: (0 0 0 0 0 0 8 8 8 8), ); $i: 0; @each $segment in $segment-colors { $i: $i + 1; &.segment-#{$i} { box-shadow: buildSegment(map-get($segment-colors, $i)); } }
}
.seaweed { $animation-front: unique-id(); $animation-back: unique-id(); bottom: -$size; height: $size; left: 50%; position: absolute; transform: translateX(100vw); width: $size; &--one, &--three { $seaweed-map: ( 1: (0 0 1 1 1 2 2 2 2 0 0 0 0 0 0 0 0 0 1 1 1 0 2 2 2), 2: (0 0 1 1 1 1 2 2 2 2 0 0 0 0 0 0 0 0 1 1 1 1 1 2 2 2), 3: (2 1 1 1 8 8 8 1 2 2 2 1 1 0 0 2 2 1 1 1 8 8 8 1 2 0 0 1 1), 4: (1 1 1 8 1 1 2 8 8 1 1 1 1 1 1 2 1 1 1 8 1 1 2 8 1 1 1 1 1 1), 5: (8 8 8 1 1 2 2 2 1 8 8 8 1 1 1 1 8 8 8 1 1 2 2 2 8 8 8 8 1 1 8 1), 6: (1 1 1 1 1 2 2 2 1 1 1 1 8 8 8 8 1 1 1 1 1 2 2 2 1 1 1 1 8 8 1), 7: (2 1 1 1 0 2 2 2 0 1 1 1 1 1 2 2 2 1 1 1 0 2 2 2 0 1 1 1 1), 8: (0 0 0 0 0 0 0 0 0 0 1 1 1 0 2 2 2), ); animation: $animation-front 6s linear infinite; bottom: $size * -8; @include buildSeaweed($seaweed-map); z-index: 15; } &--two { $seaweed-map: ( 8: (0 0 1 1 1 2 2 2 2 0 0 0 0 0 0 0 0 0 1 1 1 0 2 2 2), 7: (0 0 1 1 1 1 2 2 2 2 0 0 0 0 0 0 0 0 1 1 1 1 1 2 2 2), 6: (2 1 1 1 8 8 8 1 2 2 2 1 1 0 0 2 2 1 1 1 8 8 8 1 2 0 0 1 1), 5: (1 1 1 8 1 1 2 8 8 1 1 1 1 1 1 2 1 1 1 8 1 1 2 8 1 1 1 1 1 1), 4: (8 8 8 1 1 2 2 2 1 8 8 8 1 1 1 1 8 8 8 1 1 2 2 2 8 8 8 8 1 1 8 1), 3: (1 1 1 1 1 2 2 2 1 1 1 1 8 8 8 8 1 1 1 1 1 2 2 2 1 1 1 1 8 8 1), 2: (2 1 1 1 0 2 2 2 0 1 1 1 1 1 2 2 2 1 1 1 0 2 2 2 0 1 1 1 1), 1: (0 0 0 0 0 0 0 0 0 0 1 1 1 0 2 2 2), ); animation: $animation-back 7s linear 4s infinite; bottom: $size * -4; @include buildSeaweed($seaweed-map); z-index: 5; } &--three { animation: $animation-back 8s linear infinite; bottom: $size * -6; z-index: 5; } @keyframes #{$animation-front} { from { transform: translateX(100vw) translateZ(100px); } to { transform: translateX(-100vw) translateZ(100px); } } @keyframes #{$animation-back} { from { transform: translateX(100vw) translateZ(-100px); } to { transform: translateX(-100vw) translateZ(-100px); } }
}
body { min-height: 100vh; padding: 2rem;
}
* { &, &:before, &:after { box-sizing: border-box; &, &:focus, &:active, &:focus:active { outline: none; } }
}
3D 2D Box-Shadow Fish - Script Codes
3D 2D Box-Shadow Fish - Script Codes
Home Page Home
Developer Brandon Kennedy
Username brandonkennedy
Uploaded September 18, 2022
Rating 4
Size 6,333 Kb
Views 14,168
Do you need developer help for 3D 2D Box-Shadow Fish?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brandon Kennedy (brandonkennedy) Script Codes
Name
Crooked section dividers
And yet another box shadow loader
Digital Static Search Box
Button disabled and loading states
SCSS Tick Marks Function
Browser Detection
Lazyload.js
Space ship fun
More loading
Negative Padding
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!