Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- CSS Projeto Automacao Residencial
- FILIPEFLOP Componentes Eletronicos
- */
- root {
- display: block;
- }
- body {
- margin: 0;
- padding: 0;
- }
- #wrapper {
- padding-top: 40px;
- position: relative;
- width: 530px;
- height: 600px;
- margin-right: auto;
- margin-top: 0;
- margin-left: auto;
- font-size: 30px;
- color: black;
- text-align: center;
- font-family: arial;
- }
- div.rele1_ligado {
- position: absolute;
- right: -110px;
- top: 220px;
- width: 300px;
- height: 206px;
- border: none;
- margin:auto;
- background: url(lampada_ligada.png) no-repeat left top;
- }
- div.rele1_desligado {
- position: absolute;
- right: -110px;
- top: 220px;
- width: 300px;
- height: 206px;
- border: none;
- background: url(lampada_desligada.png) no-repeat left top;
- }
- div.rele2_ligado {
- position: absolute;
- right: -110px;
- top: 387px;
- width: 300px;
- height: 206px;
- border: none;
- background: url(lampada_ligada.png) no-repeat left top;
- }
- div.rele2_desligado {
- position: absolute;
- right: -110px;
- top: 387px;
- width: 300px;
- height: 206px;
- border: none;
- background: url(lampada_desligada.png) no-repeat left top;
- }
- div.rele3_ligado {
- position: absolute;
- right: -110px;
- top: 557px;
- width: 300px;
- height: 206px;
- border: none;
- background: url(lampada_ligada.png) no-repeat left top;
- }
- div.rele3_desligado {
- position: absolute;
- right: -110px;
- top: 557px;
- width: 300px;
- height: 206px;
- border: none;
- background: url(lampada_desligada.png) no-repeat left top;
- }
- div.rele4_ligado {
- position: absolute;
- right: -110px;
- top: 657px;
- width: 300px;
- height: 206px;
- border: none;
- background: url(lampada_ligada.png) no-repeat left top;
- }
- div.rele4_desligado {
- position: absolute;
- right: -110px;
- top: 657px;
- width: 300px;
- height: 206px;
- border: none;
- background: url(lampada_desligada.png) no-repeat left top;
- }
- div.rele5_ligado {
- position: absolute;
- right: -110px;
- top: 757px;
- width: 300px;
- height: 206px;
- border: none;
- background: url(lampada_ligada.png) no-repeat left top;
- }
- div.rele5_desligado {
- position: absolute;
- right: -110px;
- top: 757px;
- width: 300px;
- height: 206px;
- border: none;
- background: url(lampada_desligada.png) no-repeat left top;
- }
- #div1 {
- position: absolute;
- right: 85px;
- top: 195px;
- border-radius: 25px;
- border: 2px solid #000000;
- width: 350px;
- height: 150px;
- }
- #div2 {
- position: absolute;
- right: 85px;
- top: 355px;
- border-radius: 25px;
- border: 2px solid #000000;
- width: 350px;
- height: 150px;
- }
- #div3 {
- position: absolute;
- right: 85px;
- top: 515px;
- border-radius: 25px;
- border: 2px solid #000000;
- width: 350px;
- height: 150px;
- }
- #div4 {
- position: absolute;
- right: 85px;
- top: 655px;
- border-radius: 25px;
- border: 2px solid #000000;
- width: 350px;
- height: 150px;
- }
- #div5 {
- position: absolute;
- right: 85px;
- top: 815px;
- border-radius: 25px;
- border: 2px solid #000000;
- width: 350px;
- height: 150px;
- }
- #botao{
- position: absolute;
- right: 230px;
- top: 250px;
- width: 200px;
- height: 256px;
- }
- .botao {
- -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
- -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
- box-shadow:inset 0px 0px 0px 0px #ffffff;
- background:-webkit-gradient( linear, left top, left bottom, color-stop(0.1, #16ADFF), color-stop(1, #26A8FF) );
- background:-moz-linear-gradient( center top, #16ADFF 5%, #26A8FF 100% );
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#16ADFF', endColorstr='#26A8FF');
- background-color:#ededed;
- -moz-border-radius:6px;
- -webkit-border-radius:6px;
- border-radius:6px;
- border:1px solid #dcdcdc;
- display:inline-block;
- color:#ffffff;
- font-family:arial;
- font-size:28px;
- font-weight:bold;
- padding:10px 40px;
- text-decoration:none;
- text-shadow:0px 0px 0px #ffffff;
- width: 100px;
- text-align: center;
- }
- }.botao:active {
- position:relative;
- top:1px;
- }
- #botao_2{
- position: absolute;
- right: 230px;
- top: 417px;
- width: 200px;
- height: 256px;
- }
- .botao_2 {
- -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
- -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
- box-shadow:inset 0px 0px 0px 0px #ffffff;
- background:-webkit-gradient( linear, left top, left bottom, color-stop(0.1, #16ADFF), color-stop(1, #26A8FF) );
- background:-moz-linear-gradient( center top, #16ADFF 5%, #26A8FF 100% );
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#16ADFF', endColorstr='#26A8FF');
- background-color:#ededed;
- -moz-border-radius:6px;
- -webkit-border-radius:6px;
- border-radius:6px;
- border:1px solid #dcdcdc;
- display:inline-block;
- color:#ffffff;
- font-family:arial;
- font-size:28px;
- font-weight:bold;
- padding:10px 40px;
- text-decoration:none;
- text-shadow:0px 0px 0px #ffffff;
- width: 100px;
- text-align: center;
- }
- }.botao_2:active {
- position:relative;
- top:1px;
- }
- #botao_3{
- position: absolute;
- right: 230px;
- top: 545px;
- width: 200px;
- height: 256px;
- }
- .botao_3 {
- -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
- -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
- box-shadow:inset 0px 0px 0px 0px #ffffff;
- background:-webkit-gradient( linear, left top, left bottom, color-stop(0.1, #16ADFF), color-stop(1, #26A8FF) );
- background:-moz-linear-gradient( center top, #16ADFF 5%, #26A8FF 100% );
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#16ADFF', endColorstr='#26A8FF');
- background-color:#ededed;
- -moz-border-radius:6px;
- -webkit-border-radius:6px;
- border-radius:6px;
- border:1px solid #dcdcdc;
- display:inline-block;
- color:#ffffff;
- font-family:arial;
- font-size:28px;
- font-weight:bold;
- padding:10px 40px;
- text-decoration:none;
- text-shadow:0px 0px 0px #ffffff;
- width: 100px;
- text-align: center;
- }
- }.botao_3:active {
- position:relative;
- top:1px;
- }
- #botao_4{
- position: absolute;
- right: 230px;
- top: 645px;
- width: 200px;
- height: 256px;
- }
- .botao_4 {
- -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
- -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
- box-shadow:inset 0px 0px 0px 0px #ffffff;
- background:-webkit-gradient( linear, left top, left bottom, color-stop(0.1, #16ADFF), color-stop(1, #26A8FF) );
- background:-moz-linear-gradient( center top, #16ADFF 5%, #26A8FF 100% );
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#16ADFF', endColorstr='#26A8FF');
- background-color:#ededed;
- -moz-border-radius:6px;
- -webkit-border-radius:6px;
- border-radius:6px;
- border:1px solid #dcdcdc;
- display:inline-block;
- color:#ffffff;
- font-family:arial;
- font-size:28px;
- font-weight:bold;
- padding:10px 40px;
- text-decoration:none;
- text-shadow:0px 0px 0px #ffffff;
- width: 100px;
- text-align: center;
- }
- }.botao_4:active {
- position:relative;
- top:5px;
- }
- #botao_5{
- position: absolute;
- right: 230px;
- top: 745px;
- width: 200px;
- height: 256px;
- }
- .botao_5 {
- -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
- -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
- box-shadow:inset 0px 0px 0px 0px #ffffff;
- background:-webkit-gradient( linear, left top, left bottom, color-stop(0.1, #16ADFF), color-stop(1, #26A8FF) );
- background:-moz-linear-gradient( center top, #16ADFF 5%, #26A8FF 100% );
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#16ADFF', endColorstr='#26A8FF');
- background-color:#ededed;
- -moz-border-radius:6px;
- -webkit-border-radius:6px;
- border-radius:6px;
- border:1px solid #dcdcdc;
- display:inline-block;
- color:#ffffff;
- font-family:arial;
- font-size:28px;
- font-weight:bold;
- padding:10px 40px;
- text-decoration:none;
- text-shadow:0px 0px 0px #ffffff;
- width: 100px;
- text-align: center;
- }
- }.botao_5:active {
- position:relative;
- top:15px;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement