BLOCKS

Nearly all of the core blocks have been optimized and styled for Neumorphism.
Pick out some of the blocks that are frequently used when creating a website and show you their style.


Buttons

Button blocks have two styles ( fill / outline ), and you can change the background & text color.
This block is styled by default for Neumorphic design, and any combination of properties will generate the best style.


Quote

Quote block has two styles, both styles apply the Neumorphic Reverse ( dented type ) design.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

bt WordPress

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

By WordPress

Media & Text

Media & Text block has Neumorphic ( raised type ) design, that can be selected in addition to the default style.
Use Neumorphic design to suit the context and mood of the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Table

The table block defaults to the Neumorphic ( raised type ) design.
Of course the border color is appropriate color for the skin color.

Header column 1Header column 2Header column 3Header column 4Header column 5
Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum

Audio & File

Audio blocks are often overlooked, but this one is also styled as a Neumorphic design.
Looks like it’s actually embedded in the page and doesn’t ruin the feel of the site.

Nocturne in B flat minor, Op. 9 no. 1

File blocks are subject to the Neumorphic design if the download button is enabled.


Social Icons

Social icon block has three styles – Default, Logos Only, and Pill Shape – and is a colorful design.
You can use Neumorphic style if you want to match icons to your site.


Embeds

There are a number of embed blocks available, but the four major embeds (YouTube, Facebook, Instagram, and Twitter) are optimized for Neumorphic design.
I will apply the design to other blocks in the future.

YouTube

WordPress 5.4.1 is now available! This security and maintenance release features 17 bug fixes in addition to 7 security…

WordPressさんの投稿 2020年4月29日水曜日
Facebook
Twitter
Instagram