用css3實現各種圖示效果(2)
寫在前面
寫的一模一樣的css樣式,結果卻導致原來出來不一樣的效果圖。
用chrome的開發者工具檢視,比較起來還是一模一樣的css樣式,可為什麼會出現不一樣的placeholder效果呢?一個白色粗體,一個灰色正常字型。
找了老半天找不到原因
後來才發現是我同事寫的框架css裡面程式碼的一句話影響到了
::-webkit-input-placeholder { color: #a4afc6; }
可是為什麼在chrome控制檯看不到這句程式碼呢?請教了一番同事,原來是這樣的。
1、點選控制檯“設定”按鈕
2、按如下所示設定,選中“Show user agent shadow DOM”
3、你就會在elements控制面板裡面能看到如下所示
迴歸正題,繼續我的css各種圖示。。。。
當然在開始之前,還是加上如下這段公共樣式吧!
[class^="u-icon"] { display: inline-block; color: #fff; vertical-align: middle; }
各種刪除按鈕(不用圖示只能css來實現)
html程式碼如下:
<span class="u-icon-radioDelete"></span> <span class="u-icon-deleteToggle Orange"> <span class="u-icon-trash"></span>刪除 </span> <span class="u-icon-deleteToggle Blue"> <span class="u-icon-grayTrash"></span>刪除 </span> <span class="u-icon-del"></span> <span class="u-icon-del on"></span> <span class='u-icon-sel more'>搜尋更多</span> <span class='u-icon-sel on'>搜尋更多</span> <span class='u-icon-delete'><i></i></span>
頁面顯示效果如下:
css樣式程式碼:
.u-icon-sel { position: relative; -webkit-box-sizing: border-box; width: 32%; height: 32px; line-height: 30px; margin-bottom: 4px; border: 1px solid #a4afc6; border-radius: 3px; color: #a4afc6; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .u-icon-sel.on { overflow: hidden; border-color: #ff5d1d; color: #000; } .u-icon-sel.on:before { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; background: url(http://webresource.c-ctrip.com/ResCorpMobile/R1/img/common-graphic37.png?20150423) no-repeat -23px -152px/150px 240px; content: ''; } .u-icon-sel.more { color: #6daeee; } .u-icon-deleteToggle { width: 75px; height: 45px; line-height: 45px; text-align: center; } .u-icon-deleteToggle.Blue { background-color: #3e74b9; } .u-icon-deleteToggle.Orange { background-color: #ff5d1d; } /*白色垃圾桶、灰色垃圾桶圖示*/ .u-icon-trash,.u-icon-grayTrash { background: url(http://webresource.c-ctrip.com/ResCorpMobile/R1/img/common-graphic37.png?20150423) no-repeat 0 0/150px 240px; } .u-icon-trash { background-position: 0 -84px; width: 16px; height: 18px; } .u-icon-grayTrash { display: inline-block; width: 12px; height: 18px; margin-right: 8px; vertical-align: -2px; background-position: -3px -178px; } /*不用任何圖示實現刪除icon效果*/ .u-icon-delete { position: absolute; bottom: 5px; right: 0; width: 40px; height: 40px; } /*給before偽類設定一個預設背景色 設定content*/ .u-icon-delete:before { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; border-radius: 20px; background-color: #8e8e93; content: ''; } /*給after偽類 -webkit-transform: rotate(-45deg);旋轉 background-color: #e1e2e4;設定X的一邊的顏色*/ .u-icon-delete:after { position: absolute; top: 19px; left: 14px; width: 12px; height: 2px; -webkit-transform: rotate(-45deg); background-color: #e1e2e4; content: ''; } /* -webkit-transform: rotate(45deg); 運用的特別巧秒*/ .u-icon-delete i { position: absolute; top: 19px; left: 14px; width: 12px; height: 2px; background-color: #e1e2e4; -webkit-transform: rotate(45deg); } /*橙色背景中間一白色橫槓的刪除icon */ .u-icon-del { position: relative; width: 24px; height: 24px; border: 1px solid #ff5d1d; -webkit-border-radius: 24px; border-radius: 24px; -webkit-transition: 300ms ease-in-out; transition: 300ms ease-in-out; background-color: #ff5d1d; } .u-icon-del.on,.on .u-icon-del { -webkit-transform: rotateZ(90deg); } /*這裡的background-color: #fff;和 content: "\20";實現白色橫槓*/ .u-icon-del::after { position: absolute; top: 10px; left: 4px; width: 16px; height: 4px; background-color: #fff; content: "\20"; } .u-icon-radioDelete { position: relative; width: 24px; height: 24px; border: 1px solid #8AADD8; -webkit-border-radius: 24px; border-radius: 24px; -webkit-transition: 300ms ease-in-out; transition: 300ms ease-in-out; } .u-icon-radioDelete::after { position: absolute; top: 11px; left: 4px; width: 16px; height: 2px; background-color: #8AADD8; color: #8AADD8; content: "\20"; } .u-icon-radioDelete.on,.on .u-icon-radioDelete { -webkit-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); }
加加減減圖示
html程式碼如下:
<i class='u-icon-plus on'></i> <i class='u-icon-minus on'></i> <i class='u-icon-plus '></i> <i class='u-icon-minus '></i> <span class="u-icon-addS"></span> <span class="u-icon-addB"></span>
頁面顯示效果如下:
css樣式程式碼:
/*加減標籤*/ /*加標籤icon*/ .u-icon-addS, .u-icon-addB { width: 60px; height: 40px; } /*加的大icon*/ .u-icon-addB { position: relative; top: 0; right: 0; } /*加的小icon*/ .u-icon-addS { position: relative; color: #3B8FF8; } .u-icon-addS::before,.u-icon-addS::after, .u-icon-addB::before,.u-icon-addB::after { position: absolute; top: 20px; left: 25px; width: 12px; content: ""; } .u-icon-addB::before, .u-icon-addB::after { border-top: 1px solid #fff; } .u-icon-addS::before,.u-icon-addS::after { border-top: 2px solid #3B8FF8; } .u-icon-addB::after,.u-icon-addS::after { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } /*加、減按鈕*/ .u-icon-plus, .u-icon-minus { position: relative; width: 30px; height: 3px; background-color: #a9b3c9; box-shadow: 0 1px 1px #959bab inset; border-radius: 3px; } .u-icon-plus.on, .u-icon-minus.on,.on.u-icon-plus::before, .on .u-icon-plus,.on .u-icon-minus ,.on .u-icon-plus ::before { background-color: #6daeee; box-shadow: 0 1px 1px #6a9aca inset; } .u-icon-plus::before { position: absolute; left: 13px; width: 3px; height: 30px; border-radius: 3px; box-shadow: 1px 0 1px #959bab inset; background-color: #a9b3c9; -webkit-transform: translate(0,-13.5px); transform: translate(0,-13.5px); text-align: center; content: ""; }
問號圖示
html程式碼如下:
<span class="u-icon-qa"></span>
頁面顯示效果如下:
css樣式程式碼:
.u-icon-qa { width: 60px; height:44px; text-align: center; color: #FFFFFF; font-size: 18px; } .u-icon-qa:before { position: absolute; top:10px; right: 15px; width: 24px; height: 24px; background: #67a5e2; -webkit-border-radius: 24px; border-radius: 24px; content: ''; } .u-icon-qa:after { position: absolute; top:10px; right: 22px; content: '?'; }
一行被選中狀態圖示
html程式碼如下:
<span class="u-icon-checkTitle"></span>
頁面顯示效果如下:
css樣式程式碼:
.u-icon-checkTitle { position: absolute; top: 9px; right: 13px; width: 16px; height: 16px; border-radius: 100%; background: #fff; content: ''; } .u-icon-checkTitle::after { position: absolute; top: 2px; right: 5px; width: 4px; height: 8px; border-width: 0 2px 2px 0; border-color: #ffa124; border-style: solid; -webkit-transform: rotate(45deg); content: ''; }
未完待續(如果大家有更好的方法來實現,不用圖片,可以麻煩與我交流一下,謝謝!)
如果您覺得本篇博文對您有所收穫,覺得小女子還算用心,請點選右下角的 [推薦],謝謝!
相關推薦
用css3實現各種圖示效果(2)
寫在前面 寫的一模一樣的css樣式,結果卻導致原來出來不一樣的效果圖。 用chrome的開發者工具檢視,比較起來還是一模一樣的css樣式,可為什麼會出現不一樣的placeholder效果呢?一個白色粗體,一個灰色正常字型。 找了老半天找不到原因 後來才發現是我同事寫的框架css裡面程式碼的一句
laya用panel實現拖動效果(拉地圖效果)
layabox最常見的拖動效果是用list實現的,但是也可以用panel實現,並且,panel元件的功能之一就是用來實現拖動的,不存在說panel比list實現拖動更好。 用panel實現拖動時,需要給panel新增子容器,例如box,然後再往子容器box中新增想要滑動的內容,在box尺寸內
用c++獲取音訊檔案的資訊 達到非同步播放的效果(2)
接著昨天的播放說 昨天的播放只能精確到秒級 在測試了之後 發現 要精確到毫秒(至少是100毫秒)的級別才能讓人聽不出來有問題 所以研究了下 發現可以用檔案大小 / 位元率 * 8 的方式來獲取到比較精確的播放時長(我自己的需求是控制到100ms) int bps = 0,
用 Unity 和 HTC Vive 實現高階 VR 機制(2)
介紹 在第一部分教程中,我們學習李如何建立互動系統以及用它來抓取、握持和扔出東西。 在第二部分中,你將學習: 製作一副功能完備的弓和箭 建立一個虛擬揹包 本教程針對高階讀者,它會跳過許多細節,比如新增元件、建立新 GameObjecdt、指令碼等
用jquery實現選項卡效果(非常漂亮,帶動畫效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
在C++中調用DLL中的函數(2)
釋放 工作 img .html 一個 log ++ 原型 獲取 轉自:http://blog.sina.com.cn/s/blog_53004b4901009h3b.html 應用程序使用DLL可以采用兩種方式: 一種是隱式鏈接,另一種是顯式鏈接。在使用DLL之前首先要
UWP中實現大爆炸效果(一)
ID eight 爆炸效果 foo 更新 The 選中 wid 重寫 自從老羅搞出大爆炸之後,各家安卓都內置了類似功能。UWP怎麽能落下呢,在這裏我們就一起擼一個簡單的大爆炸實現。 閑話不說,先上效果: 因為代碼太多,所以我打算寫成一個系列,下面是第一篇的正文: 首先
UWP中實現大爆炸效果(二)
cti setter val sele osi enume rail += ddd 上一回實現了一個寬度不均勻的Panel,這次我們編寫一個簡單的BigbangView主體。 首先創建一個模板化控件,刪掉Themes/Generic.xaml中的<Style Targ
用 jQuery 實現表單驗證(轉載)
失去焦點 cli on() 獲得 itl 文本框 特殊 體驗 格式 jQuery 官方 API 地址: http://api.jquery.com/ 在線引用 jQuery:http://code.jquery.com/ ——選自《鋒利的jQuery》(第2版)第5章的
WPF編遊戲系列 之七 動畫效果(2)
sed 其中 所有 wpf olt targe 針對 font bar 原文:WPF編遊戲系列 之七 動畫效果(2) 上一篇已經對關閉窗口圖標進行了動畫效果處理,本篇將對窗口界面的顯示和關閉效果進行處理
Python用列表實現棧,佇列(二)
用列表實現佇列 佇列和棧實現的功能差不多,無非是入佇列,出佇列,佇列長度等等。其中,入佇列可以用列表的append()來實現,出佇列可以使用pop(0)來實現。由於這個實現方法比較簡單,因此它也是最低效的。append方法入佇列和棧實
Python用列表實現棧,佇列(一)
用列表實現棧 棧方法 列表實現 S.push() L.append() S.pop() L.pop() S.top()
vue用i18n實現多語言支援(國際化)
vue-i18n是用於多語言適配的vue外掛,主要用於前端專案的國際化應用。 個簡單的例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&
用qemu實現tsi107橋摸索(三)
通過上一篇的分析,知道了 mac_newworld中的 TYPE_U3_AGP_HOST_BRIDGE; TYPE_UNI_NORTH_AGP_HOST_BRIDGE;TYPE_UNI_NORTH_INTERNAL_PCI_HOST_BRIDGE;TYPE_UNI_NO
SpringBoot整合Mybatis實現簡單的CRUD(2)
思考 看了上面一步步的講解。你應該明白了,其實和SSM階段的CRUD基本相同,這裡我就不再舉例其他方法。 下面我們講解一下不同的地方: 實現頁面跳轉 因為Thymeleaf指定的目錄src/main/resources/templates/是受保護的目錄,其下的資源不能直接通過瀏
用節點實現一個棧結構(stack)
前一篇文章用了陣列對棧進行了簡單地實現,本文擬使用linkedList進行實現。在java的connection中,有一個linkedlist子類,俗稱為連結串列,linkedlist,節點Node在java中是這樣定義的: Private static class
用Dockerfile構建java web環境(2)
Dockerfile有兩種寫法: (1) FROM ubuntu:14.04 MAINTAINER *** "***@******.com" RUN apt-get update ADD jdk-8u77-linux-x64.tar.gz /usr/local/java
基於雙端堆實現的優先順序佇列(2):內幕
在《基於雙端堆實現的優先順序佇列(1):原理》一文中講述了雙端堆的相關原理,本文則詳細講述具體的內部實現,便於區分,內部函式名稱都以雙下劃線作為字首,在這裡,有幾個關鍵問題需要說明 1)怎麼求一個結點的對稱結點:如果完全二叉樹根結點從索引1開始但不儲存元素,那麼最小堆根結點則在索引2
基於TensorFlow的Cats vs. Dogs(貓狗大戰)實現和詳解(2)
2. 卷積神經網路模型的構造——model.py 關於神經網路模型不想說太多,視訊中使用的模型是仿照TensorFlow的官方例程cifar-10的網路結構來寫的。就是兩個卷積層(每個卷積層後加一個池化層),兩個全連線層,最後一個softmax
用c#實現螢幕錄影功((成功)
using WMEncoderLib; using WMPREVIEWLib; using System.IO; WMEncoder Encoder; private void Form1_Load(object sender, System.EventAr