box-shadow

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

要使用标准的CSS3实现某元素的投影效果,有两个套路,第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow,那这两个阴影实现有什么具体的差异呢? 一、兼容性不一 CSS3 box-shadow从IE9浏览器开始就支持了,兼容性如下截图: 而filter中的drop-shadowIE13才开始支持,移动端Android4.4才开始支... »

CSS3里box-shadow属性的使用方法示例详解

CSS里面的属性很多,有些属性长时间不用,就容易忘,尤其是那种需要设置多个值的属性。比如:box-shadow,每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用,都要查阅资料才能实现对应的效果,现在总结一下,box-shadow的使用方法以及box-shadow内阴影的使用,方便以后查看。 一、box-shadow语法 box-shadow: none | inset... »

CSS3 box-shadow属性实例详解

下面分别介绍box-shadow阴影的使用:1、盒子阴影box-shadowbox-shadow属性向box添加一个或多个阴影。inset情况:水平垂直偏移为0,不设置blur和spread,同样看不到阴影,因为此时box-shadow的周长和padding-box一样,同样可通过设置偏移让阴影显示出来。 »

CSS中使用文本阴影与元素阴影效果

文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影、垂直阴影、、阴影颜色。元素阴影介绍在CSS中使用box-shadow属性设置元素阴影。总结以上所述是小编给大家介绍的CSS中使用文本阴影与元素阴影效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。 »

原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面。怎么个炫酷法呢,看看下面的图片大家就知道啦。 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity、transition、box-shadow这三个属性。 1.opacity CSS3 opacity 属性 实例 设置一个div元素的透明度级别: div { opacity:0.5; ... »

BootStrap入门教程(三)之响应式原理

相关阅读:BootStrap入门教程(一)之可视化布局BootStrap入门教程(二)之固定的内置样式Bootstrap网格系统响应式网格系统随着屏幕或视口尺寸的增加,系统会自动分为最多12列。中型设备是50%/50%,大型设备是33%/66%,那么可以这样写:........源码如下:Bootstrap 实例 - 中型和大型设备Hello, world! »

JavaScript获取图片像素颜色并转换为box-shadow显示

一、原理: 1.使用HTML5的FileReader API读取图片 FileReader文件读物器,用于读取客户端文件到,注意,文件读取完毕后并不会载入缓存 eg: var upfile = document.querySelector('#upfile'); var fileReader = new FileReader(); fileReader.onload = function(evt)... »

jQuery实现的网页右下角tab样式在线客服效果代码

本文实例讲述了jQuery实现的网页右下角tab样式在线客服效果代码。分享给大家供大家参考,具体如下: 这是一款网页右下角tab样式的在线客服代码,若在火狐或chrome浏览器下,客服是带边框阴影的,IE8下好像没边框效果,整体不如在Chrome、火狐、Opera浏览器下。这款在线客服代码的底部使用了TAB选项卡的样式,鼠标点击可切换客服的内容,还是挺新颖的。 运行效果截图如下: 在线演示地址如下... »

jQuery实现美观的多级动画效果菜单代码

本文实例讲述了jQuery实现多级动画效果菜单代码。分享给大家供大家参考。具体如下: 这是基于jQuery实现的一款多级动画菜单源代码,动画效果流畅,确实不错的动画菜单,欢迎大家试用。这种菜单 一般应用于大站,不过如果你的站点内容比较多,也是可以考虑的哦。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nlevel-animate-... »

纯CSS3代码实现滑动开关效果

纯CSS3代码实现滑动开关效果

废话不多说了,炫下效果图并附上演示和源码下载。 实现效果如下: 查看演示      源码下载  HTML结构代码: CSS代码: /*表单开关样式*/ .ui-switch { position: absolute; font-size: .16rem; right:0.07rem; top: 50%; margin-top: -0.16... »

原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面。怎么个炫酷法呢,看看下面的图片大家就知道啦。 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity、transition、box-shadow这三个属性。 1.opacity CSS3 opacity 属性 实例 设置一个div元素的透明度级别: div { opacity:0.5; ... »

javascript动画系列之模拟滚动条

前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条。但由于滚动条在各浏览器下表现不同,兼容性不好。所以,模拟滚动条也是很常见的应用。本文将详细介绍滚动条模拟 原理介绍 滚动条模拟实际上和元素模拟拖拽类似。仅仅通过范围限定,使元素只可以在单一方向上拖拽 <div id="box" style="height: 200px;width: 16px;background-color:#F5F5F... »

让IE 6,7,8模拟部分的css3属性

在ie下模拟css3中的box-shadow(阴影)可以使用ie的Shadow(阴影)滤镜 基本语法:filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值), Strength=阴影半径(数值)); 注意:该滤镜必须配合background属性一起使用,否则该滤镜失效。... »

CSS3实现粒子旋转伸缩加载动画

本文运用CSS3的旋转Transform属性和动画的执行百分比制作而成,很特别的CSS3实现粒子旋转伸缩加载动画,具体内容如下  CSS Code复制内容到剪贴板 #loader6 {        margin: 60px 50px;       ... »

css3 按钮 利用css3实现超酷下载按钮

css3 按钮 利用css3实现超酷下载按钮

效果图如下: 代码如下: 复制代码代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>Live Preview</title> <style> body { padding: 20px; background: ... »

CSS实现曲面阴影效果的简单实例(推荐)

不知道大家在做项目的时候遇见很绚丽的设计图后会怎么做。有一些设计图会经常使用阴影效果看上去更加立体,一般情况下像我这种懒人直接就切图了。压根就没有想着去研究一下代码怎么实现。 后来我们的设计稿总是改啊改啊,***简直是烦死我了,他要是改了图我就要正版的切图更换。所以我决定研究一下这个东西,其实我们是可以实现的哦! 如图所示: 上面的效果就是平时写项目最典型的效果了,做设计的小伙伴肯定知道PS分分钟... »

CSS伪元素 :before, :after, box-shadow应用

利用CSS伪元素 :before 和 :after 可以在文档前后插入内容而不改变文档原有结构,再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子: 1、利用 :before 和 :after 添加背景,比如给一段文字前后打引号; 2、利用 :before, :after, box-shadow 实现3D阴影效果; 3、利用 :before, :after, box-shado... »

利用纯CSS自定义Checkbox和Radio的样式示例代码

首先看看不同平台的checkbox & radio 我们可以利用CSS3的一些属性来实现自定义checkbox & radio样式。 HTML 代码 // radio input <div class="radio"> <input id="male" type="radio" name="ge... »

一个看起来比较舒服值得学习的文本框样式

 一个看起来比较舒服的文本框样式,关键点在黄色背景那几点 复制代码代码如下: .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555555; vertical-align: mid... »

jquery模拟alert的弹窗插件

演示地址: http://runjs.cn/detail/miwszbne 分享说明: 第N次造轮子了,只为最简单的调用,jquery模拟alert和confirm的弹窗插件 调用方法: $.alert('your message'); $.alert('your message',function(){ $.alert('click ok button') }); $.confirm('your... »

Vue 全局loading组件实例详解

上图不上种,菊花万人捅: loading.js: import './loading.css' let Loading = {} // 避免重复install,设立flag Loading.installed = false Loading.install = function (Vue) { if (Loading.installed) return Vue.prototype.$loading... »

js库Modernizr的介绍和使用

js库Modernizr的介绍和使用

Modernizr 简单易用,但不是万能的。为此,许多开发人员求助于开源项目Modernizr。Modernizr不是检测user-agent字符串,而是使用一系列测试来判断浏览器的特性。在几毫秒内它就能够执行超过40种测试并将结果作为属性记录在名为Modernizr的对象中。有时,Modernizr 可无缝地执行这项任务。这可以通过Modernizr下载页面来完成,该页面同时显示了能够检测的特性... »

LESSCSS让CSS使用起来更加灵活成就CSS动态化

提到LESSCSS,可能大家不都不太了解。LESSCSS是属于css中的一种动态语言。他可以让CSS使用起来更加灵活,使用方式形如JavaScript中的一些变量,函数等。LESSCSS可以在多种语言和环境中使用,比如服务端、浏览器端。 说了那么多LESSCSS的各种好处,下面介绍一下LESSCSS简单使用方法。 1、变量使用 我们使用LESSCSS的时候,可以单独定义一些变量,用于我们在任何时候... »

jquery实现div阴影效果示例代码

代码如下: <html> <head> <style> .mydiv1 {height:250px;width:250px;border:#909090 1px solid;} .mydiv2 { width:250px;height:250;border:#909090 1px solid;background:#fff;color:#333; filter:... »

CSS伪类对象before和after的用法实例详解

CSS伪类对象before和after的用法实例详解

一直感觉这两个伪类对象不是很重要,并且IE对它两兄弟并不支持,所以也没有怎么静下心来研究,只有在清楚浮动clearfix的时候会用到哈,其他都很 少用!不过最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果,所以就来研究研究哈!  一、先来看哈他们的定义哈! 1、selector:before( sRules ) 它要和content属性一起使用,设置在对象... »

Page 1 of 512345