Id like to make the wave border stick to the bottom of the picture regardless of the size/resolution of the browser window , however adjusting the size of the parent div wont work and neither will setting the border to top: 100%;.
Goal (regardless of screen size)
Like this, but regardless of how the screen is adjusted
*{
}
body{
background-color:rgb(74,76,81);
}
#welcometoc3 {
position: absolute;
max-width: 700px;
left: 75px;
animation: fadeInAnimation ease 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
font-family: 'gamepixies', 'Josefin Sans', sans-serif;
color: white;
font-size: 125px;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#font-face {
font-family: 'gamepixies';
src: url('/Users/jager/Desktop/dev/dev/Main Projects/Chatting 3 webstie/Chatting 3 webstie/fonts/Gamepixies-8MO6n.ttf') format('truetype');
}
.center-con {
position: relative;
max-width: 200px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
top: 170px;
left: 25%;
}
.round {
position: relative;
border: 3px solid #fff;
width: 100px;
height: 100px;
border-radius: 100%;
}
span {
z-index: 10;
height: 3px;
margin:1px;
width: 30px;
background: rgb(78, 161, 0);
transition: 0.4s ease;
}
span:first-child {
display: block;
position: absolute;
transform: rotate(45deg);
left: 25%;
bottom: 35%;
}
span:nth-child(2) {
display: block;
position: absolute;
transform: rotate(-45deg);
left: 45%;
bottom: 35%;
}
span:nth-child(3) {
display: block;
position: absolute;
transform: rotate(45deg);
left: 25%;
bottom: 54%;
}
span:nth-child(4) {
display: block;
position: absolute;
transform: rotate(-45deg);
left: 45%;
bottom: 54%;
}
.round:hover span:nth-child(1) {
transform: rotate(-135deg);
}
.round:hover span:nth-child(2) {
transform: rotate(135deg);
}
.round:hover span:nth-child(3) {
transform: rotate(225deg);
}
.round:hover span:nth-child(4) {
transform: rotate(-225deg);
}
#banner-image {
position: relative;
width: 100%;
clip: (0px,0px,100px,0px);
}
#banner-border {
background-color: rgba(255, 255, 255, 0);
position: absolute;
z-index: 100;
width: 100%;
top: 400px;
}
<!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>Chatting 3 Hub</title>
<!--CSS-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="mainstyle.css">
</head>
<body style="margin:0;">
<div id="banner-border" style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-13.54,39.95 C123.02,106.08 269.74,52.78 500.00,49.98 L501.12,152.45 L0.00,150.00 Z" style="stroke: none; fill: rgb(74,76,81);"></path></svg></div>
<div class="banner">
<img loop=infinite id="banner-image" src="https://i.ibb.co/8PYMxhg/landscape1.gif" alt="balls">
</div>
<div id="welcometoc3" class="fade">Welcome to Chatting 3</div>
<div>
<div class="center-con">
<div class="round">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
</html>
*{
padding:0;
margin:0;
}
body{
background-color:red;
}
#banner-image {
position:relative;
width: 100%;
clip: (0px,0px,100px,0px);
bottom: 0;
left: 0;
position: absolute;
}
#banner-border {
background-color: rgba(255, 255, 255, 0);
position: absolute;
z-index: 100;
width: 100%;
bottom: 0;
left: 0;
}
.banner{
position: relative;
height: 100%;
height: 45vh;
}
img{
width: 100%;
height: 300px;
}
<div class="banner">
<img loop=infinite id="banner-image" src="https://i.ibb.co/8PYMxhg/landscape1.gif" alt="balls">
<div id="banner-border" style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-13.54,39.95 C123.02,106.08 269.74,52.78 500.00,49.98 L501.12,152.45 L0.00,150.00 Z" style="stroke: none; fill: rgb(74,76,81);"></path></svg></div>
</div>
You just need to adjust the size of it. As far as I know, you cannot make something relative to the img because this doesn't contain a closing tag so you can't put something inside the image. You need to put them in the same container and adjust their positions.
Related
So, the problem is that the input fields for username and password are not working, along with the login button. Both of these are positioned on the rectangle, which itself is positioned on an svg tag.
Also, I believe that the problem is because I have an animated background for one of the div's on my body tag. The animation works but the input fields do not allow text to be entered, and the button does nothing when it's clicked on. I have tried giving the input fields and the button a z-index of 0, but nothing happened, so I just removed them.
The parts that I am having trouble with have an id of: loginButton, usernameInput, and passwordInput.
*{
margin: 0;
padding: 0;
}
.homePage-background{
background: linear-gradient(to left, #8942a8, #ba382f);
width: 100%;
height: 100vh;
z-index: 3;
}
.animation{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.animation li{
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
animation: animate 20s linear infinite;
bottom: -150px;
}
.animation li:nth-child(1){
left: 86%;
width: 80px;
height: 80px;
animation-delay: -0s;
}
.animation li:nth-child(2){
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.animation li:nth-child(3){
left: 70%;
width: 70px;
height:70px;
animation-delay: 4s; /*Change this to 5.5 seconds later and see the result*/
}
#keyframes animate{
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
z-index: 2;
}
100%{
transform: translateY(-800px) rotate(360deg);
opacity: 0;
z-index: 2;
}
}
#loginTitle{
position: absolute;
color: #dddddd;
font-weight: bold;
}
#username{
position: absolute;
font-size: large;
font-weight: bold;
margin-top: 30%;
margin-left: 20%;
color: #dddddd;
}
#usernameInput{border-radius: 10px;}
#password{
position: absolute;
font-size: large;
font-weight: bold;
margin-top: 55%;
margin-left: 20%;
color: #dddddd;
}
#passwordInput{border-radius: 10px;}
#loginButton{
position: relative;
margin-left: 45%;
margin-top: 65%;
height: 40px;
width: 70px;
z-index: 0;
}
#loginButton:hover{
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="../css/homePage.css" type="text/css">
</head>
<body>
<div class="homePage-background"> <!-- animation area-->
<svg class="container-sm" width="400" height="760" style="position:absolute; margin-left: 35%; margin-top:35px">
<rect id="loginRect" width="50%" height="100%" rx="40px" ry="40px" style="fill: cornflowerblue; stroke: pink; stroke-opacity: 0.0; stroke-width: 3px; "/>
<foreignObject height="760" width="50%">
<label id="username" for="usernameInput">UserName:
<input type="text" id="usernameInput" name="usernameInput" placeholder=" Enter your username ">
</label>
<label id="password" for="passwordInput">Password:
<input type="text" id="passwordInput" name="passwordInput" placeholder=" Enter your password">
</label>
<button type="submit" id='loginButton' value="Login" onclick="window.location.href='https://www.w3schools.com/tags/tag_button.asp';">Login</button>
</foreignObject>
</svg>
<ul class="animation"> <!-- box area-->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
Thank you!
Was it necessary? This is where z-index will help. In css, I marked the edit.
*{
margin: 0;
padding: 0;
}
.homePage-background{
background: linear-gradient(to left, #8942a8, #ba382f);
width: 100%;
height: 100vh;
z-index: 3;
}
.animation{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.animation li{
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
animation: animate 20s linear infinite;
bottom: -150px;
}
.animation li:nth-child(1){
left: 86%;
width: 80px;
height: 80px;
animation-delay: -0s;
}
.animation li:nth-child(2){
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.animation li:nth-child(3){
left: 70%;
width: 70px;
height:70px;
animation-delay: 4s; /*Change this to 5.5 seconds later and see the result*/
}
/*add this it*/
.container-sm {
z-index: 9999;
}
/*---------------*/
#keyframes animate{
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
z-index: 2;
}
100%{
transform: translateY(-800px) rotate(360deg);
opacity: 0;
z-index: 2;
}
}
#loginTitle{
position: absolute;
color: #dddddd;
font-weight: bold;
}
#username{
position: absolute;
font-size: large;
font-weight: bold;
margin-top: 30%;
margin-left: 20%;
color: #dddddd;
}
#usernameInput{border-radius: 10px;}
#password{
position: absolute;
font-size: large;
font-weight: bold;
margin-top: 55%;
margin-left: 20%;
color: #dddddd;
}
#passwordInput{border-radius: 10px;}
#loginButton{
position: relative;
margin-left: 45%;
margin-top: 65%;
height: 40px;
width: 70px;
z-index: 0;
}
#loginButton:hover{
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="../css/homePage.css" type="text/css">
</head>
<body>
<div class="homePage-background"> <!-- animation area-->
<svg class="container-sm" width="400" height="760" style="position:absolute; margin-left: 35%; margin-top:35px">
<rect id="loginRect" width="50%" height="100%" rx="40px" ry="40px" style="fill: cornflowerblue; stroke: pink; stroke-opacity: 0.0; stroke-width: 3px; "/>
<foreignObject height="760" width="50%">
<label id="username" for="usernameInput">UserName:
<input type="text" id="usernameInput" name="usernameInput" placeholder=" Enter your username ">
</label>
<label id="password" for="passwordInput">Password:
<input type="text" id="passwordInput" name="passwordInput" placeholder=" Enter your password">
</label>
<button type="submit" id='loginButton' value="Login" onclick="window.location.href='https://www.w3schools.com/tags/tag_button.asp';">Login</button>
</foreignObject>
</svg>
<ul class="animation"> <!-- box area-->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
The animation you currently use has a z-index: 3
You should add a higher z-index value (4 or more, whatever you feel is convenient) to the container.
.container-sm {
z-index: 4;
}
https://jsfiddle.net/MarkBurnsRed/37se02cr/7/
I am creating a loader animation and I have achieved something like this below:
I want the black line to move from, left -> right and then right -> left infinitely. Right now, it's only moving in one direction.
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1s infinite;
}
#keyframes line-bounce {
from {
left: 300px;
}
to {
left: 0;
}
}
<div class="loader">
<div class="blue-line"></div>
</div>
Use #keyframes with % 0/50/100 to back it use 100%{left: 300px;}
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1s infinite;
}
#keyframes line-bounce {
0%{
left: 300px;
}
50%{
left: 0;
}
100%{
left: 300px;
}
}
<div class="loader">
<div class="blue-line"></div>
</div>
Or, you can use only
50% {
left: 300px;
}
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1.6s infinite;
}
#keyframes line-bounce {
50% {
left: 300px;
}
}
<div class="loader">
<div class="blue-line"></div>
</div>
Hope this helps you thanks. if you want to lear more about keyframe then visit below link. thanks
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1s infinite;
}
#keyframes line-bounce {
0% {left: 0px;}
50% {left: 300px;}
100% {left: 0px;}
}
<div class="loader">
<div class="blue-line"></div>
</div>
An easier way is to simply add alternate to the animation and also adjust it like below to avoid using pixel values:
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
margin:10px 0;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1s infinite alternate;
}
#keyframes line-bounce {
from {
left: 100%;
transform:translateX(-100%);
}
to {
left: 0;
transform:translateX(0);
}
}
<div class="loader">
<div class="blue-line"></div>
</div>
<div class="loader" style="width:500px">
<div class="blue-line"></div>
</div>
<div class="loader" style="width:200px">
<div class="blue-line"></div>
</div>
Thanks #לבני מלכה, I just made few changes to make it look more smoother.
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1.6s infinite;
}
#keyframes line-bounce {
0% {
left: 300px;
}
50% {
left: 0;
}
100% {
left: 300px;
}
}
<div class="loader">
<div class="blue-line"></div>
</div>
Try it: fiddle
HTML:
<div class="loader_trak">
<div class="loader_bar">
</div>
</div>
CSS:
.loader_trak {
position: relative;
height: 10px;
background-color: #ccc;
width: 250px;
}
.loader_bar {
background-color: #333;
position: absolute;
height: 100%;
width: 80px;
animation: line-bounce 1s infinite;
}
#keyframes line-bounce {
0% {
left: 0;
}
50% {
left: calc(100% - 80px);
}
100%{
left: 0;
}
}
You can use the following code for the same
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style type="text/css">
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1s infinite;
}
#keyframes line-bounce {
0% {
left: 0px;
}
50% {
left: 300px;
}
100% {
left: 0px;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="loader">
<div class="blue-line"></div>
</div>
</div>
</div>
</body>
</html>
I cannot figure out why my overlay class is not producing the opacity overlay on top of the image. When viewing this in with the developer tools open the overlay box looks as if it is only covering the bottom 5% (just over the word "solutions"), however the link works anywhere on the image.
Does anyone see why my overlay isn't covering the entire image?
.machInfo25 {
display: inline-block;
vertical-align: top;
height: 30vh;
position: relative;
box-sizing: border-box;
}
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
border: none;
z-index: 3;
}
.machInfo25 {
width: 25%;
}
.machInfo25 img {
width: 100%;
height: 100%;
object-fit: cover;
}
a .machineInfoTitle {
color: #FFF;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
Add display: block; or display: inline-block to your overlay class. <a> elements are inline elements which size differently than block elements. The link is still working on the entire image since the image is a child of the link
.machInfo25 {
display: inline-block;
vertical-align: top;
height: 30vh;
position: relative;
box-sizing: border-box;
}
.overlay {
display: block;
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
border: none;
/*z-index: 3;*/
}
.machInfo25 {
width: 25%;
}
.machInfo25 img {
position: relative;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
a .machineInfoTitle {
color: #FFF;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
Here I have added a sample code, Hope, this will help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,.5);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all" class="image">
<div class="overlay">
<div class="text">Solutions</div>
</div>
</div>
</body>
</html>
The background of .overlay was under the image. I applied the black transparency to the pseudo-code of class .overlay.
.machInfo25 {
height: 30vh;
width: 25%;
}
.overlay {
position: relative;
display: block;
}
.overlay:after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: rgb(0, 0, 0, 0.3);
width: 100%;
height: 100%;
}
.machInfo25 img {
width: 100%;
}
a .machInfoTitle {
color: white;
}
.total-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
I'm new in HTML, CSS. Also I'm still learn so please be understanding.
I'm trying to do some kind of art gallery which will be looks like this:
I create this squares with help of tutorial, but I want to upgrade thisand put an image instead squares, but I have no idea how to do this. Any tips ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #99CCFF;
}
.container {
max-width: 1070px;
padding: 0 30px;
margin: 0 auto;
}
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
}
.diamond-big {
width: 25%;
padding-bottom: 25%;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
}
.grid {
position: relative;
padding-bottom: 100%;
transform: rotate(45deg);
transform-origin: 39%;
}
.grid-section {
overflow: hidden;
padding-bottom: 200px;
}
#diamond1 {
position: absolute;
top: 25%;
left: 10.5%;
cursor: pointer;
}
#diamond2 {
position: absolute;
top: 25%;
left: 24%;
}
#diamond3 {
position: absolute;
top: 11.5%;
left: 37.5%;
}
#diamond4 {
position: absolute;
top: 38.5%;
left: 24%;
}
#diamond5 {
position: absolute;
top: 38.5%;
left: 51%;
}
#diamond6 {
position: absolute;
top: 52%;
left: 51%;
}
#diamond7 {
position: absolute;
top: 38.5%;
left: 64.5%;
}
#diamond8 {
position: absolute;
top: 65.5%;
left: 51%;
}
#diamond9 {
position: absolute;
top: 65.5%;
left: 64.5%;
}
<div class="container">
<section class="grid-section">
<div class="grid">
<div id="diamond1" class="diamond"></div>
<div id="diamond2" class="diamond"></div>
<div id="diamond3" class="diamond-big"></div>
<div id="diamond4" class="diamond-big"></div>
<div id="diamond5" class="diamond"></div>
<div id="diamond6" class="diamond"></div>
<div id="diamond7" class="diamond-big"></div>
<div id="diamond8" class="diamond"></div>
<div id="diamond9" class="diamond-big"></div>
</div>
</section>
</div>
If you want to make the images easy downloadable or don't want to use background-image in css, you can do something like this. I've added images inside the divs and added the following css:
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
position:relative;
overflow:hidden;
}
.diamond img, .diamond-big img
{ position:absolute;
left:-25%;
top:-25%;
width:150%;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.diamond-big {
width: 25%;
padding-bottom: 25%;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
position:relative;
overflow:hidden;
}
this makes the images as large as the squares.
Full code snippet:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #99CCFF;
}
.container {
max-width: 1070px;
padding: 0 30px;
margin: 0 auto;
}
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
position:relative;
overflow:hidden;
}
.diamond img, .diamond-big img
{ position:absolute;
left:-25%;
top:-25%;
width:150%;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.diamond-big {
width: 25%;
padding-bottom: 25%;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
position:relative;
overflow:hidden;
}
.grid {
position: relative;
padding-bottom: 100%;
transform: rotate(45deg);
transform-origin: 39%;
}
.grid-section {
overflow: hidden;
padding-bottom: 200px;
}
#diamond1 {
position: absolute;
top: 25%;
left: 10.5%;
cursor: pointer;
}
#diamond2 {
position: absolute;
top: 25%;
left: 24%;
}
#diamond3 {
position: absolute;
top: 11.5%;
left: 37.5%;
}
#diamond4 {
position: absolute;
top: 38.5%;
left: 24%;
}
#diamond5 {
position: absolute;
top: 38.5%;
left: 51%;
}
#diamond6 {
position: absolute;
top: 52%;
left: 51%;
}
#diamond7 {
position: absolute;
top: 38.5%;
left: 64.5%;
}
#diamond8 {
position: absolute;
top: 65.5%;
left: 51%;
}
#diamond9 {
position: absolute;
top: 65.5%;
left: 64.5%;
}
<div class="container">
<section class="grid-section">
<div class="grid">
<div id="diamond1" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond2" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond3" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond4" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond5" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond6" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond7" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond8" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>
<div id="diamond9" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>
</div>
</section>
</div>
Try to add the property background-image to the diamond and diamond-big classes. For example:
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-image: url("image.jpg");
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
}
If you don't see the image anyway, try to add height property too.
There are many ways to do this
One of the quickest is to swap out the <div> tags with <img> tags while keeping the class and id attributes
in your case you need to adjust some of you CSS to avoid unnecessary padding
here's a working example: (needs polishing)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #99CCFF;
}
.container {
max-width: 1070px;
padding: 0 30px;
margin: 0 auto;
}
.diamond {
width: 11.5%;
padding: 0 auto;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
}
.diamond-big {
width: 25%;
padding: 0 auto;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
}
.grid {
position: relative;
padding-bottom: 100%;
transform: rotate(45deg);
transform-origin: 39%;
}
.grid-section {
overflow: hidden;
padding-bottom: 200px;
}
#diamond1 {
position: absolute;
top: 25%;
left: 10.5%;
cursor: pointer;
}
#diamond2 {
position: absolute;
top: 25%;
left: 24%;
}
#diamond3 {
position: absolute;
top: 11.5%;
left: 37.5%;
}
#diamond4 {
position: absolute;
top: 38.5%;
left: 24%;
}
#diamond5 {
position: absolute;
top: 38.5%;
left: 51%;
}
#diamond6 {
position: absolute;
top: 52%;
left: 51%;
}
#diamond7 {
position: absolute;
top: 38.5%;
left: 64.5%;
}
#diamond8 {
position: absolute;
top: 65.5%;
left: 51%;
}
#diamond9 {
position: absolute;
top: 65.5%;
left: 64.5%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pokręcone Gridy</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/alert.js"></script>
</head>
<body>
<div class="container">
<section class="grid-section">
<div class="grid">
<img id="diamond1" src="http://images.fineartamerica.com/images-medium-large-5/blink-cat-square-art-michelle-wrighton.jpg" class="diamond">
<img id="diamond2" src="http://vastrevets.com/wp-content/uploads/2014/01/Cat-square-1-300x258.jpg" class="diamond">
<img id="diamond3" src="http://www.summitmobilevet.com/wp-content/uploads/2015/04/cat-square.jpg" class="diamond-big">
<img id="diamond4" src="http://1.bp.blogspot.com/-gMWmYwKZYZk/TvZFNMxEE0I/AAAAAAAAB1Q/Ka6cF95MCVA/s1600/mousecattoy1square.jpg" class="diamond-big">
<img id="diamond5" src="https://ae01.alicdn.com/kf/HTB13WWmIpXXXXbEXpXXq6xXFXXXy/DIY-Diamond-embroidery-font-b-Small-b-font-font-b-cat-b-font-square-drill-paste.jpg" class="diamond">
<img id="diamond6" src="http://fineartamerica.com/images/artworkimages/medium/1/orange-tabby-cat--square-jai-johnson.jpg" class="diamond">
<img id="diamond7" src="https://ae01.alicdn.com/kf/HTB1C339KVXXXXaGXpXXq6xXFXXX8/Needlework-Diamond-Embroidery-Home-Decoration-Diamond-Painting-Cross-Stitch-font-b-Laughing-b-font-Cat-Square.jpg" class="diamond-big">
<img id="diamond8" src="https://ae01.alicdn.com/kf/HTB1UsFCKpXXXXXPXXXXq6xXFXXXh/Diamond-embroidery-Three-font-b-small-b-font-font-b-cats-b-font-square-drill-paste.jpg" class="diamond">
<img id="diamond9" src="http://www.dhresource.com/0x0s/f2-albu-g1-M00-CD-F9-rBVaGVVN8-mAa_kSAACnesiYQsA716.jpg/diy-square-diamond-painting-cat-cartoon-animal.jpg" class="diamond-big">
</div>
</section>
</div>
</body>
</html>
The way I see it, you have two options:
Option 1: HTML and CSS (max-width)
You can just simply insert the img inside your div and set the max-width to 100%, like:
<div id="diamond2" class="diamond">
<img style="max-width: 100%" src="yourpicture.jpg">
</div>
If you do this, you have to make sure the divs are set to the right size for the picture (or at least the proportions), and use the max-width attribute.
Option 2: Using CSS
Set them as background on your CSS and use the right type of background-size (cover or contain):
#diamond6 {
background-image: url('yourpicture.jpg');
background-size: cover;
position: absolute;
top: 52%;
left: 51%;
}
I hope it helps!
Use background-image with background-size like
background-image: url('http://placehold.it/100');
background-size: 100% 100%;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #99CCFF;
}
.container {
max-width: 1070px;
padding: 0 30px;
margin: 0 auto;
}
.diamond {
width: 11.5%;
padding-bottom: 11.5%;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
background-image: url('http://placehold.it/100');
background-size: 100% 100%;
}
.diamond-big {
width: 25%;
padding-bottom: 25%;
background-color: rgba(255, 255, 255, 0.6);
display: inline-block;
}
.grid {
position: relative;
padding-bottom: 100%;
transform: rotate(45deg);
transform-origin: 39%;
}
.grid-section {
overflow: hidden;
padding-bottom: 200px;
}
#diamond1 {
position: absolute;
top: 25%;
left: 10.5%;
cursor: pointer;
}
#diamond2 {
position: absolute;
top: 25%;
left: 24%;
}
#diamond3 {
position: absolute;
top: 11.5%;
left: 37.5%;
}
#diamond4 {
position: absolute;
top: 38.5%;
left: 24%;
}
#diamond5 {
position: absolute;
top: 38.5%;
left: 51%;
}
#diamond6 {
position: absolute;
top: 52%;
left: 51%;
}
#diamond7 {
position: absolute;
top: 38.5%;
left: 64.5%;
}
#diamond8 {
position: absolute;
top: 65.5%;
left: 51%;
}
#diamond9 {
position: absolute;
top: 65.5%;
left: 64.5%;
}
<div class="container">
<section class="grid-section">
<div class="grid">
<div id="diamond1" class="diamond"></div>
<div id="diamond2" class="diamond"></div>
<div id="diamond3" class="diamond-big"></div>
<div id="diamond4" class="diamond-big"></div>
<div id="diamond5" class="diamond"></div>
<div id="diamond6" class="diamond"></div>
<div id="diamond7" class="diamond-big"></div>
<div id="diamond8" class="diamond"></div>
<div id="diamond9" class="diamond-big"></div>
</div>
</section>
</div>
Am trying to get a shape drawn in css on the header of my webpage. it supposed to look like this.
The shape am trying to draw for my header
but when I try to get the exact shape, IT looks like this below (Run the snippet)
Am not so good at css so am struggling here. The codes are below.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
border-left: 280px solid white;
border-top: 20px solid white;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw"></div>
<div id="green"></div>
</section>
What Am trying to achieve with my header and shape drawing
final look I want to achieve or what it should should look like at the end
You can just create a small white rectangle at the left top, skew it and move it a little to the left to remove the green triangle:
.green {
background-color:#0f0;
height:60px;
width:100%;
}
.draw {
height:30px;
margin-left:-15%;
width:30%;
background-color:#fff;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<div class="green">
<div class="draw">
</div>
</div>
Try using :after. See this snippet.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
position:relative;
}
#green:after{
content:'';
position:absolute;
top:0;
left:-25px;
height:30px;
width:250px;
background:white;
-moz-transform: skew(-60deg);
-webkit-transform: skew(-60deg);
transform: skew(-60deg);
}
<html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!-- Mirrored from byrushan.com/projects/ma/1-6-1/jquery/light/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 14 Jun 2016 14:12:13 GMT -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WEBPAGE </title>
</head>
<body>
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw">
</div>
<div id="green"></div>
</section>
</body>
</html>
Take a look at this JSFiddle
header{
text-align:center;
padding: 5px 0;
background: grey;
color: white;
}
footer{
text-align: center;
padding: 50px 0;
position: relative;
}
footer::before,footer::after{
content: '';
display: inline-block;
width: 70%;
height: 50px;
background: green;
position: absolute;
bottom: 0;
right: -10px;
transform: skewX(-30deg);
}
footer::after{
width: 100%;
height: 30px;
transform: skewX(0);
}
#header {
width: 100%;
height: 30px;
background: #CCC;
text-align: center;
line-height: 30px;
}
#slashWrapper {
position: relative;
background: #FFF;
width: 100%;
height: 100px;
}
#whiteSlash {
height: 75px;
width: 300px;
background: #FFF;
position: absolute;
top: 0px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
#greenSlash {
height: 50px;
width: 100%;
position: absolute;
bottom: 0px;
background: #00ff00;
}
#whiteSlashBottomCorner {
height: 25px;
width: 25px;
background: #FFF;
position: absolute;
bottom: 0px;
right: -25px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
<div id="header">HEADER</div>
<div id="slashWrapper">
<div id="whiteSlash"></div>
<div id="greenSlash"></div>
<div id="whiteSlashBottomCorner">
</div>