linear-gradient | 易学教程

css3属性之---背景渐变linear-gradient()

阅读更多关于 css3属性之---背景渐变linear-gradient()

定义与用法 linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。 CSS 语法 background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction: 用角度值指定渐变方向(或角度) color-stop1, color-stop2, ...: 用于指定渐变的起止颜色案例 1. 默认渐变方向是从上至下 background: linear-gradient(yellow, green) 2. 可以用角度值定义渐变方向(可以写成角度 deg) background: linear-gradient(to top, yellow, green) /*to top 从下至上相当于 0deg*/ background: linear-gradient(to right, yellow, green) /*to right 从下至上相当于 90deg*/ background: linear-gradient(to bottom, yellow,

关于CSS3背景渐变色无效问题

阅读更多关于关于CSS3背景渐变色无效问题

无效的css[linear-gradient]写法 .loginbox{ background-color: linear-gradient(#D0D0D0, #E0E0E0, white); width: 300px; } 此CSS样式无法改变元素的背景色，是因为渐变色在CSS中被定义成了类型，所以渐变色只可以用在需要图形数据的地方。因此linear-gradient在background-color与color中引用无效，要想实现操作可以直接写为background属性 .loginbox{ background: linear-gradient(#D0D0D0, #E0E0E0, white); width: 300px; } 如仍然无法显示，考虑浏览器兼容问题 background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法

CSS3 渐变（gradients）

阅读更多关于 CSS3 渐变（gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）- 由它们的中心定义浏览器支持情况，IE10及以上，Google26及以上语法 background: linear-gradient(direction, color-stop1, color-stop2, ...); 线性渐变 - 从上到下（默认情况下）从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色 #grad1 { height: 200px; background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red,

利用css实现3d button

阅读更多关于利用css实现3d button

Created by Jerry Wang, last modified on Jul 31, 2014 创建一个新的BSP application, 创建一个JavaScript file: 将wiki末尾的javascript 粘贴到弹出的editor里: 创建一个新的page: source code如下: ```html <%@page language="abap"%> <%@extension name="htmlb" prefix="htmlb"%> Test on 3D button Click Me ♥ ``` 测试效果如下: 当mouse移动至button 区域时: prefixfree.min.js source code如下: /** * StyleFix 1.0.3 & PrefixFree 1.0.7 * @author Lea Verou * MIT license */ (function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t

HTML5 - 3D切片滑块旋转照片

阅读更多关于 HTML5 - 3D切片滑块旋转照片

TweenMax 实现照片的3D切片滑块旋转效果，先看照片旋转效果： HTML5 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 3D图片切片滑块旋转动画DEMO演示</title> <style text="text/css" > html { font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100% } body { margin:0 } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display:block } audio, canvas, progress, video { display:inline-block; vertical-align:baseline } audio:not([controls]) { display:none; height:0 } [hidden], template { display:none } a { background:transparent } a:active, a

背景渐变

阅读更多关于背景渐变

以前，我们要实现这种渐变，可能要用 Photoshop 或 Fireworks 创建一个渐变图形，然后使用 background-image 属性把渐变图形放在元素的背景中。现在，CSS支持渐变背景，可以理解为Web浏览器即时创建的图像。所以，渐变也使用常规的 background-image 属性创建线性渐变 background-image: linear-gradient( 角度 , 颜色); 线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色。微信订阅号：Rabbit_svip 这条直线的方向由角度指定，或者在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字，例如 to bottom left。如上图例子 CSS代码： body { background-image: linear-gradient(to right , #7A88FF, #7AFFAF); } 如果渐变是从元素上边的紫色过度到下边的绿色，要使用 to bottom 关键字。 CSS代码： html, body { width: 100%; height: 100%; } body { background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF); } 另外

前端每日实战：4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效

阅读更多关于前端每日实战：4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效

效果预览按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cdKMBTk 源代码下载请从 github 下载。 https://github.com/comehope/front-end-daily-challenges/tree/master/004-metallic-glossy-3d-button-effects 代码解读在 dom 中定义一个容器： <div class="box">BUTTON</div> 容器居中显示： html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: skyblue; } 设置按钮的 2d 样式，为了便于调整按钮尺寸，使用了变量： .box { background: linear-gradient(to right, gold, darkorange); color: white; --width: 250px; -

DIY cnblog——背景渐变切换

阅读更多关于 DIY cnblog——背景渐变切换

进来的小伙伴应该已经看过了我的博客样式，但还是贴张图先：先大致说一下实现的思路，然后把代码贴出来供小伙伴们参考。由于不是特别技术性的文章，格式就放宽松一点，跟着意识流走吧。先跟大家分享一个渐变背景素材的网站： https://webgradients.com/ 大家进去会发现是这样的：这是一个CSS做的渐变特效，复制了CSS之后就可以直接用了，复制的代码是 background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); 我在做渐变背景的思路大致是这样的，挑选出喜欢的渐变特效，创建一个数组保存，之后采用随机数和定时器来切换背景颜色。小伙伴们按照序号来读会比较清晰 <script> var bc = [ //1.创建一个数组保存渐变的颜色 "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)", "linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%)", "linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%)", "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)", "linear

css揭秘--笔记（未完）

阅读更多关于 css揭秘--笔记（未完）

第0章关于本书 1，本书要用到一个工具函数————$$()，它可以让我们更容易获取和遍历所有匹配特定css选择符的dom元素： 1 function $$(selector,context){ 2 context=context|| document; 3 var elements= context.querySelectorAll(selector); 4 return Array.prototype.slice.call(elements); 5 } 2，以下实现一个效果： 1 linear-gradient(#fff, #000); 2 linear-gradient(to bottom, #fff, #000); 3 linear-gradient(to top, #000, #fff); 4 linear-gradient(180deg, #fff, #000); 5 linear-gradient(to bottom, #fff 0%, #000 100%); 3，检查属性是否存在： 1 var root= document.documentElement; 2 if ('textShadow' in root.style){ 3 root.classList.add('textShadow' ); 4 } else { 5 root.classList.add

订阅 linear-gradient