CSS Whale!

Developer
Albert Filice
Size
2,602 Kb
Views
40,480
  1. CSS Whale! Previews
  2. CSS Whale! HTML Codes
  3. CSS Whale! CSS Codes
  4. CSS Whale! JS Codes

How do I make an css whale!?

Got the idea from Danny Lelieveld's website:http://217.67.248.138/~dlelieveld/dannylelieveld.com/?portfolio=animals-illustraties. What is a css whale!? How do you make a css whale!? This script and codes were developed by Albert Filice on 26 August 2022, Friday.

CSS Whale! Previews
IQ Test

CSS Whale! - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Whale!</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="body">	<div id="squirt"></div> <div id="tail"></div> <div id="mouth"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Whale! - Script Codes CSS Codes

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
#body { position: relative; margin: 100px auto; width: 300px; height: 150px; background-color: #000; border-top: 1px solid #565654; border-radius: 0px 0px 150px 150px;
}
#body:before { content: ''; position: absolute; top: 17px; left: 208px; width: 12px; height: 12px; background-color: #fff; border-radius: 16px; z-index: 2;
}
#body:after { content: ''; position: absolute; top: -8px; left: 189px; width: 50px; height: 50px; border-radius: 25px; background-color: #000;
}
#squirt { position: absolute; top: -49px; left: 150px; width: 34px; height: 34px; background-color: #000; border-radius: 17px 17px 0px 17px; box-shadow: -3px -32px 0px -11px #000;
}
#squirt:before { content: ''; position: absolute; top: -20px; left: 36px; width: 32px; height: 32px; background-color: #000; border-radius: 16px 16px 16px 0px; box-shadow: 2px -29px 0px -9px #000;
}
#squirt:after { content: ''; position: absolute; top: -35px; left: 23px; width: 18px; height: 18px; background-color: #000; border-radius: 9px 9px 0px 9px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);
}
#tail, #tail:before { position: absolute; width: 39px; height: 39px; background-color: black; border-bottom: 1px solid #7B7B7A;
}
#tail {	top: -43px; border-radius: 19px 0px 19px 0px;
}
#tail:before { content: ''; top: 0px; left: -39px; border-left: 1px solid #BABABA; border-radius: 0px 19px 0px 19px;
}
#mouth { position: absolute; top: 0px; left: 150px; width: 150px; height: 150px; z-index: 1;	border-radius: 0px 0px 150px 0px; background-image: -webkit-linear-gradient(left, #fff 0%, #fff 2%, #000 2%, #000 8%, #fff 8%, #fff 10%, #000 10%, #000 16%, #fff 16%, #fff 18%, #000 18%, #000 24%, #fff 24%, #fff 26%, #000 26%, #000 32%, #fff 32%, #fff 34%, #000 34%, #000 40%, #fff 40%, #fff 42%, #000 42%, #000 48%, #fff 48%, #fff 50%, #000 50%, #000 56%, #fff 56%, #fff 58%, #000 58%, #000 64%, #fff 64%, #fff 66%, #000 66%, #000 72%, #fff 72%, #fff 74%, #000 74%, #000 80%, #fff 80%, #fff 82%, #000 82%, #000 88%, #fff 88%, #fff 90%, #000 90%, #000 96%, #fff 96%, #fff 98%, #000 98%, #000 100%); background-image: -moz-linear-gradient(left, #fff 0%, #fff 2%, #000 2%, #000 8%, #fff 8%, #fff 10%, #000 10%, #000 16%, #fff 16%, #fff 18%, #000 18%, #000 24%, #fff 24%, #fff 26%, #000 26%, #000 32%, #fff 32%, #fff 34%, #000 34%, #000 40%, #fff 40%, #fff 42%, #000 42%, #000 48%, #fff 48%, #fff 50%, #000 50%, #000 56%, #fff 56%, #fff 58%, #000 58%, #000 64%, #fff 64%, #fff 66%, #000 66%, #000 72%, #fff 72%, #fff 74%, #000 74%, #000 80%, #fff 80%, #fff 82%, #000 82%, #000 88%, #fff 88%, #fff 90%, #000 90%, #000 96%, #fff 96%, #fff 98%, #000 98%, #000 100%); border-top: 21px solid #000; box-shadow: 0px 3px #fff inset;
}
#mouth:before { content: ''; position: absolute; width: 80px; height: 70px; background-color: black; border-radius: 0px 0px 90px 0px; box-shadow: 2px 2px 0px 1px #fff;
}

CSS Whale! - Script Codes JS Codes

/*
Inspired by: Danny Lelieveld
http://217.67.248.138/~dlelieveld/dannylelieveld.com/?portfolio=animals-illustraties
Danny's Twitter: DannyLelieveld
My Twitter: monstasaurous
Can anybody make the mouth a bit better, more like the origional? Couldn't get the slant going on.
*/
CSS Whale! - Script Codes
CSS Whale! - Script Codes
Home Page Home
Developer Albert Filice
Username monstersaurous
Uploaded August 26, 2022
Rating 3
Size 2,602 Kb
Views 40,480
Do you need developer help for CSS Whale!?

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!

Albert Filice (monstersaurous) Script Codes
Name
Single Element Dribbble Logo
Game of 15
CSS Gameboy
Single Element Loader
Single Element Google Inbox Sun
Single Element Icons
Message Bubble
Single Element Wine Glass
CSS Owl
CSS Elephant
Create amazing love letters 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!