CSS visual effects

CSS custom shape and pattern #1

Source: bennettfeely.com/clippy/ and bennettfeely.com/gradients/

The shape is a <div> clipped with the clip-path CSS property, the background pattern is generated by CSS (no image).

.av-bg-pattern-1 .fl-col-content {

    background:
    radial-gradient(
        #e7d1af,
        #e7d1af 50%,
        transparent 50%,
        transparent 100%
        ),
    radial-gradient(
        #e6944c,
        #e6944c 50%,
        transparent 50%,
        transparent 100%
        ),
    radial-gradient(
        #a17b5d,
        #a17b5d 40%,
        transparent 40%,
        transparent 100%
        ), floralwhite;
    background-size:
        8em 8em,
        6em 6em,
        2em 2em;
    background-blend-mode: multiply;
    background-position:
        0 0,
        -33% -33%,
        -200% -200%;

    -webkit-clip-path: polygon(0 15%, 100% 0, 70% 100%, 20% 85%);
    clip-path: polygon(0 15%, 100% 0, 70% 100%, 20% 85%);

}

CSS custom shape and pattern #2

Source: bennettfeely.com/clippy/ and bennettfeely.com/gradients/

The shape is a <div> clipped with the clip-path CSS property, the background pattern is generated by CSS (no image).

.av-bg-pattern-2 .fl-col-content {

    width: 60vh;
    height: 60vh;
    margin: 0 auto;

    background:
    radial-gradient(
		at bottom right,
		dodgerblue 0,
		dodgerblue 1em,
		lightskyblue 1em,
		lightskyblue 2em,
		deepskyblue 2em,
		deepskyblue 3em,
		gainsboro 3em,
		gainsboro 4em,
		lightsteelblue 4em,
		lightsteelblue 5em,
		deepskyblue 5em,
		deepskyblue 6em,
		lightskyblue 6em,
		lightskyblue 7em,
		transparent 7em,
		transparent 8em
    ),
	radial-gradient(
		at top left,
		transparent 0,
		transparent 1em,
		lightskyblue 1em,
		lightskyblue 2em,
		deepskyblue 2em,
		deepskyblue 3em,
		lightsteelblue 3em,
		lightsteelblue 4em,
		gainsboro 4em,
		gainsboro 5em,
		deepskyblue 5em,
		deepskyblue 6em,
		skyblue 6em,
		skyblue 7em,
		dodgerblue 7em,
		dodgerblue 8em,
		transparent 8em,
		transparent 20em
	),
	radial-gradient(
		circle at center bottom,
		coral, darkslateblue
	);
	
	background-blend-mode: overlay;
	background-size: 8em 8em, 8em 8em, cover;

	-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

CSS visual effects

CSS visual effects

CSS custom shape and pattern #1

CSS custom shape and pattern #2

WP Gridbuilder Facets for BB Posts module (WPGB add-on)

WP Gridbuilder Facets for BB Posts module (custom)

Format numbers

Custom columns

Custom Tabs module

Slanted row edges

Open posts grid featured images in lightbox

Animated letters with anim.js

QA Accordion Grid

Clickable row with JS

Reveal elements on scroll with Waypoints

Panorama with Paver

CSS animation

CSS visual effects

Categories grid with Custom Content Shortcode

Beaver Builder custom module: Photo Swap

Bootstrap plugins

WooCommerce

Menu modules

Highlight menu items on a One Page

Beaver Builder: hide row if empty field connection

Ajax Search in modal box