CSS device icons
How do I make an css device icons?
Single HTML element for each icon.Dribbble shot to code: http://dribbble.com/shots/1266547-Icons. What is a css device icons? How do you make a css device icons? This script and codes were developed by Robert on 08 November 2022, Tuesday.
CSS device icons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS device icons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span class="icon-device phone"></span>
<span class="icon-device tablet"></span>
<span class="icon-device imac"></span>
</body>
</html>
CSS device icons - Script Codes CSS Codes
body { margin-top: 10%; background: #5EC792; text-align: center; letter-spacing: 50px;
}
.icon-device { position: relative; display: inline-block; border: 3px solid #fefefe; -webkit-border-radius: 3px; -webkit-background-clip: padding-box; -moz-border-radius: 3px; -moz-background-clip: padding; border-radius: 3px; background-clip: padding-box;
}
.icon-device::before,
.icon-device::after { position: absolute; content: '';
}
.icon-device::before { top: 4px; width: 15px; height: 3px; margin-left: -7.5px; background: #fefefe; -webkit-border-radius: 15px; -webkit-background-clip: padding-box; -moz-border-radius: 15px; -moz-background-clip: padding; border-radius: 15px; background-clip: padding-box;
}
.icon-device::after { bottom: 4px; width: 10px; height: 10px; margin-left: -5px; background: #fefefe; -webkit-border-radius: 10px; -webkit-background-clip: padding-box; -moz-border-radius: 10px; -moz-background-clip: padding; border-radius: 10px; background-clip: padding-box;
}
.icon-device.phone { width: 65px; height: 120px;
}
.icon-device.tablet { width: 95px; height: 120px;
}
.icon-device.imac { width: 220px; height: 150px;
}
.icon-device.imac::before { width: 4px; height: 4px; margin-left: -2px;
}
.icon-device.imac::after { top: 100%; border-bottom: 30px solid #fefefe; border-left: 10px solid transparent; border-right: 10px solid transparent; -webkit-border-radius: 0; -webkit-background-clip: padding-box; -moz-border-radius: 0; -moz-background-clip: padding; border-radius: 0; background-clip: padding-box; height: 0; width: 36px; margin-left: -28px;
}
| Developer | Robert |
| Username | rendro |
| Uploaded | November 08, 2022 |
| Rating | 4 |
| Size | 2,360 Kb |
| Views | 26,312 |
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 |
| WebGL cube test | 15,142 Kb |
| CSS3 Browser | 2,882 Kb |
| Confirm appointment dialog | 3,130 Kb |
| CSS Slideshow | 1,847 Kb |
| CSS3 animated wooden box | 4,289 Kb |
| CSS vintage filter form images | 2,190 Kb |
| Mobile navigation button | 2,659 Kb |
| A Pen by Robert | 3,362 Kb |
| 3D canvas cube | 2,895 Kb |
| Easy pie chart admin panel | 3,369 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 |
| Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
| IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
| Ripples in water | Nobitagit | 2,704 Kb |
| Responsive slide | Thorien | 2,400 Kb |
| Reading Grid | Tappily | 4,306 Kb |
| Weather App | Kw7oe | 3,162 Kb |
| Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
| ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
| Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
| CSS3 iPad | Vikvarg | 1,766 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!