A way to build your own unique text and header

Show the Community!
1

you can choose the different colors to as your background, and you can define what information you want to tell.
here is the code:

# -*- coding: utf-8 -*-
import streamlit as st

col1, col2 ,col3= st.beta_columns(3)
with col1:
     color1 = st.color_picker('选择渐变起始颜色', '#1aa3ff',key=1)
     st.write(f"你选择了{color1}")
with col2:
     color2 = st.color_picker('选择渐变结尾颜色', '#00ff00',key=2)
     st.write(f"你选择了{color2}")
with col3:
     color3 = st.color_picker('选择文字颜色', '#ffffff',key=3)
     st.write(f"你选择了{color3}")
text=st.text_input("请输入你要添加的文字")

def example(color1, color2, color3, content):
     st.markdown(f'<p style="text-align:center;background-image: linear-gradient(to right,{color1}, {color2});color:{color3};font-size:24px;border-radius:2%;">{content}</p>', unsafe_allow_html=True)
example(color1,color2,color3,text)

you can use the code to define your unique content any where in your streamlit app.
here is the result:

渐变文字条效果1
渐变文字条效果11090×399 28.4 KB

渐变文字条效果2
渐变文字条效果21092×411 30.1 KB

4 Likes
2

Hey @BeyondMyself,

This looks beautiful! I’m going to file this away to use later! :two_hearts:

(I’m also going to switch the tag from “Using Streamlit” to “Show the Community” so people can find this easier!)

Happy Streamlit-ing!
Marisa

3

yes, it under show community is more suitable.

1 Like
4

wow this is legit good stuff! thank you for sharing. I was looking for a way to add a border line to a container, and this even exceeds my expectation! Have no idea how I come across this post, but thank you!