整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          有趣的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)用程序!


          主站蜘蛛池模板: 国产内射999视频一区| 色婷婷香蕉在线一区二区| 大伊香蕉精品一区视频在线| 国产婷婷色一区二区三区深爱网| 中文字幕日韩丝袜一区| 韩国精品一区视频在线播放| 国产一区二区三区免费视频| 上原亚衣一区二区在线观看| 亚洲AV成人一区二区三区AV | 中文字幕一区二区三区精彩视频| 久久人做人爽一区二区三区| 日韩一区在线视频| 亚洲人成人一区二区三区| 国产一区二区不卡老阿姨| 精品少妇一区二区三区在线| 亚洲无圣光一区二区| 一区二区三区国模大胆| 国产精品综合AV一区二区国产馆| 国产vr一区二区在线观看| 国产99视频精品一区| 国产一区二区三区在线观看精品| 国产精品一区视频| 麻豆AV一区二区三区| 韩国福利一区二区三区高清视频| 亚洲av乱码一区二区三区按摩| 国产亚洲情侣一区二区无码AV| 国产在线视频一区二区三区| 中文字幕一区二区三区人妻少妇| 免费观看一区二区三区| 无码av人妻一区二区三区四区| 国产精品一区二区久久国产| 国产成人精品无码一区二区老年人| 日韩精品无码免费一区二区三区| 麻豆国产在线不卡一区二区| 麻豆国产在线不卡一区二区| 欧美日韩精品一区二区在线观看 | 国产一区在线视频观看| 精品免费国产一区二区三区 | 久久久精品人妻一区二区三区| 91久久精一区二区三区大全| 成人无码AV一区二区|