用-webkit-box-reflect制作倒影

background: inherit制作倒影、单行居中两行居左超过两行省略

1.background: inherit;制作倒影方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码. -webkit-box-reflect 这是一个十分新的 CSS 属性,使用起来十分简单,可以从各个方向反射我们内容. box-reflect 有四个方向可以选,below | above | left | right 代表下上左右,更具体的可以看看 MDN . 不过兼容性过于惨淡,基本上是只有 -webkit- 内核的浏…

用-webkit-box-reflect制作倒影

1.只在webkit内核的浏览器上有效果 2.语法: -webkit-box-reflect: <direction> <offset> <mask-box-image> direction: 倒影偏移方向,有above.below.left和right四个值: offset: 倒影偏移原元素边框边缘的距离,单位可为px或者%: mask-box-image: 覆盖倒影的遮罩. 3.下面是demo: <!DOCTYPE html>…

Photoshop制作倒影的两种方法

图片加了倒影,画面立刻变得生动起来.而用PS,制作倒影是如此的方便. 素材1 将素材1导入文档,ctrl+J复制图层,编辑-变换-垂直翻转将翻转的图层拖至下方为翻转的图层添加图层蒙版,选中渐变工具,选择线性渐变在图层蒙版上拖出渐变倒影制作完成.此种方法适合大都数单一的平面物体. 素材2 将素材2导入文档,如以上步骤复制好倒影图层由于素材2有一点的透视效果,因此不能直接利用渐变拖出我们可以分步进行操作.首先以顶点为分界处,先框出右边的矩形选区将中心点移至左上角,这一步的目的是让圆心定位…

CSS3中制作倒影box-reflect

目前仅在Chrome.Safari和Opera浏览器下支持 box-reflect:none | <direction> <offset>? <mask-box-image>? 由于此属性并不是W3C标准属性,在具体使用之时,还是需要添加浏览器的私有属性,根据浏览器的兼容性,使用box-reflect时需要添加-webkit和前缀: -webkit-box-reflect:none | <direction> <offset>? <mask…

使用css制作倒影

-webkit-mask 这个属性是相当强大的,所以详细的介绍超出了本文的范畴,它非常值得深入研究,因为它可以在实际应用中为你省掉很多时间. -webkit-mask让为一个元素添加蒙板成为可能,从而你可以创建任意形状的花样.蒙板可以是CSS3渐变或者半透明的PNG图片.蒙板元素的alpha值为0的时候会覆盖下面的元素,为1的时候会完全显示下面的内容.相关的属性有-webkit-mask-clip. -webkit-mask-position 和-webkit-mask-repeat等,严重依赖…

使用packer制作vagrant centos box

使用packer制作vagrant box:centos 制作vagrant box,网上有教程,可以自己step by step的操作.不过直接使用虚拟在VirtualBox中制作vagrant box非常的费劲.网上有操作debian/ubuntu相关的文章,放2篇在这里供参考: 英文 How to Create and Share a Vagrant Base Box 中文制作 Vagrant Box 简明教程. 做到快结束的时候,就不知道如何解决了.后来发现有个Packer工具.就简单…

关于 CSS 反射倒影的研究思考

原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有一定难度.而我本人学识有限,加之时间仓促,所翻译内容可能有不恰当及晦涩之处.欢迎大家拍砖指正. 我最近在 codePen 上看到了这个加载程序,一个纯CSS制作的带有渐变反射的3D旋转竖条.它的制作方法是:为每个竖条创建一个元素,然后通过复制每一个元素来制作反射倒影,最后在反射倒影上添加渐变背景来…

Flexbox制作CSS布局实现水平垂直居中

Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <title>Flexbox制作CSS布局实现水平垂直居中</title> <style type="text/css"> html { height: 1…

css3倒影

使用CSS3制作倒影 img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent) , to(rgba(250, 250, 250, 0.4))); }…

使用Vagrant和VirtualBox一步步地创建一个Base Box

box集合 http://www.vagrantbox.es/ Vagrant和VirtualBox软件的安装步骤省略,去官网下载最新的版本然后下一步下一步地安装就行了,和正常的安装软件没有什么区别.下面看看利用vagrant和virtualbox如果一步步打造出自己的可复用性强的开发环境. 开始前确保您的计算机支持虚拟化技术,在BIOS中可以开启. 一.在virtualbox中新建一个虚拟机我这里使用的是CentOS-6.5-x86_64-minimal.iso这个镜像文件来安装的,1G内…

-webkit/IE/Firefox的一些样式

仅限于-webkit的样式特效:-webkit-overflow-scrolling:touch;滚动时回弹效果:如果出现偶尔卡住不动的情况,那么在使用该属性的元素上不设置定位或者手动设置定位为static:如果添加动态内容页面不能滚动,让子元素height+1:方法就是在webkit-overflow-scrolling:touch属性的下一层子元素上,将height加1%或1px.从而主动触发scrollbarmain-inner { min-height: calc(100% + 1px)…

webkit Safari的样式库

1,webkit Box模型 CSS定义:-webkit-border-bottom-left-radius: radius; CSS定义:-webkit-border-top-left-radius: horizontal_radius vertical_radius; CSS定义:-webkit-border-radius:radius; CSS定义:-webkit-box-sizing: sizing_model; 边框常量值:border-box CSS定义:-webkit-box-si…

CSS3 学习小结

写样式时有时遇到浏览器兼容问题:-webkit-transition:chrome和safari-moz-transition:firefox-ms-transition:IE-o-transition:Opera但是在JS 中则不允许带前边的横杠,并且首字母大写,如WebkitTransition,MozTransition,MsTransition,OTransition属性选择器:设置样式的格式:表签名[属性名=value]{}表签名[属性名~=value]{}//属性值是一个词组用空格分…

[转]unity3d 脚本参考-技术文档

unity3d 脚本参考-技术文档核心提示:一.脚本概览这是一个关于Unity内部脚本如何工作的简单概览.Unity内部的脚本,是通过附加自定义脚本对象到游戏物体组成的.在脚本对象内部不同志的函数被特定的事件调用.最常用的列在下面:Update:这个函数在渲染一帧之前被调用,这里是大部分游戏行为代码被执行的地方,除了物理代码.FixedUpd 一. 脚本概览这是一个关于Unity内部脚本如何工作的简单概览.Unity内部的脚本,是通过附加自定义脚本对象到游戏物体组成的.在脚本对象内部不同志的函…

Unity3D脚本中文系列教程(七)

http://dong2008hong.blog.163.com/blog/static/4696882720140311445677/?suggestedreading&wumii Unity3D脚本中文系列教程(六) 类方法◆ static function BeginGroup(GroupName : string) : void ◆ static function BeginLayoutGroup(style : GUIStyle, options : GUILayoutOption[]…

PS学习笔记

PS学习笔记常用快捷键快捷键功能 Ctrl+T 自由变换 Ctrl+Alt+Shift+T 复制图层+再次变换 Alt+Del 以前景色填充 Ctrl+Del 以背景色填充 Ctrl+I 反相图层相关 Ctrl+Shift+N 新建图层 Ctrl+J 复制图层 Ctrl+E 向下合并 Ctrl+Alt+Shift+E 盖印图层 Ctrl+G 图层分组选区相关 Ctrl+Enter 路径形成选区 Ctrl+D 取消选区滤镜相关 Ctrl+F 再次执行滤镜去水印多种方法1.框选后右键…

linux安装Tesseract-OCR

安装Tesseract-OCR 1. leptonica 需要源码编译安装http://www.leptonica.org/ leptonica 包: leptonica-1.73.tar.gz 解压后切换到leptonica-1.68 根目录 ./configure make make install2.tesseract安装: 依赖安装完毕后开始安装tesseract 下载tesseract-3.01 安装包: http://tesseract-ocr.googlecode.com…

3D MAX脚本教程1

本文转载自http://jiurong995294.blog.163.com/blog/static/195133243201192531546490/ 方便以后须要时候使用为什么要学习3D MAX脚本? 3D MAX Script是我迄今为止见过编程语言最自由的一种脚本开源环境,他的自由程度远远超过了Sun 的JAVA,她没有大写和小写的区分,以及固定的公式和程序工作流程树,MAX Script一旦被编写,人们就能够从不论什么一行进行代码的编译,不须要符合格式的束缚.并且MAX Script…

ps 倒影制作

首先打开PS并打开一张素材,这里我选择了山水图片,制作山峰在水中的倒影效果. 然后按下[Crrl+J]复制这个图层,如图: 接着按下[Ctrl+T]或者是[编辑][自由变换],打开[自由变换]对话框. 然后右击点击[旋转180度].这时图层副本被旋转,按下[Ctrl+Enter]取消选择选择[套索工具]中的[磁性套索工具]将山峰和树木的外围选中.建立选区时一定是封闭的才能建立(这里注意不必太仔细,因为倒影的效果本身就很模糊) 接着点击[选择]下的[反选]将图形反…

倒影问题（reflect:below）

这个例子灵感来源于实现一个登录框下方的倒影: .box { width: 300px; height: 200px; border: 1px solid #1f637b; -webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1), rgba(100, 119, 135, 0.5)); colo…

利用vagrant打包系统--制作自己的box

前置条件1.安装VirtualBox 2.安装Vagrant 3.在VirtualBox中安装操作系统,例如 CentOS 1)把在virtualBox中安装的系统打包成box 1.我们需要知道虚拟机的真实名称,进入virtualBox安装目录,执行: $ ./VBoxManage.exe list vms "centos_default_1521543788096_25035" {5c500bf3-759f-487a-b052-22428bc4cbf2} 其中 centos_defa…

使用vagrant一键部署本地php开发环境（二）制作自己的vagrant box

在上篇的基础上 ,我们已经安装好了virtualbox和vagrant,没有安装的话,参照上篇使用vagrant一键部署本地php开发环境(一) 1.从网易镜像或阿里等等镜像下载Centos7 http://mirrors.163.com/centos/7/isos/x86_64/CentOS-7-x86_64-Minimal-1804.iso 2.打开virtualbox进行虚拟机安装 ------------------具体步骤自己百度,没什么难的. 3.虚拟机安装好之后 1)以root用…

制作一个vagrant的win7 box

准备: 1.win7镜像文件 2.vagrant安装文件 3.virtual box安装文件步骤: 1.先在本机上安装virtualbox和vagrant,本机为win7,安装虚机也为win7 2.在virtualbox中安装win7虚拟环境,安装完毕后进入虚机 3.在虚机上创建用户vagrant,密码vagrant 4.安装自己所需的软件(比如多浏览器) 5.在虚机上切换成内置管理员账号(administrator),然后执行Windows Remote Management (WS-Man…

vagrant package制作一个box镜像

1.进入virtualbox安装目录,查看虚拟机的名称(第一列为虚拟机名称) # vboxmanage list vms 2. vagrant package 打包命令 vagrant package [options] [name]: --base NAME virtualbox程序里面的虚拟机的名称,不是box的名字也不是Vagrantfile里面的虚拟机名称.默认是打包当前目录下面的虚拟机. --output NAME 要打包成的box名称,不会自动添加.box后缀,要手动加.默认值pa…

如何制作一个vagrant box

因为要用的窗口应用,基于服务器的各种box不能使用(曾经尝试安装桌面,没有成功).所以试着基于Ubuntu的虚拟机创建自己的box. 过程中主要参考了这篇文章:http://www.360doc.com/content/13/0826/17/13047933_310047914.shtml 主要过程简述如下: 1.安装virtualbox 2.安装 vagrant 3.下载Ubuntu的iso文件,并安装虚拟机,注意要采用以下用户名.密码 …

Qt学习笔记-制作一个计算器-对话框Message Box

在做计算器的前提先做一个加法器. 设计界面. 在点击计算的时候,获取前两个输入框中的数据相加后显示在第三个输入框. toInt是将字符串转换为数字.number静态函数是将数字转化为字符串. 加法器已经完成了,现在加上四则运算. 添加一个Combo Box来选择运算符. 同时添加了对话框需要头文件#include <QMessageBox>.…

CSS3 Notes: -webkit-box-reflect实现倒影

平常我们要实现倒影的效果,一般的做法是使用多个DOM元素绝对定位+scale(负-1)或者rotate.这种方法的缺点是占据空间以及DOM元素过多. 在使用webkit内核的浏览器中(chrome,safari,移动端浏览器),可以使用-webkit-box-reflect属性来实现倒影,语法如下所示 [ above | below | right | left ]? <length>? <image>? 该值包涵了三部分:方位+偏移量+遮罩层方位是必不可少的:在使用遮罩层的时候…

CSS3制作动画的三个属性

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这些我想足以让大家激动了一阵子,今天我们趁着这个热劲继续第三个动画属性Animation的学习,单从Animation字面上的意思,我们就知道是“动画”的意思.但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Fl…

用scrollTop制作一个自动滚动公告栏

我们在浏览网页时,经常会看到会一些滚动的栏目,比如向上滚动的公告.新闻等.其实他们的制作都不难,只要学了基础的html.css.javascript就可以做出来,用JavaScript的scrollTop就行. scrollTop:返回或设置匹配元素的滚动条的垂直位置. <div id="div1" style="width:200px;height:200px;background-color:#999999;overflow:auto;background-colo…

二、JavaScript语言--JS实践--信息滚动效果制作

运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由一段滚动到另一端,会重复 slide:表示由一端滚动到另一端,不会重复 2 direction滚动的方向down.up.left.right 3 loop滚动的次数(当loop=-1表示一直滚动下去,默认为-1) 4 scrollamount设定活动字幕的滚动速度 5 scrolldelay设定活动…

【用-webkit-box-reflect制作倒影】的更多相关文章