Scribd
Upload
59 views

Css Dragonbound

The document contains CSS code that defines hover effects for various elements on a web page. On hover, elements like buttons and channels will get a box shadow, increase in scale, or rotate. Some elements also change opacity or get an inset shadow on hover. The CSS applies transitions for smooth hover effects over 1 second using a cubic-bezier timing function.

Uploaded by

Brͭaͧhayan Christiam Ramirez Burnͯeͩo
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
59 views

Css Dragonbound

The document contains CSS code that defines hover effects for various elements on a web page. On hover, elements like buttons and channels will get a box shadow, increase in scale, or rotate. Some elements also change opacity or get an inset shadow on hover. The CSS applies transitions for smooth hover effects over 1 second using a cubic-bezier timing function.

Uploaded by

Brͭaͧhayan Christiam Ramirez Burnͯeͩo
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

@namespace url(http://www.w3.

org/1999/xhtml);
#BrokerWindow {
border: rgb(40, 32, 61) solid 2px;
border-radius: 5px;
background: rgba(91, 74, 106, 0.35);
overflow: hidden;
border-radius: 5px;
transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
}
#BrokerWindow:hover
{
box-shadow: 0px 0px 20px 5px #FFFFFF;
}
.opacity_button:hover {
opacity: 1;}

#buttonCreateRoom:hover, #buttonJoin:hover, #buttonMyInfo:hover, #buttonShop:hov


er, #buttonCharge2:hover, #facebook_post:hover, #event_button:hover, #buttonOpti
ons:hover, #buttonChannels:hover{
-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
-ms-transform: scale(1.05);
}
.room:hover {
opacity: 1;
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
-ms-transform: scale(1.05);
}

#filter_normal, #filter_boss, #filter_same, #filter_score{


-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#filter_normal:hover, #filter_boss:hover, #filter_same:hover, #filter_score:hove
r {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);

#filter_guild:hover, #filter_friends:hover{
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(180deg);
transform-style: preserve-3d;
}

#buttonQuickJoin:hover{
box-shadow: inset 0 6px 0 rgba(0,0,0,0.3);
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 10%;
}

#buttonRoomsListUp, #buttonRoomsListDown{
height: 39px;
background-position: -223px -359px;
}
#buttonRoomsListUp:hover, #buttonRoomsListDown:hover{
box-shadow: inset 0 7px 7px rgba(0,0,0,0.3);
}

#lobby_channel {
background: rgba(52, 40, 57, 0.71);
color: #fff;}
#lobby_channel:hover {
-webkit-box-shadow: 0px 0px 15px 1px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 1px rgba(255, 255, 255, .75);
}
.scrollbar:hover {
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}

.dnd_btn {
background: rgba(107, 78, 120, 1);
color: #FFF;

}
#friendsList:hover {
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
#channel {
left: 20px;
width: 534px;
}
#channel:hover {
left: 20px;
width: 534px;
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
#dialogCreateMessage {
color: #fff;
}
.roomPlayerInfo:hover {
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
#BrokerChannel0:hover, #BrokerChannel2:hover, #BrokerChannel3:
hover {
top: 37px;
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .
75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}

#BrokerChannel3:hover, #BrokerChannel4:hover, #BrokerChannel4:hover {


top: 124px;
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}

#BrokerChannel6:hover, #BrokerChannel7:hover, #BrokerChannel8:hover {


top: 211px;
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .
75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
#BrokerChannel9:hover, #BrokerChannel10:hover, #BrokerChanne
l11:hover {

top: 298px;
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .
75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
#BrokerChannel12:hover, #BrokerChannel13:hover, #BrokerChannel14:hover {
top: 385px;
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .
75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}

#BrokerLogout{
overflow: hidden;
border-radius: 5px;
transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
}
#BrokerLogout:hover
{
box-shadow: 0px 0px 20px 5px #FFFFFF;
}

#filter_all:hover, #filter_waiting:hover {
top: 16px;
}

You might also like