Text Effects

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 11131
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Sat Feb 20, 2021 7:34 pm

Hi,
Following a FaceBook User Group post about adding text labels please find below a project with a few text effects.
1.png
1.png (382.08 KiB) Viewed 90 times

This project uses 3D distorted Point Hotspots with a Text Box as a child element, this "pins" the text box to the panorama. The 3D Distortion setting can be found under the Hotspot Templates properties in the skin.

3.png
3.png (17.16 KiB) Viewed 90 times

The Text Box is using the placeholder $(hd) so it displays the text in the Point Hotspots Description text field.


The skin has 8 different fronts added to the Skin Editors Embedded Stylesheet using Google Fonts.

4.png
4.png (191.35 KiB) Viewed 90 times

Please see this video on how to add Google Fonts: https://youtu.be/ujWHIlAg_VQ
I am using text1, text 2 ~ text8 for the different fonts.

The text boxes then use CSS to give them their skew or 3D distortion.

Depending on the text effect, the effect may use both the CSS Styles and CSS Styles Inner Element.
And for the Font, the CSS Classes is used.

2.png
2.png (33.16 KiB) Viewed 90 times

If you want to find out more check out these links:

CSS text-shadow:
https://www.w3schools.com/cssref/css3_p ... shadow.asp

CSS 2D Transformm which includes SkewX and SkewY:
https://www.w3schools.com/css/css3_2dtransforms.asp

CSS 3D Transforms which includes the rotate X and Y
https://www.w3schools.com/css/css3_3dtransforms.asp

Regards,
Attachments
text.zip
(14.47 KiB) Downloaded 15 times
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Post Reply