Color Conversion of #3980CD

Triadic Colors

Analogic Colors

Tetrad Colors

Accented Analogic Colors

Gradient color of #3980CD to white

#gradient
{
background: -webkit-linear-gradient(#3980CD, white); /* For Safari */
background: -o-linear-gradient(#3980CD, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#3980CD, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(#3980CD, white); /* Standard syntax (must be last) */
}
            

<div id="gradient">
Div content will be here</div>
            

Rounded border of #3980CD color

#roundedDiv
{
border:2px solid #3980CD;
padding:10px 40px; 
background:#fff;
border-radius:25px;
}
            

<div id="roundedDiv">
Div content will be here</div>
            

Box shadow of #3980CD color

#boxShadowDiv
{
height:100px;
background-color:#3980CD;
box-shadow: 10px 10px 5px #888888;
}
            

<div id="boxShadowDiv">
Div content will be here</div>
            

Text shadow of #3980CD color

#textShadow
{
text-shadow: 5px 5px 5px #3980CD;
}
            

<div id="textShadow">
Div content will be here</div>
            

Bind an animation to an element, background #3980CD

#animation
{
height:100px;
background:#3980CD;
animation:myfirst 10s;
-webkit-animation:myfirst 10s; /* Safari and Chrome */
}

@keyframes myfirst
{
from {background:#3980CD;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:#3980CD;}
to {background:yellow;}
}
            

<div id="animation">
Div content will be here</div>
            

Horizontal navigation bar for color #3980CD

#ulCSS
{
list-style-type:none;
margin:0;padding:0;overflow:hidden;
}
#ulCSS li{float:left;
}

#ulCSS a:link,#ulCSS a:visited
{
width:100px;display:block;padding:4px;
color:#FFFFFF;background-color:#3980CD;
font-weight:bold;text-align:center;
text-decoration:none;
text-transform:uppercase;
}
#ulCSS a:hover,#ulCSS a:active
{
background-color:#cd8639;
}
            

<ul id="ulCSS">
 <li><a href="#home">Home</a></li>
 <li><a href="#cssDesign">CSS Design</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
</ul>