静态UI组件开发实例页面代码收藏

最新推荐文章于 2023-03-23 16:26:26 发布

心灵的制造商

最新推荐文章于 2023-03-23 16:26:26 发布

阅读量244

点赞数

分类专栏： HTML CSS 前端文章标签： ui css css3

原文链接：https://www.zhangxinxu.com/wordpress/2016/11/development-ui-component-based-on-css-color/

版权

HTML 同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

CSS

26 篇文章 0 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

静态UI组件开发实例页面
实现的重点技巧就是利用**::first-line**伪元素的文字控色技术

<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>静态UI组件</title>
<style type="text/css">
/* 基本按钮 */
.btn-normal {
  font-size: 14px;
  line-height: 30px;
  display: inline-block;
  padding: 0 16px;
  text-align: center;
  border-radius: 2px;
  background-color: currentColor;
  -webkit-text-fill-color: #fff;
  text-decoration:none;
}
.btn-normal::first-line,
::-ms-clear {
  color: #fff;
}
/* 变色按钮特殊处理 */
.btn-normal.white {
  box-shadow: inset 1px 0 #e3e4e6, inset 0 1px #e3e4e6, inset 0 -1px #e3e4e6, inset -1px 0 #e3e4e6;
  -webkit-text-fill-color: #33373d;
}
.btn-normal.white::first-line,
::-ms-clear {
  color: #33373d;
}
.btn-normal:active,
.btn-normal:hover {
  background-image: -webkit-linear-gradient(to top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
  background-image: linear-gradient(to top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
}

/* 小标签 */
.tag-solid {
  font-size: 12px;
  line-height: 1.5;
  display: inline-block;
  padding: 0 .25em;
  border-radius: 2px;
  background-color: currentColor;
  -webkit-text-fill-color: #fff;
}
.tag-solid::first-line,
::-ms-clear {
  color: #fff;
}

/* 带质感的标签 */
.tag-honor {
  font-size: 12px;
  line-height: 16px;
  padding: 0 .5em;
  display: inline-block;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 40px;
  background-color: currentColor;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 50%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 50%);
  -webkit-text-fill-color: #fff;
}
.tag-honor::first-line,
::-ms-clear {
  color: #fff;
}

/* 线框标签 */
.tag-line {
  font-size: 12px;
  line-height: 20px;
  display: inline-block;
  padding: 0 1em;
  border: 1px solid;
  border-radius: 2em;
  background-color: #fff;
}

.dark {
  color: #33373d;
}
.gray {
  color: #969ba3;
}
.blue {
  color: #4284ed;
}
.green {
  color: #7ed321;
}
.orange {
  color: #f0643a;
}
.yellow {
  color: #f0c53a;
}
.purple {
  color: #a091ff;
}
.red {
  color: #ed424b;
}
.white {
  color: #fff;
}
</style>
</head>

<body>
<div class="main">
	<h1 class="title">静态UI组件</h1>
	<h4>1. 基础颜色</h4>
<p>
    <span class="dark">主色</span>
    <span class="gray">灰色</span>
    <span class="blue">蓝色</span>
    <span class="green">绿色</span>
    <span class="orange">橙色</span>
    <span class="yellow">黄色</span>
    <span class="purple">紫色</span>
    <span class="red">红色</span>
</p>
<h4>2. 基本按钮</h4>
<p>
    <a href="javascript:" class="btn-normal dark">深色按钮</a>
    <a href="javascript:" class="btn-normal gray">灰色按钮</a>
    <a href="javascript:" class="btn-normal blue">蓝色按钮</a>
    <a href="javascript:" class="btn-normal green">绿色按钮</a>
    <a href="javascript:" class="btn-normal orange">橙色按钮</a>
    <a href="javascript:" class="btn-normal yellow">黄色按钮</a>
    <a href="javascript:" class="btn-normal purple">紫色按钮</a>
    <a href="javascript:" class="btn-normal red">红色按钮</a>
    <a href="javascript:" class="btn-normal white">白色按钮</a>
    <input type="submit" class="btn-normal dark" value="input按钮">
</p>
<h4>3. 实色小标签</h4>
<p>
    <span class="tag-solid dark">主色</span>
    <span class="tag-solid gray">灰色</span>
    <span class="tag-solid blue">蓝色</span>
    <span class="tag-solid green">绿色</span>
    <span class="tag-solid orange">橙色</span>
    <span class="tag-solid yellow">黄色</span>
    <span class="tag-solid purple">紫色</span>
    <span class="tag-solid red">红色</span>
</p>
<h4>4. 大圆角质感标签</h4>
<p>
    <span class="tag-honor dark">主色</span>
    <span class="tag-honor gray">灰色</span>
    <span class="tag-honor blue">蓝色</span>
    <span class="tag-honor green">绿色</span>
    <span class="tag-honor orange">橙色</span>
    <span class="tag-honor yellow">黄色</span>
    <span class="tag-honor purple">紫色</span>
    <span class="tag-honor red">红色</span>
</p>
<h4>3. 线框标签</h4>
<p>
    <span class="tag-line dark">主色</span>
    <span class="tag-line gray">灰色</span>
    <span class="tag-line blue">蓝色</span>
    <span class="tag-line green">绿色</span>
    <span class="tag-line orange">橙色</span>
    <span class="tag-line yellow">黄色</span>
    <span class="tag-line purple">紫色</span>
    <span class="tag-line red">红色</span>
</p>
</div>

<!-- /*
* 作者：Poya QQ：931989338
* 邮箱：djcbpl@163.com
* 购买: 定制模板、主题
* 讨论群：149663025（模板、教程、电子书）
* 微信号：SoSoIT-Center
* title:登录界面;
* 店铺地址：https://shop155629335.taobao.com/?spm=a230r.7195193.1997079397.2.diL9ud
* 更多模板：www.cdesign.club
* 广告：本人承接各类大中小型管理系统的软件的设计与前端开发、主题开发，
* 有需要的朋友联系我啦~~~~
*/
 各类大中小型管理系统的软件的设计与前端开发、主题开发，
  -->

</body>
</html>

转自：https://www.zhangxinxu.com/wordpress/2016/11/development-ui-component-based-on-css-color/

心灵的制造商

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
静态UI组件开发实例页面代码收藏

静态UI组件开发实例页面实现的重点技巧就是利用**::first-line**伪元素的文字控色技术<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><titl
复制链接

扫一扫

专栏目录