Daily CSS Images 03 Beaver

Developer
Iulia Sargu
Size
3,561 Kb
Views
6,072
  1. Daily CSS Images 03 Beaver Previews
  2. Daily CSS Images 03 Beaver HTML Codes
  3. Daily CSS Images 03 Beaver CSS Codes

How do I make an daily css images 03 beaver?

Day 3 of @dailycssimages. Challenge was "Beaver". Mostly like the following Alamy design: http://tinyurl.com/z22lb7q. What is a daily css images 03 beaver? How do you make a daily css images 03 beaver? This script and codes were developed by Iulia Sargu on 15 December 2022, Thursday.

Daily CSS Images 03 Beaver Previews
IQ Test

Daily CSS Images 03 Beaver - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Daily CSS Images 03 Beaver </title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body> <div class="box"> <div class="beaver"> <div class="ears"> <div class="inner"></div> </div> <div class="face"></div> <div class="eyes"> <div class="pupils"></div> </div> <div class="cheeks"></div> <div class="mouth"> <div class="nose"></div> <div class="lips"></div> <div class="teeth"></div> </div> <div class="body"></div> <div class="arms"></div> <div class="legs"></div> <div class="tail"></div> </div> </div>
</body>
</body>
</html>

Daily CSS Images 03 Beaver - Script Codes CSS Codes

body { background-color: #648397;
}
.box { position: relative; margin: auto; display: block; margin-top: 8%; width: 600px; height: 420px;
}
.beaver { content: ''; position: absolute; top: 16.5%; left: 25%; width: 50%; height: 67%;
}
.face { position: absolute; left: 15%; width: 70%; height: 65%; background-color: #9B5E2C; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 2;
}
.face:after { content: ''; position: absolute; top: 30%; left: 35%; width: 30%; height: 30%; background-color: #FACA8A; z-index: 2;
}
.eyes:before, .eyes:after { content: ''; position: absolute; top: 30%; left: 27%; width: 7%; height: 7%; background-color: black; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 2;
}
.eyes:after { margin-left: 115px;
}
.pupils:before, .pupils:after { content: ''; position: absolute; top: 31%; left: 28%; width: 2%; height: 2%; background-color: white; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 3;
}
.pupils:after { margin-left: 115px;
}
.ears:before, .ears:after { content: ''; position: absolute; left: 22%; width: 10%; height: 10%; background-color: #9B5E2C; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;
}
.ears:after { margin-left: 139px;
}
.inner:before, .inner:after { content: ''; position: absolute; top: 2%; left: 24%; width: 6%; height: 6%; background-color: #FACA8A; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 2;
}
.inner:after { margin-left: 138px;
}
.mouth { position: absolute; top: 33%; left: 35%; width: 30%; height: 23%; background-color: #FACA8A; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 2;
}
.cheeks:before, .cheeks:after { content: ''; position: absolute; top: 37%; left: 20%; width: 10%; height: 7%; background-color: #FACA8A; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 2;
}
.cheeks:after { margin-left: 150px;
}
.nose { position: absolute; top: 10%; left: 35%; width: 30%; height: 27%; background-color: black; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 4;
}
.lips:before, .lips:after { content: ''; position: absolute; top: 30%; left: 27%; width: 20%; height: 15%; background-color: #FACA8A; border: 2px solid black; border-top: 0; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -o-transform: rotate(-25deg); transform: rotate(-25deg); z-index: 3;
}
.lips:after { margin-left: 20px; -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); transform: rotate(25deg);
}
.teeth { position: absolute; top: 31%; left: 38%; width: 22%; height: 35%; background-color: white; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; z-index: 2;
}
.body { position: absolute; top: 55%; left: 22%; width: 55%; height: 50%; background-color: #9B5E2C; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 1;
}
.arms:before, .arms:after { content: ''; position: absolute; top: 62%; left: 30%; width: 12%; height: 30%; background-color: #8A5026; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); z-index: 2;
}
.arms:after { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); margin-left: 82px;
}
.legs:before, .legs:after { content: ''; position: absolute; top: 92%; left: 17%; width: 30%; height: 18%; background-color: #8A5026; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg);
}
.legs:after { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); margin-left: 110px;
}
.tail:before, .tail:after { content: ''; position: absolute; top: 72%; width: 30%; height: 18%; -webkit-border-radius: 20%; -moz-border-radius: 20%; -o-border-radius: 20%; border-radius: 20%; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); background: repeating-linear-gradient(-55deg, black 1px, #3B291D 2px, #3B291D 9px, black 11px, black 10px);
}
.tail:after { background: repeating-linear-gradient(55deg, black 1px, transparent 2px, transparent 9px, black 11px, black 10px);
}
Daily CSS Images 03 Beaver - Script Codes
Daily CSS Images 03 Beaver - Script Codes
Home Page Home
Developer Iulia Sargu
Username kanpeki
Uploaded December 15, 2022
Rating 3
Size 3,561 Kb
Views 6,072
Do you need developer help for Daily CSS Images 03 Beaver?

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!

Iulia Sargu (kanpeki) Script Codes
Name
Slider checkboxes
Daily CSS Images 05 Mickey
Daily CSS Images 01 Bear cub
Daily CSS Images 04 Tiger
1-tribute-page
2-personal-portfolio
Daily CSS Images 06 Clock
Daily CSS Images 02 Elephant
Daily CSS Images 07 Ruler
Animation mixin test
Create amazing blog posts 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!