Batman CSS

Developer
Damien Pereira Morberto
Size
2,095 Kb
Views
14,168
  1. Batman CSS Previews
  2. Batman CSS HTML Codes
  3. Batman CSS CSS Codes

How do I make an batman css?

Batman logo designed with border-radius and css3 transform :) Works in all browsers ! (for IE, only >= IE9). What is a batman css? How do you make a batman css? This script and codes were developed by Damien Pereira Morberto on 10 December 2022, Saturday.

Batman CSS Previews
IQ Test

Batman CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Batman CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="batman"> <div class="inner-y"> <div class="inner-b"> <div class="cut-lr"></div> <div class="cut-rr"></div> <div class="cut-bll"></div> <div class="cut-brr"></div> <div class="cut-blll"></div> <div class="cut-bllr"></div> <div class="cut-brll"></div> <div class="cut-brlr"></div> <div class="cut-hd"></div> <div class="drw-hd-m"></div> <div class="drw-hd-lt"></div> <div class="drw-hd-rt"></div> </div> </div>
</div>
</body>
</html>

Batman CSS - Script Codes CSS Codes

body { margin:0; padding:0; background-color:#98a4a6;
}
#batman { position:absolute; left:50%; top:50%; margin:-100px 0px 0px -175px; width:350px; height:200px; background-color:#111; border-radius: 175px / 100px;
}
.inner-y { position: absolute; left: 50%; top: 50%; margin: -87px 0px 0px -160px; width: 320px; height: 174px; background-color: #edc233; border-radius: 195px / 106px; overflow:hidden;
}
.inner-b { position: absolute; left: 50%; top: 50%; margin: -75px 0px 0px -148px; width: 296px; height: 150px; background-color: #111; border-radius: 205px / 106px;
}
.cut-lr, .cut-rr { position: absolute; width: 54px; height: 54px; border-radius: 500px; background-color: #edc233; top: 32px; margin: -27px 0px 0px -27px;
}
.cut-bll, .cut-brr { position: absolute; width: 78px; height: 44px; border-radius: 205px / 106px; background-color: #edc233; bottom:-2px;
}
.cut-lr { left:102px;
}
.cut-rr { left:192px;
}
.cut-bll { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); left:42px;
}
.cut-brr { -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); right:42px;
}
.cut-blll, .cut-bllr, .cut-brll, .cut-brlr { position: absolute; width: 70px; height: 32px; border-radius: 205px / 106px; background-color: #edc233; bottom: 1px;
}
.cut-blll, .cut-brll { -webkit-transform:rotate(-112deg); -moz-transform:rotate(-112deg); -ms-transform:rotate(-112deg); -o-transform:rotate(-112deg); transform:rotate(-112deg);
}
.cut-blll { right:72px;
}
.cut-brll { left:93px;
}
.cut-brlr { left:72px;
}
.cut-bllr { right:93px;
}
.cut-brlr, .cut-bllr { -webkit-transform:rotate(-67deg); -moz-transform:rotate(-67deg); -ms-transform:rotate(-67deg); -o-transform:rotate(-67deg); transform:rotate(-67deg);
}
.cut-hd { width: 110px; height: 34px; background: #edc233; left: 92px; top:-2px; position: absolute;
}
.drw-hd-m { position: absolute; width: 36px; height: 56px; background-color: #111; left: 50%; margin-left: -19px; border-radius: 230px / 110px; top: 23px;
}
.drw-hd-lt, .drw-hd-rt { position: absolute; width: 0; height: 0; top:2px; border-bottom: 28px solid #111;
}
.drw-hd-lt { left:129px; border-right: 14px solid transparent; border-left: 1px solid transparent;
}
.drw-hd-rt { right:131px; border-left: 14px solid transparent; border-right: 1px solid transparent;
}
Batman CSS - Script Codes
Batman CSS - Script Codes
Home Page Home
Developer Damien Pereira Morberto
Username damienpm
Uploaded December 10, 2022
Rating 4.5
Size 2,095 Kb
Views 14,168
Do you need developer help for Batman CSS?

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!

Damien Pereira Morberto (damienpm) Script Codes
Name
Custom checkboxes
Flat design camera with CSS animation
Flat design iframe
One div gear
A Pen by Damien Pereira Morberto
Xaoweb Logo
Traveler CSS
Flat design color chart
Captain America CSS
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!