CSS3 Room

Developer
Nick Mkrtchyan
Size
2,718 Kb
Views
42,504
  1. CSS3 Room Previews
  2. CSS3 Room HTML Codes
  3. CSS3 Room CSS Codes
  4. CSS3 Room JS Codes

How do I make an css3 room?

What is a css3 room? How do you make a css3 room? This script and codes were developed by Nick Mkrtchyan on 10 November 2022, Thursday.

CSS3 Room Previews
IQ Test

CSS3 Room - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Room</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div class="container">	<div class="labels">	<div id="label1" class="label" href="#">Sofa	<span />	</div>	<div id="label2" class="label">TV	<span />	</div>	<div id="label3" class="label" href="#">Chest	<span />	</div>	<div id="label4" class="label" href="#">Workplace	<span />	</div>	<div id="label5" class="label" href="#">Entrance	<span />	</div>	<div id="label6" class="label" href="#">Safe Room	<span />	</div>	</div>	<div class="dialog">	<p></p>	<a class="close">X</a>	</div>	</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script src="js/index.js"></script>
</body>
</html>

CSS3 Room - Script Codes CSS Codes

body { background:url(http://pcvector.net/uploads/demo/scripts/layout_and_interface/isometric_interactive/images/scene.jpg) center no-repeat;
}
/* page */
/* demo */
.container { background: url("http://armsonick.zz.mu/Demos/ImageHost/images/1381607643scene1.png") no-repeat scroll center top transparent; color: #000000; height: 535px; margin: 20px auto; overflow: hidden; position: relative; width: 1030px;
}
.dialog { background-color: rgba(163, 154, 77, 0.9); color: #FFFFFF; display: none; height: 140px; left: 343px; line-height: 24px; padding: 100px 30px; position: absolute; text-align: center; top: 97px; width: 280px; z-index: 10; -moz-border-radius: 170px; -ms-border-radius: 170px; -o-border-radius: 170px; -webkit-border-radius: 170px; border-radius: 170px;
}
.dialog .close {	color: black; background-color: #65683b; cursor: pointer; font-size: 22px; font-weight: bold; height: 36px; line-height: 36px; position: absolute; right: 10px; top: 60px; width: 36px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px;
}
.labels p { display: none;
}
.labels div { background-color: rgba(203, 189, 58, 0.8); color: #FFFFFF; display: none; height: 50px; padding: 30px 0 0; position: absolute !important; text-align: center; text-decoration: none; width: 80px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
}
.labels > div { background-color: rgba(203, 189, 58, 0.8); -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; -webkit-transition: .3s; transition: .3s;
}
.labels div:hover { background-color: rgba(128, 128, 128, 0.8);
}
.labels div span { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid rgba(203, 189, 58, 0.8); bottom: -14px; height: 0; left: 30px; position: absolute; width: 0; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; -webkit-transition: .3s; transition: .3s;
}
.labels div:hover span { border-top: 15px solid rgba(128, 128, 128, 0.8);
}
#label1 { left: 720px; top: 215px;
}
#label2 { left: 495px; top: 290px;
}
#label3 { left: 450px; top: 115px;
}
#label4 { left: 270px; top: 170px;
}
#label5 { left: 570px; top: 65px;
}
#label6 { left: 275px; top: 30px;
}

CSS3 Room - Script Codes JS Codes

jQuery(function(){ // initialize of labels $('.labels div#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() { $('.labels div#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() { $('.labels div#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() { $('.labels div#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() { $('.labels div#label5').fadeIn(100).effect('bounce', { times:3 }, 300, function() { $('.labels div#label6').fadeIn(100).effect('bounce', { times:3 }, 300); }); }); }); }); }); // dialog close $('.dialog .close').click(function() { $(this).parent().fadeOut(500); return false; }); // display dialog on click by labels $('.labels div').click(function() { $('.dialog p').html( $(this).find('p').html() ).parent().fadeIn(500); return false; }); // close dialog on click outside $('.container').click(function() { $('.dialog').fadeOut(500); });
});
CSS3 Room - Script Codes
CSS3 Room - Script Codes
Home Page Home
Developer Nick Mkrtchyan
Username Sonick
Uploaded November 10, 2022
Rating 4
Size 2,718 Kb
Views 42,504
Do you need developer help for CSS3 Room?

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!

Nick Mkrtchyan (Sonick) Script Codes
Name
CSS3 Text Animation Effect 2
Canvas Background Effect
3D Menu
Canvas Starfield
Canvas Background Effect 2
Simple Text spining
Pure Css3 Menu
Mozilla DevDerby
CSS3 Text Animation Effect
Canvas Hover Effect
Create amazing marketing copy 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!