Overlay with slide out box
다운로드
html에 두 개의 요소가 필요하다. 오버레이용 div와 상자용 div이다. 상자에는 닫기 아이콘과 일부 텍스트에 대한 링크 요소가 포함된다.
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box" id="box">
<a class="boxclose" id="boxclose"></a>
<h1>Important message</h1>
<p>
Here comes a very important message for your user.
Turn this window off by clicking the cross.
</p>
</div>
나중에 javascript에서 두가지 요소를 참조 할 것이기 때문에 아이디를 부여해야 한다.
오버레이는 처음에 표시되지 않기 위해 display:none으로 스타일 태그를 준다.
CSS
.overlay{
background:transparent url(images/overlay.png) repeat top left;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
}
브라우저 창이 아무리 넓어도, 항상 모든 페이지에 걸쳐 있게 할 것이다. position:fixed를 사용하면 스크롤 후 페이지 어디에 있든 항상 '0'으로 유지된다. 이 요소를 다른 요소들 위에 놓으려 'z-index' 지수를 높였다.
다음은 상자에 CSS 속성
.box{
position:fixed;
top:-200px;
left:30%;
right:30%;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
}
상자가 창에서 보이지 않게 하기 위해 음수 값을 주었다. 상자가 위쪽에서 미끄러지듯 보이기를 원하기 때문에 'display:none'을 하였고 위치 지정 작업을 해야한다. 페이지의 중앙에 요소를 배치 하기 위해 오른쪽에서 왼쪽과 동일한 거리를 지정하기만 하면된다. 백분율을 사용하면 모든 화면 크기에 맞게 요소를 적절하게 조정할 수 있다.
CSS3 속성 상자에 둥근 테두리와 그림자를 추가한다.
닫기 버튼 스타일
a.boxclose{
float:right;
width:26px;
height:26px;
background:transparent url(images/cancel.png) repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
'h1' 요소에도 스타일을 준다.
.box h1{
border-bottom: 1px dashed #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#FFEFEF;
color:#EF7777;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
JavaScript
다음 코드는 html 끝에 추가한다.
$(function() {
$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'top':'160px'},500);
});
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-200px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
Quotation : 메리 루 (웹디자이너 겸 개발자)
[세상살이] - 크롬 확장 프로그램으로 마우스 우클릭 해제
크롬 확장 프로그램으로 마우스 우클릭 해제
크롬 확장 프로그램으로 마우스 우클릭 해제 크롬으로 웹서핑을 하다보면 글이나 이미지를 저장하여 필요한 곳에 사용해야 할 일들이 자주 있는데 복사한 내용을 그대로 업로드 하는 사람들이
smarti.tistory.com
[코딩공부] - CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드
CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드
CSS와 jQuery로 풍경 애니메이션 만들기 예제보기 다운로드 html에 배경 이미지로 풍경을 구성할 div를 만든다. 하늘, 구름, 태양, 달, 별 그리고 별똥별로 이루어 질 것이다. 석양의 색변화는 노란색
smarti.tistory.com
유튜브 자막 다운로드 하는 방법
유튜브 자막 다운로드 하는 법 유튜브 동영상의 한글자막이 있는 영상의 자막을 다운로드 할 수 있도록 도와주는 사이트 첫번째 : 자막을 받고 싶은 유튜브 영상 주소를 복사한다. 두번째 : 다음
smarti.tistory.com
플랩풋볼, 소셜 축구 풋살 용병 모임
플랩풋볼 '아침부터 심야, 평일부터 주말까지 내가 하고 싶을 때 집, 회사, 학교 등 나와 가까운 구장에서 내가 하고 싶은 곳에서 여성 매치, 혼성 매치, 중급 매치, 초급 매치 그리고 레슨까지 내
smarti.tistory.com
CSS 박스모델, 마진, 아웃라인
CSS 박스모델 (box model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다. 박스 모델은 아래와 같이 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그..
smarti.tistory.com
'코딩공부' 카테고리의 다른 글
전체화면 CSS 기반 슬라이더 만드는 방법 (0) | 2020.11.14 |
---|---|
CSS jQuery를 이용한 펼침 메뉴 예제 다운로드 (0) | 2020.11.03 |
CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드 (0) | 2020.11.03 |
CSS fixedNavigation2 예제 다운로드 (0) | 2020.11.03 |
CSS fixedNavigation1 예제 다운로드 (0) | 2020.11.02 |
CSS3 Flexible box, Media query (0) | 2020.10.29 |
CSS3 Button, User-interface, Multi-column (0) | 2020.10.29 |
CSS3 Transition, Animation (0) | 2020.10.28 |
댓글