CSS3及HTML5折腾记
关注
分享
扫一扫
文章平均质量分 55
分享CSS3的特性,折腾HTML5的特性;
crper
对设计、交互、产品都有自己的见解和追求;更多关于我:https://www.yuque.com/crper/blog/about_me
展开
-
CSS3：说说CSS上的第一个变量currentColor,及扯扯inherit
currentColor – 这货说是CSS3的一个特性，但是用变量来说会更好理解；兼容性[IE9+ 及主流的FF,chrome ]。但是IE10及edge有一些BUG（用于渐变的时候会不生效）原创 2016-10-10 00:25:37 · 3882 阅读 · 0 评论 -
CSS3: 画围棋及棋盘
渐变的灵活运结合其他一些CSS3的特性的运用画出的简易版围棋原创 2016-09-26 23:57:37 · 4819 阅读 · 2 评论 -
CSS3：实现非常非常简易版的刮刮乐
心血来潮搞了个非常非常简易版本的刮刮乐；原创 2016-09-23 02:46:31 · 5840 阅读 · 5 评论 -
CSS3:实现一个循序渐进的下划线和一个Material波纹按钮
两个效果，一个是从无到有循序渐进的下划线效果；一个是谷歌扁平化按钮点击填充效果--简单粗暴易上手原创 2016-08-24 00:16:53 · 2847 阅读 · 1 评论 -
CSS3实现一个小风车
用CSS3实现了一个小风车的效果。。。转转转，挺简单[NO JS ,NO CANVAS & SVG]。。原创 2016-08-08 19:11:23 · 5298 阅读 · 0 评论 -
CSS3模拟IOS滑动开关
H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..原创 2016-07-26 16:15:06 · 4121 阅读 · 4 评论 -
CSS3: animation实现简易幻灯片效果(轮播)
前言CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)原创 2016-05-12 15:01:26 · 16243 阅读 · 1 评论 -
CSS3: calc计算属性
前言正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；标准的写法： .class{ /* area: expression; */ width:calc(); padding:calc(); margin-top:calc(); ... }兼容性基本理论cal原创 2016-04-30 11:23:01 · 26768 阅读 · 1 评论 -
CSS3边框圆角实现
语法border-radius:length|percentage {1,4}length : 用长度值设置对象的圆角半径长度。不允许负值percentage : 用百分比设置对象的圆角半径长度。不允许负值{1,4}是说该属性支持1~4参数值;参数解释一个参数: 所有半径相等,顺时针,自左上角到左下角两个参数:对角相等.第一个参数:左上角=右下角;第二个参数:右上角=左下角三个参数原创 2015-05-15 19:12:27 · 4705 阅读 · 0 评论 -
笔记-CSS3实现3D搜索输入框
题外话今天拜读了大漠的<<图解CSS3>>发现里面这个按钮的实例挺赞的,稍微完善了一下原来例子. 去掉一些现在不用的前缀,补全了最终版的.clearfix,还有样式稍作修改~~原版效果图: 预备知识基础布局知识CSS2.1 && CSS3 制作原理(CSS3特性)box-shadow – 盒子阴影 -> 使用多层阴影达到立体效果box-image:linear-gradient ->原创 2015-08-18 17:38:44 · 2719 阅读 · 0 评论 -
纯CSS3实现图片墙
预备知识DIV+CSS基础CSS3的transform 和 transition用法 主要是用了transform的rotate/scale动画过渡的几个参数(transition-property/transition-duration/ transition-timing-function)CSS3的box-shadow..这里只用到外阴影 值得一提的:更多属性的参数要查询css手册原创 2015-06-02 16:38:00 · 4325 阅读 · 0 评论 -
CSS3实现曲线阴影和翘边阴影
预备知识DIV+CSS基础圆角:border-radius2D变幻:transform:skew && rotate伪类::before 和 :after代码HTML结构代码很简单,CSS内含注释,图片小伙伴们自己替换哈!HTML<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>CSS3实现曲原创 2015-05-25 23:51:31 · 4766 阅读 · 0 评论 -
CSS3:box-sizing:不再为盒子模型而烦恼
题外话:W3C奉行的标准,就是content-box,就是需要计算边框,填充还有内容的;但是就我个人而言, 比较喜欢的是传统IE6时候的怪异模式,不用考虑容器是否会被撑开(打乱布局);盒子模型差异盒子大小计算原理W3C标准盒子 = (边框 + 填充 + 内容块大小) ,牵一发而动全身; 传统IE6盒子 = 整体宽高(边框,填充和边距随盒子大小而调整变化)若是计算占用位置,两中盒子都要算上ma原创 2015-08-19 18:22:48 · 4806 阅读 · 0 评论 -
HTML5基础知识汇总_(1)标签结构上的整改
题记目前对HTML5所有特性(PC浏览器)支持较为完善的有:EDGE/FF40/Chrome42/Safari8基本支持的加上: IE10+部分支持的:IE9个别标签支持的:IE8(依赖JS)其中新增了一些结构上的标签来替代传统的DIV+CLASS(ID)结构上增加的标签header此标签可以替代传统的<div id="header"></div> nav同上,作用于导航栏(一般放进hea原创 2015-08-24 00:28:26 · 2210 阅读 · 0 评论 -
CSS3 keyframes 实战：简易的循环弹跳动画
题外话keyframes的小练习…相信对刚掌握了keyframes理论知识的有些帮助; 百看不如一练,动手吧~~注意: 建议用chrome或者chromium内核的浏览器进行浏览器,Firefox也行基础理论keyframes是CSS3才引进的 .. 使用方法是前面@keyframes Demo , Demo是自定义动画名字仅支持百分比为进度条和form-to!!!!两者可以混用animat原创 2015-09-08 00:01:46 · 5045 阅读 · 0 评论 -
HTML5基础知识汇总_(2)自定义属性及表单新特性
自定义属性data-*说起这个属性,其实现在很常见了;怎么说呢,因为在一些框架都能看到他的身影!!! 比如Jquery mobile,里面非常频繁的使用了这个属性;这个属性是哪里来的….当然是跟随最新的H5一起出来的….. 兼容性在PC端只能呢说一般般(目前.比较老式浏览器居多),,手机端支持还是比较OK的;虽说是自定义属性,但是还是有一定的规格的,,比如前缀必须是data-[自定义属性];比如原创 2015-08-25 08:06:57 · 2807 阅读 · 0 评论 -
CSS3 transition 实战Demo
基础理论transition 有五个属性： property : 属性 ， 可以指定哪个CSS属性进行过渡，也能使用all全部属性生效duration ： 持续时间timing-function： 过渡函数，有linear（匀速），ease-in（渐现）,ease-out（渐隐） ,ease-in-out（渐显渐隐）等。。。 delay ： 是延迟 ，就是开始执行前等待的时间综合写法：t原创 2015-09-08 12:47:24 · 2661 阅读 · 0 评论 -
CSS3实现精美的纸张折角效果 -- 进阶版
改变的要素昨天那个CSS3实现折角,需要到纯色背景下才能比较完美,今天就遇到问题了…背景是渐变的;所以改良一下;适用于任何背景,控制::before和::after两个案例,第一个是适用于任何背景的,第二个增加了动画效果效果图代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS原创 2015-10-28 21:37:05 · 4184 阅读 · 0 评论 -
CSS3打造磨砂玻璃的背景
简介这个效果是在看<>这书上看到的,感觉很不错; 实现原理也挺简单的;效果图及实现效果图代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /**原创 2016-01-05 15:17:50 · 18546 阅读 · 0 评论 -
CSS3: background新增特性详解
CSS3的背景新增了几个特性,这篇文章就是扯扯这些;原创 2016-04-13 18:28:41 · 6263 阅读 · 0 评论 -
CSS3: 线性渐变用法详解
花样展示CSS3实现渐变效果~~~原创 2016-04-14 15:30:10 · 13394 阅读 · 2 评论 -
CSS3 : 伪元素 ::before 和 ::after的用法介绍
前言 单冒号写法兼容性比较强[可支持解析的浏览器较多],双冒号的写法只支持较新的主流浏览器; W3C的解释用一句话概括：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。原创 2016-04-21 14:43:33 · 25973 阅读 · 0 评论 -
HTML5属性data-*的操作
HTML5 自定义属性data-*的操作技巧汇总原创 2016-04-25 18:52:08 · 8032 阅读 · 0 评论