Useful Showit Custom CSS to spice up your website
Typwriter text
If you're looking to take your website to the next level and add some unique flair, you're in the right place. Here are some useful Showit custom CSS snippets that will help you spice up your website and make it stand out from the crowd.
<div class="si-embed">
<div id="container">
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<span class="Typewriter__wrapper"></span><span class="Typewriter__cursor">|</span></div>
<style>@font-face {
font-family: Migra Italic;
src: url(https://static.showit.co/file/0mcbZP1yR-OfY9x-3TJq2w/101126/migraitalic-extralightitalic.woff);
}</style>
<script>var container = document.getElementById('container');
var typewriter = new Typewriter(container, {
loop: true,
});
container.style.font = "normal 25px Migra Italic"
container.style.color = "#ffffff"
container.style.textAlign = "center"
container.style.lineheight = "1.6"
typewriter.typeString('YOUR TEXT HERE')
.pauseFor(1000)
.deleteAll()
.typeString('YOUR TEXT HERE')
.pauseFor(1000)
.deleteAll()
.typeString('YOUR TEXT HERE')
.pauseFor(1000)
.deleteAll()
.start();
</script></div>
Here is what you need to change in this code:
Line 7: replace Migra Italic with the font name of your choice
Line 8: replace the link with the font link
Line 17: replace Migra Italic with the font name of your choice
Lines 22, 25 and 28: replace YOUR TEXT HERE with your own text
And here is how you can customise this code:
Line 14: if you want the text to stop once everything has been typed, change 'true' to 'false'
Line 17: you can change the weight of the font and size of the text
Line 18: you can change the colour of the text
Line 19: you can change the alignment of the text
Line 20: you can change the line height
If you'd like the text to continuously type rather than deleting and then typing again, delete lines 24, 27 and 30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Scrolling text
<div class="si-embed"><style>
.marquee {
display: flex;
overflow: hidden;
gap: 1rem; / 0.5 /
position: relative;
user-select: none;
}
.marquee-content {
flex-shrink: 0;
display: flex;
justify-content: space-around;
color: #000;
font-family: Montserrat;
font-weight: 500;
text-transform: uppercase;
line–height: 1.2em !important;
font-size: 13px;
letter-spacing: 1px;
min-width: 100%;
gap: 1rem; / 0.5 /
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 1rem)); / 0.5 /
}
}
.scroll {
animation: scroll 30s linear infinite;
}
</style>
<div class="marquee">
<div class="marquee-content scroll">
<div>YOUR TEXT HERE </div>
<div>YOUR DIVIDER HERE</div>
<div>YOUR TEXT HERE </div>
<div>YOUR DIVIDER HERE</div>
<div>YOUR TEXT HERE </div>
<div>YOUR DIVIDER HERE</div>
</div>
</div></div>
Here is what you need to change in this code:
Line 15: replace Montserrat with the font name of your choice
Lines 41, 43 and 45 replace YOUR TEXT HERE with your own text
Lines 42, 44 and 46 replace YOUR DIVIDER HERE with the divider/icon of your choice
And here is how you can customise this code:
Line 14: you can change the colour of the text
Line 16: you can change the weight of the font
Line 17: you can change text to 'Normal' if you don't want it to be uppercase
Line 18: you can change the line height
Line 19: you can change the font size
Line 20: you can change the letter spacing
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
