Is it possible to get seamless pattern repeat with following conditions?
Idea is to have one rotated background with fixed attachment. I think this is how is supposed to be working, but are there any ways of achieving that?
body {
padding: 50px;
margin: 0;
height: 10000px;
}
.main {
width: 100%;
height: 1300px;
box-sizing: border-box;
overflow: hidden;
border: 5px solid #7cb7b7;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.background {
background-image: url('https://thumbs.dreamstime.com/b/circles-seamless-pattern-10032830.jpg');
background-attachment: fixed;
background-repeat: repeat;
position: absolute;
top: -1000%;
left: -1000%;
right: -1000%;
bottom: -1000%;
transform: rotate(-15deg);
}
.text {
background: white;
border: 2px solid black;
width: 200px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
<div class="main">
<div class="background"></div>
<div class="text">
<p>Flex</p>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
padding: 50px;
margin: 0;
height: 1000px;
}
.main {
width: 100%;
height: 1000px;
box-sizing: border-box;
overflow: hidden;
border: 5px solid #7cb7b7;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.image {
background-image: url('images/attractions01.jpg');
background-attachment: fixed;
background-repeat: repeat;
position: absolute;
top: -1000%;
left: -1000%;
right: -1000%;
bottom: -1000%;
}
.text {
background: white;
border: 2px solid black;
width: 200px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
</style>
</head>
<body>
<div class="main">
<div class="image"></div>
<div class="text">
<p>Flex</p>
</div>
</div>
</body>
</html>
Related
In a css/html element on a webpage I've made, if a user zooms in or out on their browser, artifacts emerge showing a line. Here is a code pen of the issue. Zoom in or out on your browser to see the red line at top emerge like below:
I've read that these problems can emerge because a browser can set the zoom to 1.5x, thus creating rounding issues for pixels. See slack post here. But I'm not sure what the appropriate fix should be. In my case I want the triangles at each end of my rectangle element which I create via css styling. Besides recreating the graphic via svg, is there any good tricks?
Here is the html/css in codepen:
#root {
display: block;
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 24px;
max-width: 400px;
float: center;
position: relative;
}
#gridRoot {
display: flex;
flex-flow: column wrap;
top: 50%;
left: 50%;
align-content: center;
}
#LegendContainer {
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: center;
justify-content: space-between;
}
#container {
background-color: grey;
postion: relative;
height: 120px;
justify-content: center;
left: calc(50% - 60px);
text-align: center;
top: calc(50% - 60px);
}
#circle {
transform: rotate(7.39deg);
}
#jss {
display: flex;
position: absolute;
background: red;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss::before {
left: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss::after {
right: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="gridRoot">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
</div>
</div>
</div>
</div>
</div>
The ::before and ::after elements seemed to be causing the issue. Solution;
body {
margin: 0;
}
#container {
background-color: grey;
position: relative;
display: flex;
height: 120px;
justify-content: center;
text-align: center;
}
#jss {
display: flex;
position: absolute;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss-internal {
background: red;
width: 100%;
}
#jss-before {
content: '';
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss-after {
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
<div id="jss-before">
</div>
<div id="jss-internal">
</div>
<div id="jss-after">
</div>
</div>
</div>
</div>
</div>
I have this small image and i want to repeat so that it looks like a shadow on top of my div that it's like a cookies notification. How can i position it on top of my div cookieConsent like a shadow on the top?
THE IMAGE:
#cookieConsent {
width: 100%;
background-color: #474540F2;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
z-index: 9999;
}
.cookieContainer {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.cookieConsent-txt {
color: #FFFFFF;
width: calc (100% - 101px);
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
display: inline-block;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies
</p>
<a class="cookieConsentOK">Aceitar Cookies</a>
</div>
</div>
You don't need to use an image for this, you can use the box-shadow properties and negative values - specifically the y and spread properties.
#cookieConsent {
width: 100%;
background-color: #474540F2;
position: fixed;
bottom: 50px;
left: 0;
right: 0;
z-index: 9999;
box-shadow: 0px -4px 10px -2px rgb(0, 0, 0,0.4);
}
.cookieContainer {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.cookieConsent-txt {
color: #FFFFFF;
width: calc (100% - 101px);
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
display: inline-block;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies
</p>
<a class="cookieConsentOK">Aceitar Cookies</a>
</div>
</div>
If you need to use an image, set the image as a background on a pseudo element:
#cookieConsent::before {
content: '';
display: block;
background-image: url(https://via.placeholder.com/10);
background-repeat: repeat-x;
width: 100%;
height: 10px;
position: absolute;
left: 0;
top: -10px;
}
#cookieConsent {
width: 100%;
background-color: #474540F2;
position: fixed;
bottom: 50px;
left: 0;
right: 0;
z-index: 9999;
}
#cookieConsent::before {
content: '';
display: block;
background-image: url(https://via.placeholder.com/10);
background-repeat: repeat-x;
width: 100%;
height: 10px;
position: absolute;
left: 0;
top: -10px;
}
.cookieContainer {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.cookieConsent-txt {
color: #FFFFFF;
width: calc (100% - 101px);
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
display: inline-block;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies
</p>
<a class="cookieConsentOK">Aceitar Cookies</a>
</div>
</div>
body {
margin: 0px;
}
.items_container {
display: flex;
align-items: center;
width: 100%;
height: 50px;
background-color: rgb(200,200,200);
}
.circle_container {
display: flex;
align-items: center;
position: relative;
z-index: 100;
}
.circle {
position: absolute;
margin: 0px 10px;
border: 0.5px solid black;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: black;
}
.btext {
padding: 0px;
margin: 0px;
color: white;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
hr {
position: absolute;
width: 100%;
z-index: 90;
}
.finish_container {
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
width: 100%;
z-index: 95;
}
.finish {
position: absolute;
margin: 0px 10px;
border: 0.5px solid black;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
}
.wtext {
padding: 0px;
margin: 0px;
color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
<div class="items_container">
<div class="circle_container">
<div class="circle">
<p class="btext">
Start
</p>
</div>
</div>
<hr>
<div class="finish_container">
<div class="finish">
<p class="wtext">
Finish
</p>
</div>
</div>
</div>
I want to roll black (start) circle to the white (finish) circle with smooth animation. Is it possible to make this? If it is, how can i do that?
![Do not mind this sentence. System gives an error that says 'It looks like your post is mostly code; please add some more details.' For posting my question I am adding this, sorry.]!
<div classname="rotate"></div>
#keyframes anirotate {
0% {
transform: translateX(0) rotate(0);
}
100%{
transform: translateX(100px) rotate(360deg);
}
}
.rotate::after{
content: 'Start'
}
.rotate{
width : 200px;
height: 200px;
border-radius: 50%;
background-color: lightblue;
animation : anirotate 2s 0s 1 forwards;
}
I have a horizontal bar that has 4 items or maybe more. What I am trying to do is that when the browser is resized each item of the horizontal bar with its respective element, however, I am using twitter-bootstrap 4, but it doesn't seem to work either by default
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex7 {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.flex {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
}
.flex7-child-1 {
height: 40%;
position: relative;
}
.flex7-child-1:before {
content: '';
position: absolute;
background-image: url('https://via.placeholder.com/50.png');
background-repeat: none;
background-position: center center;
background-size: contain;
top: -60px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-2:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 88px;
left: -170px;
right: 0;
margin: 24px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-3:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 85px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-4:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 85px;
left: 170px;
right: 0;
margin: 106px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-5:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 58px;
left: 166px;
right: -174px;
margin: 106px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child {
width: 14%;
}
.child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.flex7-child-2 {
height: 50%;
}
.flex7-child-3 {
height: 60%;
}
.flex7-child-4 {
height: 20%;
}
.flex7-child-5 {
height: 30%;
}
<div class="post-content-wrapper">
<div class="flex flex7">
<div class="child flex7-child flex7-child-1"></div>
<div class="child flex7-child flex7-child-2"></div>
<div class="child flex7-child flex7-child-3"></div>
<div class="child flex7-child flex7-child-4"></div>
<div class="child flex7-child flex7-child-5"></div>
</div>
</div>
before toggle
after toggle, I am expecting to have the same position even when I resize the layout without breaking the elements
Here's a better way to achieve responsive consistent styles for your horizontal bars. Note that individual styles for each .flex7-child-#:before has been removed, and all .flex7-child elements now use flexbox.
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex7 {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.flex {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
}
/* Pay attention to below */
.flex7-child {
display: flex;
flex-direction: row;
justify-content: center;
}
.flex7-child:before {
content: '';
position: relative;
background-image: url('https://via.placeholder.com/50.png');
background-repeat: none;
background-position: center center;
top: -70px;
background-size: contain;
display: block;
width: 50px;
height: 50px;
}
/* Pay attention to above */
.flex7-child {
width: 14%;
}
.child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.flex7-child-1 {
height: 40%;
}
.flex7-child-2 {
height: 50%;
}
.flex7-child-3 {
height: 60%;
}
.flex7-child-4 {
height: 20%;
}
.flex7-child-5 {
height: 30%;
}
This isn't an exact example, but I would wrap your thumbnails and bars together something like this:
#container{
margin: auto;
width: 800px;
height: 400px;
border: 3px solid gainsboro;
border-radius: 5px;
display: flex;
justify-content: space-around;
}
.flex-item{
height: 100%;
display: flex;
flex-direction: column-reverse;
}
.flex-item > .bar{
border-radius: 5px;
width: 80px;
background-color: mediumpurple;
border: 1px solid blue;
margin-top: 10px;
}
.flex-item:after{
display: block;
content: '';
height: 80px;
width: 80px;
background-image: url("https://via.placeholder.com/80.png")
}
<div id="container">
<div class="flex-item">
<div class="bar" style="height:40%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:20%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:60%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:50%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:70%"></div>
</div>
</div>
I want to make a header with a centered textbox in it but can't seem to center it. I know countless similar questions have been asked but I can't wrap my head around how I would do it with the textbox on top of the image.
Does anyone here have a solution? I prefer using flex.
In the code snippet I'm trying to center the red box.
#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: purple;
width: 100%;
height: 100vh;
}
#back {
background: blue;
height: 80%;
width: 80%;
}
#top {
position: absolute;
background: red;
width: 40%;
height: 40%;
margin-left: 25%;
margin-top: auto;
}
<div id="container">
<div id="top"></div>
<div id="back"></div>
</div>
#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: purple;
width: 100%;
height: 100vh;
}
#back {
background: blue;
height: 80%;
width: 80%;
}
#top {
position: absolute;
background: red;
width: 40%;
height: 40%;
left: 50%; /* center horizontally */
top: 50%; /* center vertically */
transform: translate(-50%,-50%) /* tweak for precise centering; details:
http://stackoverflow.com/q/36817249 */
}
<div id="container">
<div id="top"></div>
<div id="back"></div>
</div>
here is another answer jsfiddle 1
#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: purple;
width: 100%;
height: 100vh;
}
#back{
background: blue;
height: 80%;
width: 80%;
}
#top {
position: absolute;
background: red;
width: 40%;
height: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 12%;
}
<div id="container">
<div id="top"></div>
<div id="back"></div>
</div>