Try ShortPoint nowLevel up the look of your Text Design Element using Custom CSS Snippets.
In this article, you will learn how to use Custom CSS Snippets for your Text Design Element and see all the designs you can use in the Snippets Gallery.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have the Text Design Element on your page.
Step-by-step Tutorial
Follow the steps below to learn how to use Custom CSS Snippets:
NOTEBefore proceeding, choose the design you want to use from the Snippets Gallery. Then, take note of the HTML code and Custom CSS code of your chosen design.
Step 1: Edit the ShortPoint Web Part
Go to the SharePoint page you want to use and click Edit:
Click the cross icon to close the Toolbox:
Click the ShortPoint tag:
Select the Edit properties icon:
Step 2: Edit the Text Design Element
NOTEBefore proceeding, make sure you already have the Text Design Element on your page. To learn more about adding it to your page, check out How to Customize the Text Design Element.
Click the Text tag:
Select the cogwheel icon:
Step 3: Paste the HTML code
Click the More Rich drop-down icon:
Select the code view icon:
Paste the HTML code in the field provided:
Step 4: Paste the Custom CSS code
Click the next icon:
Navigate to the Custom CSS tab:
Click the drop-down icon:
Paste the Custom CSS code in the Custom CSS field:
Step 5: Save
Once satisfied, click the green check mark:
Click the eye icon to see your page in real-time:
Click Save to apply all your changes:
Snippets Gallery
Listed below are the designs you can apply to your Text Design Element:
Rainbow Shadow
With this snippet, you can add long shadows with different colors and spreads.
Final Result:
HTML Code:
<span style="font-family: Fredoka One;">
<span class="shortpoint-text-font" data-font-family="Fredoka One" data-font-source="google">LOREM IPSUM</span>
</span>
Custom CSS Code:
font-weight: 600;
font-family: 'Fredoka One', sans-serif;
text-align: center;
text-transform: uppercase;
display: block;
color: #FFFFD9;
font-size:60px;
text-shadow: #ff6239 1px 1px, #ff6339 2px 2px, #ff643a 3px 3px, #ff663a 4px 4px, #ff673b 5px 5px, #ff683c 6px 6px, #ff693c 7px 7px, #ff6a3d 8px 8px, #ff6b3d 9px 9px, #ff6c3e 10px 10px, #ff6e3f 11px 11px, #ff6f3f 12px 12px, #ff7040 13px 13px, #ff7140 14px 14px, #ff7241 15px 15px, #ff7342 16px 16px, #ff7442 17px 17px, #ff7643 18px 18px, #ff7743 19px 19px, #ff7844 20px 20px, #ff7945 21px 21px, #ff7a45 22px 22px, #ff7b46 23px 23px, #ff7c46 24px 24px, #ff7e47 25px 25px, #ff7f48 26px 26px, #ff8048 27px 27px, #ff8149 28px 28px, #ff8249 29px 29px, #ff834a 30px 30px, #ff844b 31px 31px, #ff864b 32px 32px, #ff874c 33px 33px, #ff884c 34px 34px, #ff894d 35px 35px, #ff8a4e 36px 36px, #ff8b4e 37px 37px, #ff8c4f 38px 38px, #ff8e4f 39px 39px, #ff8f50 40px 40px, #ff9051 41px 41px, #ff9151 42px 42px, #ff9252 43px 43px, #ff9352 44px 44px, #ff9453 45px 45px, #ff9654 46px 46px, #ff9754 47px 47px, #ff9855 48px 48px, #ff9955 49px 49px, #ff9a56 50px 50px, #ff9b57 51px 51px, #ff9c57 52px 52px, #ff9e58 53px 53px, #ff9f58 54px 54px, #ffa059 55px 55px, #ffa15a 56px 56px, #ffa25a 57px 57px, #ffa35b 58px 58px, #ffa45b 59px 59px, #ffa65c 60px 60px, #ffa75d 61px 61px, #ffa85d 62px 62px, #ffa95e 63px 63px, #ffaa5e 64px 64px, #ffab5f 65px 65px, #ffac60 66px 66px, #ffad60 67px 67px, #ffaf61 68px 68px, #ffb061 69px 69px, #ffb162 70px 70px, #ffb263 71px 71px, #ffb363 72px 72px, #ffb464 73px 73px, #ffb564 74px 74px, #ffb765 75px 75px, #ffb866 76px 76px, #ffb966 77px 77px, #ffba67 78px 78px, #ffbb67 79px 79px, #ffbc68 80px 80px, #ffbd69 81px 81px, #ffbf69 82px 82px, #ffc06a 83px 83px, #ffc16a 84px 84px, #ffc26b 85px 85px, #ffc36c 86px 86px, #ffc46c 87px 87px, #ffc56d 88px 88px, #ffc76d 89px 89px, #ffc86e 90px 90px, #ffc96f 91px 91px, #ffca6f 92px 92px, #ffcb70 93px 93px, #ffcc70 94px 94px, #ffcd71 95px 95px, #ffcf72 96px 96px, #ffd072 97px 97px, #ffd173 98px 98px, #ffd273 99px 99px, #ffd374 100px 100px, #ffd475 101px 101px, #ffd575 102px 102px, #ffd776 103px 103px, #ffd876 104px 104px, #ffd977 105px 105px, #ffda78 106px 106px, #ffdb78 107px 107px, #ffdc79 108px 108px, #ffdd79 109px 109px, #ffdf7a 110px 110px, #ffe07b 111px 111px, #ffe17b 112px 112px, #ffe27c 113px 113px, #ffe37c 114px 114px, #ffe47d 115px 115px, #ffe57e 116px 116px, #ffe77e 117px 117px, #ffe87f 118px 118px, #ffe97f 119px 119px, #ffea80 120px 120px, #FF6138 0px 0px;
background: #FFEA80;
padding-bottom:150px;
padding-top:20px;
Text mask background
This snippet allows you to add a background to your Text, creating a unique style.
Final Result:
HTML Code:
<div>TEXT BACKGROUND<br>STYLE</div>
Custom CSS Code:
div {
text-align: center;
padding: 10px;
font-weight: 800;
color: transparent;
font-size: 120px;
background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
background-position: 40% 50%;
-webkit-background-clip: text;
position: relative;
text-align: center;
line-height: 90px;
letter-spacing: -8px;
}Note: you can replace the background URL with the image you want to get a distinctive look.
Multicolored Text Fill
This snippet creates a multi-colored, vibrant, and bold style.
Final Result:
HTML Code:
<p>Spice up your type with CSS
<span> Multicolored text fill </span>
</p>
Custom CSS Code:
background-color: #090d00;
text-align: center;
color: rgba(255,255,255,.25);
p {
text-transform: uppercase;
letter-spacing: .5em;
display: inline-block;
padding: 1.5em 0em;
span {
font: 700 4em/1 "Oswald", sans-serif;
letter-spacing: 0;
padding: .25em 0 .325em;
display: block;
margin: 0 auto;
text-shadow: 0 0 80px rgba(255,255,255,.5);
background: url(http://f.cl.ly/items/010q3E1u3p2Q0j1L1S1o/animated_text_fill.png) repeat-y;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: aitf 80s linear infinite;
-webkit-transform: translate3d(0,0,0);
}
}
3D Text Effect
This snippet adds a 3D effect to your Text.
Final Result:
HTML Code:
<div style="text-align: center;">
<span style="font-size: 96px; color: rgb(250, 250, 250);">Lorem Ipsum</span>
</div>
Custom CSS Code:
background-color: #c4c4c4;
padding:50px;
span{
text-transform: uppercase;
font-family: verdana;
font-weight: 700;
color: #f5f5f5;
text-shadow: 1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
1px 4px 1px #919191,
1px 5px 1px #919191,
1px 6px 1px #919191,
1px 7px 1px #919191,
1px 8px 1px #919191,
1px 9px 1px #919191,
1px 10px 1px #919191,
1px 18px 6px rgba(16,16,16,0.4),
1px 22px 10px rgba(16,16,16,0.2),
1px 25px 35px rgba(16,16,16,0.2),
1px 30px 60px rgba(16,16,16,0.4) !important;
}
That’s it! You can now use these unique designs on your Text Design Element.
Related articles:
