构建“宝丽来”图像块样式

我是 80 年代末和 90 年代末的孩子。 在我们所有人的手机都内置了相机之前——嗯,在手机起飞之前,真的——家人会带着宝丽来相机来捕捉那些特殊的时刻。 尽管我讨厌和兄弟姐妹摆出尴尬的照片,但我仍然怀念过去时代电影的魔力。

现在,我已经长大了,可以看到主要由 Fujifilm Instax 引发的物理打印的回归。 它们至少在我潜伏的日记组中很受欢迎。 我还没有掏出购买富士的迷你相机或智能手机打印机的钱,但我确实很受诱惑。 也许这是一种时尚,但我仍然渴望重温那段青春。

不管我是否拥有实体设备,我总能在网络上重现宝丽来风格的照片。 WordPress 块系统使它变得简单。

用积木建造 帖子将主要迎合主题作者。 但是,DIY用户也可以尝试一下。 本教程将介绍创建宝丽来风格图像框架作为自定义块样式的步骤。

对于本教程,我使用了 Twenty Twenty-2 和 WordPress 6.0 Beta 2。它也应该适用于 WordPress 5.9。 对于其他主题,您可能需要调整颜色。

构建块样式
building-a-polaroid-image-block-style 构建“宝丽来”图像块样式宝丽来图像块样式。

我在使用块系统时获得的大部分乐趣都在于创建自定义样式。 他们通常只需要几行代码就可以将块转换为完全不同的东西。 宝丽来风格也是一样。

第一步是使用 register_block_style() 通过主题的functions.php注册自定义样式的函数:

add_action(‘init’, ‘tavern_register_block_styles’); 功能 tavern_register_block_styles() { register_block_style( ‘核心/图像’, [ ‘name’ => ‘polaroid’, ‘label’ => __( ‘Polaroid’, ‘tavern’ ) ] ); }

注册后,它将在编辑器中显示为图像块的可选样式。 但是,它仍然需要定制设计。 为此,您只需要一点 CSS。

将以下内容添加到主题的样式表中,或者最好是 通过 wp_enqueue_block_style() 注册它

.wp-block-image[class*=is-style-polaroid] { 框尺寸:边框框; 填充:1rem; 背景颜色:#fff; box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 ), 0 0 4rem rgba( 255, 255, 235, 0.5 ) 插图; .wp 块图像[class*=is-style-polaroid] figcaption { margin-top: 1rem; 边距底部:0; }

这就是字面意思。 自定义块样式是如此容易获胜,我不明白为什么更多的主题作者不包括它们。 在我的上一个主题项目中,我有 70 多个,我一直在退缩——好吧,所以我可能有点过火了。

如果你想改变照片的“年龄”,你可以在上面的 CSS 中将嵌入的阴影变暗。 默认情况下这是一个微妙的效果,但可以随意修改它。

眼尖的读者可能已经注意到我的目标是 [class*=is-style-polaroid] 而不是 .is-style-polaroid。 这是有原因的。 它减少了基于相同概念构建的其他样式的代码。

奖励:倾斜样式

building-a-polaroid-image-block-style-1 构建“宝丽来”图像块样式
building-a-polaroid-image-block-style-2 构建“宝丽来”图像块样式左右标题为宝丽来图像样式。

宝丽来风格的框架是一种有趣的效果,但我们可以更进一步,并为左右倾斜图像添加变化。 将以下内容添加到上一节中创建的现有 tavern_register_block_styles() 函数中:

register_block_style(‘核心/图像’, [ ‘name’ => ‘polaroid-tilt-left’, ‘label’ => __( ‘Polaroid: Tilt Left’, ‘tavern’ )
] ); register_block_style(‘核心/图像’, [ ‘name’ => ‘polaroid-tilt-right’, ‘label’ => __( ‘Polaroid: Tilt Right’, ‘tavern’ )
] );

对于每个“倾斜”样式,您可以使用 transform CSS 属性以及 scale() 和 rotate() 函数。 我选择了 2 度和 -2 度的轻微旋转,但您可以将其推到尽可能远的位置,以获得您喜欢的设计。

.wp-block-image.is-style-polaroid-tilt-right { transform: scale( 0.99, 0.99 ) rotate( 2deg ); } .wp-block-image.is-style-polaroid-tilt-left { transform: scale( 0.99, 0.99 ) rotate( -2deg ); }

一个有趣的效果是当访问者将鼠标悬停在图像上时移除倾斜变换。 为此使用以下 CSS:

.wp-block-image[class*=is-style-polaroid-tilt] { transition: all 0.5s ease-in-out; .wp 块图像[class*=is-style-polaroid-tilt]:hover { 变换: scale( 1, 1 ) 旋转( 0 ); }

如果您尝试了这种块样式,请在评论中告诉我。 如果您真的想采用老式的宝丽来风格,请尝试使用自定义手写字体作为标题。 此外,如果您有任何与图像相关的自定义设计,请分享它们。

类别: 用积木建造

来源

Total
0
Shares
相关文章