All Articles Dreamweaver
在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样式”面板风格您的网页,在Dreamweaver中,然后你就会知道你放在设计方面的限制。固色,标准字体,块形状等所有有趣的,但不是真正具有挑战性的CSS能力。

因此,在这条IM向您展示一些CSS添加到Dreamweaver中的样式,真的会创造出一些伟大的设计。

让我们开始创建一个div标签将包含您创建这个巨大的风格。


第1步 - 新增的AP Div

启动一个空白的HTML文档,打开“插入”面板和设置布局。从布局选项,选择档的AP Div。

Div drawn

节画


使用工具来绘制的AP Div(这仅仅是一个Div标签的位置和大小参数自动应用于#ID样式)。使用属性面板大小的AP Div高度:400像素和宽度:400像素。


第2步 - 名称的AP Div

打开AP元素“面板,并重新命名的APDiv1 MyStyle。打开“CSS样式”面板中,你会重新命名的AP Div重新名字的ID样式MyStyle。这是您将编辑的样式。


第3步 - 寻找CSS代码

切换到“拆分”视图,使你可以看到的形象和创建的代码告诉我你。向上的部分,你会看到一个代码段突出粉色说#MyStyle {}。这是你的CSS,并为它的所有设置,你是要创建将参加在两国{}。


第4步 - 添加一些内容

为了节省时间打字,复制和粘贴文本段入息,通过点击“设计”视图中绘制的AP Div光标变为积极的和紧迫的Command-V来粘贴。

rounded corners

圆角


提示:再次增加的半径大小正好一半的宽度和高度(所以在这种情况下,200像素)和预览......嘿,你得到一个完美的圆!


第6步 - 渐变背景

添加一个渐变的背景是一个非常好的设计效果,但是你应该始终牢记,并非所有版本都支持所有的浏览器。因此,只有不断用它来提高图像。总是与头脑中的多个浏览器设计的东西,有坚实的填充可用。

gradient background

渐变背景


下面的代码将创建渐变背景:

背景颜色:#666666;

背景图像:MOZ-线性梯度(顶部,#666666,#333333 40.0%);

背景图像:WebKit的线性梯度(顶部,#666666,#333333 40.0%);

背景图像:-O-线性梯度(顶部,#666666,#333333 40.0%);

背景图片:MS-线性梯度(顶部,#666666,#333333 40.0%);

背景图像:线性渐变(顶部,#666666,#333333 40.0%);


如果你能在几个浏览器进行测试,看看效果。最后,允许添加一些文本冲。


第7步 - 提高文字

IVE添加白色的文字,使其站出来反对梯度。香港专业教育学院也加入阴影的文字。与渐变阴影,只有较新版本的Web浏览器不依赖于它。

drop shadow

阴影


此代码添加颜色和阴影:

颜色:#FFFFFF的;

文本阴影:2px的2px的3px#000000;


步骤8 - 更好的字体?

最后,我添加了一个更好的字体和一些填充,周围的文字创造一些空间。

Better text

更好的文本


通过加入以下几行:

字体重量:正常;

文本对齐:左;

字体家庭:格鲁吉亚,衬线;

字体大小:18.0px;

线高度:140%;

填充:10px;


这里是我的代码添加到实现这一目标。再次看到一些代码将无法为一些浏览器和轴承这一点,当你设计你的网页浏览器的兼容性值得检查。

浏览器正在更新所有支持CSS3和HTML 5,所以不要太害怕使用它们的时间,只是知道。 Whats更它不只是传统的网页浏览器,你可以瞄准这个代码,如Safari,Chrome和Firefox等,它还适用于iOS和Android也很好。如果不值得你那么会怎样呢?



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: