위의 이미지에서 트리메뉴아래 위젯란에 마우스를 오버시키면 푸른색둥근 테두리가 보입니다.
스케치북레이아웃에 적용된 기능인데 익스8이하에서는 보이질 않고 크롬이나 파이어폭스에서는 보입니다.
적용방법은 일단 적용할 레이아웃의 Sub부분에 추가할 위젯영역을 만들어야겠죠.
<div style="dispaly : inline-block;*dispaly:inline;*zoom:1;" id="aside">
<div class="section widget">{$layout_info->widget}</div>
<div class="section banner">{$layout_info->banner}</div>
</div>
위와 같이 위젯영역과 베너영역 2개를 만들었습니다. 그럼 css처리로 푸른색둥근 테두리처리를 해야합니다.
#aside .section{ position:relative; float:left; width:190px; margin-bottom:5px; padding:5px;border-radius:10px;transition:all .3s;-moz-transition:all .3s;-webkit-transition:all .3s}
#aside .section:hover{ z-index:10; background:transparent; -webkit-box-shadow:0 0 10px #39F;box-shadow:0 0 20px #6fa1d9}
#aside widget { padding:2px; }
#aside banner { padding:2px; }
위와 같이 css를 적용하면 됩니다.
참고로 굵은색 부분이 바탕색 그림자색 조절입니다.
댓글 유도글 남기기
메뉴바에 토글메뉴 추가하기
