CSS Bear

Developer
Tom Hazledine
Size
3,753 Kb
Views
4,048
  1. CSS Bear Previews
  2. CSS Bear HTML Codes
  3. CSS Bear CSS Codes

How do I make an css bear?

A bear made in CSS. Rarrrw!. What is a css bear? How do you make a css bear? This script and codes were developed by Tom Hazledine on 07 January 2023, Saturday.

CSS Bear Previews
IQ Test

CSS Bear - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Bear</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bearWrapper"> <div class="ear right"></div> <div class="ear left"></div> <div class="jowls right"></div> <div class="jowls left"></div> <div class="face"> <div class="eye right"></div> <div class="eye left"></div> <div class="cheeks"> <div class="nose"></div> <div class="mouth"></div> </div> <div class="belly"></div> <div class="foot right">	<div class="pads"></div> </div> <div class="foot left">	<div class="pads"></div> </div> </div>
</div>
</body>
</html>

CSS Bear - Script Codes CSS Codes

* { box-sizing: border-box;
}
html { height: 100%;
}
body { height: 100%; padding-top: 6em; background: -webkit-radial-gradient(#efe7d2 50%, #66ad83 90%); background: radial-gradient(#efe7d2 50%, #66ad83 90%);
}
.bearWrapper { width: 16em; height: 30em; margin: 0 auto; position: relative;
}
.face { width: 100%; height: 100%; background: #573c16; padding-top: 5em; border-radius: 8em; border-top-left-radius: 10em 8em; border-top-right-radius: 10em 8em; position: relative; z-index: 10; box-shadow: inset #432e11 0 -3em 0 0;
}
.face:after, .face:before { content: ""; width: 4em; height: 11em; background: #573c16; position: absolute; bottom: 6em; box-shadow: inset #432e11 0 -1em 0 0;
}
.face:after { left: -3em; border-top-left-radius: 100%; border-bottom-left-radius: 4em;
}
.face:before { right: -3em; border-top-right-radius: 100%; border-bottom-right-radius: 4em;
}
.jowls { position: absolute; top: 7em; width: 1em; height: 6em; background: #573c16;
}
.jowls.right { right: -.5em; border-top-right-radius: 1em 4em; border-bottom-right-radius: 1em 2em;
}
.jowls.left { left: -.5em; border-top-left-radius: 1em 4em; border-bottom-left-radius: 1em 2em;
}
.ear { height: 6em; width: 4em; background: #573c16; position: absolute; top: 0; border-radius: 2em 2em 0em 0em; z-index: 0;
}
.ear.right { right: 0; -webkit-transform: rotate(35deg); transform: rotate(35deg);
}
.ear.left { left: 0; -webkit-transform: rotate(-35deg); transform: rotate(-35deg);
}
.ear:after { content: ''; width: 2em; height: 4em; background: #aea07d; position: absolute; top: 1em; left: 50%; margin-left: -1em; border-radius: 1.5em 1.5em 0em 0em; box-shadow: inset #99885f -0.5em 0.2em 0 0;
}
.eye { width: .8em; height: .8em; background: #000000; box-shadow: inset 0 0 0 0.1em #efefef, inset 0 0 0 0.3em #66ad83, 0 -0.3em 0 0 #432e11; position: absolute; border-radius: 50%; top: 5em; -webkit-animation: blink 5s infinite; animation: blink 5s infinite;
}
.eye.right { right: 4em;
}
.eye.left { left: 4em;
}
.cheeks { width: 6em; height: 7em; margin: 0 auto; background: #aea07d; border-radius: 2em; border-top-left-radius: 4em 3em; border-top-right-radius: 4em 3em; padding-top: 1em; box-shadow: inset #99885f 0 -0.5em 0 0, #432e11 -0.5em 0.5em 0 0;
}
.cheeks .nose { width: 3em; height: .5em; margin: 0 auto; background: #000000; border-top-left-radius: 1.5em 1em; border-top-right-radius: 1.5em 1em; position: relative;
}
.cheeks .nose:after { position: absolute; content: ''; top: 100%; border-top: 1em solid #000000; border-right: 1.5em solid transparent; border-left: 1.5em solid transparent; z-index: 200;
}
.cheeks .mouth { height: 3em; width: .2em; background: #573c16; margin: 0 auto; position: relative;
}
.cheeks .mouth:before { content: ''; position: absolute; bottom: -1em; left: -1.2em; border-bottom: 0.8em solid #aea07d; border-right: 1.3em solid transparent; border-left: 1.3em solid transparent; z-index: 100;
}
.cheeks .mouth:after { content: ''; position: absolute; bottom: -.9em; left: -1.4em; border-bottom: 1em solid #573c16; border-right: 1.55em solid transparent; border-left: 1.55em solid transparent; z-index: 90;
}
.belly { width: 8em; height: 8em; background: #aea07d; margin: 6em auto 0; border-radius: 50%; border-top-left-radius: 4em 3em; border-top-right-radius: 4em 3em;
}
.foot { position: absolute; bottom: -1em; width: 6em; height: 7em; border-radius: 3em; border-top-left-radius: 6em 4em; border-top-right-radius: 6em 4em; background: #573c16; box-shadow: inset 0 0.5em 0 0 #6c4a1b, inset 0 -1em 0 0 #432e11; z-index: 200;
}
.foot.right { right: -1em; -webkit-transform: rotate(10deg); transform: rotate(10deg);
}
.foot.left { left: -1em; -webkit-transform: rotate(-10deg); transform: rotate(-10deg);
}
.foot .pads { width: 3em; height: 2em; background: #aea07d; margin: 3em auto 0; border-radius: 1em;
}
@-webkit-keyframes blink { 0% { height: .8em; top: 5em; } 05% { height: 0em; top: 5.4em; } 10% { height: .8em; top: 5em; } 15% { height: 0em; top: 5.4em; } 20% { height: .8em; top: 5em; } 100% { height: 0.8em; top: 5em; }
}
@keyframes blink { 0% { height: .8em; top: 5em; } 05% { height: 0em; top: 5.4em; } 10% { height: .8em; top: 5em; } 15% { height: 0em; top: 5.4em; } 20% { height: .8em; top: 5em; } 100% { height: 0.8em; top: 5em; }
}
CSS Bear - Script Codes
CSS Bear - Script Codes
Home Page Home
Developer Tom Hazledine
Username tomhazledine
Uploaded January 07, 2023
Rating 4
Size 3,753 Kb
Views 4,048
Do you need developer help for CSS Bear?

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!

Tom Hazledine (tomhazledine) Script Codes
Name
Basic Tone Generator
CSSing a Select Box
Animated Menu Icon
Basic Styles
Hourglass Loader
CSS Cassette
CRT Pong
Instrument
Triangle image mask
Pong Loader
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!