8. 圆角(边框半径)
Border-radius 无需背景图片就能给HTML元素添加圆角。现在,它可能是使用最多的CSS3属性了,很简单的原因是使用圆角比较好而且不会对设计和可用性有冲突。
不同于添加Javascript或多于的HTML标签,仅仅需要添加一些CSS属性并从好的方面考虑。这个方案是清晰的和比较有效的,而且可以让你免于花费几个小时来寻找精巧的浏览器方案和基于Javascript圆角。
Sam Brown的博客在标题、分类和链接处使用了border-radius
.
Sam Brown在他的博客的标题、分类、链接和div中大量的使用了border-radius
属性。使用图片来实现该效果将会比较费时的,这是在项目中使用CSS3属性是提高开发效率的重要步骤的原因之一
为了给类别链接添加圆角,Sam 使用了下面的CSS片段:
h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
我们可以做的更进一步,添加原始的CSS3 属性和Konqueror 属性扩展,如下:
h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}
如果我们想在我们的元素中的某个特定的角上应用此属性,我们可以单独的指定每个角:
div {
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
浏览器支持: border-radius
只有所有版本的IE浏览器和Opera不支持,Webkit和Gecko核心的浏览器都支持。
扩展阅读:
9. 边框图片
border-image
属性允许你在元素的边框上设定图片, 让你从通常的solid
, dotted
和其它边框样式中解放出来。该属性给设计师一个更好的工具,用它可以方便的定义设计元素的边框样式,比background-image
属性(对高级设计来说) 或枯燥的默认边框样式更好用。我们也可以明确的定义一个边框可以被如何缩放或平铺。
SpoonGraphics 博客为它的图片边框使用了border-image
属性。
在SpoonGraphis blog中,border-image
被用于图片边框,如下所示:
#content .post img {
border: 6px solid #f2e6d1;
-webkit-border-image: url(main-border.png) 6 repeat;
-moz-border-image: url(main-border.png) 6 repeat;
border-image: url(main-border.png) 6 repeat;
}
要想定义border-image
,我们必须指定图片地址,图片的那部分将被剪切并用于元素的每一个边上,以及图片是否被缩放或平铺。
为了制作一个使用下面的图片作为边框的div
,我们应该使用下面的代码(我们将为这个例子添加Opera 和Konqueror 支持):
div {
border-width: 18px 25px 25px 18px;
-webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
-moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
-o-border-image: url(example.png) 18 25 25 18 stretch stretch;
-khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
border-image: url(example.png) 18 25 25 18 stretch stretch;
}
该属性的最后一个值可以是stretch
(默认), round
(只有一个平铺了整数倍的图片被填充在允许的地方) 或repeat
。在我们的例子中,上下左右边框图片被拉伸。如果我们只想顶部和底部边框被拉伸,我们可以使用下面的CSS:
div {
(...)
border-image: url(example.png) 18 25 25 18 stretch repeat;
}
我们可以可以单独的指定每一个角,如果我们想为每一个角使用不同的图片:
div {
border-top-image: url(example.png) 5 5 stretch;
border-right-image: url(example.png) 5 5 stretch;
border-bottom-image: url(example.png) 5 5 stretch;
border-left-image: url(example.png) 5 5 stretch;
border-top-left-image: url(example.png) 5 5 stretch;
border-top-right-image: url(example.png) 5 5 stretch;
border-bottom-left-image: url(example.png) 5 5 stretch;
border-bottom-right-image: url(example.png) 5 5 stretch;
}
如果浏览器不支持border-image
属性,它将无视这些属性,并只应用定义的其它边框属性,比如border-width
和border-color
.
浏览器支持: border-image
目前只有Webkit核心浏览器支持。不太确定Firefox的下一个版本是否支持。
扩展阅读:
10. 盒阴影
box-shadow
属性可以对HTML元素添加阴影 而不用额外的标签或背景图片。类似text-shadow
属性,它增强设计的细节;而且因为它不影响内容的可读性,随意他可以是增加那种额外感觉/效果的一种很好的方法。
10to1 为它的导航北京和hover状态使用了box-shadow
属性.
10to1 为其导航区域增加的一个简单的阴影并将该属性应用于导航链接的hover效果:
#navigation {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
}
#navigation li a:hover,
#navigation li a:focus {
-webkit-box-shadow: 0 0 5px #111;
-moz-box-shadow: 0 0 5px #111;
}
box-shadow
属性可以用多个值:水平偏移、垂直偏移、模糊半径、伸展半径和阴影颜色。水平和垂直偏移和阴影色使用的最多。
在一个div上应用红色阴影,右边和下边偏移4px,无模糊,我们可以使用下面的代码:
div {
-moz-box-shadow: 4px 4px 0 #f00;
-webkit-box-shadow: 4px 4px 0 #f00;
box-shadow: 4px 4px 0 #f00;
}
浏览器支持: box-shadow
目前只有Webkit核心浏览器支持,但是即将发布的Firefox 3.5 也将提供很好的支持。
扩展阅读:
11. 盒子大小
根据CSS 2.1 规范,在计算盒子的总大小的时候,元素的边框和padding应该被加入到宽度和高度之中的。但是众所周知,旧的浏览器却以它们自己的非常有“创意”的方式来解释这个规范。box-sizing
属性允许你指定浏览器如何计算一个元素的宽度和高度。
WordPress 在控制面板的所有的输入框元素中使用border-box
属性。
WordPress 后台区域在它的所有text类型的input标签和textarea标签上使用了该属性:
input[type="text"],
textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
第三个属性(-ms-box-sizing
) 只有在Internet Explorer 8下有效。通过其他选择器,WordPress 的样式表同样添加了Konqueror 属性: -khtml-box-sizing
。
box-sizing
属性可以两个值中的一个:border-box
和content-box
。 Content-box如CSS2.1中的定义的那样渲染宽度。Border-box 从设定的宽度和高度中扣除padding和边框(如老式浏览器那样。)。
浏览器支持: box-sizing
被IE8、Opera、Gecko核心和Webkit核心浏览器支持。
扩展阅读:
12. 媒体查询
媒体查询(media queries)可以让你为不同的设备基于它们的能力定义不同的样式。比如,在可视区域小于480像素的时候,你可能想让网站的侧栏显示在主内容的下边,这样它就不应该浮动并显示在右侧了:
#sidebar {
float: right;
display: inline; /* IE Double-Margin Bugfix */
}
@media all and (max-width:480px) {
#sidebar {
float: none;
clear: both;
}
}
你也可以指定使用虑色屏的设备:
a {color: grey;}
@media screen and (color) {
a {color: red;}
}
潜力是无限的。这个属性是很有用的因为你你不在需要必须为不同的设备写独立的样式表了,而且你也无需使用JS来确定每个用户的浏览器的属性和功能。一个实现一个灵活的布局的更加流行的基于Javascript的方案是使用智能的流体布局,让布局对于用户的浏览器分辨率更加灵活。
浏览器支持: 媒体查询被基于webkit核心的浏览器和Opera支持。Firefox将在3.5版本中支持它。IE目前不支持这些属性而且在将来的版本中,也没有支持的计划。
扩展阅读:
13. 语音
CSS3的语音模块CSS3可以让你为屏幕阅读者指定语音样式。你可以控制语音的不同设置,比如:
-
voice-volume
使用从0到100的数字(0 即静音)、百分数或关键词(silent
, x-soft
, soft
, medium
, loud
和x-loud
等)来设置音量。
-
voice-balance
控制来自哪个声道(如果用户的音箱系统支持立体声)。
- Speak
指示屏幕阅读器阅读相关的文字、数字或标点符号。可用的关键词为none
, normal
, spell-out
, digits
, literal-punctuation
, no-punctuation
和inherit
.
- Pauses and rests
在一个元素的被读完之前或之后设定暂停或停止。你可以使用时间单位(比如, “2s” 表示2 秒钟) 或关键词(none
, x-weak
, weak
, medium
, strong
和x-strong
)。
- Cues
使用声音限制特定元素并控制器音量。
-
voice-family
设定特定的声音类型和声音合成(就像font-family)。
-
voice-rate
控制阅读的速度。可以设置为百分数或关键词: x-slow
, slow
, medium
, fast
和x-fast
.
-
voice-stress
指示应该使用的任何重音(强语气),使用不同的关键词: none
, moderate
, strong
和 reduced
.
比如,告诉屏幕阅读器使用男声读取所有的h2
标签,用左边的喇叭,用软调按照指定的声音,可以像下面这样指定样式:
h2 {
voice-family: female;
voice-balance: left;
voice-volume: soft;
cue-after: url(sound.au);
}
不幸的是,这个属性现在只有非常少的支持,但是显然值得关注因为我们可以在将来提高我们网站的易用性。
浏览器支持: 现在,只有Opera 浏览器(Windows XP and 2000)支持语音模块的部分属性。为了使用它们,需要使用-xv-
前缀,比如-xv-voice-balance: right
。
扩展阅读:
结尾
CSS3 属性可以极大的提高你的工作流,让一些最耗时的CSS任务不费吹灰之力就能搞定,并且可以使用更好、更简洁和更轻的代码标签。一些属性尚未被广泛的支持,甚至是最新的浏览器,但这并不意味着我们不能用它们进行试验或者为使用先进浏览器的用户更高级的功能和CSS样式。
在这点儿上,请记住,培养我们的用户 也同样是有用和必须的:网站无需看起来在每个浏览器里都要保持一致,而且如果一个差异不(负面)影响美学和网站的可用性,它就应该是被考虑的。如果我们继续浪费大量的时间和金钱以使每个细节绝对一致(而不是采用更灵活的和未来导向的方案), 用户将没有升级他们的浏览器的任何需要/动机,这样我们就不得不在旧的浏览器变为古董级浏览器以及强大的现代浏览器变为标准之前等待很长的时间
我们试验和使用新的CSS3属性越早,它们就被流行的浏览器支持的更早,我们也就能够更早的广泛使用它们。
推荐阅读及资源:
关于原作者
Inayaili de León 是一个葡萄牙的网页设计师。她对网页设计和前端编码真的非常感兴趣,而且喜欢漂亮和简洁的网站。她居住在伦敦。你可以在Web Designer Notebook 上看到她的更多文章,并follow her on Twitter .
原文:用CSS3将你的设计带入下个高度
译自:Take Your Design To The Next Level With CSS3
版权所有,转载请注明出处,多谢!!
- 大小: 35 KB
- 大小: 45.5 KB
- 大小: 8.7 KB
- 大小: 35.2 KB
- 大小: 20.4 KB
分享到:
相关推荐
通过八大商业案例,以HTML5搭建结构、CSS3设置样式、jQuery实现动态应用这三者相结合的实际应用方式,详细讲解它们的新技术点,以及流行应用热点的设计思路与制作方法。技术核心穿插在实际操作中阐述,更便于读者在...
资源名称:前端体验设计——HTML5 CSS3终极修炼内容简介:本书是Web设计畅销书《超越CSS》作者力作,结合当前移动互联网下的硬件变化情 况,以一个Web设计发者的视角,将老的工作方法与新技术相结合,通过丰富的案例...
本书是Web设计畅销书《超越CSS》作者的最新力作,结合当前移动互联网下硬件的变化,以一个资深Web设计开发者的视角,将传统的工作方法与最新技术相结合,通过丰富的案例为读者展示了如何设计高效、充满创意的Web页面...
《众妙之门——网页排版设计制胜秘诀》囊括了字体抗锯齿技术,网页排版的原则,网页字体的设置技巧,CSS字体堆栈指南,CSS3的新特性,网页字体服务推荐以及排版工具介绍,等等。 还在为网页排版苦恼吗?想设计出...
今天,我非常高兴地向大家展示我的最新成果——仿写小米官网的页面。经过一个漫长的期末考试季节,我终于完成...作为一个开发者,我非常珍惜每一次机会展示自己的成果,并且期待能够不断提升自己的技术水平。谢谢大家!
也讲述脚本(JScripts)、样式表(CSS)、HTML4.0等技术。 可以提升专业的手写代码、优化网页、脚本编程、图片处理、网站策划的能力。 能够熟练使用或很快上手任何常见的和网页制作有关的代码编辑、图片处理等工具软件...
尽管年代久远的表格和图表仍然可以解释大多数数据,但最新的D3,JS库以及R,Tableau,SAS等中的特殊绘图,已将可视化领域提升到了一个新的水平。 可视化是一种以简单且易于理解的方式解释数据的技术。 此问题使我们...
提升物业管理水平,提高工作效率,降低成本,便于物业快速回收物业费; 扩大服务范围和能力,方便住户,提升用户满意度;为物业公司扩展了新的收入渠道: 租赁中介、社区团购、物业服务;为住户缴纳物业费、水电、...
合理应用大量WEB2.0新技术使系统拥有一流的用户体验 代码简洁、高效运行 真正DIV+CSS统一构造页面、最简洁 规范的代码设计,使网站运行速度大大提升。全站采用伪静态支持,既避免了人工静态的繁琐操作、数据不及时...
- 注意3:app.js 内定义了主模块名:starter (`angular.module('starter'`),构建时编译templates目录下的模板文件时,硬编码使用 starter 模块名,如果需要更改app.js内的主模块名,则需要对应到构建描述文件gulp...
ASP.Net MVC是微软推出的区别于ASP.Net WebForm的Web开发新技术,由于ASP.Net MVC解决了ASP.Net WebForm的很多缺点,非常适合大型、中型项目的开发,一经推出就受到了.Net开发社区的追捧,很多.Net开发人员的职位...
该项目具有重要的实际应用价值,因为它有助于提高安全管理水平并预防工业事故的发生。 主要特性和功能可能包括: 1. **实时监控**:通过摄像头捕获实时视频流,并对每一帧图像进行分析,以识别是否有人员未佩戴...
了解如何使用Django (一个Python的网络开发框架)构建网站。 在课程中,您将学到: ...然后,我们将通过在网站上构建REST API将开发提升到一个新的水平,以便其他技术可以与之通信(例如:一个android应用) 。
3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 语言 超文本 :也是文本,但会具备特殊功能 普通文本 a : 普通字符 a 超文本 a ...
请注意,这是我开发文字游戏的第一步,我们首先从预定义的参数开始,您可以在下一步部分中进一步了解如何将游戏提升到一个新的水平。 游戏说明和玩法:在3回合中,将为您提供10个随机图块,以尽可能多地生成单词。...
包含网页效果、DOM元素与属性、HTML事件、CSS样式、用户输入自动完成、拖放、图形图像、AJAX、算法、jQuery Mobile应用、浏览器、Cookies等jQuery技术内容,对提高网站开发人员和设计人员的jQuery技术水平有指导作用...
Creative agency是全栈式Web应用程序,您可以在其中通过专业方式完成项目,以将品牌提升到一个新的水平。 创意代理商为您提供网页设计和开发,图形设计,博客撰写,精彩文章和24/7通话服务 特征 创意数字服务 ...
如果您想将一个爱好或技能提升到一个新的水平,只需输入您的地址,Skillit 就会向您显示 2 公里范围内当前正在工作并愿意合作的其他用户的实时地图。 根据用户的工作情况过滤这些用户,当您找到想见的人时,通过...
在这一新的旅程中,我们还将获得技术指导,后者将帮助我们更好地了解社区,他们的需求,并将该组件提升到全新的工程水平。 入门 安装angular-tree-component : npm install @circlon/angular-tree-component ...