Transition og transform
HejJeg er ved at lave en lille chat der skal ligge nede i hjørnet.
Jeg har i den forbindelse 2 spørgsmål:
1: Vil I på nogen måde optimerer/ændre koden (er noget forkert/misforstået)?
2: Jeg vil gerne ved hjælp af transition/transform (CSS3) have den store chatbox til enten at komme op flydende i animation eller fade ind - men kan ikke få det til at virke i min kode
Herunder er min kode (ps er klar over der mangler ting ved html som doctype, titel mv):
------------------------------------------
Index.html
------------------------------------------
<html>
<head></head>
<body>
<div id="div1">Dette er den normale side eller rettere en illustration for det.</div>
<div class="chat" id="chat" onclick="this.className = 'chat2'; document.getElementById('stor_chat').className = 'stor_chat2'">Online support chat - Online</div>
<div class="stor_chat" id="stor_chat">Stor chat<br /><br />
<span style="cursor:pointer; color:#00F;" onclick="document.getElementById('chat').className = 'chat'; document.getElementById('stor_chat').className = 'stor_chat'">Gør lille</span>
</div>
</body>
</html>
------------------------------------------
css.css
------------------------------------------
body{
background-color:#06F;
overflow-y: scroll;
}
#div1{
background-color: #CCC;
margin: 0 auto;
width: 960px;
min-height: 700px;
}
.chat{
background-color:#FFF;
position: fixed;
bottom: 0px;
right: 10px;
width: 200px;
height: 28px;
z-index: 99;
line-height:28px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
border-top-color:#000;
border-top-style:solid;
border-top-width:2px;
border-left-color:#000;
border-left-style:solid;
border-left-width:2px;
border-right-color:#000;
border-right-style:solid;
border-right-width:2px;
cursor: pointer;
border-radius: 8px 8px 0px 0px;
}
.chat2{
display:none;
}
.stor_chat{
display:none;
height:1px;
}
.stor_chat2{
background-color:#FFF;
position: fixed;
bottom: 0px;
right: 10px;
width: 300px;
height: 300px;
z-index: 98;
padding-right: 8px;
padding-left: 8px;
padding-top: 8px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border-top-color:#000;
border-top-style:solid;
border-top-width:2px;
border-left-color:#000;
border-left-style:solid;
border-left-width:2px;
border-right-color:#000;
border-right-style:solid;
border-right-width:2px;
border-radius: 8px 8px 0px 0px;
}
