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: 276
Joined: Tue Dec 08, 2020 6:00 pm
Location: Earth
Contact:

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 with Airborne, Air Assault, and Flight Wings. Enjoys model trains, the internet, and ham radio. Located in Fayetteville, NC, USA. Avatar created by AI.
https://MyAAGrapevines.com
https://CenterCityBBS.Com (Grupo Chat, & Forum)
User avatar
BaconFries
 
 
Posts: 5914
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: 276
Joined: Tue Dec 08, 2020 6:00 pm
Location: Earth
Contact:

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 with Airborne, Air Assault, and Flight Wings. Enjoys model trains, the internet, and ham radio. Located in Fayetteville, NC, USA. Avatar created by AI.
https://MyAAGrapevines.com
https://CenterCityBBS.Com (Grupo Chat, & Forum)
User avatar
crispy68
 
 
Posts: 3018
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: 1579
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: 276
Joined: Tue Dec 08, 2020 6:00 pm
Location: Earth
Contact:

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

Post by KingSparta »

Thanks both, I got it working...
Retired military with Airborne, Air Assault, and Flight Wings. Enjoys model trains, the internet, and ham radio. Located in Fayetteville, NC, USA. Avatar created by AI.
https://MyAAGrapevines.com
https://CenterCityBBS.Com (Grupo Chat, & Forum)
Post Reply