[Slider Revolution 6]调整图层内容的CSS样式

[Slider Revolution 6] Adjust the CSS styling for your Layer ContentSlider Revolution
这篇文章约5分阅读完。

响应式

除非在下面的文档中指定,否则可以为四个可用视口调整所有选项。

内容

  1. 样式
    1. 字体和图标
    2. 背景
    3. 间距/边框
    4. SVG样式
  2. 进阶风格
    1. 基本转换
    2. 框影
    3. 文字阴影
    4. 文字笔画
    5. 混合模式
    6. 尖刺面具
    7. 尖角扩展
  • 相关话题
  • 响应式设置
  • 响应式设置
  • 大小和位置
  • 鼠标悬停

1.风格

[Slider Revolution 6]调整图层内容的CSS样式

1.1字体和图标样式

可以为“文字和按钮层”编辑“字体和图标样式”选项。

1.字体大小
设置文本的字体大小(以像素为单位)。

2.线高图层
CSS线高这对于多行文本很有用。

3.字体粗细
选择您的文本是否应为“粗体”。

4.字母间距
字母之间的可选间距。对某些字体系列有用。

5.字体家族
在数百种可用的Google字体之间进行选择

6.文本颜色
设置图层文本的颜色。

[Slider Revolution 6]调整图层内容的CSS样式

单击“更多”按钮以获取其他字体样式选项

1.斜体
选择是否以斜体显示文本。

2.文本修饰图层
CSS文本修饰

3.大写
选择该图层CSS文本转换

4.可选
选择是否可以由用户选择文本。

[Slider Revolution 6]调整图层内容的CSS样式
[Slider Revolution 6]调整图层内容的CSS样式

1.2背景

1.背景颜色
将图层的背景设置为纯色或半透明的颜色或渐变。

2.背景
图像为图层设置可选的背景图像。

3.背景图像位置图像
的 CSS背景位置 。

4.背景图像大小图像
的 CSS背景大小 。建议使用“封面”。

5.背景图像重复图像
的 CSS背景重复 。对于常规图像,请使用“不重复”,对于图案类型的背景请使用“重复”。

[Slider Revolution 6]调整图层内容的CSS样式
图层的背景是全局的,并将应用于所有自适应视口

1.3间距和边框

1.边距
设置图层的顶部/右侧/底部/左侧边距,如果希望无论响应度如何始终遵循这些值,请单击“锁定”按钮。

2.
填充设置图层的顶部/右侧/底部/左侧填充,然后单击“锁定”按钮(如果希望无论响应度如何都始终遵循这些值)。

3.边框颜色
设置可选边框的颜色。

4.边框样式
如果要显示图层的边框,请将其设置为“ solid”。

5.边框半径向图层
添加可选的CSS边框半径

[Slider Revolution 6]调整图层内容的CSS样式

1.4 SVG样式

注意 :

仅当您选择了SVG对象时,此选项才会显示

1. SVG颜色
设置SVG图标的主要颜色

2.笔触颜色
如果“笔触大小”设置为大于0px,则SVG笔触的颜色。

3.描边大小
svg描边在图形的图形内部和外部添加边框/轮廓。

4.笔划划线
将笔划转换为虚线。

5. 笔划破折号间距
如果笔划破折号设置为大于0,则破折号之间的间距。

[Slider Revolution 6]调整图层内容的CSS样式
SVG样式是全局样式,将应用于所有 自适应视口

2.高级风格

[Slider Revolution 6]调整图层内容的CSS样式

2.1基本转换

1.旋转X 向当前选定的图层
添加一个 rotateX变换

2.旋转Y 向当前选定的图层
添加一个 rotateY变换

3.旋转Z 向当前选定的图层
添加一个 rotateZ变换

4.不透明度
调整当前选定图层的不透明度/透明度

[Slider Revolution 6]调整图层内容的CSS样式

2.2盒子阴影

1.效果*
启用图层的阴影

2.阴影开*
选择是否将阴影应用于图层的主容器或图层的视差容器。

3. Offset-X
阴影的“ x”(水平)位置

4. Offset-Y
阴影的“ y”(垂直)位置。

5.模糊
阴影的模糊值。

6.传播
阴影的大小。必须具有大于“ 0”的值才能使阴影可见。

7.颜色*
框阴影的颜色。

*将全局应用于所有 自适应视口

[Slider Revolution 6]调整图层内容的CSS样式

CSS框阴影示例
Offset-X |偏移量Y |模糊|传播颜色
框阴影:2px 2px 2px 1px rgba(0,0,0,0.2);

2.3文字阴影

可以为“文本”和“按钮层”编辑“文本阴影”选项。

1.效果*
为图层启用文本阴影

2. Offset-X
阴影的“ x”(水平)位置

3.偏移-Y
阴影的“ y”(垂直)位置。

4.模糊
阴影的模糊值。

5.颜色*
文本阴影的颜色。

*将全局应用于所有 自适应视口

[Slider Revolution 6]调整图层内容的CSS样式

CSS文本阴影示例
Offset-X |偏移量Y |模糊|彩色
文本阴影:3px 3px 3px rgba(0,0,0,0.2);

2.4文字笔划

可以为“文字和按钮层”编辑“文字描边”选项。

1.效果*
启用图层的文字描边

2.笔触宽度
以px调整笔触效果的宽度。

3.笔触颜色*
文字笔触的颜色。

*将全局应用于所有 自适应视口

[Slider Revolution 6]调整图层内容的CSS样式

CSS文字描边示例
宽度|彩色
笔画:1px rgba(0,0,0,0.2);

2.5混合模式

1.混合模式向图层
添加可选的CSS mix-blend-mode

2.在编辑器中显示
如果要在管理编辑器视图中隐藏效果,请禁用此选项。

[Slider Revolution 6]调整图层内容的CSS样式
混合模式是全局的,将应用于所有 自适应视口

2.6尖刺面具

1.左尖峰
尖峰添加到图层的左侧。(需要背景颜色/图像)

2.左尖峰宽度
调整左尖峰的宽度

3.右尖峰宽度
将尖峰添加到图层的右侧。(需要背景颜色/图像)

4.右尖峰宽度
调整右尖峰的宽度

[Slider Revolution 6]调整图层内容的CSS样式
[Slider Revolution 6]调整图层内容的CSS样式

2.7尖角扩展

1.
左上角在图层中添加一个尖锐的左上角。(需要背景颜色)

2.
右上角为图层添加一个右上角。(需要背景颜色)

[Slider Revolution 6]调整图层内容的CSS样式
[Slider Revolution 6]调整图层内容的CSS样式

评论

复制标题和 URL