全目錄
本系列文章,主要是圍繞css3屬性,實現我們常見的各種效果,這些效果都是我們實戰開發中經常可以用到的效果:
- css揭祕實戰技巧- 背景與邊框 [一]
- css揭祕實戰技巧- 形狀 [二]
- css揭祕實戰技巧 - 視覺效果[三]
- css揭祕實戰技巧 - 字型排印[四]
- css揭祕實戰技巧 - 使用者體驗[五]
- css揭祕實戰技巧 - 結構與佈局[六]
- css揭祕實戰技巧 - 過渡與動畫[七]
前言
- 選用合適的滑鼠游標
- 擴大點選區域
- 通過陰影來弱化背景
- 通過模糊來弱化背景
- 滾動提示
一:選用合適的滑鼠游標
平時開發中,我們經常會這是滑鼠游標的效果,那最長設定的就是cursor:pointer;表示可點選的,那麼其實還有其他一些我們不常用,但卻非常有用的游標效果:
- pointer: 可點選
- not-allowed: 不允許點選
- context-menu:表示元素有上下文選單
- move: 表示元素可以移動的時候
- help: 有幫助資訊的時候
- copy: 比如:某一按鈕點選會將文案複製到其他地方或者剪下板的效果,就可以設定為copy
- none: 不顯示滑鼠游標(某些不希望使用者操作的時候,該效果是可以使用的)
以下是所有游標的效果:我們只需要記住上面這些常用的效果即可。 css2.1內建游標效果:
css3 內建游標效果:二:擴大可點選區域
這也是我們平時做頁面的時候,可以優化的一點,儘可能的擴大可點選區域,這樣使用者更容易到底可點選的區域。
例如下圖:我們不要只給➕ 設定點選 事件,而是給整個圓圈區域設定點選事件。
三:通過陰影來弱化背景
首先,我們來看一下效果:
方案一:陰影部分用一層div包括,並且設定透明度,
/* 用於遮擋背景 */ position: fixed;
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
/* 需要吸引使用者注意的元素 */
.lightbox {
position: absolute; z-index: 1;
/* [其餘樣式] */
}
複製程式碼
方案二:用偽元素代替 外層的div
.lightbox::before {
position: fixed; top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0,0,0,.8);
}
複製程式碼
缺點:偽元素無法繫結獨立的javascript事件處理的回撥函式。
方案三:採用box-shadow
box-shadow: 0 0 0 999px rgba(0,0,0,.8); //此時陰影半徑必須設定的足夠大
或者
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8); //將陰影半徑設定為視口的寬高。
複製程式碼
缺點:陰影也無法繫結獨立的javascript事件處理的回撥函式。
方案四:採用dialog的backdrop屬性
//設定dialog元素的::backdrop偽元素,
dialog::backdrop {
background: rgba(0, 0, 0, .8);
}
複製程式碼
確定:瀏覽器的相容性有限
四:通過模糊來弱化背景
首先,來看一下我們想要實現的效果:
程式碼如下:
<main>Bacon Ipsum dolor sit amet...</main>
<dialog>
O HAI, I'm a dialog. Click on me to dismiss.
</dialog>
複製程式碼
main{
filter: blur(3px) contrast(.8) brightness(.8);
}
複製程式碼
五:滾動提示
首先,我們看一下效果:
思路講解: 首先,上下的陰影效果可以通過設定radial-gradient實現,滾動到頂部或者底部的時候,陰影消失,可以通過另外加一層白色陰影去覆蓋即可,然後通過backgroud-attachment控制陰影是否在滾動時顯示。程式碼如下:
ul {
overflow: auto;
width: 20em;
height: 12em;
padding: .3em .5em;
border: 1px solid silver;
background: linear-gradient(white, white) 0 0 / 100% 50px,
radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0/ 100% 15px,
linear-gradient(to top, white, white) bottom/ 100% 50px,
radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom/ 100% 15px;
background-repeat: no-repeat;
background-attachment: local, scroll, local, scroll;
}
複製程式碼