教你一招搞定css背景图的大小
上一篇文章中我们了解了设置背景图重复的方法，请看《如何使用css设置背景图的重复与否》。这次我们来了解一下设置背景图大小的方法，有需要的可以参考参考。当我们想让我们手中的背景图将整个画面都占住的时候，应该怎么去做呢？来看一下小栗子吧。12345678910111213141516171819202122232425<style> div{ background-image:
css
css如何设置指定网格的大小和位置
上一篇文章中我们了解了定义网格线大小的方法，请看《css如何定义网格线大小》。这次我们来了解一下设置指定网格的大小和位置的方法，有需要的可以参考参考。之前我们去了一个如何去定义网格线的大小，这次来点不一样的。我们来看看一个小栗子。12345678910111213141516171819202122232425262728293031<style> article {
HTML5实践-使用CSS实现弹性视频的代码分享
当我编码Elemin Theme（我最近设计的一个响应式的站点）的时候，我遇到的一个跳帧就是，如何能让嵌入式的视频在尺寸变化上变得更加灵活。使用max-width:100% 和height:auto可以让html5的video标签很好的工作，但是这个解决方案不适用于iframe 或者 object标签的内嵌代码。通过几小时的寻找资料和实验，我最终找到了解决办法。当你在进行响应式设计的时候，这一css技巧能派上用场。你可以访问最终demo地址，缩放你的浏览器查看效果。 灵活的html5 video标签（d
HTML5实践-使用css装饰图片画廊的代码分享（二）
在上一讲中，我们的解决方案使用到了jquery去创建一个span标签。在这一讲中我们将用一种更好的解决方式，使用:before 和 :after 伪类。:before经常会用到，他可以用来添加额外的元素。 HTML 下面是一个ul列表代表的图片画廊。12345678910<ul class="gallery clip"> <li> <img src="h
HTML5实践-使用css装饰图片画廊的代码分享（一）
本节课我们将介绍，如何使用css在不修改图片源的前提下装饰你的图片画廊。这里用到的技巧也很简单，就是在图片之前创建一个<span>，并在span上使用background-image生成一个遮罩的效果。这种方式既简单又灵活，demo中介绍了20多种样式，大家可以参看。 这种css技巧带来的好处节约时间 ― 你不需要在photoshop中创建图片模板，然后为每张图片生成独立文件。保留原始图片
HTML5实践-使用css制作时间ICON的具体详解（图）
最近我在重新设计自己的博客站点，决定用一个日历样式的icon显示时间。以前的解决方案一般是用背景图片，感谢css3，现在我们用css3就能实现这样的功能。我将会用到一些linear-gradients, border radius 和 box shadow这些属性来代替以前的photoshop设计。 photoshop 概念图 很多设计者采用直接在浏览器上设计的方式，但是我还是更喜欢先做photoshop的概念图的方式。虽然现在很多效果可以直接用css实现，但是用photoshop设计效果的方式比不断
创建漂亮的 CSS 按钮的 10 个代码片段
如果你正在寻找一些高质量的 CSS 按钮的示例，那么这篇文章一定是你的“菜”。在本文中，我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集，并附有它们的代码片段，方便你将它们应用在你的 Web 项目上。网页设计师已经不必再依赖 Photoshop 制作酷炫的按钮了。通过使用 CSS3，你可以实现背景的渐变、阴影以及光泽/闪亮的效果。1. Plastic Buttons这组按钮相当的简洁、干净。由于它们拥有不同的颜色、尺寸以及风格，并提供了小、中、大号按钮供你任意挑选。所以，你可以轻松地重新
在线演示一个全屏切换效果实例
在线演示： DEMODEMO中及以下代码并没有写兼容代码，请使用高级浏览器打开，IE版本对CSS3支持并不太友好，IE11打开没有滚屏效果。兼容代码前缀：-webkit--moz--o--ms- 直接上代码：12345678910<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>pag