Browser window

Developer
Roman Diaz
Size
4,200 Kb
Views
32,384
  1. Browser window Previews
  2. Browser window HTML Codes
  3. Browser window CSS Codes

How do I make an browser window?

What is a browser window? How do you make a browser window? This script and codes were developed by Roman Diaz on 23 July 2022, Saturday.

Browser window Previews
IQ Test

Browser window - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>browser window</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="browser_window"> <div><i class="red"></i><i class="yellow"></i><i class="green"></i></div> <span>jesynaime.com</span> <img src="http://romandiaz.me/redesign/img/uploads/jesynaime.jpg">
</div>
</body>
</html>

Browser window - Script Codes CSS Codes

* { font-family: arial;
}
img { max-width: 400px;
}
body { text-align: center;
}
.browser_window { margin: 2em; position: relative; display: inline-block; text-align: center; border-radius: 5px 5px 0 0; box-shadow: 0 .25em 1.5em black; border-top: 1px solid rgba(0, 0, 0, 0.4);
}
.browser_window div { position: absolute;
}
.browser_window div i { position: relative; box-shadow: inset 0 1px 4px black; border-radius: 1em; display: inline-block; background: red; width: .7em; height: .7em; margin: .4em .2em;
}
.browser_window div i:after { position: absolute; left: 50%; content: ""; width: .2em; height: .15em; background: rgba(255, 255, 255, 0.6); top: .1em; margin-left: -0.1em; border-radius: 1em;
}
.browser_window div i.red { margin-left: .4em; background-color: #ff8f8f; background-image: -moz-radial-gradient(50% 79%, ellipse contain, #ff8f8f, #e60e0e 100%); background-image: -webkit-radial-gradient(50% 79%, ellipse contain, #ff8f8f, #e60e0e 100%); background-image: -o-radial-gradient(50% 79%, ellipse contain, #ff8f8f, #e60e0e 100%); background-image: -ms-radial-gradient(50% 79%, ellipse contain, #ff8f8f, #e60e0e 100%); background-image: radial-gradient(50% 79%, ellipse contain, #ff8f8f, #e60e0e 100%);
}
.browser_window div i.yellow { background-color: #ffd980; background-image: -moz-radial-gradient(50% 79%, ellipse contain, #ffd980, #ffc157 100%); background-image: -webkit-radial-gradient(50% 79%, ellipse contain, #ffd980, #ffc157 100%); background-image: -o-radial-gradient(50% 79%, ellipse contain, #ffd980, #ffc157 100%); background-image: -ms-radial-gradient(50% 79%, ellipse contain, #ffd980, #ffc157 100%); background-image: radial-gradient(50% 79%, ellipse contain, #ffd980, #ffc157 100%);
}
.browser_window div i.green { background-color: #80ff80; background-image: -moz-radial-gradient(50% 79%, ellipse contain, #80ff80, #2cb327 100%); background-image: -webkit-radial-gradient(50% 79%, ellipse contain, #80ff80, #2cb327 100%); background-image: -o-radial-gradient(50% 79%, ellipse contain, #80ff80, #2cb327 100%); background-image: -ms-radial-gradient(50% 79%, ellipse contain, #80ff80, #2cb327 100%); background-image: radial-gradient(50% 79%, ellipse contain, #80ff80, #2cb327 100%);
}
.browser_window span { text-shadow: 1px 1px 1px white; line-height: 1.5em; display: block; border-radius: 5px 5px 0 0; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 1px 1px white; background: #cdcdcd; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2NkY2RjZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhOWE5YTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #cdcdcd 1%, #a9a9a9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #cdcdcd), color-stop(100%, #a9a9a9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #cdcdcd 1%, #a9a9a9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cdcdcd 1%, #a9a9a9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #cdcdcd 1%, #a9a9a9 100%); /* IE10+ */ background: linear-gradient(to bottom, #cdcdcd 1%, #a9a9a9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cdcdcd', endColorstr='#a9a9a9', GradientType=0); /* IE6-8 */
}
.browser_window img { display: block;
}
Browser window - Script Codes
Browser window - Script Codes
Home Page Home
Developer Roman Diaz
Username romandiaz
Uploaded July 23, 2022
Rating 3
Size 4,200 Kb
Views 32,384
Do you need developer help for Browser window?

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!

Roman Diaz (romandiaz) Script Codes
Name
4 Element CSS Clock
The Creation of Adam - Pure CSS
Obligatory CSS3 UI Nav
Basic Usage
A Pen by Roman Diaz
Snazzy glass buttons
CSS full size background
A Pen by Roman Diaz
Pure CSS tooltips
The Creation of Adam - Pure CSS
Create amazing blog posts 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!