title: 背景与边框 date: 2016-10-16 tags: CSS Secrets 0x00 半透明边框 背景知识 RGBA/HSLA 颜色 在CSS3里我们可以使用RGBA和HSLA两种色彩模式,二者均可以用来在设置颜色的同时指定其它透明度。RGBA指的是“红色、绿色、蓝色和Alpha透明度”,而HSLA则代表“色调、饱和度、亮度和Alpha透明度”。 在RGBA模式里,前三个参数分

css  

介绍:Leaflet是一个开源的JavaScript库,对移动端友好且对地图有很好的交互性。 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点。 Leaflet设计的非常简单易懂, 同时具有很好的性能和易用性。 它在桌面端和移动端都工作的相当高效,并有大量的插件用于扩张Leaflet的功能。 微信公众号:673399718嘻嘻 demo图如下: 使用leaflet.js生成世界地图非常方

javascript   css   html   jquery   js插件  

Canvas基础

title: Canvas基础 date: 2016-11-09 tags: HTML5 0x00 Canvas 使用 Canvas 元素必须为其设置宽度和高度属性,指定可以绘制区域的大小。如果不添加任何样式或者不绘制任何图形,那么是看不到该元素的。 但是若是通过 CSS 样式来为其设置宽高属性的话,如果 CSS 的尺寸与 canvas 初始比例(canvas 默认初始宽度 300 px 高度 1

html   css   javascript  

近期调页面时有几个 font-weight 需要修改,无论怎么调整字体粗细都没有变化,深入研究后总结下文 初探 本地写个例子,代码如下 <p class="thin">This is a paragraph</p> <p class="normal">This is a paragraph</p> <p class="thick">This is a paragraph</p> p { fon

css  

由OpenDigg 出品的前端开源项目周报第一期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开发方面的开源项目,方便前端开发人员便捷的找到自己需要的项目工具等。 blueprint React UI Web工具套件 webpack-bundle-analyzer 将内容束展示为方便交互的树状图 nuxt.js 用于服务器渲染Vue app的最小化框架 react-form

html   css   javascript   vue.js  

今天是2016.12.13是南京大屠杀公祭日。不少相关站点都将网站全部变为灰色,以表示哀悼。 为了更多的小伙伴可以达成这种效果,在哀悼日可以表达一份哀悼。我们今天也来给出相关方法。 看下腾讯大苏网 这种效果是用纯CSS来实现的。 filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%

前端   html5   css  

在十一月份的前端技术列表中,我们整合了一些令人感到惊叹的 GitHub 项目,其中包含了新的 CSS 框架、node.js包管理器,以及用于实现图标、加载效果、工具提示的纯 CSS 解决方案。 那么,让我们一起来看看吧。Have Fun ! 1. Wing Wing 是一个微型(压缩后仅有4KB)响应式的 CSS 框架,它提供了一个 12 列响应式网格以及基础的样式组件集,可为你的建站工作打下坚实

javascript   css  

做前端这一年多来,其实一直都是偏向于js前后端,css什么的总是抱着够用就好的心态,从来没有系统的学习或总结过,结果现在的水平也一直停留在够用的阶段。感觉作为一名合格的前端工程师,不能让css成为自己的短板,于是简单的总结一下,高手绕路。 水平居中 我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的。 这里我们又得分两种情况:行内元素 还是 块状元素 ,

css  

title: 结构与布局 date: 2016-12-11 tags: CSS Secrets 0x00 min-content 宽度自适应 CSS3 新增宽度属性值 width:min-content 可以将容器的宽度值设置为容器内最大的不可断行的宽度(最宽的单词,图片,或者具有固定宽度的盒元素) figure{ width:min-content; margin: auto;

html   css   javascript  

前言 Google Material Design花了很大篇幅介绍了优雅自然的动画应该具备哪些特性。不仅仅是视觉上的观感,还能帮助提高用户界面的可用性,提升用户体验。官方文档讲的很细致,有很多典型视频示例,可惜缺少代码示例。接下来,用打开一个material surface动画的例子,来说说本人对material motion的认识。 一个最简单的打开动画,可能涉及移动和放大。在Material的

动画   css3   css  
1 2 3 4 5 6 7 8 9