I was wondering how you would achieve a clip path effect/knockout effect in css for multiple divs (created as rectangles) for a single background image (similar to clipping paths in photoshop?)
Is there a CSS tool for this? I have included a sample image within code.
example: https://imgur.com/a/dcADVca
codepen: https://codepen.io/lucasenz/pen/MWYaZBJ
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>HELLO.</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<h1>HELLO</h1>
</div>
<div class="content">
<div class="row ">
<div class="col rectangle">BOX ONE</div>
<div class="col rectangle">BOX TWO</div>
</div>
<div class="row ">
<div class="col rectangle">BOX THREE</div>
<div class="col rectangle">4 of 6</div>
</div>
<div class="row ">
<div class="col rectangle">5 of 6</div>
<div class="col rectangle">6 of 6</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1568039955984-85273dd1cd2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80"/>
</body>
</html>
CSS:
*{
font-family: lato;
}
body{
height: 100%;
}
h1{
font-weight:900;
letter-spacing: 0.2em;
text-align: center;
font-size: 4vh;
margin-top: 4vh;
}
.content{
width: 50%;
height: 80vh;
align-items: center;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.rectangle{
height: 18vh;
width: 15vw;
margin: 1.5vh 0.7vw;
text-align: center;
background-color: tomato;
display: flex;
align-items: center;
justify-content: center;
}
I would go for a simple solution. Create a container with your image as background and draw separator lines by creating transparent divs inside your container with white border.
.cont{
display: flex;
flex-wrap: wrap;
width: 560px;
height: 300px;
background-image: url("https://cnet4.cbsistatic.com/img/pI-Oq4fGqthDVMMMuyL2ZMnaC5I=/2019/11/01/1e902743-2ee4-4c22-9b66-0b396596b13e/20190701-154228.jpg");
background-size: cover;
}
.box{
flex-basis: 28%;
flex-grow: 1;
flex-shrink: 1;
height: 46%;
border: 10px solid white;
}
<div class="cont">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Related
I am hoping to center my parent div height based on my child div height. My goal is to have 3 boxes with a shorter, but wider rectangle centered vertically behind it. Right now I have my parent div shorter and wider than the children, however I cannot seem to center it vertically.
Here is the ideal outcome:
Here is my current version (Please ignore minor differences with text and box colors). :
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Don't use a negative margin unless absolutely necessary. In this case, it is not. Use flex on parent with align-items: center;
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
display: flex;
align-items: center;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Without a sketch of what you are trying to do, I believe this is what you are wanting... You can just set a negative margin in the col divs in order to take them outside of the parent...
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: #f0f9fb;
}
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
margin-top: -20px;
margin-bottom: -20px;
}
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Forked your fiddle: https://jsfiddle.net/jstgermain/o6xhL92s/
*** RECOMMEND BELOW SOLUTION ***
#Betsy, I would recommend simplifying your HTML and using flexbox over the previous solution to your fiddle. You will want to make sure your behavior is consistent across browsers and devices. You can use media queries to change the size to eht col items for smaller devices.
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: red;
/*#f0f9fb;*/
display: flex;
justify-content: space-evenly;
}
.col {
border: 1px solid #00acd4;
background-color: white;
padding: 1em;
width: 25%;
margin: -20px auto;
}
<div id="container">
<div id="parent">
<div class="col">
<h3>$500</h3>
</div>
<div class="col">
<h3>$3500</h3>
</div>
<div class="col">
<h3>50%</h3>
</div>
</div>
</div>
here is my code
.usp-bar {
display: flex;
flex-wrap: wrap;
background-color: #005932;
color: #fff;
font-weight: 700;
padding: 10px 0;
margin-top: 0;
justify-content: center;
height: auto;
}
.usp-text {
font-family: inherit;
font-size: inherit;
margin: auto;
}
.icon {
background-image: url(/media/icon.png);
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
And here the HTML
<div class="usp-bar">
<div class="icon"></div>
<div class="usp-text">USP 1</div>
<div class="icon"></div>
<div class="usp-text">USP 2</div>
<div class="icon"></div>
<div class="usp-text">USP 3</div>
</div>
I want to have the icon left of my text. The bar is full width and should be full responsive. The 3 text items are centered. Thats all ok, but now I want an icon left of every of the 3 text boxes but the icon is like a background image and the text overlays this in my current setting.
Can you help me pls?
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
<style>
.usp-bar {
display: flex;
flex-wrap: wrap;
background-color: #005932;
color: #fff;
font-weight: 700;
padding: 10px 0;
margin-top: 0;
height: auto;
}
.icon {
background-image: url('https://img.icons8.com/ios-glyphs/50/000000/networking-manager.png');
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
.box {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
</style>
</head>
<body>
<div class="usp-bar">
<div class="box">
<div class="icon"></div>
<div class="usp-text">USP 1</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="usp-text">USP 2</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="usp-text">USP 3</div>
</div>
</div>
</body>
</html>
check this code if thats you are looking
In the middle (not banner or footer) section of my page, I have two elements: classed as left-container and right-container.
I want to fill the left-container with many columns of a specific width, and have them overflow to the left, such that the page loads to show their right-most element and the user must scroll left to see the others.
How is this possible with flexbox?
Here's my code:
#import url("https://fonts.googleapis.com/css2?family=Heebo:wght#600&display=swap");
body {
margin: 0;
padding: 0;
}
.page-container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: teal;
align-items: stretch;
flex-direction: column;
}
.banner {
background-color: lightcyan;
position: relative;
width: 100%;
height: 80px;
}
.banner-title {
font-family: "Heebo";
font-weight: 600;
font-size: 40px;
padding: 10px;
}
.footer {
width: 100%;
background-color: thistle;
height: 30px;
}
.body-container {
background-color: lightcyan;
width: 100vw;
height: 100vh;
display: flex;
justify-content: flex-end;
}
.left-container {
background-color: greenyellow;
width: 100vw;
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
overflow: auto;
}
.right-container {
background-color: tomato;
width: 350px;
height: 100%;
}
.column-container {
background-color: red;
width: 150px;
margin: 5px;
display: flex;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page-container">
<div class="banner">
<div class="banner-title">Title</div>
</div>
<div class="body-container">
<div class="left-container">
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
</div>
<div class="right-container"></div>
</div>
<div class="footer">Footer</div>
</div>
<script src="./stopwatch.js"></script>
</body>
</html>
Images of desired result:
As unusual an experience as it is likely to cause, you can use a mixture of the flex-direction and order properties to have a scrollable container start on its right-most side.
Like was mentioned in the comments, you will need a container around your columns with flex-direction: row-reverse; to start scrolling from the right. This will place your columns in the opposite order you expect, however.
If you try and use the direction: ltr; style to fix this issue, the scrollbar will again start from the left. Instead, you must set the order property of your columns in reverse. This will take some javascript or server-side templating if you want to avoid unnecessary nth-child selectors.
Here's an example.
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
#main {
flex-direction: row-reverse;
}
#left {
flex-direction: row-reverse;
overflow-x: scroll;
}
#banner { background-color: lightblue; }
#right { background-color: salmon; width: 400px; }
#left { background-color: teal; }
#footer { background-color: purple; }
<div class="column">
<div class="row" id="banner">Banner</div>
<div class="row" id="main">
<div id="right">Right Container</div>
<div class="row" id="left">
<div class="column" style="order:12">Column Container 1</div>
<div class="column" style="order:11">Column Container 2</div>
<div class="column" style="order:10">Column Container 3</div>
<div class="column" style="order:9">Column Container 4</div>
<div class="column" style="order:8">Column Container 5</div>
<div class="column" style="order:7">Column Container 6</div>
<div class="column" style="order:6">Column Container 7</div>
<div class="column" style="order:5">Column Container 8</div>
<div class="column" style="order:4">Column Container 9</div>
<div class="column" style="order:3">Column Container 10</div>
<div class="column" style="order:2">Column Container 11</div>
<div class="column" style="order:1">Column Container 12</div>
</div>
</div>
<div class="row" id="footer">Footer</div>
</div>
It is not possible to do that with CSS because CSS is made in such a unique way that you can do the things in right manner without any bugs in code .
What you are saying is a behavior opposite to what CSS made for ( which violates its basic rule ) .
Instead you can show the data which user should see first on the left and then he/she can scroll for more on the right side ( This is your best and easy shot) . It will remove other headache like which comes first and last and changing order.
Else you can use JS function to make it possible in opposite way
#import url("https://fonts.googleapis.com/css2?family=Heebo:wght#600&display=swap");
body {
margin: 0;
padding: 0;
}
.page-container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: teal;
align-items: stretch;
flex-direction: column;
}
.banner {
background-color: lightcyan;
position: relative;
width: 100%;
height: 80px;
}
.banner-title {
font-family: "Heebo";
font-weight: 600;
font-size: 40px;
padding: 10px;
}
.footer {
width: 100%;
background-color: thistle;
height: 30px;
}
.body-container {
background-color: lightcyan;
width: 100vw;
height: 100vh;
display: flex;
justify-content: flex-end;
}
.left-container {
background-color: greenyellow;
width: 300px;
display: flex;
overflow: auto;
}
.right-container {
background-color: tomato;
width: 350px;
height: 100%;
}
.column-container {
background-color: red;
width: 150px;
margin: 5px;
padding: 40px;
flex-direction: row-reverse;
direction: rtl
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page-container">
<div class="banner">
<div class="banner-title">Title</div>
</div>
<div class="body-container">
<div class="left-container">
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
</div>
<div class="right-container"></div>
</div>
<div class="footer">Footer</div>
</div>
<script src="./stopwatch.js"></script>
</body>
</html>
Using order is the property to change the order of elements without changing position
How can i make 3 div in first row and 2 div in second row?
This is the current output:
This is the target output:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="gift-div">
<div class="row">
<div class="col-lg-4 col-md-4 col-6 col-padds">
<a href="giftred_detail.php?p=">
<div class="div-size" style="background-color:transparent ; border : 3px solid white; box-shadow: 0px 0px 70px 5px #FF0000, inset 0px 0px 150px 5px #FF0000;;">
<img src="img/gift/" alt="Item" class="jpo">
</a>
<div class="container text-con" style="text-align:center">
<h4><b style="word-break:break-word"></b></h4>
<p>Points</p>
</div>
</div>
</div>
</div>
</div>
You can use CSS flex as well:
.boxes {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
.row {
display: flex;
align-items: center;
width: 100%;
height: 200px;
gap: 50px;
flex-direction: row;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
background-color: red;
}
<div class="boxes">
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
NOTE: THE RESULTS HERE MAY NOT BE ACCURATE DUE TO IFRAME WIDTH
Actual results:
Fiddle example
I'm trying to align some flex items with different widths. I can not hit some elements.
https://jsfiddle.net/sistel/m1vu9exf/2/
I cannot align the texts and colored squares as shown in this figure http://www.farmacom.it/baseball.jpg
.flex-container-4 {
display: flex;
height: 70px;
align-items: center;
background-color: Black;
justify-content: space-around;
position:relative;
}
.flex-container-4 > div {
background-color: BLACK;
width: 500px;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 40px;
color: white;
}
I have re-written your code using flex css and removed some unwanted styles. Hope this helps your problem
HTML
<div class="flex-container">
<div class="flex-column">
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="roman-numeric">I</div>
<div class="roman-numeric">II</div>
<div class="roman-numeric">III</div>
</div>
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="text">BALL</div>
</div>
<div class="flex-row">
<div class="green"></div>
<div class="green"></div>
<div class="green"></div>
</div>
</div>
<div class="seperator"></div>
<div class="flex-column">
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="roman-numeric">IV</div>
<div class="roman-numeric">V</div>
<div class="roman-numeric">VI</div>
</div>
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="text">STRIKE</div>
</div>
<div class="flex-row">
<div class="red"></div>
<div class="red"></div>
</div>
</div>
<div class="seperator"></div>
<div class="flex-column">
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="roman-numeric">VII</div>
<div class="roman-numeric">VIII</div>
<div class="roman-numeric">IX</div>
</div>
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="text">OUT</div>
</div>
<div class="flex-row">
<div class="orange"></div>
<div class="orange"></div>
</div>
</div>
</div>
CSS
.flex-container {
display: flex;
background-color: Black;
justify-content: start;
padding: 10px 10px;
width: fit-content;
}
.flex-column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.flex-row>.number {
background-color: #444;
width: 100px;
margin: 5px;
text-align: center;
line-height: 75px;
font-size: 60px;
color: yellow;
}
.flex-row>.roman-numeric {
width: 100px;
margin: 5px;
text-align: center;
line-height: 45px;
font-size: 50px;
color: white;
}
.flex-row>.text {
background-color: BLACK;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 40px;
color: white;
}
.green {
background-color: green;
width: 40px;
height: 40px;
margin: 25px;
}
.red {
background-color: red;
width: 40px;
height: 40px;
margin: 25px;
}
.orange {
background-color: orange;
width: 40px;
height: 40px;
margin: 25px;
}
.seperator {
background: #a5a2a2;
width: 10px;
margin: 0px 15px;
}
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/2ymefx81/
This is because you created rows and cells from these rows doesn't know about other rows' dimensions - this is why in the last part, "VIII" takes more width than other elements.
One solution is to create columns instead of rows, because in this way, flex container will be of the width of the widest element.
To get exact result you need to change your bit of html structure. If not i have created similar pattern using your current code. please check this:
Baseball Flex