I´m having trouble with animating a dropdown menu with css. I need it to work with css3 and not jQuery or javascript. I've added all the rules neccessary but still the opacity tag inside my tranistion tag in my css appears like a normal word and is not marked like the other tags and so the effect dont works.
body {
background-color: rgb(20, 20, 20);
margin: 0px;
}
.menu {
height: 100vh;
display: flex;
align-items: center;
}
.menu-item {
color: aliceblue;
font-size: clamp(2rem, 7vw, 7rem);
font-family: 'Orbitron', sans-serif;
display: block;
text-decoration: none;
padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
transition: opacity 400ms ease;
}
.menu-items {
margin-left: 100px;
position: relative;
z-index: 2;
}
.menu-items:hover>.menu-item {
opacity: 0.3;
}
.menu-items:hover>.menu-item:hover {
opacity: 1;
}
.menu-background-pattern {
height: 100vh;
width: 100vw;
background-image: radial-gradient( rgba(2255, 255, 255, 0.1) 9%, transparent 9%);
background-position: 0% 0%;
background-size: 12vmin 12vmin;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
<!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>Rahim's Portfolio Page</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght#600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu">
<div class="menu-items">
Projects
Resume
Testemony
Kontakt
</div>
<div class="menu-background-pattern"></div>
</div>
</body>
</html>
Related
I am trying to center a button in a fluid container with 100% vertical height and give it an offset from the bottom of the screen. I am pretty much there, however, the button is offset from the left and not correctly centered. See the example in my code snippet.
I am not sure what I am missing here... how can I correctly center the button to the center of the screen?
In my site code I have an image as my background in the main fluid container, hence why I have background size: cover; etc in my css.
.main-div {
background-color: pink;
min-height: 100vh;
min-width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
}
.centered-button {
position: absolute;
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
add
left: 50%;
transform: translateX(-50%);
to .centered-button element for center that.
this link is complete answer for centering with position
.main-div {
background-color: pink;
min-height: 100vh;
min-width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
}
.centered-button {
position: absolute;
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
left: 50%;
transform: translateX(-50%);
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
and you can use flex to do that simply .
.main-div {
background-color: pink;
min-height: 100vh;
min-width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.centered-button {
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
You should implement bootstrap alignment instead of using regular css, Try Flex containers. See my example below:
<button type="button" class="d-flex justify-content-center btn btn-primary">Primary</div>
Adding d-flex justify-content-center will horizontally align your element. To align the element vertically have a look at Vertical alignment
.main-div {
background-color: pink;
min-height: 100vh;
line-height:100vh;
min-width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
}
.centered-button {
vertical-align: middle;
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
/*You need to use display:flex; property of css on parent div of button to align it centerly regardless of any device you view it on
along with display: flex; you need these two property also
- align-items:center; ( this aligns button in center vertically )
- justify-content:center; ( this aligns button in center horizontally )
using positon absolute will not center the button on every device. as well as using left 50% will also not work for every device */
.main-div {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background-color: pink;
min-height: 100vh;
line-height:100vh;
min-width: auto;
position: relative;
}
.centered-button {
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
I have this image of a long line going over 2 sections in my design file and I would like to translate that with CSS. How should I go about this? should I create a layer that encapsulates both sections with an absolute position?
* {
--my-orange: rgb(255, 166, 0);
}
.timeline-container {
margin-left: 2em;
}
.timeline-container .timeline {
width: 5px;
height: 100vh;
background: var(--my-orange);
}
.checkpoint {
border: 3px solid var(--my-orange);
padding: 0.5rem;
width: 2rem;
border-radius: 2rem;
text-align: center;
transform: translateX(-1.5rem);
background: white;
position: relative;
top: calc(20vh * var(--i))
}
<!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="style.css">
</head>
<body>
<div class="timeline-container">
<div class="timeline">
<div class="checkpoint" style="--i: 0;">0%</div>
<div class="checkpoint" style="--i: 1;">5%</div>
<div class="checkpoint" style="--i: 2;">10%</div>
<!--more divs-->
</div>
</div>
</body>
</html>
I am making a site and the text that says what's new in the code snippet below is not fitting at the top of the box I created.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
.lftSector {
border-style: dashed;
width: var(--border-width, 100px);
height: var(--border-height, 200px);
padding: 50px;
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
body {
background-color: var(--background-color);
}
ol {
width: var(--border-width);
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css">
<title>Gallery</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link href="gstyle.css" rel="stylesheet">
</head>
<body>
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<h1 class="content">What's New?</h1>
<ol>
[BETA]</div> Transformation</li>
</ol>
</div>
</body>
</html>
As you see, this makes a background with a box and text. Please show me how to position the <h1> at the top of the box with the border I created.
This should help. That 50 px padding was removed and then width and min-width were used to control the width of the box. Also applied margin css to the h1.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
.lftSector {
border-style: dashed;
width: 50%; /* changed */
min-width: 200px; /* added */
height: var(--border-height, 200px);
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
body {
background-color: var(--background-color);
}
ol {
width: var(--border-width);
float: left;
}
.content { /* added */
margin: 0 .5rem; /* added */
} /* added */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css">
<title>Gallery</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link href="gstyle.css" rel="stylesheet">
</head>
<body>
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<h1 class="content">What's New?</h1>
<ol>
<a href="linkoftruth">
<li>
<div id="beta">[BETA]</div> Transformation</li>
</a>
</ol>
</div>
</body>
</html>
There were a few problems with your code. Firstly, the header was being smushed, because you used padding to give your div its size, as opposed to a width and a height. Next, you were calling on variables from :root, but also trying to pass values into those variables. To achieve your solution, I fixed the issues mentioned, as well as created two new div sections - one for the header, and one for the list. Also, you were wrapping your li elements in a tags. It should be the other way around.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
body {
background-color: var(--background-color);
}
.lftSector {
width: 300px;
height: 300px;
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
.lftSector > div {
width: 100%;
text-align: center;
height: 20%;
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 80%;
}
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<div>
<h1 class="content">What's New?</h1>
</div>
<div id="content">
<ol>
<li><span id="beta">[BETA]</span>Transformation</li>
</ol>
</div>
</div>
Additionally, I'd recommend usually setting your widths to be percentages, or based on vw/vh. Just a tip.
This is my code, I've started making a simple menu but the problem is that it is not 100% height. I've tried many solutions I have seen on similar posts but none of them help. I have tried setting the min-height, changing between % and vh, and much more but none of it worked.
M.AutoInit()
let sideMenu=document.getElementById("sideMenu")
sideMenu.addEventListener("mouseenter",()=>{
sideMenu.setAttribute("class", "col s12 m12 l12 side-menu")
})
sideMenu.addEventListener("mouseleave",()=>{
sideMenu.setAttribute("class", "col s2 m2 l2 side-menu")
})
.side-menu{
background-color: #b9ffc8;
height: 100% !important;
transition:ease-in-out .3s;
}
.side-menu:hover{
background-color: #5eff81;
}
.side-menu-wrapper{
height: 100% !important;
}
.row {
height: 100vh !important;
}
.menu-icon{
color:darkgrey;
transition: ease-in-out .3s;
}
.side-menu:hover .menu-icon{
color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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>
</head>
<body>
<div class="row">
<div class="col s3 m2 l2 side-menu-wrapper">
<div class="row">
<div class="col s2 m2 l2 side-menu" id="sideMenu">
<i class="small material-icons menu-icon">dehaze</i>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Add margin: 0; to the .row class. To be more precise add margin-bottom: 0;.
You can also remove all the !important's from the height's.
.side-menu {
background-color: #b9ffc8;
height: 100%;
transition: ease-in-out 0.3s;
}
.side-menu:hover {
background-color: #5eff81;
}
.side-menu-wrapper {
height: 100%;
}
.row {
height: 100vh;
margin-bottom: 0;
}
.menu-icon {
color: darkgrey;
transition: ease-in-out 0.3s;
}
.side-menu:hover .menu-icon {
color: white;
}
See it in action on codepen: https://codepen.io/manaskhandelwal1/pen/rNWLVLg
Presuming you are talking about the little gap at the bottom.
Row is a Materialize class:
.row {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px
}
So if you change your row class to:
.row {
height: 100vh !important;
margin-bottom:0px !important
}
It will override the materialise margin-bottom:20px .
And you'll get 100% height
Im working on a code and I would like to make the space between "Szafranowka" and "Apartaments & Restaurant" smaller. Here's how it looks like now: https://gyazo.com/d6843d8857e954acbae5c1da748c044b
I really cannot find the answer that would perfectly fit my expectations. Please, could any1 help me? :)
Also, I would like to make a small square around "Wejscie/Entrance", but when im trying to do it with the border, it looks like this: https://gyazo.com/f84fedc7a78854773b287e01ebd3a21f
Here's a part of code that im using to make a border:
<h5 style="border:3px; border-style:solid; border-color:#000000; padding: 1em;">Wejscie/Entrance</h5>
and here's my code:
HTML:
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance">Wejscie/Entrance</h5>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
to your #entrance, try this :
#entrance {
width: 8rem; //or another size
margin auto; // to center
border: 2px solid;
}
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <span id="entrance">Wejscie/Entrance</span>
</div>
CSS:
h2{
margin:5px;
line-height:15px
}
#entrance{
border:1px solid;
}
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
#header h2
{
margin-bottom: -30px;
}
#entrance span
{
border: 1px solid;
padding: 15px;
}
</style>
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance"><span>Wejscie/Entrance</span></h5>
</div>
</div>
</body>
</html>