how can I change the picture and center it against the flexbox?
I tried to add the width and height but to strangely move and do not see png.
I also care about responsive
Thank you for your help
CSS CODE
.container{
width: 100%;
height: 50vh;
border-top: 4px solid rgb(134, 17, 212);
display: flex;
justify-content: space-evenly;
padding-top: 15px;
background: rgb(20, 20, 19);
}
.contact, .projects, .me{
background: rgb(20, 20, 19);
width: 100%;
display: flex;
color: white;
justify-content: space-evenly;
font-size: 1.3em;
}
.contact {
background: url('cntct.png') top center no-repeat;
width:
}
HTML CODE
<div class="container">
<div class="contact">Kontakt</div>
<div class="projects">Projekty</div>
<div class="me">O mnie</div>
</div>
</div>
Can you add a picture of what you want it to look like? Without that, I can suggest adding background-size: 50px, auto, contain; to size the background image. Here's an example using a sample contact image:
.container{
width: 100%;
height: 50vh;
border-top: 4px solid rgb(134, 17, 212);
display: flex;
justify-content: space-evenly;
padding-top: 15px;
background: rgb(20, 20, 19);
}
.contact, .projects, .me{
background: rgb(20, 20, 19);
width: 100%;
display: flex;
color: white;
justify-content: space-evenly;
font-size: 1.3em;
}
.contact {
background: url('https://cdn.pixabay.com/photo/2016/06/13/17/30/mail-1454732_960_720.png') top center no-repeat;
background-size: 50px, auto, contain;
}
<div class="container">
<div class="contact">Kontakt</div>
<div class="projects">Projekty</div>
<div class="me">O mnie</div>
</div>
</div>
You can also position it anywhere in the flexbox: background: url('cntct.png') 50% 25px no-repeat; for instance:
Related
I want to make a square element #board responsive.
Unfortunately, in landscape view, the flex container #wrap doesn't expand it's width to the width of the flex item #board. When I apply a fixed width and height to #board it does, thus the reason seems to be the aspect-ratio.
What's the reason for this, did I do anything wrong? How can I fix it?
I used this HTML and CSS:
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 26%, rgba(89, 177, 185, 1) 100%);
}
#wrap {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px solid blue;
}
#timer,
#home {
font-size: 7.5vh;
}
#board {
flex: 1;
background-color: lightblue;
aspect-ratio: 1 / 1;
}
<div id="wrap">
<div id="timer">00:00:00</div>
<div id="board"></div>
<div id="home">Home</div>
</div>
Remove flex: 1 from #board and add height: 100% to it instead:
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 26%, rgba(89, 177, 185, 1) 100%);
}
#wrap {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px solid blue;
}
#timer,
#home {
font-size: 7.5vh;
}
#board {
height: 100%;
background-color: lightblue;
aspect-ratio: 1 / 1;
}
<div id="wrap">
<div id="timer">00:00:00</div>
<div id="board"></div>
<div id="home">Home</div>
</div>
I'm making a personal website. I wanted to add something fun and let people write to my 'wall'. The idea is to have a grandparent div that is a linear gradient, a parent div that is black and text that matches the grandparent div (the part of the gradient that would be under the text. I know I can just give the text the same gradient as the background but id ideally like the text to look as if it is a hole in the black div. Here is the page without text:
Here is my CSS so far:
.black {
overflow: hidden;
height: 88vh;
width: 98vw;
display: flex;
justify-content: center;
align-items: center;
background-color: #000000;
/* border-width: 2vh;
border-style: solid;
border-image: var(--gradient) 1; */
}
.gradient {
overflow: hidden;
height: 92vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-image: var(--gradient);
}
.wallText {
font-weight: 800;
font-size: 4vh;
justify-content: space-between;
color: transparent;
}
and the JSX:
return (
<div className='grad'>
<div className="black">
<p className="wallText">WALL</p>
</div>
</div>
)
Thanks in advance for any help!
check out the post for Knockout text from css-tricks
using that below is a snippet similar to yours.
.gradient {
overflow: hidden;
height: 92vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, red, red 5%, #fff);
}
.wall {
overflow: hidden;
height: 88vh;
width: 98vw;
display: flex;
justify-content: center;
align-items: center;
background-color: #000000;
color: transparent;
color: white;
mix-blend-mode: multiply;
}
<div class='gradient'>
<p class="wall">Wall Text</p>
</div>
Usualy I consider myself decent at css, but now I dont know how to solve this problem. You can see the red circle, my problem is that it is hidden 50%. I need to put overflow-x:scroll and then I dont want to see the scrollbar on y. Is this even possible. I tried to put as little code as possible so I hope its not too hard to go trough. Thanks for any help!
.ak{
width:100%;
height: 125px;
display: -webkit-inline-box;
overflow-x: scroll;
overflow-y:hidden;
margin-top: 30px;
}
.actBox{
width:380px;
height: 125px;
display: flex;
background-color: #F5F5F5;
border-right: 5px solid #FFB26A;
margin-right: 10px;
}
.actCircle{
width: 60px;
height: 60px;
border-radius: 55px;
border: 1px solid rgba(197, 197, 197, 0.2);
background-color: red;
position:relative;
margin-left:-40px;
margin-top:-25px;
}
.actImg{
width: 140px;
background: center center no-repeat;
background-size: cover;
position: relative;
background-position: center;
height: 125px;
}
.actText{
width:240px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tacken{
width: 90%;
height: 30px;
border: double 0.12em transparent;
border-radius: 10px;
background-image: linear-gradient(white, white),
linear-gradient(to right, #FFABAB, #FFB26A);
background-origin: border-box;
background-clip: content-box, border-box;
display:flex;
justify-content:center;
text-align:center;
margin-bottom: 20px;
}
<div class="ak">
<div class="actBox">
<div class="actImg" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=48);">
</div>
<div class="actCircle">
</div>
<div class="actText">
<h3>Content </h3>
<h4>Content</h4>
</div>
</div>
<div class="actBox">
<div class="actImg" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=48);">
</div>
<div class="actCircle">
</div>
<div class="actText">
<h3>Content </h3>
<h4>Content</h4>
</div>
</div>
</div>
Since you specified a height on your ak element you could just add a new div around the whole thing. In this case lets call it box
.box{
width: 100%;
height: 178px;
overflow-x: scroll;
}
Now you got a new element which i scrollable and just a bit bigger than your first element. Now you could just clearify that you want the overflow-y to be visible at your ak element.
.ak{
width:100%;
height: 125px;
display: -webkit-inline-box;
margin-top: 30px;
overflow-y: visible;
}
And if I understood you correctly the result looks like this:
.box{
width: 100%;
height: 178px;
overflow-x: scroll;
}
.ak{
width:100%;
height: 125px;
display: -webkit-inline-box;
margin-top: 30px;
overflow-y: visible;
}
.actBox{
width:380px;
height: 125px;
display: flex;
background-color: #F5F5F5;
border-right: 5px solid #FFB26A;
margin-right: 10px;
}
.actCircle{
width: 60px;
height: 60px;
border-radius: 55px;
border: 1px solid rgba(197, 197, 197, 0.2);
background-color: red;
position:relative;
margin-left:-40px;
margin-top:-25px;
}
.actImg{
width: 140px;
background: center center no-repeat;
background-size: cover;
position: relative;
background-position: center;
height: 125px;
}
.actText{
width:240px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tacken{
width: 90%;
height: 30px;
border: double 0.12em transparent;
border-radius: 10px;
background-image: linear-gradient(white, white),
linear-gradient(to right, #FFABAB, #FFB26A);
background-origin: border-box;
background-clip: content-box, border-box;
display:flex;
justify-content:center;
text-align:center;
margin-bottom: 20px;
}
<div class = "box">
<div class="ak">
<div class="actBox">
<div class="actImg" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=48);">
</div>
<div class="actCircle">
</div>
<div class="actText">
<h3>Content </h3>
<h4>Content</h4>
</div>
</div>
<div class="actBox">
<div class="actImg" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=48);">
</div>
<div class="actCircle">
</div>
<div class="actText">
<h3>Content </h3>
<h4>Content</h4>
</div>
</div>
</div>
</div>
It may helpful
Hide scrollbar in browsers (Still scrollable)
/* Webkit */
::-webkit-scrollbar {
width: 0;
height: 0;
}
/* Firefox */
html {
scrollbar-width: none;
}
I want the text on the picture so I am using the following CSS code:
.blur{
width:100%;
height: 500px;
background-image:url(./images/14.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.b-cont{
width: 100%;
height: 500px;
font-family: Raleway;
background: rgba(201, 186, 186, 0.1);
backdrop-filter: blur(5px);
color: #ffcd3c;
font-size: 72px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
span{
color: white;
}
HTML code:
<body>
<div class="blur">
<div class="b-cont">
Background of laptop is good but have to <span>blur</span> for the website
</div>
</div>
</body>
I wanted to color the sentence differently, so I added the span tag. It gave color but it separated the sentence
Look at this:
The issue that is causing this is that you specified the div to display as flex layout. By removing display:flex; from the b-cont class, the text renders correctly:
.blur {
width: 100%;
height: 500px;
background-image: url(./images/14.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
justify-content: center;
display: flex;
align-items: center;
text-align: center;
}
.b-cont {
width: 100%;
height: 500px;
font-family: Raleway;
background: rgba(201, 186, 186, 0.1);
backdrop-filter: blur(5px);
color: #ffcd3c;
font-size: 72px;
justify-content: center;
align-items: center;
text-align: center;
height: fit-content;
}
span {
color: white;
}
<body>
<div class="blur">
<div class="b-cont">
Background of laptop is good but have to <span>blur</span> for the website
</div>
</div>
</body>
Codepen: https://codepen.io/chingucoding/pen/GRjOGrK
My suggestion:
.blur {
width: 100%;
height: 500px;
background-image: url(./images/14.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.b-cont {
height: 100%;
background: rgba(201, 186, 186, 0.1);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
}
.text {
font-family: Raleway;
color: #ffcd3c;
font-size: 72px;
text-align: center;
}
span {
color: green; /* Changed to green in order to make it more visible */
}
<div class="blur">
<div class="b-cont">
<div class="text">Background of laptop is good but have to <span>blur</span> for the website</div>
</div>
</div>
<body>
<div class="blur">
<div class="b-cont">
<p>Background of laptop is good but have to <span>blur</span> for the website</p>
</div>
</div>
CSS
.b-cont{
width: 100%;
height: 500px;
font-family: Raleway;
background: rgba(201, 186, 186, 0.1);
backdrop-filter: blur(5px);
color: #ffcd3c;
font-size: 72px;
display:flex;
vertical-align: middle;
justify-content: center;
align-items: center;
text-align: center;
}
span{
color: white;
display: inline-block;
vertical-align: middle;
}
I've been all over this site for some solutions to my issue but nothing has seemed to work.
Referring to This JSFiddle I'm trying to get internal drop shadows surrounding the top and bottom of the dark grey div. I've tried changing from flex to relative positions, z-index, order, various overflow options and drop shadow filters.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="Bespoke">
</head>
<body>
<div class="grid">
<!-------- Row 1 ---------->
<header>
</header>
<!-------- Row 2 ---------->
<article>
</article>
<!-------- Row 3 ---------->
<blank>
</blank>
<!-------- Row 4 ---------->
<subtitle>
</subtitle>
<!-------- Row 5 ---------->
<blank2 class>
</blank2>
<!-------- Row 5 ---------->
<footer>
</footer>
</div>
</body>
</html>
.grid {
display: grid;
grid-template-columns:auto;
grid-gap: 0em;
width: 100vw;
height: 10vw;
}
}
#media all and (max-width: 100vw) {
aside,
article {
}
}
body {
margin: 0 auto;
max-width: 100vw;
background-image: url("https://cff2.earth.com/uploads/2019/08/15135811/Microplastics-are-raining-down-on-the-Rocky-Mountains-730x410.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: white;
}
header {
display: flex;
align-items: center;
justify-content: center;
height: 15vh;
text-align: center;
background: rgba(175, 165, 255, 0);
}
article {
display: flex;
align-items: center;
justify-content: center;
height: 30vh;
text-align: center;
background: rgba(0, 0, 0, 0);
}
blank {
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
height: 15vh;
text-align: center;
background: rgba(205, 225, 105, 0);
box-shadow(10px 10px 30px #000000);
z-index: 10;
}
subtitle {
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
text-align: center;
background-color: #1e1e1e;
font-size: max(7vw, 20px);
box-shadow(-10px -10px 30px #000000);
z-index: 9;
}
blank2 {
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
text-align: center;
background-color: #fffff7;
z-index: 8;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
align-items: center;
justify-content: center;
height: 7vh;
text-align: center;
background-color: #fffff7;
}
Your issue is that you had the syntax of the box-shadow CSS wrong
You had it like: box-shadow(10px 10px 30px #000000);
Where it needs to be: box-shadow: 10px 10px 30px #000000;
If CSS runs into properties it doesn't understand, then it just silently ignores it and considers it an invalid property. It doesn't throw an error of any kind.
In Chrome's dev tools, this is what an invalid property looks like: There is a warning sign that indicates that it's an unknown property name.
The syntax highlighting on the jsfiddle also shows the issue as it isn't showing the correct colors
Change box-shadow(-10px -10px 30px #000000); -> box-shadow: -10px -10px 30px #000000;