惠州公司网站建设：10个简单的和聪明的CSS代码片段

2019.09.06 惠州公司网站建设

153

CSS是底层语言,给网站它的外观。 尽管CSS是一种简单的语言,容易学习,在某些情况下很难驾驭。 无所畏惧,你可以在网上找到的解决方法,这是只是10方便的,您可以使用。

如果你想用长文本,自动调整你的表列的宽度,或创建一个简单的加载状态,而无需使用gif,我们将交付的片段,和更多。

推荐阅读: 每个设计师都应该有50个有用的CSS代码

1. 垂直对齐任何

如果您使用CSS,那么这将错误你:我怎么垂直对齐文本或一个元素的容器? 现在,使用CSS3转换,我们可以解决这个问题更多的优雅,像这样:

1
2
3.
4
5
6
7
.verticalcenter {
  位置:相对;
  上图:50%;
  -webkit-transform: translateY (-50%);
  -o-transform: translateY (-50%);
  变换:translateY (-50%);
}

使用这种技术,一切——从一行文本,一系列的段落,或一盒,将垂直对齐。 浏览器支持而言,CSS3转换工作在Chrome 4, Opera 10, Safari 3, Firefox 3, Internet Explorer 9。

2. 一个元素延伸到完整的窗口的高度

在某些情况下,您可能想要一个元素延伸到整个窗口的高度。 基本元素调整只会调整到集装箱尺寸,所以让一个元素跨越整个窗口的高度的高度,我们需要跨越最顶层元素: 超文本标记语言 和 身体 。

1
2
3.
4
超文本标记语言
身体{
  高度:100%;
}

然后应用100%高度任何元素,如下所示:

1
2
3.
div {
  高度:100%;
}

3. 应用基于文件格式的不同风格

有时你可以有几个链接,你想要看起来与众不同,为了使它更容易知道链接在哪里。 下面这段代码将添加一个图标链接文本之前,使用不同的图标或图片不同的来源,它在本例中是一个外部链接。

1
2
3.
4
5
6
7
8
9
10
11
12
13
14
15
[href ^ =“http://”){
    padding-right: 20 px;
    背景:url (external.gif)没有重演中心;
}
* / / *电子邮件
[href ^ =“mailto:”){
    padding-right: 20 px;
    背景:url (email.png)没有重演中心;
}
   
/ * * / pdf
(href =美元. pdf”){
    padding-right: 20 px;
    背景:url (pdf.png)没有重演中心;
}

这就是它看起来的样子。

4. 跨浏览器图像灰度

惠州公司网站建设灰度网站可以提供更深层次的语气有时使它看起来更优雅和简约。 在这里,我们将添加一个灰度级过滤器使用SVG图像。 这是我们做应用灰度:

1
2
3.
4
5
< svg xmlns =“http://www.w3.org/2000/svg”>
  <过滤器id =“灰度”>
    < feColorMatrix类型=“矩阵” 值=“0.3333 0.3333 0.3333 0 0 0 0 0.3333 0.3333 0.3333 0.3333 0.3333 0.3333 0 0 0 0 0 1 0”/>
  < /过滤器>
< / svg >

提供跨浏览器,我们使用 过滤器 属性:

1
2
3.
4
5
img {
    过滤器:url (filters.svg#灰度); / * Firefox 3.5 + * /
    过滤器:灰色;/ * IE6-9 * /
    -webkit-filter:灰度(1);/ * Google Chrome, Safari 6 + & Opera 15 + * /
}

5. 动画一个梯度背景

在CSS中最迷人的一个特性是能够添加动画效果。 你可以设置动画的背景颜色,透明度,大小,但unfortuantely不是渐变颜色。 目前,你不能动画渐变背景但是这段代码可能会有所帮助。 移动背景地位让它看起来好像是动画。

1
2
3.
4
5
6
7
8
9
按钮{
  背景图片:线性渐变(# 5187 c4 # 1 c2f45);
  background-size:汽车200%;
  背景位置:0 100%;
  过渡:背景位置0.5秒;
}
按钮:{徘徊
  背景位置:0 0;
}

这是一个演示向你们展示它。

6. CSS表列Autowidth

表是疼痛特别是调整列的宽度。 然而,有一个快捷方式可以使用。 添加 空白:nowrap 在 道明 元素很容易纠正文本包装。

1
2
3.
td {
    空白:nowrap;}
}

查看演示比较结果。

7. 只在一个或双方展示盒阴影

如果你想要盒子阴影,试试这个方法可以给你盒阴影一盒的两侧。 为了做这个,首先定义一个盒子与特定的宽度和高度。 给它一个影子 :在 伪元素和游戏来获得正确的定位。 这是代码以使bottom-only阴影:

1
2
3.
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20.
21
22
23
24
.box-shadow {
    背景颜色: # FF8020;
    宽度:160 px;
    身高:90 px;
    margin-top: -45 px;
    margin-left: -80 px;
    位置:绝对的;
    上图:50%;
    左:50%;
}
.box-shadow:{后
    内容:”“;
    宽度:150 px;
    身高:1 px;
    margin-top: 88 px;
    margin-left: -75 px;
    显示:块;
    位置:绝对的;
    左:50%;
    z - index: 1;
    -webkit-box-shadow: 0 px 0 px 8 px 2 px # 000000;
       -moz-box-shadow: 0 px 0 px 8 px 2 px # 000000;
            不必:0 px 0 px 8 px 2 px # 000000;
}

这是演示:

8. 包装长文本上下文

如果你遇到一个单词超过容器本身,这个技巧对您有所帮助。 默认情况下,文本将填补水平无论容器的宽度为例:

使用简单的CSS代码可以使文本调整容器的宽度。

1
2
3.
4
{前
  空白:pre-line;
  自动换行:打破词;
}

这是现在的样子:

9. 使模糊的文本

想把文本模糊? 我们能做的就是使颜色透明,这样的母鸡t添加文本阴影。

1
2
3.
4
.blurry-text {
   颜色:透明;
   文本阴影:0 0 5 px rgba (0, 0, 0, 0.5);
}

瞧,你有一些模糊的文本。

10. 使用CSS动画动画省略

这些片段可以帮助你做一个动画叫省略,用于制作简单加载状态,而不是使用gif图像。

1
2
3.
4
5
6
7
8
9
10
11
12
13
14
15
.loading:{后
    溢出:隐藏;
    显示:inline-block;
    vertical-align:底部;
    动画:省略2 s无限;
    内容:“2026 \”;/ *省略字符的ascii代码* /
}
@keyframes省略号{
    从{
        宽:2 px;
    }
    ,{
        宽度:15 px;
    }
}

让我们看看这个演示。

做玩的片段和实验你能做什么。


相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监
TOP