Transparent CSS Device Windows - Browser, Tablet, Mobile

Developer
Kristen Zirkler
Size
2,783 Kb
Views
20,240
  1. Transparent CSS Device Windows - Browser, Tablet, Mobile Previews
  2. Transparent CSS Device Windows - Browser, Tablet, Mobile HTML Codes
  3. Transparent CSS Device Windows - Browser, Tablet, Mobile CSS Codes

How do I make an transparent css device windows - browser, tablet, mobile?

What is a transparent css device windows - browser, tablet, mobile? How do you make a transparent css device windows - browser, tablet, mobile? This script and codes were developed by Kristen Zirkler on 16 October 2022, Sunday.

Transparent CSS Device Windows - Browser, Tablet, Mobile Previews
IQ Test

Transparent CSS Device Windows - Browser, Tablet, Mobile - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Transparent CSS Device Windows - Browser, Tablet, Mobile</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="demo"> <div class="device-window browser"> <span><img src="http://placehold.it/800x550/41A9D9/ffffff" /></span> </div> <div class="device-window tablet"> <span><img src="http://placehold.it/440x675/41A9D9/ffffff" /></span> </div> <div class="device-window mobile"> <span><img src="http://placehold.it/200x370/41A9D9/ffffff" /></span> </div>
</div>
</body>
</html>

Transparent CSS Device Windows - Browser, Tablet, Mobile - Script Codes CSS Codes

.device-window { background: rgba(255, 255, 255, 0.4); border: 4px solid #fff; position: relative;
}
.device-window span { background: #000; display: block; position: absolute; top: 30px; bottom: 0; left: 0; right: 0; overflow: hidden;
}
.device-window span img { width: 100%;
}
.device-window:before, .device-window:after { background: rgba(255, 255, 255, 0.4); border: 1px solid #fff; position: absolute;
}
.tablet { width: 440px; height: 675px; border-radius: 30px;
}
.tablet:before { width: 5px; height: 5px; content: ' '; border-radius: 50%; top: 20px; left: 218px;
}
.tablet:after { width: 30px; height: 30px; content: ' '; border-radius: 50%; bottom: 10px; left: 205px;
}
.tablet span { top: 40px; left: 10px; right: 10px; bottom: 55px;
}
.mobile { width: 200px; height: 370px; border-radius: 20px;
}
.mobile:before { width: 5px; height: 5px; content: ' '; border-radius: 50%; top: 15px; left: 96px;
}
.mobile:after { width: 30px; height: 30px; content: ' '; border-radius: 50%; bottom: 8px; left: 85px;
}
.mobile span { top: 35px; left: 10px; right: 10px; bottom: 50px;
}
.browser { width: 800px; height: 550px; border-radius: 10px;
}
.browser:after, .browser:before { width: 7px; height: 7px; top: 10px; content: ' '; border-radius: 50%;
}
.browser:before { left: 10px;
}
.browser:after { left: 25px;
}
.browser span { top: 30px; border-radius: 0 0 9px 9px; /* one less than parent */
}
body { background-color: #333;
}
body:after { content: ' '; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background: linear-gradient(135deg, #4d4d4d 25%, transparent 25%) -50px 0, linear-gradient(225deg, #4d4d4d 25%, transparent 25%) -50px 0, linear-gradient(315deg, #4d4d4d 25%, transparent 25%), linear-gradient(45deg, #4d4d4d 25%, transparent 25%); background-size: 100px 100px; background-color: #333;
}
.demo .device-window { margin: 1em auto;
}
Transparent CSS Device Windows - Browser, Tablet, Mobile - Script Codes
Transparent CSS Device Windows - Browser, Tablet, Mobile - Script Codes
Home Page Home
Developer Kristen Zirkler
Username kristenzirkler
Uploaded October 16, 2022
Rating 3
Size 2,783 Kb
Views 20,240
Do you need developer help for Transparent CSS Device Windows - Browser, Tablet, Mobile?

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!

Kristen Zirkler (kristenzirkler) Script Codes
Name
Full Page Intro Slide with Content
CSS Loader
Tablet Navigation - Jobing.com
Map Animation
KZ Line Draw - SVG animation
Email Marketing Mock
Animated Photo
Responsive Grid List
Simple - Blurred BG
Company Profile - Jobing.com Mock
Create amazing captions 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!