有趣的CSS小示例：好看的皮囊千篇一律，有趣的灵魂万里挑一

击右上方红色按钮关注“web秀”，让你真正秀起来

文字加载...动画

html

正在加载中<dot>...</dot>

css

dot{ 
 display: inline-block; 
 height: 1em; 
 line-height: 1; 
 text-align: left; 
 vertical-align: -.25em; 
 overflow: hidden; 
} 
dot::before{ 
 display: block; 
 content: '...\\A..\\A.'; 
 white-space: pre-wrap; 
 animation: dot 2s infinite step-start both; 
} 
@keyframes dot{ 
 33% { 
 transform: translateY(-2em); 
 } 
 66% { 
 transform: translateY(-1em); 
 } 
}

如果你看上图代码没有看懂，请看下图，我注释掉一行代码，你就明白了。原来是dot元素，沿着Y轴在循环位移，隐藏掉就让你看到了加载的动画效果。

border 实现边框

当你需要这样一个上传文件，按钮时，你考虑的是找设计弄个图片，还是自己写一个？？？

其实CSS写，也很简单的。

<a href="javascript：;" class="upload" title="继续上传">添加图片</a>
.upload{ 
 position: relative; 
 display: inline-block; 
 width: 76px; 
 height: 76px; 
 color: #ccc; 
 border: 2px dashed; /*边框虚线*/ 
 text-indent: -12em; /*使其文字看不到*/ 
 transition: color .25s; /*hover事件：颜色渐变动画*/ 
 overflow: hidden; 
 margin: 50px 100px; 
} 
/*用before/after伪类做 + 号样式*/ 
.upload:before, .upload:after{ 
 content: ''; 
 position: absolute; 
 top: 50%; 
 left: 50%; 
} 
.upload:hover{ 
 color: #34538b; 
} 
.upload::before{ 
 width: 20px; 
 border-top: 4px solid; 
 margin: -2px 0 0 -10px; 
} 
.upload::after{ 
 height: 20px; 
 border-left: 4px solid; 
 margin: -10px 0 0 -2px; 
}

不规则的投影 filter

当我们想给一个矩形或其他能用 border-radius 生成的形状加投影时，用 box-shadow 都可以解决，如下图：

但是，当元素添加了一些伪元素或半透明的装饰之后，box-shadow就有些力不从心了，因为 border-radius 会无耻地忽视透明部分。这类情况包括下列几种情况:

1、半透明图像、背景图像、或者 border-image(比如老式的金质像框);

2、元素设置了点状、虚线或半透明的边框，但没有背景(或者当 background-clip 不是 border-box 时);

3、对话气泡，它的小尾巴通常是用伪元素生成的;

4、几乎所有的折角效果

5、通过 clip-path 生成的形状。

下面来看看这个示例： html代码

<div class="speech">不规则的投影</div>

css样式

div { 
 position: relative; 
 display: inline-flex; 
 flex-direction: column; 
 justify-content: center; 
 vertical-align: bottom; 
 box-sizing: border-box; 
 width: 8em; 
 padding: .5em; 
 height: 5em; 
 margin: .6em; 
 background: #0cc071; 
 color: #fff; 
 /*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此时是伪类是没有阴影的*/ 
 -webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
 filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
} 
 
.speech { 
 border-radius: .3em; 
} 
.speech::before { 
 content: ''; 
 position: absolute; 
 top: 1em; 
 right: -.7em; 
 width: 0; 
 height: 0; 
 border: 1em solid transparent; 
 border-left-color: #0cc071; 
 border-right-width: 0; 
}

从上图可以看出box-shadow搞不定的，drop-shadow给搞定了。这是为什么了？

可以很明显的看出区别，为什么会这样呢？在这里我用的是div标签，大家都知道，div标签是个块标签，说白了是个盒模型，指的是一块区域，box-shadow的属性只能添加到盒模型外面，因此内部的东西是不会添加上的，就变成上图的样子，中间还是白色部分。而drop-shadow就不一样了，他是把所有的非透明区域都做了阴影效果，就相当于一种真正的投影。

css 实现自适应的弹框

经常在网页中看到一些Dialog，例如有些网页点击登录注册时就会跳出一个弹框来显示登录注册页面，下面就使用 css 完成一个可以自适应，无论窗口的大小，始终能保持水平垂直居中的dialog。

<div class="c-pupup"> 
 <div class="dialog"> 
 <div class="content"> 
 我是内容 
 </div> 
 </div> 
</div>

css样式

.c-pupup{ 
 position: fixed; 
 top:0; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 background: rgba(0,0,0,.5); 
 text-align: center; 
 white-space: nowrap; 
 z-index: 99; 
} 
.c-pupup:after{ 
 content: ''; 
 display: inline-block; 
 height: 100%; 
 vertical-align: middle; 
} 
.dialog{ 
 background-color: #fff; 
 display: inline-block; 
 vertical-align: middle; 
 border-radius: 6px; 
 text-align: left; 
 white-space: normal; 
 width: 400px; 
 height: 250px; 
}

总结

这些CSS都是非常实用的，有兴趣的可以收藏起来，没准以后能用上。然后drop-shadow就不用去纠结IE能不能用了，因为我们已经放弃它了。

喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！

绍

本文介绍的是一个非常漂亮的在线古典颜色手册，为程序员和设计师提供中国古典颜色设计提供色彩和灵感，特别是对于一些古典项目非常适合使用它，有了它能为你的网站或者应用提供卓然的气质，对热爱古风的程序员和设计师尤为有用！

Github

https://github.com/zerosoul/chinese-colors

特性

使用 React 构建
支持 PWA

适配移动端展现 (Mobile First)

颜色选中高亮
颜色分类
可复制 HEX
可收藏喜欢的颜色
搭配显示诗词
可生成壁纸/图片卡片，屏幕多大，截图就有多大

涉及技术栈和其他开源项目

create-react-app: 大家都在用的 react 项目构建架子
react: 最流行的前端 UI 构建语言
styled-components: react 中 css 解决方案，CSS-IN-JS 最佳实践
eslint + prettier: 为了更好地编码
husky + commitlint: 为了更好地 GIT 提交
html2canvas
pinyin: 汉字转拼音
react-copy-to-clipboard: 开启复制功能
iconfont.cn: 阿里系的图标库，很丰富，很方便
https://www.transparenttextures.com/: 非常好看的纹理背景图
今日诗词

本地开发

常规操作：

克隆到本地：git clone https://github.com/zerosoul/chinese-colors.git
初始化：cd chinese-colors && npm install
运行：npm run start
访问: http://localhost:8099/

截图欣赏

苍色

本类颜色包括苍色、苍翠色、苍黄色、苍青色、苍黑色、苍白色（以下按顺序截图，后续相同）

红色包括粉红色、妃色、品红色、桃红色、海棠红、石榴红、樱桃红、银红色、大红色、绛紫等几十种颜色，此处展示这十色，感兴趣的直达手册

蓝色

蓝色有靛蓝、靛青、碧蓝、蔚蓝、宝蓝、蓝灰、藏青藏蓝等

水色、水红色、水绿色、水蓝色、淡青色、湖蓝、湖绿

黑色

玄色、玄青、乌色、乌黑、漆黑、、墨色、墨灰色、黑色、缁色等

赤金、金色、银白色、老银、乌金、铜绿

总结

以上有你喜欢的颜色么，中国古典颜色确实很漂亮，不管是你的网站主题还是应用主题，配上中国风会很美观、耐看、有气质，有你喜欢的颜色么？

在线体验地址：

https://colors.ichuantong.cn/

绍

虽然现在Electron可以做出非常漂亮UI的跨平台桌面应用程序，但是对于一个像快速进入开发阶段的项目来说，如果自己从头开始，无疑会带来很多重复性劳动的问题，那么有没有一种可以快速上手框架可供我们使用呢，那么答案是肯定的，今天就像大家介绍一下用于使用Electron构建桌面应用程序的UI工具包，用于快速构建漂亮的Election应用程序！

Github开源地址

https://github.com/connors/photon

预览DEMO

你可以有两种方式快速开始，一种是经过编译和压缩CSS和字体，不包含文档或原始源文件，另一种就是直接下载Photon的源文件，可以快速学习，本文作为演示就不在详细的去看源文件了：

我们直接采用第一种方式，下载后文件目录如下：

没错Photon就是纯粹的HTML+CSS,然后我们稍微进行下改造

cd template-app
npm install electron-prebuilt
npm install app
npm install browser-window

进行上面一顿操作后，我们在改造下app.js

这个地方可能不是每个人都要这样，我在本地测试报错了，改造后，在运行

npm start

快速上手

APP布局

每个Photon应用程序都具有相同的基本结构，包括主.window元素和cooresponding .window-content包装器

<div class="window">
 <div class="window-content">
 ...
 </div>
</div>

Paned布局

使用.pane-group和.pane元素以想要的任何方式划分您的应用程序内容。根据需要添加任意数量的窗格。它们将在应用程序中均匀布局。

<div class="window">
 <div class="window-content">
 <div class="pane-group">
 <div class="pane">...</div>
 <div class="pane">...</div>
 <div class="pane">...</div>
 </div>
 </div>
</div>

侧边栏布局

侧栏可用于在应用程序中容纳导航或其他补充信息。可选的.sidebar类将窗格的背景颜色设置为灰色。

<div class="window">
 <div class="window-content">
 <div class="pane-group">
 <div class="pane-sm sidebar">...</div>
 <div class="pane">...</div>
 </div>
 </div>
</div>

迷你侧边栏布局

<div class="window">
 <div class="window-content">
 <div class="pane-group">
 <div class="pane-mini sidebar">...</div>
 <div class="pane">...</div>
 </div>
 </div>
</div>

一般布局

许多应用程序遵循相同的简单布局，具有标题，内容和页脚结构。这在Photon中非常容易构建。

<div class="window">
 <header class="toolbar toolbar-header">
 <h1 class="title">Header</h1>
 </header>
 <div class="window-content">
 <div class="pane-group">
 <div class="pane-sm sidebar">...</div>
 <div class="pane">...</div>
 </div>
 </div>
 <footer class="toolbar toolbar-footer">
 <h1 class="title">Footer</h1>
 </footer>
</div>

最基本的模板

<!DOCTYPE html>
<html>
 <head>
 <title>Photon</title>
 <!-- Stylesheets -->
 <link rel="stylesheet" href="photon.css">
 <!-- Electron Javascript -->
 <script src="app.js" charset="utf-8"></script>
 </head>
 <body>
 <!-- Wrap your entire app inside .window -->
 <div class="window">
 <!-- .toolbar-header sits at the top of your app -->
 <header class="toolbar toolbar-header">
 <h1 class="title">Photon</h1>
 </header>
 <!-- Your app's content goes inside .window-content -->
 <div class="window-content">
 <div class="padded-more">
 <h1>Welcome to Photon</h1>
 <p>
 Thanks for downloading Photon. This is an example HTML page that's linked up to compiled Photon CSS, has the proper meta tags
 and the HTML structure.
 </p>
 </div>
 </div>
 </div>
 </body>
</html>

组件预览

Bars

标签（tab）

Navs

列表

按钮

表单

表格

图标

总结

Photon是一个用于构建Electron应用程序的UI工具包，颇有一番苹果的风味在里面，可以用于快速构建Electron跨平台桌面应用程序！

在线咨询

上一篇：我用HTML5工具，做了一个支付宝9.9版的原型
下一篇：前端基础：HTML

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商