网页设计师必备的10个CSS技巧,实用的CSS3属性和动用技术

网页设计师必备的10个CSS技巧

2012/08/05 · CSS ·
CSS

英文原文:10 essential css rules for web
designers,翻译:曾沙@oschina

CSS是网页设计师的基本功,对CSS的问询能使她们可以统筹出特别赏心悦目别致的网页。使用CSS技巧来都行地处理CSS是至极令设计师着迷的作业。在CSS的大洋世界里有成千成万幽默的事物,你只需求找到最适合您的就好。当然大家不可以转手就记住所有CSS的规则和语法,但为了未来的前行我们如故应该记住那一个可怜管用的CSS技巧。明天大家仔细准备了10条对网页设计师最有效的CSS技巧,如果您想设计出独一无二脱颖而出的网页你必须得呱呱叫留意了。这篇博客是在与一家提供高质量印刷服务的在线印刷公司“ Business Card Printing”合营时写的。

1. @font-face

一种用别样服务器上的字体的好点子。很举世瞩目,要是你不能够在托管服务器上找到您必要的字体,你可以在样式中运用那一个主意来引入你需要的字体。

网页设计师必备的10个CSS技巧,实用的CSS3属性和动用技术。CSS

@font-face { font-family: Blackout; src: url(“assests/blackout.ttf”)
format(“truetype”); }

1
2
3
4
@font-face {
    font-family: Blackout;
    src: url("assests/blackout.ttf") format("truetype");
}

2. .clearfix

设若您没办法清除成分的变更,那是解除浮动一种艺术。你可以对任何HTML成分单独行使那种方式。

CSS

.clearfix:after { content: “.”; display: block; clear: both; visibility:
hidden; line-height: 0; height: 0; }

1
2
3
4
5
6
7
8
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

3. @media

@media 可以设置你日前响应网站的介绍人,它能支援你依据用户的屏幕调整网站的增幅。

 

CSS

@media screen and (max-width: 960px) { }

1
2
@media screen and (max-width: 960px) {
}

 

1
 

4. transform: rotate(30deg);
结合这一个转换属性和CSS转场效果来创设有意思的动态效果。

CSS

.title { transform: rotate(40deg); }

1
2
3
.title {
    transform: rotate(40deg);
}

5. background-size

这条规则扶助你在网站中适应全显示器背景。这不像之前的CSS版本必须写很笨重的代码。

CSS

body { background: url(image.jpg) no-repeat; background-size: 100%; }

1
2
3
4
body {
    background: url(image.jpg) no-repeat;
    background-size: 100%;
}

6. input[type=”text”]

这个input[type=”text”]选择器和其他高档拔取器把你从一般水平带到高级水平不行有救助。使用质量选拔器来决定输入成分的提交版本或为一个外链增加一个图标那样很不错啊?

CSS

input[type=”text”] { width: 250px; }

1
2
3
input[type="text"] {
    width: 250px;
}

7. margin: 0 auto;

很意外,没有其余特定的专业来使块级成分居中。那些艺术可以使块级成分在父成分中居中。

CSS

#container { margin: 0 auto; }

1
2
3
#container {
    margin: 0 auto;
}

8. a {outline: none;}

在浏览你的网站的时候,点一个链接一个宏大的虚线框就横跨所有网页那将严重影响用户的心态。那些“a {outline: none;}”申明将移除那么些,但为了易用性别忘了给您的链接也添加:focus状态。

CSS

 a {outline: none;}

1
 a {outline: none;}

9. overflow: hidden

那是最好的排除还没加载到你CSS里面的因素浮动的方法。使用它使网站的响应速度更快。

CSS

.container { overflow: hidden; }

1
2
3
.container {
    overflow: hidden;
}

10. color: rgba();

PNG图片因为它的透明性使它在网页设计中很盛行并大面积应用,可是以后你可以运用上边那种艺术一致落成透明。它选择红、绿、蓝三坦途并安装其不透明度值来已毕透明,像0.5对应%50的不透明度。

CSS

.btn { color: rgba(0,0,0,0.5); }

1
2
3
.btn {
    color: rgba(0,0,0,0.5);
}

 

1 赞 9 收藏
评论

亚洲必赢官网 1

CSS是网页设计师的根基,对CSS的询问能使她们可以统筹出越来越漂亮别致的网页。使用CSS技巧来都行地处理CSS是极度令设计师着迷的事情。在CSS的汪洋大海世界里有过多妙趣横生的事物,你只需求找到最契合您的就好。当然大家无法须臾间就记住所有CSS的平整和语法,但为了以往的提升我们如故应该记住那个可怜实惠的CSS技巧。明日我们密切准备了10条对网页设计师最实用的CSS技巧,假设您想设计出独一无二脱颖而出的网页你必须得良好留意了。那篇博客是在与一家提供高质量印刷服务的在线印刷集团“ Business Card Printing”合作时写的。

因而网页设计师的汪洋CSS经验,大家会记住所有种代码语法,包容性和部分。有部分一定的CSS,可以真正辅助转移您的网站设计变更较旧的技艺规则和申明。那里是自己搜集到的很有用的10条CSS规则

CSS可以革新网站的安排性还要开发网站设计更加多的大概,可以令你的网页更具魅力。对于前端开发者、网站设计师来说,领会并纯熟应用CSS是一项必不可少的技巧。 

1. @font-face

 

上面列出了有的卓殊实用的CSS3属性和选取技巧,希望可以为你的开支、设计工作拉动一些增援。 

一种用别样服务器上的字体的好点子。很显著,即便你无法在托管服务器上找到您需求的字体,你可以在样式中运用那个主意来引入你必要的字体。

@media

@media screen and (max-width: 960px) {

}

 

假诺急需扶助老版本的浏览器,那你就必须持之以恒使用css1的传媒描述符screen和print,到底是如何老版本的浏览器,没有查。它们是相互排斥的,因而在为屏幕展现而生成页面的时候,浏览器会忽略掉打印样式表,反之亦然。所以,逐个样式表都必要包罗相同的样式选拔器,可是有例外的条条框框评释,以便为分裂的输出设备分别生成页面样式。 

1.  圆角效果 

1
2
3
4
@font-face {
    font-family: Blackout;
    src: url("assests/blackout.ttf") format("truetype");
}

background-size

1 body {
2     background: url(image.jpg) no-repeat;
3     background-size: 100%;
4 }

 

CSS3辅助 background-size这一性格,只需求那样概括的一行代码就贯彻了逐月盛行的全背景图像效果

 

今日的Web设计在时时刻刻跟进最新的开发技术,纷纭利用HTML5来开发三种性的Web应用。HTML5的优势之一,就是事先必须用图形落成的因素,以往得以用代码来落到实处。“border-radius”是落到实处这一作用的一个首要的品质,可以用来一向定义HTML成分的圆角,并且被所有现代浏览器帮衬。 

2. .clearfix

@font-face

@font-face {
    font-family: Blackout;
    src: url("assests/blackout.ttf") format("truetype");
}

@font-face
能够加载服务器端的书体文件,让客户端浮现客户端所未曾设置的书体。【微软的IE
5已经是初始帮衬那一个脾性,可是只扶助微软自有的.eot (Embedded Open Type)
格式,而其他浏览器直到现在都未曾帮助这一字体格式。不过,从Safari
3.1从头,网页重构工程师曾经得以设置.ttf(TrueType)和.otf(OpenType)二种字体做为自定义字体了。】比方用谷歌(谷歌)的Webfonts或Typekit

border-radius: 10px; /* CSS3 Property */ 
-moz-border-radius: 10px; /* Firefox */ 
-webkit-border-radius: 10px; /* Chrome/Safari */ 
-khtml-border-radius: 10px; /* Linux browsers */

即使你无法清除成分的变通,那是清除浮动一种办法。你可以对其他HTML元素单独使用那种措施。

margin: 0 auto;

#container {
    margin: 0 auto;
}

 

margin: 0 auto; 这是您在布局时最常用的也是常事第二个用到的CSS代码片段.
添加
margin: 0 auto; 就足以在父类成分居中并且转换成块成分,假若发现并未居中,那或然忘记定义DIV的增幅了

 

1
2
3
4
5
6
7
8
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

overflow: hidden

.container {
    overflow: hidden;
}

 

日常你要解决浮动的标题会想到clear:both,不过overflow:
hidden不仅仅局限于隐藏溢出,他还足以清除浮动

为了防止现身浏览器包容性难题,设计者最好分开讲明那一个代码。

3. @media

.clearfix

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

 

对于这么些变化溢出:隐藏;不起功效的情事下,最好的法门是clearfix技术。记住,你不必然义clearfix类的名称,您可以本着此代码到您的其它HTML成分

2.  投影效果 

@media 可以安装你目前响应网站的媒介,它能帮助您依据用户的显示器调整网站的增进率。

color: rgba();

.btn {
    color: rgba(0,0,0,0.5);
}

 

PNG图像用于创设任何一种透明的功力,但现行得以到另一个落实CSS透明度的不二法门应用RGBA颜色格局开创的。在十六进制值的地方选拔RGBA让您接纳一种颜色,使用它的甲辰革命,黑色和黑色通道,以及α水平,如0.5,设置透明度为50%。

由此CSS3的box-shadow属性可以极度便于地完结阴影效果。所有主流的浏览器都协理这些本性,其中Safari浏览器辅助加前缀的-webkit-box-shadow属性。 

 

input[type=”text”]

input[type="text"] {
    width: 200px;
}

 

input[type="text"]这是一个很常用的CSS技巧,他不需要额外定义类名称,选择在特定的属性是非常有用的造型元素,就可以应用到任何的input元素
#myDiv{ 
-moz-box-shadow: 20px 10px 7px #ccc; 
-webkit-box-shadow: 20px 10px 7px #ccc; 
box-shadow: 20px 10px 7px #ccc; 
}
1
2
@media screen and (max-width: 960px) {
}

transform: rotate(30deg);

.title {
    transform: rotate(30deg);
}

 

在CSS3中,用Transform作用可以兑现文字或图像的旋转、缩放、倾斜、移动那三种档次的变形,那各个变形分别采纳rotate、scale、skew和translate那八种艺术来贯彻 近来浏览器辅助情形:Safari
3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+

 

 

a {outline: none;}

a {outline: none;}

  

当聚焦a标签的时候,在a标签的区域周围会有一个虚线的框,那些框差别于border的是,它是不占用任何宽度的。当您撤除核心的时候,那么些虚线框就会自然消解。你可以由此旅游、火狐大概ie的多少个本子来看。而safari、opera、goole浏览器等自家就不接济这么些职能,所以看不到。上边是outline的金科玉律示例,也是自身正在做的一个页面上截取出来的。定义outline:
none;就足以达成撤除那么些线条

小说收集了

也得以用JavaScript来完结阴影效果,如下: 

4. transform: rotate(30deg); 结合那些转换属性和CSS转场效果来创建有意思的动态效果。

object.style.boxShadow="20px 10px 7px #ccc"  
1
2
3
.title {
    transform: rotate(40deg);
}

 

5. background-size

3.  @media属性 

那条规则帮忙您在网站中适应全显示屏背景。这不像从前的CSS版本必须写很笨重的代码。

Media属性用于安装同一样式表在不一致显示屏下的体裁,可以在属性值中指定应用此体制的介质或媒体。 

1
2
3
4
body {
    background: url(image.jpg) no-repeat;
    background-size: 100%;
}

@media screen and (max-width: 480px){
/* 网页在宽窄为480px显示屏上的显得样式 */
}

6. input[type=”text”]

开发者也得以采纳@media print属性指定打印预览的体制: 

这个input[type=”text”]选拔器和其他高档选用器把您从一般水平带到高级水平非凡有匡助。使用质量选用器来决定输入元素的交由版本或为一个外链扩大一个图标那样很科学啊?

@media print
{
p.content { color: #ccc }
}

1
2
3
input[type="text"] {
    width: 250px;
}

4.  渐变填充 

7. margin: 0 auto;

CSS3的Gradient(渐变)属性给了开发者另一个惊惶失措的体验。Gradient还未得到任何浏览器的支撑,所以不可以完全依靠Gradient来安装布局。 

很奇怪,没有其它特定的业内来使块级成分居中。那么些格局可以使块级成分在父成分中居中。

background: -webkit-gradient(linear, left top, left bottom,
from(darkGray), to(#7A7A7A)); 

1
2
3
#container {
    margin: 0 auto;
}

5.  Background size 

8. a {outline: none;}

Background
size是CSS3中最重大的属性之一,已经被众多浏览器协理。Background
size属性用于安装背景图像的大小。以前背景图像的轻重缓急在样式中是不行调控的,如今应用Background
size属性的一条龙代码就能促成用户想要的背景图像效果。 

在浏览你的网站的时候,点一个链接一个了不起的虚线框就横跨所有网页那将严重影响用户的心理。那个“a {outline: none;}”表明将移除那个,但为了易用性别忘了给你的链接也丰富:focus状态。

div
{background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

1
 a {outline: none;}

6  @font face 

9. overflow: hidden

CSS3中的@font
face属性对引用字体文件做了很大的改进,该属性紧要用以把自定义的Web字体嵌入到网页中。在此从前由于字体许可的标题,设计者只可以动用一定的书体。首先自定义字体的称谓: 

这是最好的清除还没加载到您CSS里面的因素浮动的不二法门。使用它使网站的响应速度更快。

@font-face
{
font-family: mySmashingFont;
src: url(‘blitz.ttf’)
,url(‘blitz.eot’); /* IE9 */
}

1
2
3
.container {
    overflow: hidden;
}

接下来就足以在其他地方选取mySmashingFont字种类列: 

10. color: rgba();

div
{
font-family:mySmashingFont;
}

PNG图片因为它的透明性使它在网页设计中很流行并大面积应用,但是将来您可以使用上面那种情势同样已毕透明。它使用红、绿、蓝三通道并设置其不透明度值来兑现透明,像0.5对应%50的不透明度。

7.  clearfix属性 

1
2
3
.btn {
    color: rgba(0,0,0,0.5);
}

一旦设计师认为Overflow:
hidden不可以很好的处理浮动,那么clearfix提供了更好的拍卖浮动的搞定方案。 

 

.clearfix {
display: inline-block;
}

 

1 .clearfix:after { 
2 content: "."; 
3 display: block; 
4 clear: both; 
5 visibility: hidden; 
6 line-height: 0; 
7 height: 0; 
8 }

 

亚洲必赢官网 ,8.  Margin: 0 auto 

Margin: 0
auto属性是CSS的底子属性。固然CSS语法并没有概念一个块元素居中的语句,但设计师如故可以动用auto
margin选项来促成那些意义。那些本性可以依据要求居中一个因素。但要注意,必要设计者给div设定宽度才会兑现。 

 

.myDiv {
margin: 0 auto;
width:600px;
}

 

  1. Overflow: hidden

Overflow:Hidden这么些CSS属性除了隐藏溢出作用外,还有清除浮动的功效。

 

div
{
overflow:hidden;
}

网站地图xml地图