All Articles Dreamweaver
드림위버에서 CSS3와 함께 멋진 텍스트 만들기
David Smith on Wed, February 29th 0 comments
Want to create great looking text in Dreamweaver, but feeling stifled by the CSS styles panel? David Smith comes to the rescue with CSS style tips which will set free your inner designer!

당신은 드림위버 스타일의 웹페이지에 CSS 스타일 패널을 사용하고있다면 당신은 디자인에 대해서는 함께 따라 배치 제한 사항을 알고 있어야합니다. 솔리드 색상, 표준 글꼴 등 모두 정말 흥미로운 도전하지만, CSS의 기능 블록 모양.

그래서이 기사에 임에서 당신에게 정말 좋은 디자인을 만듭니다 드림위버에서 스타일에 추가할 몇 가지 CSS를 보여 주마.

이 굉장한 스타일 귀하 만드는 대해 포함될 사업부 태그를 생성하여 시작하자.


1 단계 - AP 통신 사업부를 추가

삽입 패널을 열고 레이아웃으로 설정 빈 HTML 문서로 시작. 레이아웃에서 옵션은 그리기 AP 사업부를 선택합니다.

Div drawn

그린 사업부


(그냥 자동으로 위치와 크기 매개 변수를 포함하는 적용 # ID가 스타일 사업부 태그입니다) AP 통신 사업부를 돌리는 도구를 사용하십시오. 높이와 AP 통신 사업부 크기로 속성 패널을 사용 400px 및 폭 : 400px.


2 단계 - AP 통신 사업부의 이름을 지정

AP 요소 패널을 다시 이름 MyStyle에 APDiv1을 엽니다. CSS 스타일 패널을 열고 당신은 아이디 스타일 MyStyle은 다시 이름도 AP 통신 사업부를 다시 명명한다는 SE됩니다. 이렇게하면 수정됩니다 스타일입니다.


3 단계 - CSS 코드 찾기

만든 이미지와 코드 youve를 모두 볼 수 있도록 분할보기로 전환합니다. 섹션까지 스크롤하면 # MyStyle {}라고 핑크색을 강조 코드 섹션을 볼 수 있습니다. 이것은 CSS를하며 만들 생각해야한다는 사실에 대한 모든 설정은 두 {}의 사이에 앉을 것이다.


4 단계 - 일부 콘텐츠 추가

디자인보기에서 그려진 AP 사업부를 클릭하면 사업부에 텍스트의 단락에 대한 시간 타이핑, 복사 및 붙여넣기를 저장하려면 너무 커서는 붙여넣으 적극적이고 커맨드-V를 압박하게됩니다.

rounded corners

둥근 모서리


팁 : 다시 정확히 너비와 높이의 절반 (그래서이 경우 200px) 및 미리보기로 반경 크기를 늘리십시오 .... 이봐, 당신은 완벽한 동그라미를 얻을!


6 단계 - 그라데이션 배경

그라디언트 배경을 추가하는 것은 정말 멋진 디자인 효과가있다 그러나 당신은 항상 모든 브라우저의 모든 버전을 지원하는 것을 명심한다. 그래서에만 적 이미지를 제고하기 위하여 그것을 사용합니다. 항상 염두에두고 여러 브라우저와 함께 물건을 설계하고 고체는 물론 가능 기입합니다.

gradient background

그라데이션 배경


다음 코드는이 그라데이션 배경을 만들 것입니다 :

배경 컬러 : # 666666;

배경 이미지 :-moz-선형-그라데이션 (상단, # 666,666, # 333,333 40.0 %);

배경 이미지 :-웹킷-선형-그라데이션 (상단, # 666,666, # 333,333 40.0 %);

배경 - 이미지 :-O-선형-그라데이션 (상단, # 666,666, # 333,333 40.0 %);

배경 이미지 :-MS-선형-그라데이션 (상단, # 666,666, # 333,333 40.0 %);

배경 - 이미지 : 선형-그라데이션 (상단, # 666,666, # 333,333 40.0 %);


효과를보고, 할 수있다면 몇 가지 브라우저에서 테스트합니다. 마지막으로 텍스트 펀치를 추가할 수 있습니다.


7 단계 - 텍스트 강화

필자는 그라디언트에 대한 더 눈에 띄는 만들기 위해, 텍스트에 흰색 추가했습니다. 또한 필자 텍스트에 드롭 섀도우를 추가했습니다. 그라데이션 드롭 섀도우 단지 웹 브라우저의 최근 버전에서 작동과 마찬가지로 항상 의지 없다.

drop shadow

그림자를 떨어뜨


이 코드는 컬러와 드롭 섀도우를 추가합니다 :

색상 : # FFFFFF;

텍스트 그림자 : 2px 3px 2px # 000000;


8 단계 - 더 나은 글꼴?

마지막으로 나는 텍스트 주위에 공간을 만들어, 더 나은 글꼴 및 일부 패딩을 추가했습니다.

Better text

더 나은 텍스트


이러한 라인을 추가함으로써

글꼴 두께 : 정상;

텍스트 정렬 : 왼쪽;

글꼴 - 가족 : 조지아, 리프;

글꼴 크기 : 18.0px;

라인 - 높이 : 140 %;

여백 : 10px;


여기 내가 그걸 달성하기 위해 추가 코드입니다. 다시 몇 가지 코드를 염두에 귀하의 페이지를 디자인하고있는 것으로 일부 브라우저와 베어링이 작동하지 않습니다 어디서 볼 수 브라우저 호환성을위한 그것의 가치를 확인하지 않습니다.

브라우저가 CSS3와 HTML 5는 너무도 그것을 사용하는 겁내지 않는다 지원하는 모든 시간을 업데이 트되는 바로 인식합니다. 더 이상 당신은 또한 또한 IOS와 안드로이드에 완벽하게 잘 작동과 같은 사파리, 크롬과 파이어 폭스 등이 암호문과을 목표로 할 수 있으니 전통적인 웹 브라우저 아니 뭐죠. 그게 뭐냐하면됩니다 그러면 그만한 성공하지 않는 경우?



Related Videos
Comments (0)

You must be logged in to comment.

EDM Production Tips
Logic Pro X 402
Dream It. Do It.
Do you want to learn EDM Production Tips?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: