笔记-HTML4&5/CSS2.1&3
关注
分享
扫一扫
文章平均质量分 52
crper
对设计、交互、产品都有自己的见解和追求;更多关于我:https://www.yuque.com/crper/blog/about_me
展开
-
CSS布局基础汇总
CSS基础原创 2015-04-30 23:26:59 · 1577 阅读 · 0 评论 -
CSS3打造磨砂玻璃的背景
简介这个效果是在看<>这书上看到的,感觉很不错; 实现原理也挺简单的;效果图及实现效果图代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /**原创 2016-01-05 15:17:50 · 18546 阅读 · 0 评论 -
CSS绘制常见的几何图形
题外话在写网页的过程,必不可免的会碰到网站需要装饰一些几何图形; 实现的方式无非四种: 1. 图片 2. CSS2.1&3 3. SVG 4. Canvas就我个人而言,对于一些常见的几何图形. - 图片是不推荐的[太占资源,也不利于维护] - CSS是比较推荐的,精简且方便维护 - SVG也是一个很好的选择[学习成本高一点点] - Canvas看原创 2016-02-02 14:48:34 · 4538 阅读 · 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 评论 -
CSS3: calc计算属性
前言正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；标准的写法： .class{ /* area: expression; */ width:calc(); padding:calc(); margin-top:calc(); ... }兼容性基本理论cal原创 2016-04-30 11:23:01 · 26768 阅读 · 1 评论 -
CSS3: animation实现简易幻灯片效果(轮播)
前言CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)原创 2016-05-12 15:01:26 · 16243 阅读 · 1 评论 -
移动端网站爬坑记_(3)DOMReady的实现及微信端reload页面解决方案
问题1 : DOMReady的实现刚好有一个页面是注册成功的,就单单一个成功图片和文字描述和下载按钮. 由于临时需要增加一个倒计时重定向到下载页面 想了想原生有这么个参数就直接拿来用了,兼容性非常不错,移动端基本清一色的绿色, PC端支持也不错.IE9+实现代码 – 很简单的一个事件监听,第三那个参数capture[false为冒泡,true为捕获]documen原创 2016-07-27 17:11:22 · 2695 阅读 · 0 评论 -
CSS3实现一个小风车
用CSS3实现了一个小风车的效果。。。转转转，挺简单[NO JS ,NO CANVAS & SVG]。。原创 2016-08-08 19:11:23 · 5298 阅读 · 0 评论 -
CSS3:实现一个循序渐进的下划线和一个Material波纹按钮
两个效果，一个是从无到有循序渐进的下划线效果；一个是谷歌扁平化按钮点击填充效果--简单粗暴易上手原创 2016-08-24 00:16:53 · 2847 阅读 · 1 评论 -
CSS3：说说CSS上的第一个变量currentColor,及扯扯inherit
currentColor – 这货说是CSS3的一个特性，但是用变量来说会更好理解；兼容性[IE9+ 及主流的FF,chrome ]。但是IE10及edge有一些BUG（用于渐变的时候会不生效）原创 2016-10-10 00:25:37 · 3882 阅读 · 0 评论 -
CSS3：实现非常非常简易版的刮刮乐
心血来潮搞了个非常非常简易版本的刮刮乐；原创 2016-09-23 02:46:31 · 5840 阅读 · 5 评论 -
网页元素居中攻略记_(6)图片水平垂直居中
借助table的特性来实现原创 2016-03-23 18:25:21 · 3926 阅读 · 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实现精美的纸张折角效果
预备知识CSS定位CSS三角实现CSS圆角及伪类,盒子阴影在自己做的项目的某个地方需要用到折角效果,折腾了下就拿出来分享了;原创 2015-10-28 01:21:40 · 8226 阅读 · 1 评论 -
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 评论 -
CSS固定层的效果实现
固定层的作用内容不随页面滚动应用范围一般用于头部导航/底部导航/页面中间导航(京东的宝贝详情页有用到,看图)小伙伴们可以去京东随便打开一个宝贝看看..制作预备知识:DIV+CSS基础Position的四个参数作用,这里主要用到fixed属性Tips:fixed和absolute都是脱离文档流的 区别:absolute会随页面滚动而fixed不会absolute的父级元素若是使用了原创 2015-05-28 12:20:57 · 2475 阅读 · 1 评论 -
纯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 评论 -
Atom编辑器折腾记_(13)JS代码智能提示补全(插件:atom-ternjs)
题外话官方正式版虽然内置了.autocomplete-plus;最为明显的一个功能就是记忆你已经输入过的名称进行匹配; 但是针对于某些语言来说,还是有些不足的….其中JS的补全上就明显不足了…所以需要借助插件来拓展atom-ternjs官方描述: Javascript code intelligence for atom with tern.js. Uses suggestion provi原创 2015-08-17 12:26:45 · 42118 阅读 · 9 评论 -
网页元素居中攻略记_(1)元素水平居中
行内元素水平居中方案行内元素包裹在一个属性display为block的父层元素中，父块text-align:center即可实现代码实现index.html<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>行内元素水平居中</title> <style type="text/css原创 2015-05-29 22:12:54 · 4123 阅读 · 0 评论 -
网页元素居中攻略记_(2)元素垂直居中
单行内元素垂直居中方案 设置行内元素的行高等于父元素的高度或者包裹块的高度即可实现垂直居中,具体看代码效果代码实现index.html<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>单行内元素垂直居中</title> <style> div { wi原创 2015-05-30 14:55:13 · 2832 阅读 · 0 评论 -
网页元素居中攻略记_(3)已知宽高元素水平垂直居中
已知宽高元素水平垂直居中方案使用了position的absolute属来实现,在上篇文章的垂直居中的基础上加上水平居中代码index.html<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>已知宽高元素水平垂直居中</title> <style> #container {原创 2015-05-31 11:04:55 · 2867 阅读 · 1 评论 -
网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中
flex实现子块的完美居中方案父块使用display:flex属性,子块margin自适应即可实现代码index.html<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>块状元素垂直居中(已知高度)</title> <style> *{margin: 0;padding: 0;}原创 2015-05-31 11:47:51 · 3468 阅读 · 1 评论 -
网页元素居中攻略记_(5)未知宽高元素绝对居中
题外话以前,我们要自适应全局居中,需要借助JS或者JQ来实现,现在有了CSS3就可以省去好多功夫了,为什么这么说!! 请看比较:传统的绝对居中 #container{ position:abosolute; top:50%; left:50%; margin-left:-包含块宽度的一半(如 -300px );原创 2015-08-17 11:42:14 · 3325 阅读 · 0 评论 -
笔记-CSS3实现3D搜索输入框
题外话今天拜读了大漠的<<图解CSS3>>发现里面这个按钮的实例挺赞的,稍微完善了一下原来例子. 去掉一些现在不用的前缀,补全了最终版的.clearfix,还有样式稍作修改~~原版效果图: 预备知识基础布局知识CSS2.1 && CSS3 制作原理(CSS3特性)box-shadow – 盒子阴影 -> 使用多层阴影达到立体效果box-image:linear-gradient ->原创 2015-08-18 17:38:44 · 2719 阅读 · 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 评论 -
HTML5基础知识汇总_(2)自定义属性及表单新特性
自定义属性data-*说起这个属性,其实现在很常见了;怎么说呢,因为在一些框架都能看到他的身影!!! 比如Jquery mobile,里面非常频繁的使用了这个属性;这个属性是哪里来的….当然是跟随最新的H5一起出来的….. 兼容性在PC端只能呢说一般般(目前.比较老式浏览器居多),,手机端支持还是比较OK的;虽说是自定义属性,但是还是有一定的规格的,,比如前缀必须是data-[自定义属性];比如原创 2015-08-25 08:06:57 · 2807 阅读 · 0 评论 -
CSS3: 画围棋及棋盘
渐变的灵活运结合其他一些CSS3的特性的运用画出的简易版围棋原创 2016-09-26 23:57:37 · 4819 阅读 · 2 评论