擊右上方紅色按鈕關(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)位移,隱藏掉就讓你看到了加載的動畫效果。
當(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; }
當(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)于一種真正的投影。
經(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; }
這些CSS都是非常實用的,有興趣的可以收藏起來,沒準(zhǔn)以后能用上。然后drop-shadow就不用去糾結(jié)IE能不能用了,因為我們已經(jīng)放棄它了。
喜歡小編或者覺得小編文章對你有幫助的,可以點擊一波關(guān)注哦!
本文介紹的是一個非常漂亮的在線古典顏色手冊,為程序員和設(shè)計師提供中國古典顏色設(shè)計提供色彩和靈感,特別是對于一些古典項目非常適合使用它,有了它能為你的網(wǎng)站或者應(yīng)用提供卓然的氣質(zhì),對熱愛古風(fēng)的程序員和設(shè)計師尤為有用!
https://github.com/zerosoul/chinese-colors
常規(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)、湖綠
玄色、玄青、烏色、烏黑、漆黑、、墨色、墨灰色、黑色、緇色等
赤金、金色、銀白色、老銀、烏金、銅綠
以上有你喜歡的顏色么,中國古典顏色確實很漂亮,不管是你的網(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)用程序!
https://github.com/connors/photon
你可以有兩種方式快速開始,一種是經(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
每個Photon應(yīng)用程序都具有相同的基本結(jié)構(gòu),包括主.window元素和cooresponding .window-content包裝器
<div class="window"> <div class="window-content"> ... </div> </div>
使用.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è)欄可用于在應(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>
<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>
Photon是一個用于構(gòu)建Electron應(yīng)用程序的UI工具包,頗有一番蘋果的風(fēng)味在里面,可以用于快速構(gòu)建Electron跨平臺桌面應(yīng)用程序!
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。