I've found this great tutorial on youtube by CodingNepal (credits to them) where it is basically a a 3d card that flips whenever you hover on, made entirely by CSS and HTML. I want to implement it in a project that I am currently making where it is basically a gallery consisting of 4 rows and multiple column. The problem is I am having a hard time trying to duplicate it in order to achieve the "4 rows and multiple column". How do I do this?
this is the code of the page:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="gallerystyle.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">
The Clutch
</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li>Home</li>
<li>Showroom</li>
<li><a class="active" href="Gallery.html">Gallery</a></li>
<li>About us</li>
<li>Feedback</li>
</ul>
</nav>
<div class="center">
<div class="front-face">
<div class="contents front">
<h2>
Image is here
</h2>
</div>
</div>
<div class="back-face">
<div class="contents back">
<h2>
Photo Info here
</h2>
</div>
</div>
</div>
</body>
</html>
And this is the code for the style sheet. Credits to CodingNepal on youtube for this amazing code
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
font-family: 'Montserrat', sans-serif;
background: linear-gradient(45deg,#111212 0%,#ebf9f9 100%);
}
.center,.front-face,
.contents,.back-face{
position: absolute;
}
.center{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 290px;
transform-style: preserve-3d;
perspective: 1000px;
}
.left{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 290px;
transform-style: preserve-3d;
perspective: 1000px;
}
.right{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 290px;
transform-style: preserve-3d;
perspective: 1000px;
}
.front-face, .back-face{
height: 100%;
width: 100%;
text-align: center;
background: linear-gradient(rgba(0,0,0,.2),
rgba(0,0,0,.2)),url(bg.jpeg);
background-size: cover;
background-position: center;
transform: translateY(0deg);
border-radius: 10px;
backface-visibility: hidden;
transform-style: preserve-3d;
transition: transform .7s cubic-bezier(.4,.2,.2,1);
}
.contents{
left: 0%;
top: 50%;
width: 100%;
perspective: 1000px;
transform: translateY(-50%) translateZ(60px) scale(0.94);
}
.front p{
font-size: 35px;
margin-bottom: 15px;
color: white;
}
.front span{
font-size: 23px;
color: white;
}
.front p:after{
content: '';
display: block;
left: 0;
right: 0;
width: 100px;
height: 2px;
background: white;
margin: 0 auto;
margin-top: 10px;
}
.back-face{
transform: rotateY(180deg);
background: linear-gradient(45deg,#043348 0%,#032535 100%);
}
.back {
color: white;
}
.back h2{
font-size: 33px;
padding-bottom: 5px;
}
.back span{
font-size: 25px;
}
.icons{
margin: 10px 0;
display: block;
}
i.fab{
color: #042f4b;
font-size: 20px;
height: 40px;
width: 40px;
background: white;
border-radius: 50%;
margin: 0 5px;
line-height: 40px;
cursor: pointer;
}
.center:hover > .back-face{
transform: rotateY(0deg);
}
.center:hover > .front-face{
transform: rotateY(-180deg);
}
img{
width: 250px;
height: 350px;
object-fit: cover;
}
The solutions I've tried already is implementing bootstrap but the problem is it destroys the layout of my navbar. I am not that efficient yet in using bootstrap and I am mainly doing the solution via the best of my knowledge about it. I am hoping you can help me with this problem, Thanks!
Related
I am having some issues with this DIV not getting centered.
I am sure it is something with CSS,
I need some corrections to CSS below and to get rid of unnecessary CSS statements if not needed
I would like the div to be centered and 75% wide
Thanks,
.css_main_popup {
transition: opacity 10ms;
visibility: hidden;
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
margin: auto;
margin-left: auto;
margin-right: auto;
padding: 10px;
background: #fff;
border-radius: 5px;
width: 95%;
height: 90%;
overflow: auto;
align-self: center;
}
HTML
<!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>SMT Explorer</title>
<link rel="stylesheet" href="explorer.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="main_div" style="position: relative; "></div>
<div id="popup_factory" class="css_main_popup">
<a class="css_close_popup" href="#" style='text-align:right' onclick="CloseFPopup()">×</a>
</div>
<div id="popup_stations" class="css_main_popup">
<a class="css_close_popup" href="#" style='text-align:right' onclick="CloseSPopup()">×</a>
</div>
<script type="text/javascript" src="explorer.js"></script>
</body>
</html>
If it's a popup, it should propbably have position: fixed, not absolute. And then, these settings should work:
.css_main_popup {
visibility: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 90%;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
padding: 10px;
background: #fff;
border-radius: 5px;
overflow: auto;
transition: opacity 10ms;
}
So the important settings for centering (horizontally AND vertically) are position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); (no margin, no align-self)
That would result in something like this (visibility excepted):
.css_main_popup {
transition: opacity 10ms;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
padding: 10px;
background: #fff;
border-radius: 5px;
width: 75%;
height: 90%;
overflow: auto;
background: red;
}
<div class="css_main_popup"></div>
Just using left and position: absolute you are able to push the div to the center of the screen.
.css_main_popup {
transition: opacity 10ms;
visibility: hidden;
position: absolute;
font-weight: bold;
text-decoration: none;
color: #333;
border: 1px solid black;
width: 75%;
left: 15%;
font-size: 30px;
padding: 10px;
background: #fff;
border-radius: 5px;
height: 90%;
overflow: auto;
}
I am trying to make a 3d cube on top of a surface using CSS and HTML. There is a ball on the top of it. I tried to use transform: translateZ() method on the front , bottom , left and right div.
It did not work. Can someone tell how to fix this and why it didn't work?
This is the code:
:root {
--boxColor: #0ff7
}
body {
align-items: center;
justify-content: center;
display: flex;
background-color: black;
min-height: 100vh;
font-size: 50px;
perspective: 10px;
perspective-origin: 720px 80px
}
.scene {
position: relative;
transform-style: preserve-3d
}
.ball {
background: lightblue;
width: 1em;
height: 1em;
border-radius: 50%;
position: absolute;
top: -3em;
left: -1em;
}
.cube {
background: var(--boxColor);
height: 3em;
width: 3em;
position: absolute;
top: -2em;
left: -2em;
}
.floor {
width: 28em;
height: 0.2em;
background: repeating-linear-gradient(to top right, red, blue);
position: absolute;
top: 1em;
left: -15em;
transform: rotateX(90deg);
}
.left,
.right,
.front,
.bottom {
width: 100%;
height: 100%;
background: var(--boxColor);
position: absolute;
}
.front {
transform: translateZ(9em);
}
.left {
transform: rotateY(90deg) translateZ(3em);
}
This is the html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="scene">
<div class="floor"> </div>
//cube section
<div class="cube">
<div class='left'></div>
<div class='right'></div>
<div class="front"></div>
<div class='bottom'></div>
</div>
//cube section
<div class="ball"> </div>
</div>
</div>
</body>
</html>
I wasn't able to make your layout work with em for dimensions, so used pixels but you should be able to work this solution into your project. Not a ton of changes, just your use of perspective needed some adjustment, and your cube was only 4 sides.
:root {
--boxColor: #0ff7
}
body {
align-items: center;
justify-content: center;
display: flex;
background-color: black;
min-height: 100vh;
font-size: 50px;
perspective: 10px;
perspective-origin: 720px 80px
}
.scene {
position: relative;
transform-style: preserve-3d
}
.ball {
background: lightblue;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
bottom: 200px;
margin: 0 auto;
justify-content: center;
display: flex;
align-self: center;
}
.floor {
width: 28em;
height: 0.2em;
background: repeating-linear-gradient(to top right, red, blue);
position: absolute;
top: 150px;
left: -15em;
transform: rotateX(90deg);
}
.cube-container {
perspective: 200px;
perspective-origin: 50% 50%;
transform: rotateZ(30deg);
}
.cube {
height: 100px;
width: 100px;
transform-style: preserve-3d;
animation: rotate 12s ease-in-out infinite;
}
.cube>div {
position: absolute;
height: 100%;
width: 100%;
background: var(--boxColor);
}
.front,
.back,
.top,
.bottom,
.left,
.right {
border: 1px solid rgba(0, 0, 0, .3);
}
.front {
transform: translateZ(50px);
}
.back {
transform: translateZ(-50px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(50px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-50px);
transform-origin: center left;
}
.top {
transform: rotateX(-270deg) translateY(-50px);
transform-origin: top center;
}
.bottom {
transform: rotateX(270deg) translateY(50px);
transform-origin: bottom center;
}
#keyframes rotate {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(360deg);
}
100% {
transform: rotateX(0deg);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="scene">
<div class="floor"> </div>
<div class="cube-container">
<div class="cube">
<div class="front">
</div>
<div class="back">
</div>
<div class="top">
</div>
<div class="bottom">
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
<div class="ball"> </div>
</div>
</body>
</html>
I have a page involving 2 responsive images next to each other (they automatically change their size while maintaining aspect ratio, when browser is resized), which works great for desktop. However, I want them to automatically align on top of each other on mobile phones: One image should be at the top while the other moves below it.
How can I do this? Help is appreciated.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<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">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<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>
.container {
position: relative;
width: 50%;
}
.image1 {
position: relative;
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.image2 {
position: relative;
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #A4CE8C;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
opacity: 0.5;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text1 {
white-space: nowrap;
color: #006400;
font-size: 7vw;
position: absolute;
overflow: hidden;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.text2 {
white-space: nowrap;
color: #006400;
font-size: 7vw;
position: absolute;
overflow: hidden;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container col-sm-6" style="float:right; margin: 1px 0px 0px 0px; min-width: 50%;">
<img src="C:\Users\User\Google Drive\SGroup\Website\img2re2.jpg" alt="Avatar" class="image1 img-responsive">
<div class="overlay" >
<div class="text1"><b>S Marble</b></div>
</div>
</div>
<div class="container col-sm-6" style="float:left; margin: 1px 0px 0px 0px; min-width: 50%;">
<img src="C:\Users\User\Google Drive\SGroup\Website\img1re222.jpg" alt="Avatar" class="image2 img-responsive">
<div class="overlay">
<div class="text2"><b>S Steel</b></div>
</div>
</div>
</body>
</html>
You can use #media rule for detecting the screen size and the code the desired for mobile
Eg:
#media only screen and (max-width: 768px) {
.container {
display:flex;
flex-direction: column;
}
}
This might be a little bulky,
Basically, I like how I have laid out this page, but when I resize the window, since I used position: relative, a lot of the elements overlap once the window is small enough. Additionally, it's usually standard (based on websites I have visited) that when resizing, elements are fixed and that you'd just have to scroll to get to the elements that are off screen, but in this case I have everything scaling with the window size. I am not sure if elements scaling with the screen are a good or bad design, however I would like to fix the overlapping issue. And if it is poor design to scale the elements, I would appreciate any suggestions as to achieving the same result with no scaling.
I have replaced most of the background content with solid colors. Also, I understand that a lot of what I may have already and will do in the future may be shortened with JavaScript, however I still need to learn it :)
Any suggestions regarding structure of classes, headers, tags etc. would be very helpful, this is only my second day of html/css. I am currently looking for online resources regarding these topics!
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
position: fixed;
background: black;
font-family: Open Sans;
color: #FFFFFF;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: #FFFFFF;
opacity: 0.6;
}
a:hover {
opacity: 1;
}
h1 {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);
opacity: 0.5;
font-size: 3vw;
padding: 0;
margin: 0;
}
nav ul {
padding: 0;
border: 0;
margin: 0;
}
nav ul li {
list-style-type: none;
display: inline;
margin-left: 10px;
}
footer {
position: fixed;
bottom: 5vh;
right: 1.5vw;
}
#background-div {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
background: green;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
opacity: 0;
z-index: -1;
transition: ease-in 0.3s;
}
#background2-div {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
background: red;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
opacity: 0;
z-index: -1;
transition: ease-in 0.3s;
}
#intro .button {
position: fixed;
padding: 0;
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 12px;
top: 50%;
transform: translate(0%, -50%);
width: 20vw;
height: 25vh;
transition: all 0.3s ease 0s;
opacity: 0.5;
border-color: black;
border-style: solid;
}
.button.english {
background-image: url('../images/uk_flag.png');
left: 15vw;
}
.button.portuguese {
background-image: url('../images/angola_flag.png');
right: 15vw;
}
.button.english div {
position: absolute;
top: 100%;
left: 48%;
transform: translate(-50%, 0);
color: white;
font-size: 4vw;
}
.button.portuguese div {
position: absolute;
top: 100%;
left: 49%;
transform: translate(-50%, 0);
color: white;
font-size: 3.5vw;
}
#welcome .button {
position: fixed;
padding: 0;
background-position: center center;
opacity: 0.7;
border-color: rgba(255, 255, 255, 0.5);
border-color: white;
border-style: solid;
border-radius: 12px;
width: 20vw;
height: 25vh;
top: 50%;
transform: translateY(-50%);
max-height: 80px;
max-width: 20vw;
}
.button.buy {
left: 15vw;
}
.button.sell {
right: 15vw;
}
.button.buy div,
.button.sell div {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4vw;
}
#intro .button:hover,
#welcome .button:hover {
opacity: 1;
border-color: white;
}
.button.buy:hover~#background-div {
opacity: 1;
border-color: white;
transition: ease-out 0.7s;
}
.button.sell:hover~#background2-div {
opacity: 1;
border-color: white;
transition: ease-out 0.7s;
}
#videoback {
position: fixed;
top: -64px;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -2;
opacity: 0.2;
}
<!doctype html>
<html lang="en">
<head>
<title>AB</title>
<link href="styles/intro.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<link href="welcome.html" rel="alternate" hreflang="en" />
<link href="welcome_pt.html" rel="alternate" hreflang="pt" />
</head>
<body id="welcome">
<a href="home.html" class="button buy" hreflang="en">
<div>Buy</div>
</a>
<a href="apply.html" class="button sell" hreflang="en">
<div>Sell</div>
</a>
<div id="background-div"></div>
<div id="background2-div"></div>
<video autoplay muted loop id="videoback">
<source src="videos/blessings.mp4" type="video/mp4">
</video>
<footer>
<div>
<nav>
<ul>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</footer>
<!-- Scripts -->
</body>
</html>
If I understand it correctly, you can solve your problem using bootstrap:
Link it in your html as such:
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Use bootstrap to define rows and their column size:
<!-- this is necessary container to contain all your rows
note that you can have multiple containers per website, or even within
each other -->
<div class="container">
<!-- elements that will be displayed next to each other -->
<div class="row">
<!-- two elements that will divide the row by half until MD size: >=992px -->
<div class="col-md-6">content</div>
<div class="col-md-6">content</div>
</div>
<div class="row">
<!-- three elements that will always be shown next to each other-->
<div class="col-xs-4">content</div>
<div class="col-xs-4">content</div>
<div class="col-xs-4">content</div>
</div>
...
</div>
Learn more about bootstrap:
quick tutorial for your needs
Get started with bootstrap 3
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>