css3 | 易学教程

CSS3美化图片

阅读更多关于 CSS3美化图片

有关于美化图片的教程，W3cplus有好几篇了，比如说《 CSS3制作图片样式》、《 jQuery和CSS3给图片制作圆角》这两篇是针对于美化图片圆角效果的教程，昨天在《 CSS美化图片》一文中介了使用标签给图片设置朦板效果。《 CSS美化图片》制作原理是通过给元素添加一个额外的标签，比如说“span”标签，或者能过jQuery的append函数给元素添加标签，在把将此标签运用朦板背景图片定位在图片元素之上，达到美化图片的效果。今天要和大家分享一种新的方法，基于《 CSS美化图片》介绍的理论之上，把里面的“span”标签去掉，同时使用CSS3中的伪元素“::before”和“::after”或者CSS3的伪类选择器“:before”和“:after”来代替增加的标签“span”，接着将运用在span上的样式转架嫁到伪元素或者伪类选择器上。下面我们一起来学习一下这种制作方法与CSS方法有何不一样？ DEMO DOWNLOAD HTML结构的变化首先来简单的回忆一下《 CSS美化图片》介绍的结构，如图所示：那么今天要介绍的方法，关键之处是不需要这个额外增加的“span”标准，此时结构就改成了： <div class="photo"> <a href=""> <img src="xxx.jpg" alt="" /> </a> </div> “span”标签去掉了

css3学习-border-radius

阅读更多关于 css3学习-border-radius

<!doctype html> <html> <head> <meta charset="utf-8"> <title>border-radius</title> <style type="text/css"> div.circle{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ } /*任务部分*/ div.semi-circle{ height:100px; width:50px; background:#9da; border-radius:50px 0px 0px 50px; } </style> </head> <body> <div class="circle"> </div> <br/>  <div class="semi-circle"> </div> </body> </html> 来源： oschina 链接： https://my.oschina.net/u/2700801/blog/701562

CSS3基础效果

阅读更多关于 CSS3基础效果

1.表单与背景的层次分开，关键知识点：rgba。就像这样：登陆关键css代码： body{ background: url(img.jpg) no-repeat bottom center; } form{ background: rgba(0,0,0,0.2); } 2.设置透明度，opacity与rgba的区别关键css代码： .div1{ background-color:rgb(0,0,0); opacity: 0.5; color: #000000; } .div2{ background-color: rgba(0,0,0,0.5); color: #000000; } 效果：上图中的div1中是文本选中状态，不然根本看不见。所以opacity是设置选中元素及其子元素的不透明值，而rgba只设置选中元素。 3.圆角关键css代码： div{ -moz-border-radius: 25px; border-radius:25px; } 4.投影关键css代码： .div1{ background-color: rgb(72,72,72); -webkit-box-shadow: 2px 2px 0 0 rgba(72,72,72,1); -moz-box-shadow:2px 2px 0 0 rgba(72,72,72,1); box-shadow:

css动画简单的记录

阅读更多关于 css动画简单的记录

1.transiton 指定状态变化所需要的时间 .div{width:20px; transtion:2s} .div:hover{width:200px;} 鼠标经过可以看到,2秒内宽度变成200px 可以指定特定属性有这个样式 img{width:20px;height:20px; transition:1s height} img:hover{height:200px;} 高度在1秒内过度改变。 transition有四个属性 transition-property:应用过渡的 CSS 属性的名称。 transiton-duration:应用维持的时间 transition-delay：效果何时开始 transition-timing-function ：规定效果的运动曲线 transition的使用注意（1）目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。（2）不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。（3）transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态

CSS3输出PDF打印的小技巧

阅读更多关于 CSS3输出PDF打印的小技巧

3 月，跳不动了？>>> 前文再续，书接上一回，自从《 PHP输出PDF打印HTML5+CSS3打印格式控制》之后，实现了用HTML5+CSS3直接输出成PDF文件，以满足各种奇葩的打印格式需求。这个的确给调试打印打来了各种便利，不过随着深入使用，也碰到一些个小问题。 Linux系统没有中文字体其实这个是前文忘记交代的问题。把系统部署到Linux的时候就发生了，不过这个问题其实比较好解决，直接在服务器安装文泉驿的开源中文字体即可。ubunutu服务器直接： apt-get install ttf-wqy-zenhei 在打印CSS中，修改如下： @page { size: A4; margin: 12mm 10mm; padding: 0; font-family: "Wenquanyi Micro Hei", "Microsoft YaHei", Simsun, sans-serif; font-size: 10pt; } 对，加个字体生命即可，是不是很简单呢？ Prince 和 wkhtmltopdf 这两个引擎，从本质上说，就是一个浏览器引擎，当然他们有比较特殊的渲染机制，尤其是实现CSS3标准的特性，并且他们可以将结果输出到PDF文件流。为啥要引入这个东东呢，主要的问题在于，目前主流的浏览器，在对打印部分的CSS3标准支持的还很有限

object-fit和object-position

阅读更多关于 object-fit和object-position

3 月，跳不动了？>>> object-fit和object-position是我最近最喜欢的两个CSS属性。他们使开发人员可以操作img或video中的内容，类似于我们可以用background-position和background-size操作背景内容一样。首先，让我们深入探讨一下object-fit 该属性定义一个元素，如img，如何适应容器的宽度和高度。我们可以用object-fit告诉内容以各种方式填充容器，如“保存该长宽比！” 或“向上伸展，尽可能多的占用空间！” 这里有一个案例: 这张图片的大小为400px x 260px。如果我们这样给图片设置样式... img { width: 200px;height: 300px;} ...最后图片失真，因为图片为了适应容器已经被压扁。当我们改变了img的高度和宽度时，img的内容将占用我们所创建容器的所有可用空间，从而破坏了之前创建的的长宽比。为了保持图像的长宽比，同时也可以填充空间，我们可以使用object-fit： .cover { object-fit: cover;} 左侧是我们原始的图像，右侧图像已裁剪原图像的两侧以保持我们现在的长宽比！这看起来没什么特别之处，但一旦进入到缩放设计，那么object-fit就立马彰显其真正的威力。让我们看另外一个案例: 在这里，我们有两个图像

自定义浏览器滚动条的样式

阅读更多关于自定义浏览器滚动条的样式

某厂面试归来，发现自己落伍了！>>> 前段时间，到网上找素材时，看到了一个很个性的滚动条式，打开Chrome的调试工具看了一下，发现不是用JavaScript来模拟实现的，觉得有必要折腾一下。于是在各大浏览器中对比了一下，发现只用Chrome适用，也就是说这个用的是Chrome的私有CSS属性。便百之谷之后，发现原来不仅仅只用Chrome，其它的浏览器在不同程度上支持自定义滚动条样式的。下面是我不断测试的结果，若有错误或不全，请在评论里面给出，我会立马更正；若有更好的方案，你可以留言，让大家都开开眼界。。。。。。自定义IE浏览器滚动条样式追溯浏览器对滚动条的自定义，恐怕最早的就是IE浏览器了（好像最开始支持的版本是IE5.5）。下面列出了多个版本的支持性况：滚动条样式支持情况支持浏览器版本可否继承描述 scrollbar-3dlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头左上边缘的颜色 scrollbar-highlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头左上边缘的颜色 scrollbar-face-color IE特有属性 IE5.5+ y 设置滚动框和滚动条箭头的颜色 scrollbar-arrow-color IE特有属性 IE5.5+ y 设置滚动条箭头的颜色 scrollbar

Phaser.js-开发愤怒的小鸟(上)

阅读更多关于 Phaser.js-开发愤怒的小鸟(上)

切入正题，想必大家之前都了解过Phaser.js，PS：不了解的可以在官网进去 http://www.bootcdn.cn/phaser/readme/ 看一下就可以，在开发前要事先去官网把需要的框架组件下载下来，这个游戏写完的下载地址 : http://git.oschina.net/8946a/bird_-jumping 好废话少说下面看干货首先我们先要引用框架，没错就像这样 <script type="text/javascript" src="phaser.min.js"></script> 就像大家所了解的那样接下来我们创建一个DIV 用来放置动画的 “场景” <div id="game_div"></div> 好了，光做完这些还不行，这只是刚刚开始，我们在加一些CSS的东西，让他看起来更加的漂亮 #game_div, p { width: 400px; margin: auto; margin-top: 20px; } OK，一起准备工作都完成了就像现在这样是不是有些迫不及待的进行开发了，废话少说，带大家一起开始进行JS部分的绘制  首先我们要创建游戏的宽高，没错就是这样 var game = new Phaser.Game(400,490,Phaser.AUTO,'game_div'); var game_state = {};

CSS3 响应式布局 @media

阅读更多关于 CSS3 响应式布局 @media

定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面， @media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。浏览器支持表格中的数字表示支持 @media 规则的第一个浏览器的版本号。 CSS 语法 [@media](http://my.oschina.net/u/1447355) mediatype and|not|only (media feature) { CSS-Code; } 你也可以针对不同的媒体使用不同 stylesheets : <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"> 媒体类型(mediatype) 值描述 all 用于所有设备 aural 已废弃。用于语音和声音合成器 braille 已废弃。应用于盲文触摸式反馈设备 embossed 已废弃。用于打印的盲人印刷设备 handheld 已废弃。用于掌上设备或更小的装置，如PDA和小型电话 print 用于打印机和打印预览 projection 已废弃。用于投影设备 screen 用于电脑屏幕

Css3媒体查询使用

阅读更多关于 Css3媒体查询使用

css3媒体查询技术的出现，在多设备支持上为我们提供了解决方案。媒体查询的使用方法： @media screen and (max-width: 480px) { .col-xs-1{width: 8.333333333333332%; float:left;} .col-xs-2{ width: 16.666666666666664%; float:left;} .col-xs-3{ width: 25%; float:left;} } 在设备窗口宽度小于480时，下面的样式会被采用，不满足这个查询设置，下面定义的css是无效的，html根本就不会识别到。简单理解就是，如果当前宽度是1000，那么就是div上有类名.col-xs-1，div还是只是简单块元素（不会浮动和宽为百分比），查询的设置是不起作用的。充分利用媒体查询，实现多设备支持的框架当前最热门就是bootstrap了，我们可以学习和使用它进行开发。下面是我自己利用媒体查询写的实例页面，都是常用css布局方式配合了媒体查询，多的就不做解释了，一句话就是写法都是css里面，看看就能懂： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>media/媒体查询/简易UI</title>  <meta name="viewport

订阅 css3