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

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

QA

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

본문

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강좌

 

답변을 작성하시기 전에 로그인 해주세요.
전체 466
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT