Image Badge

Developer
Mackdoyle
Size
1,972 Kb
Views
6,072
  1. Image Badge Previews
  2. Image Badge HTML Codes
  3. Image Badge CSS Codes

How do I make an image badge?

What is a image badge? How do you make a image badge? This script and codes were developed by Mackdoyle on 26 December 2022, Monday.

Image Badge Previews
IQ Test

Image Badge - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image Badge</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div class="inline"> <h2>Background Image Badge</h2> <p>Rounded image with image defined as a background in css</p> <div class="profile-img edge"></div>
</div>
<div class="inline"> <h2>Clipped Image Badge</h2> <p>Rounded image with parent element clipping HTML image</p> <div class="profile-img-wrapper"> <img src="http://gravatar.com/avatar/55e1b9bcdd2a29d9c0b9ceaae27d0e16?s=256" /> </div> </div>
</body>
</body>
</html>

Image Badge - Script Codes CSS Codes

/* BKG Image */
.profile-img { background: url('http://gravatar.com/avatar/55e1b9bcdd2a29d9c0b9ceaae27d0e16?s=256') 0 0 no-repeat; margin: 0 auto; width: 256px; height: 256px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;
}
.profile-img.edge { border: 16px solid #FFF; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2), inset 1px 1px 15px rgba(100, 100, 100, 0.15); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2), inset 1px 1px 15px rgba(100, 100, 100, 0.15); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2), inset 1px 1px 15px rgba(100, 100, 100, 0.15);
}
/* Clipped Image */
.profile-img-wrapper{ width: 256px; overflow: hidden; /* for Firefox */ margin: 0 auto; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%;
}
/* base styling */
body { background: rgba(0,0,0,0.1); font-family: sans-serif; font-size: 16px; color:#444; line-height:1.5em; font-weight: 300; letter-spacing: .03em; /*normalize*/ margin: 40px;
}
.inline{ display: inline-block; vertical-align:top; text-align: center; width: 49%;
}
Image Badge - Script Codes
Image Badge - Script Codes
Home Page Home
Developer Mackdoyle
Username mackdoyle
Uploaded December 26, 2022
Rating 3
Size 1,972 Kb
Views 6,072
Do you need developer help for Image Badge?

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!

Mackdoyle (mackdoyle) Script Codes
Name
A Pen by mackdoyle
CSS Pulse Animation
Hard-Stop Gradients
Analogous Colors
Toltip Arrow
Fluid-like Responsive Display Ads
Droste effect
Web Font Readability Test
Simple Message Box
Calendar Date
Create amazing web content 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!