filmov
tv
Bricks Builder - Blob SVG Background with Images masked with the same shape
Показать описание
While watching one of Kevin Geary's Websites for Dommies YT Lives he critiqued a site using images with blob shapes in the background.
The question was "Could this be done with CSS to give better flexibility?"
This video shows what I came up with as an answer to that question. Yes, it can be done.
[EDIT] : 23:45 CSS around the wrong way, should be - cursor: pointer; :)
00:00 Introduction
01:35 BAsic structure with Bricks Builder
04:35 Creating the Blob shape with Blobmaker
05:24 Editing blob SVG in Illustrator
09:00 Creating the SVG Mask from the first Blob
13:45 Applying SVG Blob as background
14:20 CSS Styles and placement
17:09 Masking the "figure"
18:31 Solving the SVG vertical offset
20:55 CSS to change the Blob color as needed
23:55 Animating the image while retaining the mask
27:00 Boxing what has been done so far, so we can style with padding and other elements
28:54 Afterthought, resizing the img to make more of blob left and right visible.
The question was "Could this be done with CSS to give better flexibility?"
This video shows what I came up with as an answer to that question. Yes, it can be done.
[EDIT] : 23:45 CSS around the wrong way, should be - cursor: pointer; :)
00:00 Introduction
01:35 BAsic structure with Bricks Builder
04:35 Creating the Blob shape with Blobmaker
05:24 Editing blob SVG in Illustrator
09:00 Creating the SVG Mask from the first Blob
13:45 Applying SVG Blob as background
14:20 CSS Styles and placement
17:09 Masking the "figure"
18:31 Solving the SVG vertical offset
20:55 CSS to change the Blob color as needed
23:55 Animating the image while retaining the mask
27:00 Boxing what has been done so far, so we can style with padding and other elements
28:54 Afterthought, resizing the img to make more of blob left and right visible.
0:30:36
Bricks Builder - Blob SVG Background with Images masked with the same shape
0:11:39
Master Responsive Animated Circles with SVG & Bricks Builder (Part 1)
0:07:23
Bricks Builder: Fix SVG File
0:17:28
Bricks Builder: Create List with Custom SVG Icon
0:14:16
Use SVGs for your Icons in Bricks Builder
0:12:17
Quick and Easy SVG Texture Patterns with Bricks Builder
0:07:53
Bricks 101 Part 38 - Image Mask CSS Code - Webkit-Image-Mask - Bricks Builder - BricksBuider.io
0:08:07
Bricks Builder: Free Custom Star Rating Element for Playing Around
0:10:33
Bricksforge: Quick GSAP Animations in Bricks Builder
0:00:38
How To Change Default Social Icons Background Color Bricks Builder
0:15:13
How to create shaped buttons with borders in Bricks Builder
0:21:30
Elementor Blob shapes background and mask
0:11:31
Bricks 101 Part 22 - Add a Contact Form Section - BricksBuilder.io - Bricks Wordpress Tutorial
0:03:26
Shape Dividers | Bricks
2:07:00
Generování SVG diagramu
0:26:34
Bricks 1.8.5 - New Elements for Blogging, Image Mask & Sources, Background Video Improvements
0:07:27
Creating Scrolling Progress Bar in Lazy Way Bricks Builder * Wordpress
0:07:52
Using an Image Widget as Background with Bricks Builder
0:12:36
Bricks Builder: Simple Shrink Header
0:14:03
Bricks Builder Positional decoration dot with a line
0:00:35
3D Printed Pin Support Challenge 😱
0:17:53
How to map Bricks Theme Colors to CSS for use in your own custom CSS
0:02:36
CSS Preloaders | 15 Stunning CSS Loading Animation examples for your website
0:06:58
Background Images - SEO Friendly and Compatible with Lazy Load - Bricks Builder
Комментарии