CSS3 Window

Developer
Dhanush Badge
Size
2,429 Kb
Views
18,216
  1. CSS3 Window Previews
  2. CSS3 Window HTML Codes
  3. CSS3 Window CSS Codes
  4. CSS3 Window JS Codes

How do I make an css3 window?

Blind window using CSS3 only.. What is a css3 window? How do you make a css3 window? This script and codes were developed by Dhanush Badge on 12 November 2022, Saturday.

CSS3 Window Previews
IQ Test

CSS3 Window - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Window</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wallphoto"></div>
<div id="window"> <div class="holder"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div> <div class="fabric"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS3 Window - Script Codes CSS Codes

body { background-color: #c6192c; height: 100%; margin-top: 8%;
}
#wallphoto { width: 210px; height: 217px; position: absolute; right: 8%; top: 25%; background: url(http://simg.itasveer.com/common/images/indianart/bengal-school-of-painting.jpg); background-repeat: no-repeat; background-size: contain; box-sizing: border-box; border-top: 10px solid #000; border-right: 10px solid #000; border-bottom: 10px solid #111; border-left: 10px solid #111;
}
#window { background: url(http://p1.pichost.me/i/25/1482642.jpg); background-repeat: no-repeat; background-size: cover; width: 50%; height: 500px; margin:0 0 0 13%; box-sizing: border-box; border-top: 15px solid #290313; border-right: 15px solid #200110; border-bottom: 25px solid #290313; border-left: 15px solid #41282b; position: relative; overflow: hidden; z-index:0;
}
#window:before { position: absolute; content: ""; left: 25%; top: 0; width:0.3%; height:100%;
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ccc),color-stop(#666,0.5),to(#666));
background:-webkit-linear-gradient(0deg, #ccc, #666 50%, #666);
background: -moz-linear-gradient(0deg, #ccc, #666 50%, #666);
background: -o-linear-gradient(0deg, #ccc, #666 50%, #666);
background: linear-gradient(0deg, #ccc, #666 50%, #666); z-index:1;
}
#window:after { position: absolute; content: ""; left: 75%; top: 0; width:0.3%; height:100%; background:-webkit-gradient(linear,0 50%,100% 50%,from(#ccc),color-stop(#666,0.5),to(#666));
background:-webkit-linear-gradient(0deg, #ccc, #666 50%, #666);
background: -moz-linear-gradient(0deg, #ccc, #666 50%, #666);
background: -o-linear-gradient(0deg, #ccc, #666 50%, #666);
background: linear-gradient(0deg, #ccc, #666 50%, #666); z-index:1;
}
.holder { width:100%; height:10%; background:-webkit-gradient(linear,left top,left bottom,from(#000),color-stop(#111,0.2),color-stop(#333,0.7),color-stop(#111,0.6),to(#000));
background:-webkit-linear-gradient(#000, #111 20%, #333 70%, #111 60%, #000);
background: -moz-linear-gradient(#000, #111 20%, #333 70%, #111 60%, #000);
background: -o-linear-gradient(#000, #111 20%, #333 70%, #111 60%, #000);
background: linear-gradient(#000, #111 20%, #333 70%, #111 60%, #000); position: relative; z-index:2;
}
.holder:before { display: block; position: absolute; content:""; left: 0; top: 0; width: 50%; height: 100%;
}
.holder:after { display: block; position: absolute; content:""; right: 0; top: 0; width: 50%; height: 100%;
}
.fabric { width:100%; height:4%; background:-webkit-gradient(linear,left top,left bottom,from(#000),color-stop(#333,0.2),color-stop(#666,0.4),color-stop(#CCC,0.6),to(#EEE));
background:-webkit-linear-gradient(#000, #333 20%, #666 40%, #CCC 60%, #EEE);
background: -moz-linear-gradient(#000, #333 20%, #666 40%, #CCC 60%, #EEE);
background: -o-linear-gradient(#000, #333 20%, #666 40%, #CCC 60%, #EEE);
background: linear-gradient(#000, #333 20%, #666 40%, #CCC 60%, #EEE); position: relative; display: block; -webkit-transition:-webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; transition: transform 0.3s;
}
#window:hover .fabric { -webkit-transform:scale(1, 0.2); -moz-transform:scale(1, 0.2); -ms-transform:scale(1, 0.2); -o-transform:scale(1, 0.2); transform:scale(1, 0.2);
}

CSS3 Window - Script Codes JS Codes

/* Image credits to http://simg.itasveer.com and http://img.wallpaperstock.net*/
CSS3 Window - Script Codes
CSS3 Window - Script Codes
Home Page Home
Developer Dhanush Badge
Username dhanushbadge
Uploaded November 12, 2022
Rating 3
Size 2,429 Kb
Views 18,216
Do you need developer help for CSS3 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!

Dhanush Badge (dhanushbadge) Script Codes
Name
Html5 datalist
Show hide div on radio button
Html5 output
JQuery simple show hide div
Html5 keygen
Responsive flex layout
3D text-shadow
Jochaho Skeleton
JQuery animate function
HTML5 Table of Contents
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!