每位设计师都应该拥有的50个CSS代码片段-3
来源:互联网 发布:网络空间作战部队 编辑:程序博客网 时间:2024/05/29 18:16
41. 暗灰色的圆形按钮
01
.graybtn {
02
-moz-box-shadow:
inset
0px
1px
0px
0px
#ffffff
;
03
-webkit-box-shadow:
inset
0px
1px
0px
0px
#ffffff
;
04
box-shadow:
inset
0px
1px
0px
0px
#ffffff
;
05
background
:-webkit-gradient( linear,
left
top
,
left
bottom
, color-stop(
0.05
,
#ffffff
), color-stop(
1
,
#d1d1d1
) );
06
background
:-moz-linear-gradient(
center
top
,
#ffffff
5%
,
#d1d1d1
100%
);
07
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=
'#ffffff'
, endColorstr=
'#d1d1d1'
);
08
background-color
:
#ffffff
;
09
-moz-border-radius:
6px
;
10
-webkit-border-radius:
6px
;
11
border-radius:
6px
;
12
border
:
1px
solid
#dcdcdc
;
13
display
:inline-
block
;
14
color
:
#777777
;
15
font-family
:
arial
;
16
font-size
:
15px
;
17
font-weight
:
bold
;
18
padding
:
6px
24px
;
19
text-decoration
:
none
;
20
text-shadow
:
1px
1px
0px
#ffffff
;
21
}
22
.graybtn:hover {
23
background
:-webkit-gradient( linear,
left
top
,
left
bottom
, color-stop(
0.05
,
#d1d1d1
), color-stop(
1
,
#ffffff
) );
24
background
:-moz-linear-gradient(
center
top
,
#d1d1d1
5%
,
#ffffff
100%
);
25
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=
'#d1d1d1'
, endColorstr=
'#ffffff'
);
26
background-color
:
#d1d1d1
;
27
}
28
.graybtn:active {
29
position
:
relative
;
30
top
:
1px
;
31
}
Code Source
作为又一个对web开发者有帮助的模板,我列入了这个简单的CSS3按钮类。我使用了 .graybtn的类名,显示了相应的颜色,但这不是说你不能改变样式适应你自己的网站。在色轮中查验十六进制数值,以便从不同的颜色范围找到匹配的近似色调。
42.在一个打印页面显示URLS
1
@media
print
{
2
a:after {
3
content
:
" ["
attr
(href)
"] "
;
4
}
5
}
Code Source
如果你运行一个新闻网站或者管理有许多打印素材的资源,这可能是你能找到的最好的代码段之一了。页面中的锚链接将看上去与普通样子显示一致。但当打印时,你的用户将会看到链接文本具有超链接的URL。这对需要访问你链接的网页,但在特定的打印文档中却看不到URL的人来说,非常方便。
43. 禁用移动Webkit高亮
1
body {
2
-webkit-touch-callout:
none
;
3
-webkit-user-select:
none
;
4
-khtml-user-select:
none
;
5
-moz-user-select:
none
;
6
-ms-user-select:
none
;
7
user-select:
none
;
8
}
根据你从事移动方面的经验,这段代码也许不是非常有用。但当用 Safari或其它基于Webkit引擎的浏览器访问移动网站时,你会注意到你一点击它们就会有一个围绕着元素的灰色盒子。只要增加这些样式到你的网站,就可以移除所有原生的移动浏览器的高亮效果。
44. CSS3 带圆点的图案
1
body {
2
background
: radial-gradient(
circle
,
white
10%
,
transparent
10%
),
3
radial-gradient(
circle
,
white
10%
,
black
10%
)
50px
50px
;
4
background-
size
:
100px
100px
;
5
}
Code Source
最初在线发现这个代码段的时候,我有一点吃惊。但这真的是即兴创建纯CSS3的BG模式的有趣方法。我设置body元素为默认目标,但你可以将它引用到页面中的任何div容器。
45. CSS3 方格图案
1
body {
2
background-color
:
white
;
3
background-image
: linear-gradient(
45
deg,
black
25%
,
transparent
25%
,
transparent
75%
,
black
75%
,
black
),
4
linear-gradient(
45
deg,
black
25%
,
transparent
25%
,
transparent
75%
,
black
75%
,
black
);
5
background-
size
:
100px
100px
;
6
background-position
:
0
0
,
50px
50px
;
7
}
Code Source
与上面圆点花纹类似,我们也可以创建一个天衣无缝的方格图案。这个方法运行起来需要更多的一点语法,但在所有支持CSS3的浏览器中它看上去完美无缺。同样你也可以改变黑与白的颜色数值,以便匹配你自己网站的配色方案。
46. Github Fork 缎带
01
.ribbon {
02
background-color
:
#a00
;
03
overflow
:
hidden
;
04
/* top left corner */
05
position
:
absolute
;
06
left
:
-3em
;
07
top
:
2.5em
;
08
/* 45 deg ccw rotation */
09
-moz-transform: rotate(
-45
deg);
10
-webkit-transform: rotate(
-45
deg);
11
/* shadow */
12
-moz-box-shadow:
0
0
1em
#888
;
13
-webkit-box-shadow:
0
0
1em
#888
;
14
}
15
.ribbon a {
16
border
:
1px
solid
#faa
;
17
color
:
#fff
;
18
display
:
block
;
19
font
:
bold
81.25%
'Helvetiva Neue'
,
Helvetica
,
Arial
,
sans-serif
;
20
margin
:
0.05em
0
0.075em
0
;
21
padding
:
0.5em
3.5em
;
22
text-align
:
center
;
23
text-decoration
:
none
;
24
/* shadow */
25
text-shadow
:
0
0
0.5em
#444
;
26
}
Code Source
作为一个 Github大用户,这段基础代码令我印象深刻。你可以使用CSS3的转换属性,快速的创建Github 角落缎带。对开源插件或Github上有众多追随的代码包来说这非常完美。如果你有一个活跃的Github套件库的话,对托管的HTML/CSS/JS演示来说也很棒。
47. 压缩的 CSS 字体属性
1
p {
2
font
:
italic
small-caps
bold
1.2em
/
1.0em
Arial
,
Tahoma
,
Helvetica
;
3
}
Code Source
web开发者不经常使用这个压缩的字体属性的主要原因,在于不是所有设置都是需要的。但对这个速记方法有所理解可以使你在样式表上节省许多时间与空间。在你想要缩短你的字体样式格式的时候,使用这个代码片段。
48. 页面卷曲效果
01
ul.box {
02
position
:
relative
;
03
z-index
:
1
;
/* prevent shadows falling behind containers with backgrounds */
04
overflow
:
hidden
;
05
list-style
:
none
;
06
margin
:
0
;
07
padding
:
0
;
08
}
09
10
ul.box li {
11
position
:
relative
;
12
float
:
left
;
13
width
:
250px
;
14
height
:
150px
;
15
padding
:
0
;
16
border
:
1px
solid
#efefef
;
17
margin
:
0
30px
30px
0
;
18
background
:
#fff
;
19
-webkit-box-shadow:
0
1px
4px
rgba(
0
,
0
,
0
,
0.27
),
0
0
40px
rgba(
0
,
0
,
0
,
0.06
)
inset
;
20
-moz-box-shadow:
0
1px
4px
rgba(
0
,
0
,
0
,
0.27
),
0
0
40px
rgba(
0
,
0
,
0
,
0.06
)
inset
;
21
box-shadow:
0
1px
4px
rgba(
0
,
0
,
0
,
0.27
),
0
0
40px
rgba(
0
,
0
,
0
,
0.06
)
inset
;
22
}
23
24
ul.box li:before,
25
ul.box li:after {
26
content
:
''
;
27
z-index
:
-1
;
28
position
:
absolute
;
29
left
:
10px
;
30
bottom
:
10px
;
31
width
:
70%
;
32
max-width
:
300px
;
/* avoid rotation causing ugly appearance at large container widths */
33
max-height
:
100px
;
34
height
:
55%
;
35
-webkit-box-shadow:
0
8px
16px
rgba(
0
,
0
,
0
,
0.3
);
36
-moz-box-shadow:
0
8px
16px
rgba(
0
,
0
,
0
,
0.3
);
37
box-shadow:
0
8px
16px
rgba(
0
,
0
,
0
,
0.3
);
38
-webkit-transform: skew(
-15
deg) rotate(
-6
deg);
39
-moz-transform: skew(
-15
deg) rotate(
-6
deg);
40
-ms-transform: skew(
-15
deg) rotate(
-6
deg);
41
-o-transform: skew(
-15
deg) rotate(
-6
deg);
42
transform: skew(
-15
deg) rotate(
-6
deg);
43
}
44
45
ul.box li:after {
46
left
:
auto
;
47
right
:
10px
;
48
-webkit-transform: skew(
15
deg) rotate(
6
deg);
49
-moz-transform: skew(
15
deg) rotate(
6
deg);
50
-ms-transform: skew(
15
deg) rotate(
6
deg);
51
-o-transform: skew(
15
deg) rotate(
6
deg);
52
transform: skew(
15
deg) rotate(
6
deg);
53
}
Code Source
这个页面卷曲效果几乎可以应用于任何包含网站内容的容器。我立即会想到图像媒体和引用文本,但这个才能真正做到任何对象。查看这段代码的在线演示页 ,以便对这些页面如何实现卷曲功能有更好的理解。
49.发光锚链接
01
a {
02
color
:
#00e
;
03
}
04
a:visited {
05
color
:
#551a8b
;
06
}
07
a:hover {
08
color
:
#06e
;
09
}
10
a:focus {
11
outline
:
thin
dotted
;
12
}
13
a:hover, a:active {
14
outline
:
0
;
15
}
16
a, a:visited, a:active {
17
text-decoration
:
none
;
18
color
:
#fff
;
19
-webkit-transition:
all
.
3
s ease-in-out;
20
}
21
a:hover, .glow {
22
color
:
#ff0
;
23
text-shadow
:
0
0
10px
#ff0
;
24
}
源码
CSS3 的文本阴影提供了一个独特的网页排版制定方法。更确切的说,这个片段是非常好的制定富有创意的鼠标悬停发光特效的资源。虽然我并不认为这个特效可以毫无失调的融入大多数网站,但如果你有耐心调整它,你一定能够打动访问者。
50. 饶有特色的 CSS3 展示横条
01
.featureBanner {
02
position
:
relative
;
03
margin
:
20px
04
}
05
.featureBanner:before {
06
content
:
"Featured"
;
07
position
:
absolute
;
08
top
:
5px
;
09
left
:
-8px
;
10
padding-right
:
10px
;
11
color
:
#232323
;
12
font-weight
:
bold
;
13
height
:
0px
;
14
border
:
15px
solid
#ffa200
;
15
border-right-color
:
transparent
;
16
line-height
:
0px
;
17
box-shadow:
-0px
5px
5px
-5px
#000
;
18
z-index
:
1
;
19
}
20
21
.featureBanner:after {
22
content
:
""
;
23
position
:
absolute
;
24
top
:
35px
;
25
left
:
-8px
;
26
border
:
4px
solid
#89540c
;
27
border-left-color
:
transparent
;
28
border-bottom-color
:
transparent
;
29
}
源码
通常,要在其它浏览器复制这个效果,你需要设置一张背景图片,但在支持 CSS3 的浏览器终,我们可以配置 悬挂在文本封装边缘的动态横条,无需图片!这似乎能够很好的配合电子商务产品、图像缩略图、视频预览、或博客文章,用以列出了一些想法。
- 每位设计师都应该拥有的50个CSS代码片段-3
- 每位设计师都应该拥有的50个CSS代码片段-1
- 每位设计师都应该拥有的50个CSS代码片段-2
- 每位设计师都应该拥有的50个CSS代码片段
- 每位设计师都应该拥有的50个CSS代码片段
- 每位设计师都应该拥有的50个CSS代码片段
- 每位设计师都应该拥有的50个CSS代码片段
- 设计师应该拥有的 50 个很有用的 CSS 代码
- 设计师应该拥有的 50 个很有用的 CSS 代码
- 设计师应该拥有的 50 个很有用的 CSS 代码
- 每位架构师都应该熟知的 10 个 SOA 设计模式
- 非常有用的50个CSS代码片段
- 10个不可忽视的CSS代码片段
- 10个不可忽视的CSS代码片段
- 实用的60个CSS代码片段
- 实用的60个CSS代码片段
- 实用的60个CSS代码片段
- 实用的60个CSS代码片段
- 图片搜索流程
- Android平台代号、版本和API级别
- C#无法嵌入互操作类型XXX.XXX请查看是否缺少引用集解决方法
- Change Hostname in Ubuntu
- 方便Git提交代码的几个工具
- 每位设计师都应该拥有的50个CSS代码片段-3
- Context Switch
- 命令模式
- OpenRisc-28-ORPSoC的clock子系统分析
- 关于redhat优化
- Notification可行性分析
- [Android] ListView中getView的原理+如何在ListView中放置多个item
- STDIN_FILENO
- vsftp出现/usr/bin/ld: cannot find -lcap