On Page https://www.wysiwygwebbuilder.com/index.html

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
KingSparta
 
 
Posts: 299
Joined: Tue Dec 08, 2020 6:00 pm
Location: Earth

On Page https://www.wysiwygwebbuilder.com/index.html

Post by KingSparta »

on page https://www.wysiwygwebbuilder.com/index.html

down by "What's New for 2023?"

there are boxes one being "Dark Color Scheme"

I like how this box works.

how would I recreate this?
Retired military, Airborne, Air Assault, and Helicopter Flight Wings.
Enjoys model trains, the internet, and ham radio. Located in Fayetteville, NC, USA.
https://MyAAGrapevines.com
User avatar
BaconFries
 
 
Posts: 5931
Joined: Thu Aug 16, 2007 7:32 pm

Re: On Page https://www.wysiwygwebbuilder.com/index.html

Post by BaconFries »

See the following:
Almost 18... (teaser)
Tutorial
Dark Color Scheme
User avatar
KingSparta
 
 
Posts: 299
Joined: Tue Dec 08, 2020 6:00 pm
Location: Earth

Re: On Page https://www.wysiwygwebbuilder.com/index.html

Post by KingSparta »

thanks, but I was referring to the Box

when you put the mouse over the box it has an animated effect.

thanks
Retired military, Airborne, Air Assault, and Helicopter Flight Wings.
Enjoys model trains, the internet, and ham radio. Located in Fayetteville, NC, USA.
https://MyAAGrapevines.com
User avatar
crispy68
 
 
Posts: 3052
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: On Page https://www.wysiwygwebbuilder.com/index.html

Post by crispy68 »

The box is a card.

Open the properties of the card and click on: animations -> transitions.

For the shadow, you will need to set the property to box-shadow and for the value type in the box shadow values you want.

To make it grow, you will need to set the property to transform and then adjust the scale values.

In each case above, you need to enter a default trigger value and a hover trigger value.

Example for shadow:
default value: 0 0 5px rgba(0,0,0,0.3)
hover value: 0 0 15px rgba(0,0,0,0.3)
User avatar
wwonderfull
 
 
Posts: 1584
Joined: Fri Aug 21, 2020 8:27 am
Contact:

Re: On Page https://www.wysiwygwebbuilder.com/index.html

Post by wwonderfull »

the one @pablo has on his site is is

default:
box-shadow: 0px 0px 10px #00000033;

Hover:
box-shadow: 0px 0px 14px #000000b3;
transform: rotate(0deg) scale(1.02,1.02);
transition: box-shadow 500ms linear 0ms, transform 500ms linear 0ms;
User avatar
KingSparta
 
 
Posts: 299
Joined: Tue Dec 08, 2020 6:00 pm
Location: Earth

Re: On Page https://www.wysiwygwebbuilder.com/index.html

Post by KingSparta »

Thanks both, I got it working...
Retired military, Airborne, Air Assault, and Helicopter Flight Wings.
Enjoys model trains, the internet, and ham radio. Located in Fayetteville, NC, USA.
https://MyAAGrapevines.com
Post Reply