2차메뉴 그림자(음영) 넣기 도와주세요

2차메뉴 그림자(음영) 넣기 도와주세요

QA

2차메뉴 그림자(음영) 넣기 도와주세요

답변 1

본문

g5 베이직입니다.

전체바탕과 2차메뉴 바탕이 모두 흰색이라 보기에 안좋아서요

이렇게 2차메뉴 박스에 그림자 진하게 생기게 하고싶은데 이것저것 건드려도 모르겠어요.

부탁드립니다.

1938343432_1549937300.2118.jpg

 

 

 

/* 메인메뉴 */
#gnb{position:relative;background:#253dbe}
#gnb h2{position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb .gnb_wrap{margin:0 auto;position:relative}
#gnb #gnb_1dul {font-size:1.083em;padding: 0;background:#253dbe;zoom:1}
#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb .gnb_1dli{float:left;line-height:50px;padding:0 15px;position:relative;}
#gnb .gnb_1dli:hover{background:#1a30a7;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;}

 

.gnb_1dli .bg{display:inline-block;width:10px;height:10px;overflow:hidden;background:url(../img/gnb_bg2.gif) no-repeat 50% 50%;text-indent:-999px}
.gnb_1da {display:inline-block;font-weight:bold;color:#fff;text-decoration:none;}
.gnb_2dli{border-top:1px solid #fff}
.gnb_2dli:first-child{border:0}
.gnb_2dul {display:none;position:absolute;top:50px;min-width:140px;background:#fff;padding: 0;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
-moz-box-shadow:  0 1px 5px rgba(0,0,0,0.1);
box-shadow: 0 1px 5px rgba(0,0,0,0.1);}
.gnb_2da {display:block;padding:0 10px;line-height:30px;color:#000;text-align:left;text-decoration:none}
a.gnb_2da:hover{background:#daebf6;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;


transition: all 0.3s ease-out;}

.gnb_1dli_air .gnb_2da {}
.gnb_1dli_on .gnb_2da {}
.gnb_2da:focus, .gnb_2da:hover {color:#000}
.gnb_1dli_over .gnb_2dul {display:block;left:0}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0}
.gnb_wrap .gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em;color:#fff}
.gnb_wrap .gnb_empty a{color:#fff;text-decoration:underline}
.gnb_wrap .gnb_al_ul .gnb_empty, .gnb_wrap .gnb_al_ul .gnb_empty a{color:#555}

 

#gnb .gnb_menu_btn{background:#4158d1;color:#fff;width:50px;height:50px;border:0;vertical-align:top;font-size:18px}
#gnb .gnb_close_btn{background:#4158d1;color:#fff;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:-50px;left:0}
#gnb .gnb_mnal{padding:0}

 

#gnb_all{display:none;position:absolute;width:100%;z-index:99;}
#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_all .gnb_al_ul{background:#fff;border:1px solid #4158d1;padding:20px;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow:  0 2px 5px rgba(0,0,0,0.2);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
#gnb_all .gnb_al_li{background:#fff;float:left;min-width:20%;padding:5px }
#gnb_all .gnb_al_li .gnb_al_a{font-size:1.083em;padding:10px;display:block;position:relative;margin-bottom:10px;background: #eff1f9;border-bottom: 1px solid #dee2f1;font-weight: bold;color:#384056}
#gnb_all .gnb_al_li li {padding-left:10px;line-height:2em}
#gnb_all .gnb_al_li li i{color:#9ca6cc}
#gnb_all .gnb_al_li li a{color:#555}

이 질문에 댓글 쓰기 :

답변 1

.gnb_2dul{

.....

box-shadow: 0 1px 5px rgba(0,0,0,0.1);

}

 

default.css 파일에서 위 부분을 찾으세요...

붉은 부분을 수정하면 됩니다.

0 1px 는 좌우, 위 아래 거리이고

5px는 그림자의 진하기입니다.

rgba(0,0,0,0.1) 이것은 칼라와 끝자리 투영도입니다. 현재 투영도가 0.1로 되어 있어서 거의 안보일 겁니다.

이것을 1에 가깝게 수정하면 확실한 효과를 확인할 수 있습니다.

1로 해도 되고 0.8 이렇게 해보세요.

색은 현재 검은색(0,0,0) 검은색입니다. 앞부분부터 rgb입니다.

적절하게 숫자를 바꿔보세요.

 

css강좌

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 200
© SIRSOFT
현재 페이지 제일 처음으로