东莞网站营销,网站推广费计入什么科目,网站上的动态图怎么做,璧山最新消息网站的好坏在于细节#xff0c;在实现页面里某个组件的布局并写完样式之后#xff0c;不要急着继续#xff0c;有意识地训练自己#xff0c;以挑剔的眼光审视刚刚完成的代码。
1 背景与渐变 background-image 指定文件或者生成的颜色渐变为背景图片。 background-origin…网站的好坏在于细节在实现页面里某个组件的布局并写完样式之后不要急着继续有意识地训练自己以挑剔的眼光审视刚刚完成的代码。
1 背景与渐变 background-image 指定文件或者生成的颜色渐变为背景图片。 background-origin 用于确定背景相对于元素的边框盒、内边框盒初始值或内容盒子来定位。 图 background-origin 的三个值效果 background-clip 指定背景是否应该填充边框盒初始值、内边距框盒或内容盒。 图 background-clip 的三个值效果 background-position 设置背景图的初始位置。 background-size 指定元素内背景图片的渲染尺寸。使用百分位的时候根据background-origin 指定的位置来确定其元素内容大小。例如上面background-origin的三个效果值中指定的background-size 都为100%。 background-repeat 决定在需要填充整个元素时是否平铺图片。 background-attachment 指定背景图片是随着元素上下滚动初始值还是固定在视口区域。使用fixed值会对页面性能产生负面影响。 fixed: 固定在视口区域此时背景的background-origin 参照的是视口。 scroll: 随着元素滚动。如果该元素允许滚动overflow: auto那么背景也不会滚动。 local: 随着元素滚动如果该元素允许滚动那么背景也会跟着滚动。 图 background-attachment 的三个值效果 background-color 指定纯色背景渲染到背景图片下方。
表 background属性的组成
1.1 渐变
background-image 可以接受一个渐变函数。 图 渐变函数
1.1.1 渐变角度
linear-gradient 的第一个参数用于定义渐变的角度。 可以使用to top、to bottom、to bottom right。也可以使用更准确的单位。0deg 表示垂直向上更大值会沿着顺时针变化因此90deg 代表向右渐变to right180deg 表示to bottom。 rad 弧度一个完整的圆是2π。 turn 环绕圆周的圈数。1 turn 360deg。 grad 百分度。100 grad 相当于 90 deg(度).
表 指定渐变方向的其他单位 图 渐变角度与方向的变化
1.1.2 多个颜色节点
一个渐变可以接受任意数量的颜色节点节点之间通过逗号分隔。如果不知道这些节点的位置则会自动均匀平铺这些颜色节点。节点位置可以通过百分号或者px来指定跟在颜色值后面空格符隔开。 图 多个颜色节点实现条纹
1.1.3 重复渐变
对于重复渐变最好使用特定长度而不是百分比。 图 重复渐变
1.1.4 径向渐变
线性渐变是从元素的一端开始沿着直线过度到另一端而径向渐变不同它是从一个点开始全方位向外扩张。 图 径向渐变的例子
2 阴影
阴影是一种可以为网页增加立体感的特效。 有两个属性可以创建阴影box-shadow 可以为元素盒子生成阴影text-shadow 可以为渲染后的文字生成阴影。
默认情况下阴影与元素的大小和尺寸相同。如果元素设置了border-radius那么阴影相应地也会有圆角。阴影的水平偏移量(x)、垂直偏移量(y)和颜色都不可或缺。还有两个值是可选的模糊半径和扩展半径。
box-shadow: Xpx Ypx 模糊半径px 扩展半径px color;
而text-shadow 只有4个参数模糊半径可选。没有扩展半径这个参数。 图 阴影效果
2.1 拟物化设计与扁平化设计
拟物化设计把屏幕上的元素设计得如同真实世界的实物。追求尽量贴近真实世界。
扁平化设计 扁平化设计选择接受现代社会已经日益数字化的事实。扁平化设计讲究色彩明快统一、外观简洁明了这就意味着尽量少用渐变、阴影和圆角。
中庸设计 介于扁平化设计与拟物化设计之间。 图 三种不同的设计效果
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div classcontainerdiv classconbutton classbtnSign up now/buttondiv拟物化/div/divdiv classconbutton classbtnSign up now/buttondiv扁平化/div/divdiv classconbutton classbtnSign up now/buttondiv中庸/div/div
/div
/body
/html
style.container {display: flex;padding-top: 30px;}.con {margin-left: 40px;text-align: center;}.btn {padding: 1em;border: 0;font-size: 0.8rem;color: white;border-radius: 0.5em;margin-bottom: 15px;}.con:nth-child(1) .btn {background-image: linear-gradient(to bottom,#57b,#148);box-shadow: 0.1em 0.1em 0.5em #124;}.con:nth-child(1) .btn:active {box-shadow: inset 0 0 0.5em #124,inset 0 0.5em 1em rgba(0,0,0,0.4);}.con:nth-child(2) .btn {background-color: #57b;box-shadow: 0 0.2em 0.2em rgba(0,0,0,0.15);}.con:nth-child(2) .btn:hover {background-color: #456ab6;}.con:nth-child(2) .btn:active {background-color: #148;}.con:nth-child(3) .btn {background-color: #57b;box-shadow: 0 0.4em #148;text-shadow: 1px 1px #148;}.con:nth-child(3) .btn:active {background-color: #456ab6;transform: translateY(0.1em);box-shadow: 0 0.3em #148;}/style
3 混合模式
混合模式用来控制叠放的图片怎样融合在一起。 变暗 multiply 前景色越亮后景色显示出来的越多。 darken 选择两个颜色中较暗的那个。 color-burn 加深背景色增加对比度。 变亮 screen 前景色越暗背景色显示出来的越多。 lighten 选择两个颜色中较亮的那个 color-dodge 加亮背景色降低对比度。 对比 overlay 对暗色使用multiply对亮色使用screen以增加对比度对比效果较柔和。 hard-light 大幅度增加对比度有点像叠加但是使用加强版multiply或者screen,对比效果明显。 soft-light 有点类似hard-light但是使用burn/dodge代替multiply/screen。 复合 Hue 将上层颜色的色相混合到下层颜色上。 saturation 将上层颜色的饱和度复合到下层颜色上。 luminosity 将上层颜色的明度混合到下层颜色上。 color 将上层颜色的色相和饱和度混合到下层颜色上。 比较 difference 从亮色中减去暗色。 exclusion 类似于difference但对比度稍弱。
表 混合模式的五大类 图 15种混合模式效果
3.1 实际应用
混合模式实际应用有
使用某种颜色或渐变为图片着色。为图片增加纹理效果比如划痕或者老胶片放映时的颗粒感等。缓和、加深或减小图片的对比度使图片上的文字更具可读性。在图片上覆盖一条文字条幅但是还是想让图片完整显示。
图 纹理效果
3.1.1 融合混合模式
background-blend-mode属性只能局限于元素的背景使用。mix-blend-mode可以融合多个元素。 图 融合混合模式效果
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div classblendh1融合混合模式/h1
/div
/body
/html
style.blend {background-image: url(../asset/animal1.jpeg);background-size: 100%;width: 200px;height: 200px;display: flex;align-items: center;}.blend h1 {margin: 0;font-size: 2rem;text-align: center;mix-blend-mode: hard-light;background-color: #c33;color: #808080;border: 0.1em solid #ccc;}
/style
