圆润:CSS中的复合形状

以下是帕克·贝内特的客串帖子。帕克是这里的常客,以用独特的解决方案解决常见问题而闻名。这次他又开始创作复杂的形状,有图像背景、阴影和曲线,但又很灵活。 我喜欢在设计上合作,因为这常常促使我尝试新事物。最近,我得到了一个类似这样的设计组合:一个圆形的复合形状作为一个固定的标题,有一个纹理的镶嵌有一个内部阴影周围(一个\"井\")。我想,这有多难?曲线!一个答案非常简单,当然:我本可以选择将一幅图像切成薄片,在弯曲的底部使用透明的.png文件,包括阴影和所有内容,并带有一个\"端盖\",允许右半部分响应性地调整大小(第一列设计为固定宽度)。但是我希望在以后的道路上有更大的灵活性,所以我决定使用CSS来解决这个问题。这里是我最后采用的方法,没有什么特别的,只是好的旧CSS: edittoncodepen(justthegist)edittoncodepen(full finished layout)CodePen is Sassy! CodePen在我所有的实验中都是不可或缺的,在客户审查中也是如此。一个最大的优势是能够在SCSS中写入并快速看到结果:我可以尝试不同的宽度、颜色、阴影、边界半径等,只需更改变量即可。 我将变量用于特定的高度和宽度,以及box-shadow和border-radius大小,然后使用这些来计算额外的大小-在有意义的情况下使用比率将设计元素连接在一起。变数摇滚!在修复中 对于大多数项目,我使用居中的.page-wrap,它占浏览器窗口的百分比。但是当你用position: fixed把你的头钉在上面时,它就不再包含在换页中了。一种解决方案是在固定的页眉之后开始换页,并包括一个页眉换行,它复制了换页的宽度、边距和填充(在这个代码笔中有详细信息)。 为了保持滚动内容在下面的\"剪切\"部分的假象,我使用了overflow: hidden在页眉的两侧裁剪掉阴影。这意味着第二个wrapper div,为了在内容和窗口框架之间保持小宽度的填充(是的,我就是那个anal)。z-index:Leveling Up 自然地,我希望保持标记精简,而不依赖于布局的源代码顺序。我在看起来有意义的地方使用了伪元素,并在很大程度上依赖于绝对定位来放置东西——使用z-index来改变它们重叠的方式。因为绝对定位将元素从布局流中移除,所以我有时需要进行补偿,例如,将padding添加到其他元素中以填充该空间。 在计算定位时,我发现由于堆叠顺序的特殊性,我可以将自己绘制到z索引角:z-index需要定位才能工作,未定位的元素首先渲染,很容易忘记哪些元素受\"堆叠上下文\"约束——例如,伪元素不能高于其父元素的z-index(请参见CodePen上的演示)。 我还更改了阴影的z-index,使其成为一个单独的伪元素。这让我把阴影藏在需要遮住的物体后面,或者像在.main滚动内容的侧面一样,把它们抬高,以覆盖任何到达边缘的东西,以免打破深度的错觉。 /* elements that reach the edges of .main need to fallunder edge shadow to maintain \"cut-out\" illusion */.well-sides {/* child elements absolute */position: relative;overflow: hidden; }.well-sides:before, .well-sides:after {content: \"\";display: block;position: absolute;/* higher than any z-index in .main, lower than header */z-index: 99;/* shadow size */top: -20px;height: 120%;/* shadow size */width: 20px;background: transparent; }.well-sides:before {left: 0;/* negative spread */-webkit-box-shadow: inset 20px -20px 20px -20px rgba(0,0,0,0.35);-moz-box-shadow: inset 20px -20px 20px -20px rgba(0,0,0,0.35);box-shadow: inset 20px -20px 20px -20px rgba(0,0,0,0.35); }.well-sides:after {right: 0;/* negative spread */-webkit-box-shadow: inset -20px 20px 20px -20px rgba(0,0,0,0.35);-moz-box-shadow: inset -20px 20px 20px -20px rgba(0,0,0,0.35);box-shadow: inset -20px 20px 20px -20px rgba(0,0,0,0.35); }不幸的是,在CSS中没有实际的方法来创建带有凹曲线的对象。在两个圆形矩形连接的地方,我用了一个\"补丁\"来覆盖insetbox-shadow\"接缝\",并将纹理背景延伸到内角区域。然后我用一个圆形的白色角把它重叠起来,创造出一个正的负空间。最后,我在圆角上加了一个普通的box-shadow(被overflow: hidden裁剪),把它和insetbox-shadow混合在一起。 在\"patch\"中的开始阴影必须\"不透明\"一点,以匹配插图。内圆 曲线我放置了一个透明的正方形,有一个圆角,两边有一个厚厚的白色边框来完成这个幻觉。我使用了border-radius和box-shadow的大小作为变量来确定角的大小和位置。 - 在CodePen上编辑它是如何堆叠的 下面是我如何将这些片段放在一起的: 这里是幻灯片放映。如果通过联合阅读,请查看真正的博客文章以查看幻灯片。 <; >;

admin_action_{$_REQUEST[‘action’]}

do_action( "admin_action_{$_REQUEST[‘action’]}" )动作钩子::在发送“Action”请求变量时激发。Action Hook: Fires when an ‘action’ request variable is sent.目录锚点:#说明#源码说明(Description)钩子名称的动态部分$_REQUEST['action']引用从GET或POST请求派生的操作。源码(Source)更新版本源码位置使用被使用2.6.0 wp-admin/admin.php:...

日期:2020-09-02 17:44:16 浏览:1159

admin_footer-{$GLOBALS[‘hook_suffix’]}

do_action( "admin_footer-{$GLOBALS[‘hook_suffix’]}", string $hook_suffix )操作挂钩:在默认页脚脚本之后打印脚本或数据。Action Hook: Print scripts or data after the default footer scripts.目录锚点:#说明#参数#源码说明(Description)钩子名的动态部分,$GLOBALS['hook_suffix']引用当前页的全局钩子后缀。参数(Parameters)参数类...

日期:2020-09-02 17:44:20 浏览:1060

customize_save_{$this->id_data[‘base’]}

do_action( "customize_save_{$this-&gt;id_data[‘base’]}", WP_Customize_Setting $this )动作钩子::在调用WP_Customize_Setting::save()方法时激发。Action Hook: Fires when the WP_Customize_Setting::save() method is called.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分,$this->id_data...

日期:2020-08-15 15:47:24 浏览:800

customize_value_{$this->id_data[‘base’]}

apply_filters( "customize_value_{$this-&gt;id_data[‘base’]}", mixed $default )过滤器::过滤未作为主题模式或选项处理的自定义设置值。Filter Hook: Filter a Customize setting value not handled as a theme_mod or option.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分,$this->id_date['base'],指的是设置...

日期:2020-08-15 15:47:24 浏览:887

get_comment_author_url

过滤钩子:过滤评论作者的URL。Filter Hook: Filters the comment author’s URL.目录锚点:#源码源码(Source)更新版本源码位置使用被使用 wp-includes/comment-template.php:32610...

日期:2020-08-10 23:06:14 浏览:925

network_admin_edit_{$_GET[‘action’]}

do_action( "network_admin_edit_{$_GET[‘action’]}" )操作挂钩:启动请求的处理程序操作。Action Hook: Fires the requested handler action.目录锚点:#说明#源码说明(Description)钩子名称的动态部分$u GET['action']引用请求的操作的名称。源码(Source)更新版本源码位置使用被使用3.1.0 wp-admin/network/edit.php:3600...

日期:2020-08-02 09:56:09 浏览:873

network_sites_updated_message_{$_GET[‘updated’]}

apply_filters( "network_sites_updated_message_{$_GET[‘updated’]}", string $msg )筛选器挂钩:在网络管理中筛选特定的非默认站点更新消息。Filter Hook: Filters a specific, non-default site-updated message in the Network admin.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分$_GET['updated']引用了非默认的...

日期:2020-08-02 09:56:03 浏览:855

pre_wp_is_site_initialized

过滤器::过滤在访问数据库之前是否初始化站点的检查。Filter Hook: Filters the check for whether a site is initialized before the database is accessed.目录锚点:#源码源码(Source)更新版本源码位置使用被使用 wp-includes/ms-site.php:93910...

日期:2020-07-29 10:15:38 浏览:825

WordPress 的SEO 教学:如何在网站中加入关键字(Meta Keywords)与Meta 描述(Meta Description)?

你想在WordPress 中添加关键字和meta 描述吗?关键字和meta 描述使你能够提高网站的SEO。在本文中,我们将向你展示如何在WordPress 中正确添加关键字和meta 描述。为什么要在WordPress 中添加关键字和Meta 描述?关键字和说明让搜寻引擎更了解您的帖子和页面的内容。关键词是人们寻找您发布的内容时,可能会搜索的重要词语或片语。而Meta Description则是对你的页面和文章的简要描述。如果你想要了解更多关于中继标签的资讯,可以参考Google的说明。Meta 关键字和描...

日期:2020-10-03 21:18:25 浏览:1695

谷歌的SEO是什么

SEO (Search Engine Optimization)中文是搜寻引擎最佳化,意思近于「关键字自然排序」、「网站排名优化」。简言之,SEO是以搜索引擎(如Google、Bing)为曝光媒体的行销手法。例如搜寻「wordpress教学」,会看到本站的「WordPress教学:12个课程…」排行Google第一:关键字:wordpress教学、wordpress课程…若搜寻「网站架设」,则会看到另一个网页排名第1:关键字:网站架设、架站…以上两个网页,每月从搜寻引擎导入自然流量,达2万4千:每月「有机搜...

日期:2020-10-30 17:23:57 浏览:1298