随笔分类 -  css3+html5

CSS3动画帧数科学计算法http://tid.tenpay.com/?p=5983
摘要：总结都浓缩在这个工具里了，想知道工具的地址或想窥探工具诞生的趣事请往下看 。—————————————————————– 华丽丽的开篇 —————————————————————-本篇文章来自腾讯内部饭卡充值改版项目的CSS3动画经验总结。虽然你们访问不到我们的饭卡站点，不过可以小窥一下我们的... 阅读全文
posted @ 2015-05-08 17:40 小精灵YY 阅读(385) 评论(0) 推荐(0)
【HTML5】3D立方体旋转
摘要：http://www.787866.com/2083.html 要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需要注意的地方，这里把我学习的方法，过程分享给大家。再讲知识点之前，还是... 阅读全文
posted @ 2015-04-09 17:32 小精灵YY 阅读(529) 评论(0) 推荐(0)
详解calc()函数功能
摘要：calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是box-sizing，但跟我说还可以计算，这让我不得不想起cal... 阅读全文
posted @ 2015-03-30 16:17 小精灵YY 阅读(1920) 评论(0) 推荐(0)
CSS Overlay技巧
摘要：创建遮照图有几种技术：从使用绝对定位的元素到outline和伪元素。在本文中，我们将探索每个技术的实现样式以及他们之间的利与弊。设计模式通常是一组最佳实践和技术，主要目的是用来解决一些最常见的设计“问题”，通常是在上下文中提出的设计原则。这些原则之是一“停留在页面”的原则。这一原则是建立在页面刷新都... 阅读全文
posted @ 2015-03-27 11:45 小精灵YY 阅读(1155) 评论(0) 推荐(0)
CSS3 Transform——transform-origin（转）
摘要：在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观——旋转或缩放？多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaScript才能完成。不过，CSS3将要改变... 阅读全文
posted @ 2015-03-27 11:39 小精灵YY 阅读(680) 评论(0) 推荐(0)
Transform-style和Perspective属性
摘要：作者原文地址：http://www.w3cplus.com/css3/transform-basic-property.html在《CSS3 Transform——transform-origin》一文中主要介绍了CSS3 Transform属性中的transform-origin属性的使用，其实在... 阅读全文
posted @ 2015-03-27 11:36 小精灵YY 阅读(544) 评论(0) 推荐(0)
CSS3伪类：valid、invalid、required
摘要：过去验证表单会通过js和正则去判断填写的内容是否正确，如email的验证。HTML5的出现为我们提供一些属性，不用编写js和正则即可解决这个检验表单内容。:required必须，那input不能为空的意思。:valid有效，即当填写的内容符合要求的时候触发。:invalid无效，即当填写的内容不符合... 阅读全文
posted @ 2015-01-29 15:15 小精灵YY 阅读(1150) 评论(0) 推荐(0)
利用css样式画各种图形--初步、进阶、高级（一）
摘要：转文请注明：穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html 利用css画图形，是个有利有弊的写法，好处是不用画图，且节省了一些流量，坏处是要写长串的css样式，而且有可能流量并没有减少，用与否视情况而定，个人选择。 ... 阅读全文
posted @ 2014-12-26 17:28 小精灵YY 阅读(469) 评论(0) 推荐(0)
10个最常见的 HTML5 面试题及答案
摘要：这是选择了10个HTML5面试问题并给出了答案。这是Web 开发人员最常见的面试问题，相信你掌握了这些重要的面试问题后一定会觉得你的理解提高了。一起来看看吧。1、新的 HTML5 文档类型和字符集是？HTML5 文档类型很简单：1HTML5 使用 UTF-8 编码示例：12、HTML5 中如何嵌... 阅读全文
posted @ 2014-12-26 17:14 小精灵YY 阅读(1063) 评论(0) 推荐(0)
<转>CSS3 Media Queries 实现响应式设计
摘要：在 CSS2 中，你可以为不同的媒介设备（如屏幕、打印机）指定专用的样式表，而现在借助 CSS3 的 Media Queries 特性，可以更为有效的实现这个功能。你可以为媒介类型添加某些条件，检测设备并采用不同的样式表。 例如，你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式... 阅读全文
posted @ 2014-07-04 15:36 小精灵YY 阅读(152) 评论(0) 推荐(0)
css3的display:box研究
摘要：针对移动端webkit开发，网上提倡的观点是放弃float.用css3的-webkit-box来实现水平布局。那么就要用到display:box;和box-flex属性他俩是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、... 阅读全文
posted @ 2014-07-04 12:06 小精灵YY 阅读(1876) 评论(0) 推荐(0)
CSS3制作渐变文字
摘要：CSS3制作渐变文字（-webkit-mask-image 与 -webkit-background-clip） 今天去css-tricks无意间发现了标题运用渐变文字这一效果，这使的想起了webkit内核浏览器的一些私有属性。而实现渐变文字这一特效可以借助webkit浏览器的两个私有属性-... 阅读全文
posted @ 2014-07-02 15:59 小精灵YY 阅读(636) 评论(0) 推荐(0)
（转）apple-touch-icon-precomposed 和 apple-touch-icon属性区别
摘要：苹果safari浏览器当中apple-touch-icon-precomposed 和 apple-touch-icon属性是有区别的，之前在网上查了下相关的资料和苹果的开发文档手册，对这两中属性区别说的不够详细，导致现在大家开发的时候有些混淆。 苹果safari浏览器定义的这两种属性是为了苹果... 阅读全文
posted @ 2014-07-01 11:16 小精灵YY 阅读(321) 评论(0) 推荐(0)
（转）移动平台的meta标签
摘要：对于桌面平台web布局中大家对meta标签再熟悉不过了，它永远位于 head 元素内部，对做SEO的朋友一定对meta有种特殊的感情吧，今天我们就来说说移动平台的meta标签，在移动平台meta标签究竟有哪些神奇的功效呢？ 1、Meta 之 viewport 说到移动平台meta标签，那就不得不... 阅读全文
posted @ 2014-07-01 11:10 小精灵YY 阅读(267) 评论(0) 推荐(0)