CSS相关

Innei

发布于 2021-12-28 14:38:37

29300

代码可运行

文章被收录于专栏：静之森静之森

运行总次数：0

代码可运行

最近受到了App Store主页风格的影响，正巧又看到了sketch官网的设计，所以深受卡片式的影响。真巧最近在改别人的主题，于是就想自己去写一套卡片式风格的typecho主题。

那么，我就开始边学css/js，边写主题，把学的用到的都记录下来。

CSS颜色渐变

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

css

1/* 渐变轴为45度，从蓝色渐变到红色 */
2linear-gradient(45deg, blue, red);
3/* 从右下到左上、从蓝色渐变到红色 */
4linear-gradient(to left top, blue, red);
5/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
6linear-gradient(0deg, blue, green 40%, red);
7
8
9/*扁平式卡片设计*/
10
11background-image: linear-gradient(153deg, #e64c4c 0%, #ef32fb 95%); 
12background-image: linear-gradient(153deg, #8adc32 0%, #25c7a2 95%);
13background-image: linear-gradient(153deg, #e64c4c 0%, #fb8332 95%);

COPY

CSS卡片式颜色变换（CSS 子元素选择器）

对于多个卡片可以颜色变换使用nth-child()函数判断第几个或者让第一个标签的颜色变换

可以使用 > 选择器变换class中的属性

比如

css

1.block-plugins-list span:nth-child(3) > .colorgradient-card {
2    background-image: linear-gradient(153deg, #ef33f2 0%, #3544dc 95%);
3    box-shadow: 0 3px 15px 0 rgba(92, 64, 224, 0.5)
4}

COPY

判断.block-plusins-list中的span标签个数（第三个）让其下的子元素 .colorgradient-card 属性值更换

那么原html中应该这样写

css

1<div class="block-plugins-list">	
2	<span> <span class="colorgradient-card">One</span></span>
3	<span> <span class="colorgradient-card">two</span></span>
4	<span><span class="colorgradient-card">three</span></span>
5	<span><span class="colorgradient-card">four</span></span>
6</div>

COPY

tva2.sinaimg.cn/large/006tKfTcly1g1bmocgx9yj30fp09yad9.jpg)

CSS 卡片添加阴影

box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了

border-radius

，阴影也会有圆角效果。多个阴影的z-ordering 和多个

text shadows

规则相同(第一个阴影在最上面)。

css

1box-shadow: 0 3px 15px 0 rgba(27, 132, 211, 0.4);

COPY

那么整一个卡片式风格可以写成这样(shetch样式)

css

1.colorgradient-card {
2    background-image: linear-gradient(153deg, #3be2bc 0%, #1b96f1 95%);
3    box-shadow: 0 3px 15px 0 rgba(27, 132, 211, 0.4);
4    border-radius: .625rem;
5    padding: 1.5625rem;
6    display: block;
7    width: 100%;
8    will-change: transform;
9    transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1)
10}

COPY

CSS 鼠标移入放大平滑过渡

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

css

1.colorgradient-card:hover {
2    transform: scale(1.04)
3}

COPY

总体卡片式设计

css

1.colorgradient-card {
2    background-image: linear-gradient(153deg, #3be2bc 0%, #1b96f1 95%);
3    box-shadow: 0 3px 15px 0 rgba(27, 132, 211, 0.4);
4    border-radius: .625rem;
5    padding: 1.5625rem;
6    display: block;
7    width: 100%;
8    will-change: transform;
9    transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1)
10}
11
12.colorgradient-card p {
13    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
14    color: #fff !important
15}
16
17.colorgradient-card .card-title {
18    font-weight: normal;
19    font-size: 1.25rem;
20    letter-spacing: 0;
21    font-weight: 400 !important;
22    line-height: 1.5rem;
23    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.1)
24}
25
26.colorgradient-card .card-title::after {
27    content: '';
28    font-size: 2rem;
29    margin-left: .3125rem;
30    display: inline-block;
31    width: 1.125rem;
32    height: .9375rem;
33    background-size: cover;
34    background-repeat: no-repeat;
35    background-image: url(/remu.jpg);
36    will-change: transform;
37    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)
38}
39
40.colorgradient-card .card-subtitle {
41    font-style: italic;
42    font-weight: 300;
43    font-size: 1rem;
44    color: rgba(255, 255, 255, 0.7) !important;
45    letter-spacing: -0.12px;
46    line-height: 25.6px
47}
48
49.colorgradient-card .card-subtitle::before {
50    vertical-align: middle;
51    content: '';
52    display: inline-block;
53    margin-right: .625rem;
54    width: 1.5rem;
55    height: 1.5rem;
56    background-image: url(/images/pages/home/52/icon-plugin-card.svg);
57    position: relative;
58    top: -1px
59}
60
61.colorgradient-card:hover {
62    transform: scale(1.04)
63}
64
65.colorgradient-card:hover .card-title::after {
66    transform: translate(3px, 0)
67}
68
69.block-plugins-list span:nth-child(2) > .colorgradient-card {
70    background-image: linear-gradient(153deg, #e64c4c 0%, #ef32fb 95%);
71    box-shadow: 0 3px 15px 0 rgba(231, 74, 89, 0.4)
72}
73
74.block-plugins-list span:nth-child(3) > .colorgradient-card {
75    background-image: linear-gradient(153deg, #ef33f2 0%, #3544dc 95%);
76    box-shadow: 0 3px 15px 0 rgba(92, 64, 224, 0.5)
77}
78
79.block-plugins-list span:nth-child(4) > .colorgradient-card {
80    background-image: linear-gradient(153deg, #8adc32 0%, #25c7a2 95%);
81    box-shadow: 0 3px 15px 0 rgba(59, 203, 137, 0.4)
82}
83
84.block-plugins-list span:nth-child(5) > .colorgradient-card {
85    background-image: linear-gradient(153deg, #e64c4c 0%, #fb8332 95%);
86    box-shadow: 0 3px 15px 0 rgba(227, 46, 46, 0.4)
87}
88
89.block-plugins-list span:nth-child(6) > .colorgradient-card {
90    background-image: linear-gradient(153deg, #fb8332 0%, #f8c332 95%);
91    box-shadow: 0 3px 15px 0 rgba(250, 151, 50, 0.4)
92}
93
94.block-plugins-list span:nth-child(7) > .colorgradient-card {
95    background-image: linear-gradient(153deg, #f5515f 0%, #9f046c 95%);
96    box-shadow: 0 3px 15px 0 rgba(180, 23, 105, 0.35)
97}
98
99.block-plugins-list span:nth-child(8) > .colorgradient-card {
100    background-image: linear-gradient(153deg, #8e2ef7 0%, #61dec7 95%);
101    box-shadow: 0 3px 15px 0 rgba(111, 167, 214, 0.4)
102}

COPY

html

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4
5<head>
6    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7    <title>Untitled Document</title>
8    <link type="text/css" rel="stylesheet" href="main.css">
9</head>
10
11<body>
12    <div class="block-plugins-list">
13        <span> <span class="colorgradient-card">One</span></span>
14        <span> <span class="colorgradient-card">two</span></span>
15        <span><span class="colorgradient-card">three</span></span>
16        <span><span class="colorgradient-card">four</span></span>
17    </div>
18</body>
19
20</html>

COPY

CSS弹性布局（Flex 布局）

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

css

1.box{
2  display: flex;
3}

COPY

行内元素也可以使用 Flex 布局。

css

1.box{
2  display: inline-flex;
3}

COPY

Webkit 内核的浏览器，必须加上-webkit前缀。

css

1.box{
2  display: -webkit-flex; /* Safari */
3  display: flex;
4}

COPY

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

Flex教程

CSS 控制不同设备的显示方案

@media 查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

如果文档宽度小于 300 像素则修改背景颜色(background-color):

css

1@media screen and (max-width: 300px) {
2    body {
3        background-color:lightblue;
4    }
5}

COPY

使用 @media 查询来制作响应式设计：

css

1@media only screen and (max-width: 500px) {
2    .gridmenu {
3        width:100%;
4    }
5
6    .gridmain {
7        width:100%;
8    }
9
10    .gridright {
11        width:100%;
12    }
13}

COPY

CSS3 @media 查询

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-03-22，如有侵权请联系 cloudcommunity@tencent.com 删除

css