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

擊右上方紅色按鈕關(guān)注“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軸在循環(huán)位移，隱藏掉就讓你看到了加載的動畫效果。

border 實現(xiàn)邊框

當(dāng)你需要這樣一個上傳文件，按鈕時，你考慮的是找設(shè)計弄個圖片，還是自己寫一個？？？

其實CSS寫，也很簡單的。

<a href="javascript：;" class="upload" title="繼續(xù)上傳">添加圖片</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; 
}

不規(guī)則的投影 filter

當(dāng)我們想給一個矩形或其他能用 border-radius 生成的形狀加投影時，用 box-shadow 都可以解決，如下圖：

但是，當(dāng)元素添加了一些偽元素或半透明的裝飾之后，box-shadow就有些力不從心了，因為 border-radius 會無恥地忽視透明部分。這類情況包括下列幾種情況:

1、半透明圖像、背景圖像、或者 border-image(比如老式的金質(zhì)像框);

2、元素設(shè)置了點狀、虛線或半透明的邊框，但沒有背景(或者當(dāng) background-clip 不是 border-box 時);

3、對話氣泡，它的小尾巴通常是用偽元素生成的;

4、幾乎所有的折角效果

5、通過 clip-path 生成的形狀。

下面來看看這個示例： html代碼

<div class="speech">不規(guī)則的投影</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給搞定了。這是為什么了？

可以很明顯的看出區(qū)別，為什么會這樣呢？在這里我用的是div標(biāo)簽，大家都知道，div標(biāo)簽是個塊標(biāo)簽，說白了是個盒模型，指的是一塊區(qū)域，box-shadow的屬性只能添加到盒模型外面，因此內(nèi)部的東西是不會添加上的，就變成上圖的樣子，中間還是白色部分。而drop-shadow就不一樣了，他是把所有的非透明區(qū)域都做了陰影效果，就相當(dāng)于一種真正的投影。

css 實現(xiàn)自適應(yīng)的彈框

經(jīng)常在網(wǎng)頁中看到一些Dialog，例如有些網(wǎng)頁點擊登錄注冊時就會跳出一個彈框來顯示登錄注冊頁面，下面就使用 css 完成一個可以自適應(yīng)，無論窗口的大小，始終能保持水平垂直居中的dialog。

<div class="c-pupup"> 
 <div class="dialog"> 
 <div class="content"> 
 我是內(nèi)容 
 </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; 
}

總結(jié)

這些CSS都是非常實用的，有興趣的可以收藏起來，沒準(zhǔn)以后能用上。然后drop-shadow就不用去糾結(jié)IE能不能用了，因為我們已經(jīng)放棄它了。

喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關(guān)注哦！

紹

本文介紹的是一個非常漂亮的在線古典顏色手冊，為程序員和設(shè)計師提供中國古典顏色設(shè)計提供色彩和靈感，特別是對于一些古典項目非常適合使用它，有了它能為你的網(wǎng)站或者應(yīng)用提供卓然的氣質(zhì)，對熱愛古風(fēng)的程序員和設(shè)計師尤為有用！

Github

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

特性

使用 React 構(gòu)建
支持 PWA

適配移動端展現(xiàn) (Mobile First)

顏色選中高亮
顏色分類
可復(fù)制 HEX
可收藏喜歡的顏色
搭配顯示詩詞
可生成壁紙/圖片卡片，屏幕多大，截圖就有多大

涉及技術(shù)棧和其他開源項目

create-react-app: 大家都在用的 react 項目構(gòu)建架子
react: 最流行的前端 UI 構(gòu)建語言
styled-components: react 中 css 解決方案，CSS-IN-JS 最佳實踐
eslint + prettier: 為了更好地編碼
husky + commitlint: 為了更好地 GIT 提交
html2canvas
pinyin: 漢字轉(zhuǎn)拼音
react-copy-to-clipboard: 開啟復(fù)制功能
iconfont.cn: 阿里系的圖標(biāo)庫，很豐富，很方便
https://www.transparenttextures.com/: 非常好看的紋理背景圖
今日詩詞

本地開發(fā)

常規(guī)操作：

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

截圖欣賞

蒼色

本類顏色包括蒼色、蒼翠色、蒼黃色、蒼青色、蒼黑色、蒼白色（以下按順序截圖，后續(xù)相同）

紅色包括粉紅色、妃色、品紅色、桃紅色、海棠紅、石榴紅、櫻桃紅、銀紅色、大紅色、絳紫等幾十種顏色，此處展示這十色，感興趣的直達(dá)手冊

藍(lán)色

藍(lán)色有靛藍(lán)、靛青、碧藍(lán)、蔚藍(lán)、寶藍(lán)、藍(lán)灰、藏青藏藍(lán)等

水色、水紅色、水綠色、水藍(lán)色、淡青色、湖藍(lán)、湖綠

黑色

玄色、玄青、烏色、烏黑、漆黑、、墨色、墨灰色、黑色、緇色等

赤金、金色、銀白色、老銀、烏金、銅綠

總結(jié)

以上有你喜歡的顏色么，中國古典顏色確實很漂亮，不管是你的網(wǎng)站主題還是應(yīng)用主題，配上中國風(fēng)會很美觀、耐看、有氣質(zhì)，有你喜歡的顏色么？

在線體驗地址：

https://colors.ichuantong.cn/

紹

雖然現(xiàn)在Electron可以做出非常漂亮UI的跨平臺桌面應(yīng)用程序，但是對于一個像快速進(jìn)入開發(fā)階段的項目來說，如果自己從頭開始，無疑會帶來很多重復(fù)性勞動的問題，那么有沒有一種可以快速上手框架可供我們使用呢，那么答案是肯定的，今天就像大家介紹一下用于使用Electron構(gòu)建桌面應(yīng)用程序的UI工具包，用于快速構(gòu)建漂亮的Election應(yīng)用程序！

Github開源地址

https://github.com/connors/photon

預(yù)覽DEMO

你可以有兩種方式快速開始，一種是經(jīng)過編譯和壓縮CSS和字體，不包含文檔或原始源文件，另一種就是直接下載Photon的源文件，可以快速學(xué)習(xí)，本文作為演示就不在詳細(xì)的去看源文件了：

我們直接采用第一種方式，下載后文件目錄如下：

沒錯Photon就是純粹的HTML+CSS,然后我們稍微進(jìn)行下改造

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

進(jìn)行上面一頓操作后，我們在改造下app.js

這個地方可能不是每個人都要這樣，我在本地測試報錯了，改造后，在運行

npm start

快速上手

APP布局

每個Photon應(yīng)用程序都具有相同的基本結(jié)構(gòu)，包括主.window元素和cooresponding .window-content包裝器

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

Paned布局

使用.pane-group和.pane元素以想要的任何方式劃分您的應(yīng)用程序內(nèi)容。根據(jù)需要添加任意數(shù)量的窗格。它們將在應(yīng)用程序中均勻布局。

<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>

側(cè)邊欄布局

側(cè)欄可用于在應(yīng)用程序中容納導(dǎo)航或其他補充信息。可選的.sidebar類將窗格的背景顏色設(shè)置為灰色。

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

迷你側(cè)邊欄布局

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

一般布局

許多應(yīng)用程序遵循相同的簡單布局，具有標(biāo)題，內(nèi)容和頁腳結(jié)構(gòu)。這在Photon中非常容易構(gòu)建。

<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>

組件預(yù)覽

Bars

標(biāo)簽（tab）

Navs

列表

按鈕

表單

表格

圖標(biāo)

總結(jié)

Photon是一個用于構(gòu)建Electron應(yīng)用程序的UI工具包，頗有一番蘋果的風(fēng)味在里面，可以用于快速構(gòu)建Electron跨平臺桌面應(yīng)用程序！

在線咨詢

上一篇：我用HTML5工具，做了一個支付寶9.9版的原型
下一篇：前端基礎(chǔ)：HTML

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

文字加載...動畫

border 實現(xiàn)邊框

不規(guī)則的投影 filter

css 實現(xiàn)自適應(yīng)的彈框

總結(jié)

紹

Github

特性

涉及技術(shù)棧和其他開源項目

本地開發(fā)

截圖欣賞

總結(jié)

紹

Github開源地址

預(yù)覽DEMO

快速上手

組件預(yù)覽

總結(jié)

您的項目需求