CSS Owl

Developer
Albert Filice
Size
2,845 Kb
Views
36,432
  1. CSS Owl Previews
  2. CSS Owl HTML Codes
  3. CSS Owl CSS Codes
  4. CSS Owl JS Codes

How do I make an css owl?

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

CSS Owl Previews
IQ Test

CSS Owl - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Owl</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="eyes"></div> <div id="feet"></div> <div id="branch"></div> <div id="branch2"></div> <div id="branch3"></div> <div id="branch4"></div> <div id="moon"></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 Owl - 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 { background-color: #6ae6c3;
}
#body { position: relative; margin: 80px auto; height: 82px; width: 82px; background-color: #161614; border-radius: 41px;
}
#body:before { content: ''; position: absolute; top: 42px; left: -4px; width: 36px; height: 36px; border-top: none; border-right: 4px solid #fff; border-bottom: 4px solid #fff; border-left: none; border-radius: 36px 0px 36px 0px;	-webkit-transform: rotate(-82deg);	-moz-transform: rotate(-82deg); -ms-transform: rotate(-82deg); -o-transform: rotate(-82deg); transform: rotate(-82deg);
}
#body:after { content: ''; position: absolute; top: 41px; left: 50px; width: 36px; height: 36px; border-top: 4px solid #fff; border-right: none; border-bottom: none; border-left: 4px solid #fff; border-radius: 36px 0px 36px 0px;	-webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg);
}
#eyes { position: absolute; top: 14px; left: 10px; height: 30px; width: 30px; background-color: #fff; border-radius: 15px; box-shadow: 30px 0px #fff;
}
#eyes:before { content: ''; position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; background-color: #000; border-radius: 5px; box-shadow: 30px 0px #000;
}
#eyes:after { content: ''; position: absolute; top: 17px; left: 20px; height: 0px; width: 0px; border-top: 20px solid #fff; border-right: 10px solid transparent; border-left: 10px solid transparent;
}
#feet { position: absolute; top: 80px; left: 34px; height: 11px; width: 3px; background-color: #161614; border-right: 1px solid #444442; border-left: 1px solid #444442; z-index: -5;
}
#feet:before { content: ''; position: absolute; top: 0px; left: 10px; height: 11px; width: 3px; background-color: #161614; border-right: 1px solid #444442; border-left: 1px solid #444442; z-index: -5;
}
#branch { position: absolute; top: 91px; left: -50px; width: 107px; height: 6px; background-color: #161614; border-top: 1px solid #444442; border-right: 1px solid #444442; z-index: 5;
}
#branch:before { content: ''; position: absolute; top: 2px; left: 0px; width: 107px; height: 6px; background-color: #161614; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg);
}
#branch2 { position: absolute; top: 96px; left: -156px; width: 107px; height: 6px; background-color: #161614; border-top: 1px solid #444442; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg);
}
#branch2:before { content: ''; position: absolute; top: 2px; left: 0px; width: 107px; height: 11px; background-color: #161614; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg);
}
#branch3 { position: absolute; top: 98px; left: -223px; width: 70px; height: 16px; background-color: #161614; border-top: 1px solid #444442; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg);
}
#branch3:before { content: ''; position: absolute; top: 11px; left: 0px; width: 69px; height: 8px; background-color: #161614; border-bottom: 1px solid #444442; -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg);
}
#branch4 { content: ''; position: absolute; top: 103px; left: -263px; width: 39px; height: 28px; background-color: #161614; -webkit-transform: skew(-33deg) rotate(-34deg); -moz-transform: skewX(-33deg) rotate(-34deg); -ms-transform: skew(-33deg) rotate(-34deg); -o-transform: skew(-33deg) rotate(-34deg);
}
#branch4:before { content: ''; position: absolute; top: -7px; left: -1px; width: 39px; height: 15px; background-color: #161614; -webkit-transform: rotate(20deg) skew(20deg); -moz-transform: rotate(20deg) skewX(20deg); -ms-transform: rotate(20deg) skew(20deg); -o-transform: rotate(20deg) skew(20deg);
}
#moon { position: absolute; top: -90px; left: -70px; height: 80px; width: 80px; background-color: transparent; border-radius: 80px; box-shadow: -17px 17px #000;
}

CSS Owl - Script Codes JS Codes

/*
Got the idea from Danny Lelieveld's illustration:
http://217.67.248.138/~dlelieveld/dannylelieveld.com/?portfolio=animals-illustraties
Made it out of just CSS and HTML.
His twitter: DannyLelieveld
My twitter: monstasaurous
Thanks Hugo Giraudel for showing me a better way to do the wings, check it out in the comments.
Now you can change the background color of the page!
*/
CSS Owl - Script Codes
CSS Owl - Script Codes
Home Page Home
Developer Albert Filice
Username monstersaurous
Uploaded August 26, 2022
Rating 3
Size 2,845 Kb
Views 36,432
Do you need developer help for CSS Owl?

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
CSS Gameboy
Single Element Icons
CNIT 133 - Homework 4 - Part 6
Single Element Solar Eclipse Animation
Message Bubble
Game of 15
Single Element Wine Glass
CSS Elephant
Single Element Loader
CSS Spaceship
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!