1. 首页
  2. css

CSS#036:建筑搜索,第2部分

←上一个视频下一个视频→
我们从视频#034中停止的地方开始,继续构建搜索区域。
这次我们将重点放在搜索的\”打开\”状态,构建实际的表单元素本身。搜索字段本身使用HTML5表单元素类型\”search\”——通常有一些与之相关的自定义样式,但因为我们使用的是Normalize(Video#011),所以这对我们来说不是问题。
我们创建了一个新的CSS模块位(_按钮.scss)供我们自己在整个网站的样式按钮使用。看到我们在那里做什么了吗?任何在精神上有意义被隔离的样式,我们都会为其创建一个新文件。我们可以随心所欲地做到这一点而不必担心,因为这些文件都是用Sass连接在一起的。
三维按钮外观是由一大堆逗号分隔的框阴影创建的。颜色很容易改变,因为使用(你猜对了!)变量。
$bottomSide: #3852b1;$rightSide: #203891;.button, #rcp_submit {border: 0; // kill default stylingbackground: #4e68c7;box-shadow:// right side// bottom1px 0px 1px $rightSide, 0px 1px 1px $bottomSide,2px 1px 1px $rightSide, 1px 2px 1px $bottomSide,3px 2px 1px $rightSide, 2px 3px 1px $bottomSide,4px 3px 1px $rightSide, 3px 4px 1px $bottomSide,5px 4px 1px $rightSide, 4px 5px 1px $bottomSide,6px 5px 1px $rightSide;}
我们在输入元素中呼应相同的样式(仅在内部而不是外部),完成了3D外观。阴影的偏移量与$offset变量匹配,这导致了一些设计的一致性。
在本视频中没有,但稍后,我们发现仅使用两个边界而不是所有阴影(边界以一定角度相交)就可以更容易地处理输入上的内部阴影。不幸的是,这个按钮不可能。
无论好坏,这种插入式输入样式最终都会渗透到整个站点的所有输入样式中

CSS#036:建筑搜索,第2部分 为WP2原创文章,链接:https://www.wp2.cn/css/css036%ef%bc%9a%e5%bb%ba%e7%ad%91%e6%90%9c%e7%b4%a2%ef%bc%8c%e7%ac%ac2%e9%83%a8%e5%88%86/