CSS图标:循环利用&动画效果

我们学习了 CSS Sprites(图片合并)来减小 HTTP 请求和 KBs。这些 sprites 将多个图片整合到一个图片中,然后再用CSS来定位。

我们有没想过使用同一张图片,给它添加几行 CSS 代码,我们会得到不一样的效果呢?
我们可以使用 CSS3 中的 TransformTransition 来循环使用图标得到不同的效果。

重复使用一张图片总比加载多个图标、sprite 好吧。

jQuery UI sprite example
例子:jQuery UI 的 sprite

温馨提示:
1、本文章需要支持 CSS3 Transition 和 Transform 的游览器,请使用 Chrome、Firefox 或者 Opera。
2、如果你订阅了本博客,请打开本文游览(CSS 代码不能在 feed 显示)。

Continue reading CSS图标:循环利用&动画效果

CSS Target

CSS3 :target 选择器

定义和用法

URLS 有锚点名称#(例如:http://www.example.com/help.html#section-1),会链接文档中的特定元素。

:target 选择器可用于当前活动目标元素的样式。

语法:

.class:target
{
	/* CSS 样式 */
}

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari
除了 IE,:target都支持主流游览器。

演示:demo

via: w3schools.com

从顶部弹出式的通知

你见过浏览器窗口中顶部的通知下,从弹出,然后溜走,的设计?我们可以用纯 CSS 制作一个。

我们只需要一个div:

<div id="note">
    You smell good.
</div>

然后我们给它样式,并把它放在屏幕上方:

#note {
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
} 

让我们进行动画处理

Continue reading 从顶部弹出式的通知

CSS3: background-size

CSS3: background-size:指定背景图像的大小

代码例子:

div {
background:url(smile.png);
background-size:33px;
background-repeat:no-repeat;
}

游览器支持:
IE9+, Firefox 4+, Opera, Chrome, Safari 5+

更新:什么游览器支持 background-size?去 caniuse 看看。这里可以看到所有主流的游览器

演示:查看

定义和用法

背景大小属性指定背景图片的大小。

默认值 auto
继承性 no
CSS版本 CSS3
JavaScript的语法 object.style.backgroundSize="60px80px"

语法:

background-size: length|percentage|cover|contain;
简介
length

设置背景图片的高度和宽度(单位:px)。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为“自动”

例如:background-size: 50px 50px;

percentage

设置背景图片的高度和宽度(单位:%)。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为“自动”

例如:background-size: 25% 25%;

cover

缩放图像以最小的大小,其宽度和高度都能放入内容区域

contain

缩放图像的最大值,其宽度和高度都能放入内容区域

via: w3schools.com

跨浏览器 CSS 渐变按钮

跨浏览器 CSS 渐变按钮

特点

  • 可扩展 — — 使用字体大小调整按钮大小。
  • 适应性 — — 更改填充和字体大小。
  • 灵活性 — — 适用于任何 HTML 元素的样式。
  • 备用性 — — 支持跨浏览器。
  • 可用性 — — 正常,悬停和积极的状态都可用。

它是怎样编造

  1. RGBA 颜色模式
  2. 框中的阴影
  3. 文本阴影
  4. 圆角
  5. CSS3 渐变

演示:点击我

Continue reading 跨浏览器 CSS 渐变按钮