常用CSS代码片段(一)
常用CSS代码片段(一)
Lieme1、垂直对齐
plaintext
1 | .verticalcenter{ |
2、伸展一个元素到窗口高度
plaintext
1 | html, |
3、基于文件格式使用不同的样式
plaintext
1 | a[href^="http://"]{ |
4、创建跨浏览器的图像灰度
plaintext
1 | <svg xmlns="http://www.w3.org/2000/svg"> |
5、背景渐变动画
plaintext
1 | button { |
6、CSS:表格列宽自适用
plaintext
1 | .box-shadow { |
8、包裹长文本
plaintext
1 | pre { |
9、制造模糊文本
plaintext
1 | .blurry-text { |
10、用CSS动画实现省略号动画
plaintext
1 | .loading:after { |
11、样式重置
plaintext
1 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { |
12、典型的CSS清除浮动
plaintext
1 | .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } |
13、新版清除浮动(2011)
plaintext
1 | .clearfix:before, .container:after { content: ""; display: table; } |
14、跨浏览器的透明
plaintext
1 | .transparent { |
15、CSS引用模板
plaintext
1 | blockquote { |
16、个性圆角
plaintext
1 | #container { |
17、通用媒体查询
plaintext
1 | /* Smartphones (portrait and landscape) ----------- */ |
18、现代字体栈
plaintext
1 | * Times New Roman-based serif */ |
19、自定义文本选择
plaintext
1 | ::selection { background: #e2eae2; } |
20、为logo隐藏H1
plaintext
1 | h1 { |
21、图片边框偏光
plaintext
1 | img.polaroid { |
22、锚链接伪类
plaintext
1 | a:link { color: blue; } |
23、奇特的CSS引用
plaintext
1 | .has-pullquote:before { |
24、CSS3:全屏背景
plaintext
1 | html { |
25、内容垂直居中
plaintext
1 | .container { |
26、强制出现垂直滚动条
plaintext
1 | html { height: 101% } |
27、CSS3渐变模板
plaintext
1 | #colorbox { |
28、@font-face模板
plaintext
1 | @font-face { |
29、缝合CSS3元素
plaintext
1 | p { |
30、CSS3 斑马线
plaintext
1 | tbody tr:nth-child(odd) { |
31、有趣的&
plaintext
1 | .amp { |
32、大字段落
plaintext
1 | p:first-letter{ |
33、内部CSS3 盒阴影
plaintext
1 | #mydiv { |
34、外部CSS3 盒阴影
plaintext
1 | #mydiv { |
35、三角形列表项目符号
plaintext
1 | ul { |
36、固定宽度的居中布局
plaintext
1 | #page-wrap { |
37、CSS3 列文本
plaintext
1 | #columns-3 { |
38、CSS固定页脚
plaintext
1 | #footer { |
39、IE6的PNG透明修复
plaintext
1 | .bg { |
40、跨浏览器设置最小高度
plaintext
1 | #container { |
41、CSS3 鲜艳的输入
plaintext
1 | input[type=text], textarea { |
42、基于文件类型的链接样式
plaintext
1 | /* external links */ |
43、强制换行
plaintext
1 | pre { |
44、在可点击的项目上强制手型
plaintext
1 | a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { |
45、网页顶部盒阴影
plaintext
1 | body:before { |
46、CSS3对话气泡
plaintext
1 | .chat-bubble { |
47、H1-H5默认样式
plaintext
1 | h1,h2,h3,h4,h5{ |
###### 48、纯CSS背景噪音
plaintext
1 | body { |
49、持久的列表排序
plaintext
1 | ol.chapters { |
50、CSS悬浮提示文本
plaintext
1 | a { |
51、深灰色的圆形按钮
plaintext
1 | .graybtn { |
52、在可打印的网页中显示URLs
plaintext
1 | @media print { |
53、禁用移动Webkit的选择高亮
plaintext
1 | body { |
54、CSS3 圆点图案
plaintext
1 | body { |
55、CSS3 方格图案
plaintext
1 | body { |
56、Github的fork色带
plaintext
1 | .ribbon { |
57、CSS font属性缩写
plaintext
1 | p { |
58、论文页面的卷曲效果
plaintext
1 | ul.box { |
59、鲜艳的锚链接
plaintext
1 | a { |
60、带CSS3特色的横幅显示
plaintext
1 | .featureBanner { |