CSS Drawing - Life Ring
How do I make an css drawing - life ring?
What is a css drawing - life ring? How do you make a css drawing - life ring? This script and codes were developed by Chris Evans on 27 December 2022, Tuesday.
CSS Drawing - Life Ring - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Drawing - Life Ring</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="stage"> <div class="life-ring__rope"></div> <div class="life-ring"> <div class="life-ring__striping"></div> </div>
</div>
</body>
</html>
CSS Drawing - Life Ring - Script Codes CSS Codes
body { background: #FFF;
}
.stage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #A7DBD8; padding: 32px; border-radius: 256px;
}
.life-ring { position: relative; display: block; height: 192px; width: 192px; background: #F38630; background: radial-gradient(circle at 50% 50%, #fa6900 40%, #f7b078); border-radius: 192px;
}
.life-ring:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 96px; height: 96px; border-radius: 96px; background: #A7DBD8;
}
.life-ring__striping { position: absolute; display: block; height: 192px; width: 192px; border-radius: 192px; overflow: hidden;
}
.life-ring__striping:before, .life-ring__striping:after { position: absolute; top: 50%; transform-origin: 50% 50%; transform: translateY(-50%); display: block; content: ''; background: #FFF; background: radial-gradient(circle at 50% 50%, #efefef 40%, #ffffff); height: 45px; width: 100%;
}
.life-ring__striping:before { transform: translateY(-50%) rotate(45deg);
}
.life-ring__striping:after { transform: translateY(-50%) rotate(-45deg);
}
.life-ring__rope { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); border: 8px solid #E0E4CC; border-radius: 32px; height: 162px; width: 162px;
}
| Developer | Chris Evans |
| Username | anitorious |
| Uploaded | December 27, 2022 |
| Rating | 3 |
| Size | 2,476 Kb |
| Views | 8,096 |
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!
| Name | Size |
| A Pen by Chris Evans | 2,881 Kb |
| Animated Notification - Successful Action | 3,210 Kb |
| A Forked Sky Full of Stars - Canvas Adaptation, Credit to JLNLJN | 3,297 Kb |
| Searching for Answers | 4,761 Kb |
| Single Field List Filter | 3,377 Kb |
| Profile Cards | 4,913 Kb |
| CSS Drawing - The Great Sandwhich Chef | 3,018 Kb |
| Button with Progress Indicator | 4,286 Kb |
| Expanding Form | 3,462 Kb |
| Multiple Off-Canvas Asides | 6,886 Kb |
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!
| Name | Username | Size |
| Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
| Materializecss input form | Jasonchan | 1,443 Kb |
| SlideupBoxes | Gavra | 23,772 Kb |
| Pure CSS candle light animation by One element | Ksksoft | 2,193 Kb |
| Spinners using Font Icons | Keyamoon | 3,007 Kb |
| Flat design iframe | Damienpm | 1,819 Kb |
| CSS3 Form | Tusharbandal | 1,836 Kb |
| A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
| Parallax scrolling scene | Iharosi | 2,485 Kb |
| Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!