简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

美丽的阴影（剖析jquery主页）

WBOY
Libérer： 2016-08-31 08:41:46
original
1307 Les gens l'ont consulté
  • Download
  • API Documentation
  • Blog
  • Plugins
  • Browser Support

jquery主页第一眼看到的就是这个玻璃渣效果，设计者利用高光和阴影制造出这种效果。

怎么做出这种感觉呢？

第一步：导航区设定为半透明，颜色为rgba(0,0,0，.1)

第二步：左上角和右上角切出圆角（not important）

第三步：导航区上部起高亮border-top: 1px solid rgba(255,255,255,.3)

第三步：导航区四边起阴影box-shadow:0 0 5px rgba(0,0,0,.7)

第四布：增加左侧导航区阴影效果border-left: 1px solid rgba(0,0,0,.3)

好的歌唱也唱不厌，jquery主页许多地方有类似的手法，不信请往下看：

okokokokkokoko

 

看不见。。。。好吧，我也是买了一个放大镜才看到的，效果的样子类似于：用刀在灰色的岩石上画了一条线，就像..就像古碑上刻的字。 所做的设置很简单，根据背景的颜色选取高光和阴影的颜色；颜色确定后，开始设置阴影：box-shadow: 0 -1px #000；设置高光：border-top: 1px solid #333

嗯，写到这了，以后继续补充---------------------------the world ain't all sunshine and rainbows

Étiquettes associées：
美丽的阴影（剖析jquery主页）
source：php.cn
Article précédent：深度解析响应式布局 Article suivant：关于响应式布局
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1772
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1914
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1627
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1538
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1573
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！