Drop Shadow

【 Distance Field Technique 】 　　一种小纹理高清放大的技术。 　　 　　　　A distance field is generated from a high resolution image, and then stored into a channel of a lower-resolution texture. which has been previously used to develop games such as the Half- Life 2 series, Counter-Strike: Source and Day of Defeat: Source. 　　　　In the simplest case, this texture can then be rendered simply by using the alpha-testing and alpha-thresholding feature of modern GPUs. 　　　　The distance function stored in an 8-bit channel. By doing so, we are able to take advantage of the native bilinear texture interpolation. 　　　　Once

前言 前几天，我接到了一个项目，模块中要写一个卡券效果，当时没有图片，也就是要用css来实现，当时我是懵逼的，也没有写过这样的，一时间不知道怎么写，毕竟要写的像UI设计的一样美观。我就只好求救我的大神级别的同事了。不仅css玩的溜，人家JavaScript玩的更溜，阁下实在是佩服。 常见的卡券样式如下： 同事二话没说，直接给我写了一种，那真的是快如闪电就给我实现了一个。是用伪元素实现的 使用伪元素实现（Less 版本） ticket.less .ordinary-mixins-ticket-horizontal(@width,@height,@r,@top, @color) { position : relative ; box-sizing : border-box ; padding : 0 @r ; width : @width ; height : @height ; background-clip : content-box ; background-color : @color ; ​ & : :before { position: absolute ; top : 0 ; left : 0 ; content : "" ; display : block ; width : @r + 1px ; height : 100% ; background : radial

一:相关类和方法 1: javafx.scene.layout.Priority，一个枚举类,用于确定给定节点的增长（或缩小）优先级。比如:一个HBox布局，里面有三个控件，当屏幕宽度是800时，刚好把屏幕占满，但是当屏幕扩大到1200时，这个Priority规定了这三个控件如何处理增加的400宽度。共有三个取值： ALWAYS：布局区域将始终尝试增长（或缩小），共享那些空间; SOMETIMES:如果没有控件设置为ALWAYS，或者其它控件没有处理完变化的控件，设置为SOMETIMES的控件将和其它控件分享这些区域。 NEVER:控件不会参与处理变化的空间。 2. HBox.setHgrow(Node child, Priority value),HBox.getHgrow(Node child); VBox.setVgrow(Node child, Priority value),VBox.getVgrow(Node child); 3. 注意事项 如果HBox里面所有的控件都设置成ALWAYS，那么这些控件需要设置maxWidth="Infinity"，否则会不起作用。 二:实例 1. main.xml <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.text.*?> <?import javafx

JavaFX初探（菜单） 本节我们介绍如何创建菜单、菜单栏、增加菜单项、为菜单分类，创建子菜单、设置菜单上下文。你可以使用下面的类来创建菜单。 MenuBar MenuItem Menu CheckMenuItem RadioMenuItem CustomMenuItem SeparatorMenuItem ContextMenu 下图是一个典型的菜单的使用： 在应用中构建菜单 一个菜单就是一系列可操作的项目，可以根据用户的需要来表现。当一个菜单可见的时候，用户可以在某一时刻选中其中一个，在用户选中某一项时，这个菜单变成隐藏模式。通过使用菜单，我们可以节省用户界面的空间，因为有一些功能某些时间并不是总要现实出来的。 菜单在菜单栏中被分组，你需要使用下面的菜单项类，当你构建一个菜单的时候。 MenuItem 创建可选项 Menu 创建子菜单 RadioButtonItem 创建一个单选项 CheckMenuItem 这个菜单项可以在选择被无选择之间转换。 为了给菜单分类，可以使用SeparatorMenuItem 类。 菜单通常在窗口的顶部，并且这些菜单是隐藏的，我们可以通过鼠标点击上下文来打开菜单。 创建菜单栏 尽管菜单栏可以放在用户界面的任何地方，但是一般情况我们放到窗口的顶部。并且菜单栏可已自动的改变自己的大小。默认情况下，每一个菜单栏中的菜单像一个按钮一样呈现出来。

　　WPF提供了可应用于任何元素的可视化效果。效果的目标是提供一种简单的声明式方法，从而改进文本、图像、按钮以及其他控件的外观。不是编写自己的绘图代码，而是使用某个继承自Effect的类(位于System.Windows.Media.Effects名称空间中)以立即获得诸如模糊、辉光以及阴影等效果。 　　下表列出了可供使用的的效果类： 表 效果类 　　勿将上表列出的Effect类的派生类和位图效果类相混淆，位图效果派生类自BitmapEffect类，该类和Effect类位于相同的名称空间中。尽管位图效果具有类似的编程模型，但他们存在价格严重的局限性： 　　位图效果不支持像素着色器，像素着色器是创建可重用效果的最强大、最灵活的方式。 　　位图效果是用非托管的代码实现的，从而需要完全信任的应用程序。所以，在基于浏览器的XBAP应用程序中不能使用位图效果。 　　位图效果总使用软件进行渲染，不使用显卡资源。这使得它们的速度较慢，当处理大量元素或具有较大可视化表面的元素时尤其如此。 　　BitmapEffect类是在WPF的第一个版本中引入的，该版本没有提供Effect类。为了向后兼容，仍保留了位图效果。 　　接下里的几节深入分析效果模型，并演示上三个继承自Effect的类：BlurEffect、DropShadowEffect以及ShaderEffect。 一、BlurEffect类 　

　　WPF提供了可应用于任何元素的可视化效果。效果的目标是提供一种简单的声明式方法，从而改进文本、图像、按钮以及其他控件的外观。不是编写自己的绘图代码，而是使用某个继承自Effect的类(位于System.Windows.Media.Effects名称空间中)以立即获得诸如模糊、辉光以及阴影等效果。 　　下表列出了可供使用的的效果类： 表 效果类 　　勿将上表列出的Effect类的派生类和位图效果类相混淆，位图效果派生类自BitmapEffect类，该类和Effect类位于相同的名称空间中。尽管位图效果具有类似的编程模型，但他们存在价格严重的局限性： 　　位图效果不支持像素着色器，像素着色器是创建可重用效果的最强大、最灵活的方式。 　　位图效果是用非托管的代码实现的，从而需要完全信任的应用程序。所以，在基于浏览器的XBAP应用程序中不能使用位图效果。 　　位图效果总使用软件进行渲染，不使用显卡资源。这使得它们的速度较慢，当处理大量元素或具有较大可视化表面的元素时尤其如此。 　　BitmapEffect类是在WPF的第一个版本中引入的，该版本没有提供Effect类。为了向后兼容，仍保留了位图效果。 　　接下里的几节深入分析效果模型，并演示上三个继承自Effect的类：BlurEffect、DropShadowEffect以及ShaderEffect。 一、BlurEffect类 　

正在从事网页设计者或者从事前端的小伙伴们，一定会有想要加阴影的时候吧。 那么阴影会是什么样的表现，以及需要那些参数，你了解的多少呢？ 复制代码 一般要加阴影，就会想到要用 css 的 box-shadow 吧，实际上还有好几种表现方式。暂且不说网页，在逐年变化的设计潮流里，怎么处理阴影也是很重要的一个课题。 就比如说早些时间流行的长投影，以及今年开始流行的 Neumorphism（拟态）什么的。其独特的影子表现手法，也是各显千秋。 ▼ 用 css 制作的 长投影 ，和 拟态 的例子： demo 示例🔗 demo 源码🔗 在这篇文章，将会介绍各种影子的技术手段，以及各个参数。 box-shadow 基础 用 css 添加阴影，最最最最最容易想到的就是 box-shadow 了。 复制代码 复习 box-shadow 参数 首先看一下 box-shadow 的参数。 就算最基本的 box-shadow，也是可以实现的各种效果。 demo 示例🔗 demo 源码🔗 /* 1. 基础的 box-shadow */ .basic1 { box-shadow : 0 10px 25px 0 rgba (0, 0, 0, .5); } /* 2. 使用 inset 添加内阴影。圆也没问题。 */ .basic2 { box-shadow : inset 0 10px 25px 0 rgba (0

最近在修改内网门户的时候，恰好遇到了需要使用滤镜的地方；刚开始用的是两张图片；鼠标滑过背景变成渐变；图标切换；但是后台配置了图标后；导致鼠标滑过图标不能正常切换；于是就想到了滤镜的效果来处理。所以顺便学习了一下常用的滤镜效果。 使用滤镜： 前言 css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，通过css对图像进行处理。 浏览器支持情况：只有IE浏览器不支持filter（滤镜）属性，为了兼容低版本的safari和google浏览器，需要加上前缀-webkit- 。 常用属性 使用语法： filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 复制代码 CSS 滤镜可以给同个元素同时定义多个，例如 filter: contrast(150%) brightness(1.5) ，但是滤镜的先后顺序不同产生的效果也是不一样的； 默认值为： initial inherit 表示从父级继承。 注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。 normal 正常

使用vue 开发地图类系统的注意。 1、使用地图应该创建的对象 少使用 vue 的data 和计算属性(comments)存数据或是vuex。 为什么要要注意这个问题呢？ 答：这个就要了解到vue的实现原理 。 原理参考 ； 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter 使用地图引擎创建的创建的实例往往都是创建的一个对象的 。这个实例的对象往往都是有许多的属性和方法。这个我们使用vue 的数据 存储的 ，那么vue就是把这个的属性全部转换成 getter/setter 。这个内存的就是会增加。 地图的变量我们可以使用局部变量存储。 地图引擎使用的是 openlayers <template> <div ref="mapView" class="map-view"> <!-- 弹窗 --> <div ref="popup" class="ol-popup"> <a @click="popupcloser" class="ol-popup-closer"></a> <div class="ol-popup-content" v-html="popupContent"></div> </div> </div> <

下面这个图形，只使用一个标签，可以有多少种实现方式： 假设我们的单标签是一个 div : 1 < div > div > 定义如下通用 CSS ： 1 2 3 4 5 6 div{ position : relative ; width : 200px ; height : 60px ; background : #ddd ; } 方法一：border 这个应该是最最最容易想到的了 1 2 3 div{ border-left : 5px solid deeppink; } 方 法二：使用伪元素 一个标签，算上 before 与 after 伪元素，其实算是有三个标签，这也是很多单标签作图的基础，本题中，使用伪元素可以轻易完成。 1 2 3 4 5 6 7 8 9 div::after{ content : "" ; width : 5px ; height : 60px ; position : absolute ; top : 0 ; left : 0 ; background :deeppink; } 方 法三：外 box-shadow 盒阴影 box-shadow 大部分人都只是用了生成阴影，其实阴影可以有多重阴影，阴影不可以不虚化，这就需要去了解一下 box-shaodw 的每一个参数具体作用。使用 box-shaodw 解题 1 2 3 div{ box-shadow: