Issues with blurring the bottom of the picture and moving social media boxes up

murat_tasci · December 29, 2022, 2:32pm

Summary

Share a clear and concise description of the issue. Aim for 2-3 sentences.

Steps to reproduce

Code snippet:

import streamlit as st
import streamlit.components.v1 as components

st.title("Get in Touch with Us !")



st.markdown('<style>div[class="css-zt5igj e16nr0p33"] {color:white; text-align:center;font-size:50px; font-family: Lucida Handwriting; margin-bottom:0.001px;  } </style>', unsafe_allow_html=True)



st.markdown('<img src="https://images.assetsdelivery.com/compings_v2/rondale/rondale1608/rondale160800047.jpg" alt width="1085" height="250" style="transform:rotate(0deg);"/>', unsafe_allow_html=True)

# Customization for sidebar
st.markdown('<style>div[class="css-6qob1r e1fqkh3o3"] { background: url("https://thumbs.gfycat.com/FirmAchingBillygoat-size_restricted.gif");background-repeat: no-repeat;background-size:600%; border-right: 1px solid #FFFAFA;  border-image: linear-gradient( #D3D3D3, black) 0.75;  margin-top:-2px;} </style>', unsafe_allow_html=True)

# Customization for crossed out
st.markdown('<style>div[class="css-1xtoq5p e1fqkh3o2"] {color:white;  } </style>', unsafe_allow_html=True)

# Customization for collapsedControl
st.markdown('<style>div[class="css-y4qlto e1fqkh3o1"] {color:white;  } </style>', unsafe_allow_html=True)


# Hiding the Footer
hide_st_style =" <style>footer {visibility: hidden;}</style>"
st.markdown(hide_st_style, unsafe_allow_html=True)  


#side bar customization
st.markdown("""
  <style>
      ul[class="css-uc76bn e1fqkh3o9"]{
        position: relative;
        position: relative;
        padding-top: 3rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: left;
  
      }
      
      
      .css-17lntkn {
        font-weight: bold;
        font-size: 24px;
        color: white;
        text-shadow: -1.5px 0 black, 0 1.5px black, 2px 0 black, 0 -1.5px black;
        font-family: arial;
        border:black;
      }
      
      .css-pkbazv {
        font-weight: bold;
        font-size: 24px;
        color: white;
        text-shadow: -1.5px 0 black, 0 1.5px black, 1.5px 0 black, 0 -1.5px black;
        font-family: arial;
      }
  </style>""", unsafe_allow_html=True)

# margin between emoji and text
st.markdown("""
    <style>
    .css-8hkptd {
            margin-right: 4.5px;
        }
    </style>""", unsafe_allow_html=True)
    
    
#menu color
st.markdown('<style>div[class="css-14xtw13 e8zbici0"] { color:white;} </style>', unsafe_allow_html=True)


# Hiding the decoration
st.markdown('<style>div[class="css-1dp5vir e8zbici1"] { display:none;} </style>', unsafe_allow_html=True)


#contact
components.html("""<html>


<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />


</head>

<body>
    <div class="icons">
		
		
		<a href="https://www.linkedin.com/">
		   <div class="layer">
		   <span></span>
		   <span></span>
		   <span></span>
		   <span></span>
		   <span class="fab fa-linkedin-in"</span>
		
	   
		   </div>
		   <div class="text">Linkedin</div>
		</a>
		
		<a href="https://accounts.google.com">
		   <div class="layer">
		   <span></span>
		   <span></span>
		   <span></span>
		   <span></span>
		   <span class="fab fa-google-plus-g"</span>
		
	   
		   </div>
		   <div class="text">Google</div>
		</a>
		
		<a href="https://twitter.com/">
		   <div class="layer">
		   <span></span>
		   <span></span>
		   <span></span>
		   <span></span>
		   <span class="fab fa-twitter"</span>
		
	   
		   </div>
		   <div class="text">Twitter</div>
		</a>
		
		

		<a href="https://github.com/">
			   <div class="layer">
			   <span></span>
			   <span></span>
			   <span></span>
			   <span></span>
			   <span class="fab fa-github"</span>

		   
			   </div>
			   <div class="text">Github</div>
		</a>

    </div>

    

</body>

<style>


*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}


html,body{
display:grid;
height:2%;
place-items:center;
background:#000;
}

.icons{
display:inline-flex;
}

.icons a{
margin:0 25px;
text-decoration:none;
color:#fff;
display:block;
position:relative;
}


.icons a .layer{
width:90px;
height: 90px;
transition:transform 0.3s;

}

.icons a:hover .layer{
transform:rotate(-35deg) skew(20deg);

}


.icons a .layer span{
position:absolute;
top: 0;
left: 0;

height:100%;
width:100%;
border: 1px solid #fff;
border-radius: 5px;
transition:all 0.3s;
}


.icons a .layer span.fab{
font-size:30px;
line-height:80px;
text-align:center;

}


.icons a .text{
position:absolute;
left:50%;
bottom:-5px;
opacity:0;
transform:translateX(-50%);
transition:bottom 0.3s ease, opacity 0.3s ease;
}


.icons a:hover .text{
opacity:1;
bottom:-35px;
}

.icons a:hover .layer span:nth-child(1){
opacity:0.2;
}

.icons a:hover .layer span:nth-child(2){
opacity:0.4;
transform:translate(5px, -5px);
}

.icons a:hover .layer span:nth-child(3){
opacity:0.6;
transform:translate(10px, -10px);
}

.icons a:hover .layer span:nth-child(4){
opacity:0.8;
transform:translate(15px, -15px);
}

.icons a:hover .layer span:nth-child(5){
opacity:1;
transform:translate(20px, -20px);
}

.icons a:nth-child(1) .layer span,
.icons a:nth-child(1) .text{
color:#CACCCE;
border-color:#CACCCE
}

.icons a:nth-child(2) .layer span,
.icons a:nth-child(2) .text{
color:#DB4A39;
border-color:#DB4A39;
}

.icons a:nth-child(3) .layer span,
.icons a:nth-child(3) .text{
color:#1DA1F2;
border-color:#1DA1F2;
}

.icons a:nth-child(4) .layer span,
.icons a:nth-child(4) .text{
color:##2867B2;
border-color:##2867B2;
}

.icons a:nth-child(1) .layer span{
box-shadow:-1px 1px 3px #CACCCE;
}

.icons a:nth-child(2) .layer span{
box-shadow:-1px 1px 3px #DB4A39;
}
.icons a:nth-child(3) .layer span{
box-shadow:-1px 1px 3px #1DA1F2;
}

.icons a:nth-child(4) .layer span{
box-shadow:-1px 1px 3px ##2867B2;
}

</style>

   
</html>""",height=250)


#header
css = '''

.stApp > header {
    background-color: black;
}

'''

st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)
#inline of contact container 
st.markdown('<style>div[class="appview-container css-1wrcr25 egzxvld4"] {background-color:black; background-size: cover;} </style>', unsafe_allow_html=True)

Hello friends, Firstly how can I blur the bottom edge of the blue line picture? I want a smoother transition. I want them to appear higher.

Secondly, How can I move the social media boxes up? (linkedin,Google, Twitter, Github) etc.) How can I solve these problems? I added visual for these problems either. Thanks for your helps.

Debug info

Streamlit version: v1.15.2
Python version: v3.8
OS version: windows 10
-chrome browser

mathcatsand · December 30, 2022, 1:57am

When you insert style as markdown, it creates a blank line. Either move all the displayed content to the top, or use containers to relegate style to a footer section:

import streamlit as st
import streamlit.components.v1 as components

st.title("Get in Touch with Us !")

# Put all the markdown that has human-readable pieces here
body = st.container()
# Put all the markdown that only contains style and no rendered elements here
footer = st.container()


footer.markdown('<style>div[class="css-zt5igj e16nr0p33"] {color:white; text-align:center;font-size:50px; font-family: Lucida Handwriting; margin-bottom:0.001px;  } </style>', unsafe_allow_html=True)

body.markdown(f'<img src="https://images.assetsdelivery.com/compings_v2/rondale/rondale1608/rondale160800047.jpg" alt width="1085" height="250" style="transform:rotate(0deg);"/>', unsafe_allow_html=True)

As for the blurring,

You can use box shadow to “color in” the edges if you know the background color for sure. (Not responsive to dark mode/light mode changes)
You can use an image mask via webkit if you want, but there can be browser compatibility issues with that.
You can re-save your background image with a transparency gradient/blur built in to the image itself.

Since your image doesn’t have any transparency and has its own black background, here’s what box-shadow would be (you will have hard edges in light mode):

css=r'''
#img-div {
    background: url(https://images.assetsdelivery.com/compings_v2/rondale/rondale1608/rondale160800047.jpg) no-repeat;
    background-size: 100% 100%;
    box-shadow: -20px -20px 20px 20px black inset;
    width: 100%;
    height: 250px;
    outline: 2px solid black;
    outline-offset: -1px;
    border-radius: 50%/30%;
}
'''

body.markdown(f'<style>{css}</style><div id="img-div">&nbsp;</div>', unsafe_allow_html=True)

system · December 30, 2023, 1:58am

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
The problem of not being able to change the background color, thickness and position of the texts in the Streamlit Multiple Page App's Side Bar Using Streamlit	2	1864	November 29, 2023
HTML and CSS not rendering as expected in Streamlit Markdown Using Streamlit	16	4420	October 4, 2024
Problems with integrating html to streamlit Using Streamlit debugging	1	48	April 19, 2025
Base Input Style Changing Problem Using Streamlit	2	1679	September 4, 2023
Want to know how to embed my html code in the streamlit currently facing alignment issue and responsiveness of the webpage with the streamlit Using Streamlit html	2	580	July 1, 2024

Issues with blurring the bottom of the picture and moving social media boxes up

Summary

Steps to reproduce

Debug info

Related topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies