Client-Side/HTML, CSS2010. 6. 7. 16:04

CSS3 embossing, highlight, gradient effect

text embossing effect

<주요 속성 요약>
#test1 {
     color: #ccc; font-size: 55px; font-weight: bold; background-color: #b38f00;
     text-shadow: 0 1px 0 #fff, 0 -1px 0 #000; 
     border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
}

<속성 설명 >
- 첫번째 : X좌표     - 두번째 : Y좌표     - 세번째 : 블러     - 네번째 : 색상


box highlight effect


<주요 속성 요약>
#test2 {
     color: #ccc; font-size: 55px; font-weight: bold; background-color: #bbb;
     text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
     border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
   box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;
     -moz-box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;
     -webkit-box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;
}

<속성 설명>
- 첫번째 : X좌표     - 두번째 : Y좌표     - 세번째 : 블러     - 네번째 : 색상

linear gradient effect


<주요 속성 요약>
test3 {                    
     background: -moz-linear-gradient(90deg, #1a1a1a, #808080);
     background: -webkit-gradient(linear, 0 0, 0 100%, from(#808080), to(#1a1a1a));
}

<속성 설명 -moz-linear-gradient>
- 첫번째 : 각도. 0deg 왼쪽에서 시작, 90deg 아래에서 시작
- 두번째 : 시작 색     - 세번째 : 끝나는 색

<속성 설명 -webkit-gradient>
- 첫번째 : 타입 (radial or linear)
- 두번째 : 해당 타입이 적용될 영역의 %단위, 오른쪽 밑
- 세번째 : 해당 타입이 적용될 영역의 %단위, 왼쪽 위
- 네번째 : 시작 색     - 다섯째 : 끝나는 색


'Client-Side > HTML, CSS' 카테고리의 다른 글

HTML5 meta Tag  (0) 2010.06.07
[html]테이블의 올바른 사용법  (0) 2009.11.17
hover를 위한 li태그와 a태그.  (0) 2009.08.20
div(block element) vs span(inline element)  (0) 2009.03.24
name=contents readOnly  (0) 2006.11.27
Posted by 준피
Client-Side/HTML, CSS2010. 6. 7. 15:34

HTML5 meta Tag

1. 문서 설명 : 검색엔진에 좀 더 노출 시킬 수 있다.
<meta name="description" content="HTML5 Tutorial" />

1. 문서 키워드 : 검색엔진에 좀 더 노출 시킬 수 있다.
<meta name="keywords" content="HTML5,CSS3,JavaScript" />

1. 문서 작성자를 정의
<meta name="author" content="Jace Park" />

1. 문서 수정자와 날짜 정의
<meta name="revised" content="Jace Park, 07/06/2010" />

1. 문자인코딩 정의
<meta charset="cp949" />

1. 페이지 리다이렉트 (5초 뒤, 해당url로 이동한다.)
<meta http-equiv="refresh" content="5;url=http://www.abc.com/" />

1. 페이지 리플레시 (5초 간격)
<meta http-equiv="refresh" content="5" />

1. 문서 편집기 정의
<meta name="generator" content="Gvim 7.2">

1. 어플리케이션 이름 정의: 만일 어플리케이션 이름이 없다면 정의하지 안아도 좋다.
<meta name="APPLICATION-NAME" content="Long headed application">

1. 웹크롤러에 노출여부 결정 (noindex - 문서 긁어가지 않음, nofollow - 문서 내 링크 긁어가지 않음)
<meta name="robots" content="noindex,follow" />

'Client-Side > HTML, CSS' 카테고리의 다른 글

CSS3 embossing, highlight, gradient effect  (0) 2010.06.07
[html]테이블의 올바른 사용법  (0) 2009.11.17
hover를 위한 li태그와 a태그.  (0) 2009.08.20
div(block element) vs span(inline element)  (0) 2009.03.24
name=contents readOnly  (0) 2006.11.27
Posted by 준피
Client-Side/HTML, CSS2009. 11. 17. 19:21

[html]테이블의 올바른 사용법

http://hyeonseok.com/soojung/webstandards/2009/11/12/554.html

 

신현석님의 블로그에 자세한 설명이 나와있습니다.


'Client-Side > HTML, CSS' 카테고리의 다른 글

CSS3 embossing, highlight, gradient effect  (0) 2010.06.07
HTML5 meta Tag  (0) 2010.06.07
hover를 위한 li태그와 a태그.  (0) 2009.08.20
div(block element) vs span(inline element)  (0) 2009.03.24
name=contents readOnly  (0) 2006.11.27
Posted by 준피
Client-Side/HTML, CSS2009. 8. 20. 14:34

hover를 위한 li태그와 a태그.

li태그 안에 a태그를 이용해서 html 코딩을 해야지만,
IE6등 하위버전 웹브라우저에서 hover기능을 활용할 수 있다.

여기서 id 값을 li태그에 주느냐, a태그에 주느냐에 따라 크로스 브라우징 시에
문제가 상당히 달라질 수 있다.

a태그에 주는 것이 IE에서나 FF에서나 용이하다고 생각한다.

<li><a href="#" id="id" class="class" onClick="return false;"> 내용</a></li>

'Client-Side > HTML, CSS' 카테고리의 다른 글

CSS3 embossing, highlight, gradient effect  (0) 2010.06.07
HTML5 meta Tag  (0) 2010.06.07
[html]테이블의 올바른 사용법  (0) 2009.11.17
div(block element) vs span(inline element)  (0) 2009.03.24
name=contents readOnly  (0) 2006.11.27
Posted by 준피
Client-Side/HTML, CSS2009. 3. 24. 20:44

div(block element) vs span(inline element)

div 안에는 span 들어갈 수 있다.
span 안에는 div 들어가면 표준에 위배된다.

=============================================================================

* Strict HTML 4.01로 가기 위한 지침서
1. 모든 웹페이지는 DOCTYPE로 시작, <html>~</html>로 끝나야 함
2. <head><body>를 반드시 사용해야 함
3. <title>을 반드시 사용해야 함
4. <body>에는 블록 엘리먼트만 넣어야 함(입력했을 때 자동으로 행이 분리되는 태그, h1, h2, ..., p, blockquote 등)
5. 블록 엘리먼트들은 인라인 엘리먼트 밖에 둬야 함
6. 블록 엘리먼트들은 <p> 엘리먼트 밖에 둬야 함(<p> 문단은 텍스트를 위한 것)
7. 리스트는 리스트 항목들만을 위한 것임(ul, ol안에는 li만 올 수 있음)
8. 리스트 항목에는 원하는 것을 무엇이든지 넣을 수 있음
9. blockquote에는 오직 블록 엘리먼트만이 올 수 있음(<p>,</p>엘리먼트 등)
10. 다른 인라인 엘리먼트 안으로 인라인 엘리먼트를 중첩시킬 때는 주의할 것!

'Client-Side > HTML, CSS' 카테고리의 다른 글

CSS3 embossing, highlight, gradient effect  (0) 2010.06.07
HTML5 meta Tag  (0) 2010.06.07
[html]테이블의 올바른 사용법  (0) 2009.11.17
hover를 위한 li태그와 a태그.  (0) 2009.08.20
name=contents readOnly  (0) 2006.11.27
Posted by 준피

티스토리툴바