Text Effects
Posted: 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.
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.
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.
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.
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,
Following a FaceBook User Group post about adding text labels please find below a project with a few text effects.
- 1.png (382.08 KiB) Viewed 11282 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 (17.16 KiB) Viewed 11282 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 (191.35 KiB) Viewed 11282 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 (33.16 KiB) Viewed 11282 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,