Phi Phan Mr2P
Mr2P
/ Button with glow effect on hover
Created
August 31, 2023 02:13
Mr2P
/ Button outline primary color with arrow animation
Created
February 16, 2023 15:52
Button outline primary color with arrow animation
Mr2P
/ link-with-arrow-and-underline-animation
Created
February 9, 2023 01:50
Link with arrow and underline animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| selector .wp-block-boldblocks-svg-block__inner { | |
| --ac: var(--bb--text--color, var(--wp--preset--color--primary, #9DFF20)); | |
| --td: var(--bb-attr--transition-duration, .25s); | |
| position: relative; | |
| padding: var(--bb--padding-top--sm, .5rem) var(--bb--padding-right--sm, 0) var(--bb--padding-bottom--sm, .5rem) var(--bb--padding-left--sm, 0); | |
| color: var(--ac); | |
| background-color: var(--wp--preset--color--transparent, transparent); | |
| border-color: var(--wp--preset--color--transparent, transparent); | |
| transition: all var(--td); |
Mr2P
/ variation-image-frame-hover-effect-1
Created
February 5, 2023 16:16
The source code for the image frame hover effect 1 variation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| selector img { | |
| --b: var(--bb-attr--border, 5px); /* border thickness */ | |
| --c: #0000 25%,var(--bb--attr--accent-color, var(--wp--preset--color--primary, #1a4548)) 0; /* define the color here */ | |
| --s: var(--bb-attr--size, 50px); | |
| --p: var(--bb-attr--padding, 10px); | |
| --t: var(--bb-attr--transition, .6s); | |
| padding: var(--p); | |
| background: | |
| conic-gradient(from 90deg at top var(--b) left var(--b),var(--c)) 0 0, | |
| conic-gradient(from 180deg at top var(--b) right var(--b),var(--c)) 100% 0, |
Mr2P
/ variation-image-frame-3
Created
February 5, 2023 16:15
The source code for the image frame 3 variation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| selector img { | |
| --s: var(--bb-attr--spacing,15px); /* control the size */ | |
| --c: var(--bb-attr--color, #000); | |
| padding: var(--s); | |
| border: var(--s) solid #0000; | |
| background: conic-gradient(from 90deg at 1px 1px,#0000 25%,var(--c) 0); | |
| clip-path: | |
| polygon( | |
| 0 0 ,33% 0 ,50% calc(2*var(--s)) ,66% 0, | |
| 100% 0 ,100% 33% ,calc(100% - 2*var(--s)) 50%,100% 66%, |
Mr2P
/ variation-image-frame-2
Created
February 5, 2023 16:13
The source code for the image frame 2 variation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| selector img { | |
| --s: var(--bb-attr--spacing, 10px); | |
| --c: var(--bb-attr--color, #000); | |
| padding: var(--s); | |
| border: calc(2*var(--s)) solid #0000; | |
| outline: 1px solid var(--c); | |
| outline-offset: calc(-1*var(--s)); | |
| background: conic-gradient(from 90deg at 1px 1px,#0000 25%,var(--c) 0); | |
| } |
Mr2P
/ variation-image-frame-1
Created
February 5, 2023 16:10
The source code for the image frame 1 variation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| selector img { | |
| --s: var(--bb-attr--spacing, 10px); /* control the size */ | |
| --c: var(--bb-attr--color, #000); | |
| padding: var(--s); | |
| border: var(--s) solid #0000; | |
| background: conic-gradient(from 90deg at 1px 1px,#0000 25%,var(--c) 0); | |
| } |
Mr2P
/ image-compare-block.js
Last active
January 4, 2023 02:45
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js | |
| // https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css | |
| // https://images.unsplash.com/photo-1543349689-9a4d426bee8e?w=1920&h=1000&fit=crop | |
| // https://images.unsplash.com/photo-1492136344046-866c85e0bf04?w=1920&h=1000&fit=crop | |
| (() => { | |
| const blockElements = document.querySelectorAll('BLOCKSELECTOR'); | |
| if ( !blockElements.length) { | |
| return; | |
| } | |
| blockElements.forEach(blockElement => { |
Mr2P
/ the-animated-heading-block.json
Created
December 21, 2022 02:14
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "blocks": [ | |
| { | |
| "title": "Animated heading", | |
| "content": "<!-- wp:heading {\"className\":\"is-animated-heading\"} -->\n<h2 class=\"is-animated-heading\">The animated heading</h2>\n<!-- /wp:heading -->", | |
| "slug": "animated-heading", | |
| "meta": { | |
| "BoldBlocksTypography": [], | |
| "boldblocks_block_blocks": "[{\"name\":\"core/heading\",\"attributes\":{\"content\":\"The animated heading\",\"level\":2,\"className\":\"is-animated-heading\",\"boldblocks\":{}},\"innerBlocks\":[]}]", | |
| "boldblocks_block_dependent_blocks": [ |
Mr2P
/ the-animated-title-block-style.css
Created
December 21, 2022 00:55
The animated title block style
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* https://cdn.jsdelivr.net/npm/splitting@1.0.6/dist/splitting.min.css */ | |
| selector .is-animated-heading { | |
| visibility: hidden; | |
| } | |
| selector .is-animated-heading.is-animated { | |
| visibility: visible; | |
| } |
NewerOlder