분류 css

CSS Blur Menu 만들기

컨텐츠 정보

  • 조회 1,520 (작성일 )

본문

CSS3 Transition을 이용하여 Blur menu를 만들 수 있습니다..

 

CSS:

body{

background:#999;

}

.container{

background-color:blue;

position:relative;

}

h1{

margin:0px;

padding:20px;

font-size:42px;

color:#fff;

text-align:left;

font-weight:400;

    text-align:left;

}

h1 span{

font-size:22px;

color:#ddd;

padding-top:10px;

}

a{

color: #fff;

text-decoration: none;

}

.content{

position:relative;

    margin: 0 auto;

}

.menu{

    padding: 0px;

    margin: 0 0 10px 0;

    position: relative;

}

.menu li{

    font-size: 20px;

padding:10px 20px;

    display: inline;

float:left;

}

.menu li a{

color: transparent;

text-transform: uppercase;

text-shadow: 0px 0px 5px #fff;

letter-spacing: 1px;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.menu:hover li a{

text-shadow: 0px 0px 5px #0d1a3a;

}

.menu li a:hover{

color: #fff;

text-shadow: 0px 0px 1px #fff;

padding-left: 10px;

 

미리보기:

http://365ok.co.kr/dn/css/blurmenu.html 

css