I am attempting to get a css box shadow from a circular to appear underneath a nav bar that appears under the image itself. At the moment I can get the image to create a shadow that appears on top of the nav bar but I want it to appear that it is all one object.
I've tried using :before on the class ".logo" and putting the shadow at a different z-index but it just makes the shadow disappear. I'm rather new to web stuff (as well as stack overflow) so any help will be appreciated.
This is the css I'm using and the issue is with the logo class
html{
overflow-y: scroll;
}
body {
font-family: "Arial", Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
color: #DCDCDC;
background-color: #222035;
margin: 0px;
}
.centered {
position: absolute;
left: 50%;
transform: translate(-50%);
}
.logo {
position: relative;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: 100%;
}
.logo:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
border-radius:100%;
box-shadow: 0 2vh 5vh #000000;
}
.topnav {
box-shadow: 0px 2vh 5vh #000000;
width: 100%;
height: 15vh;
background-color: #222035;
}
header {
padding: 170px;
}
And the rest of the HTML
<!DOCTYPE html>
<html lang="en-UK">
<head>
<title>WOW</title>
<link rel="icon" href="icon.png">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="topnav">
<img class = "logo" src="icon.png"></nav>
</body>
You may use filter: filter:drop-shadow(0px 2vh 5vh #000000); on the nav itself instead a box-shadow.
drop-shadow() follows the shape of the container while box-shadow follows the original shape of the container (rectangle).
see: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()
example
html {
overflow-y: scroll;
}
body {
font-family: "Arial", Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
color: #DCDCDC;
background-color: #222035;
margin: 0px;
}
.centered {
position: absolute;
left: 50%;
transform: translate(-50%);
}
.logo {
position: relative;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: 100%;
}
.logo:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
border-radius: 100%;
}
.topnav {
filter: drop-shadow(0px 3px 5px #fff);/* make it obvious for the demo */
width: 100%;
height: 15vh;
background-color: #222035;
}
header {
padding: 170px;
}
<nav class="topnav">
<img class="logo" src="https://i.ibb.co/1bkLMQt/Suit-Yourself-logo-2.png">
</nav>
Related
When minimized and scaled to different positions some the text and background shift to different spots making text shift off the screen or on top of other text or links.
body,
html {
margin: 0;
padding: 0;
}
.gamepage {
position: relative;
height: 100vh;
width: 100vw;
background-size: 100%;
}
/* tabbar */
.header {
position: sticky;
top: 0px;
left: 0px;
height: 10vh;
width: 100%;
background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
background-size: cover;
z-index: 2;
}
#home {
position: absolute;
top: 0px;
left: 0px;
border-style: groove;
}
#how2play {
position: absolute;
top: 0px;
left: 47px;
border-style: groove;
}
#character {
position: absolute;
top: 0px;
left: 137px;
border-style: groove;
}
/* link format */
a:link,
a:visited {
color: white;
text-decoration: none;
font-weight: bold;
}
/* background */
.background {
positon: absolute;
background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
height: 100%;
width: 100%;
top: 72px;
left: 8px;
background-size: cover;
z-index: 1;
}
#title {
color: white;
position: absolute;
top: 90px;
left: 5px;
font-size: 35px;
font-family: Courier New;
}
#text {
color: white;
position: absolute;
top: 125px;
left: 25px;
}
#playbutton {
color: black;
position: absolute;
top: 360px;
left: 660px;
font-size: 55px;
font-weight: bold;
transform: rotate(-7deg);
border: 5px;
border-style: double;
}
<body>
<div class="gamepage">
<div class="header">
<div id="home">
Home
</div>
<div id="how2play">
How to Play
</div>
<div id="character">
Character List
</div>
</div>
<div class="background">
<div id="title">Murder Mystery</div>
<div id="text">Find the murderer, before it's too late...</div>
<a href="homepage/thegame1.html">
<div id="playbutton">Play Now</div>
</a>
</div>
</div>
</body>
I've Tried
Changing all values to %'s
Changing all the values using vh and vw.
This fixed some of the problem but not all
Played around with the absolute and relative positioning/adding div parent tags
All this is very new to me so there might be a simple solution I don't know of
Your HTML and CSS should look something like the example below.
Here I have swapped out your IDs for semantic HTML elements, and absolute positioned elements for modern flexbox/grid
Look into flexbox and grid for single axis and dual axis positioning
body {
display: grid;
grid-template-rows: 30% 1fr;
min-height: 100vh;
margin: 0;
color: white;
background-color: black;
}
header {
background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
background-size: cover;
}
header ul {
display: flex;
gap: 1rem;
min-height: 10vh;
list-style: none;
}
a:link,
a:visited {
display: inline-block; /* Allows for padding and your rotation of [Play Now] */
color: inherit;
padding: .2em .5em;
background: #000b;
text-decoration: none;
font-weight: bold;
}
main {
background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
padding: 2rem;
background-size: cover;
}
h1 {
font-size: 2.5rem;
font-family: Courier New;
}
.playbutton {
color: black;
font-size: 3.5rem;
font-weight: bold;
transform: rotate(-7deg);
border: 5px;
border-style: double;
}
<!-- Use semantic HTML instead of divs with IDs -->
<header>
<nav>
<ul>
<li>
Home
</li>
<li>
How to Play
</li>
<li>
Character List
</li>
</ul>
</nav>
</header>
<main>
<h1>Murder Mystery</h1>
<p id="text">Find the murderer, before it's too late...</p>
Play Now
</main>
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 1 year ago.
I wanted to creat a background image blur I applied it and everything just blurred so here is the html and this is just fast re creation of the full project and if you didn't understand the class names talk to me
<!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">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
</body>
</html>
Here's the css to help
font-size: 15pt;
width: 500px;
height: 500px;
background-image: url("bto.jpg");
filter: blur(8px)
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
Or you can apply it to a full size container as below, set the container size and position to absolute and then the rest of the content to relative and set the z-indexes.
body, html{
width: 100%;
height: 100%;
position: relative;
margin:0;
padding:0;
}
.bgImageContainer{
background-image:url('https://placeimg.com/1000/1000/people');
width:100%; height:100%;
-webkit-filter: blur(5px);z-index:0;
position:absolute;
background-position: center;
background-size:cover;
z-index:-10;
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="bgImageContainer">
</div>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
You can't directly use blur filter in body. But you could apply the background image and filter to a pseudo element on the body. You can use below code to add blur effect in your background.
body {
margin:0;
padding:0;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
}
body:before {
content: "";
position: absolute;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_GUUtZTKhhfKuCm9q5Ab77HQ8KiTFng3usA0MdgVmIXBC5tgHk3XiecscRsddpRi4SA&usqp=CAU);
background-size: cover;
height:100%;
z-index: -1000; /* Keep the background behind the all your content */ height: 20%; width: 20%;
/* don't forget to use the prefixes you need */
transform: scale(5);
transform-origin: top left;
filter: blur(1px);
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
Using the code given in the question, and assuming it's the body that the background is required on, you can add a pseudo before element to the body and put the background on that and blur it.
That way only the image gets blurred, not everything else.
body {
font-size: 15pt;
width: 500px;
height: 500px;
}
body::before {
background-image: url("https://picsum.photos/id/1015/1024/768");
filter: blur(8px);
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
content: '';
z-index: -1;
}
.trbp {
width: 500px;
height: 40px;
border: black;
}
.trb {
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
display: inline-block;
}
.btp {
position: relative;
top: 120px;
left: 30px;
}
.bth {
position: relative;
top: 100px;
left: 30px;
}
.blb {
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
I'm making a rectangle card with a graph on it. I've moved it to the right using the transform and left property. I've tried all sorts of things but nothing seems to fix it.
* {
margin: 0;
padding: 0;
}
body {
font-family: Roboto, sans-serif;
background-color: #D7DBDD;
}
#chart {
position: relative;
top: 10%;
left: 50%;
transform: translate(0%, -73%);
max-width: 47vw;
}
#rectangle {
position: relative;
left: 50%;
transform: translate(-2%, 25%);
width: 49vw;
height: 63vh;
background: #ECF0F1;
border-radius: 10px;
box-shadow: 20px 20px 50px 15px #BDC3C7;
max-width: 100%;
}
<div id="rectangle"></div>
<div id="chart"></div>
All help would be appreciated and I am still learning CSS so please keep that in mind.
Screenshot:
I have the following code:
https://jsfiddle.net/uq2018xv/3/
body {
background: black;
font-family: sans-serif;
}
.container {
height: 200px;
width: 200px;
border-radius: 100%;
overflow: hidden;
position: relative;
}
.container>img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.container>span {
background: #2b2b2c;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0pt 0 2pt;
text-align: center;
font-weight: 600;
font-size: 20pt;
color: white;
}
<div class="container">
<img src="https://images.unsplash.com/flagged/photo-1593005510329-8a4035a7238f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80">
<span>EDIT</span>
</div>
The content seeps through at the bottom by 1px. Is there a way to fix this to make it look cleaner?
I figured out the solution. By setting:
clip-path: inset(0px 0px HEIGHT_OF_EDIT_SPAN 0px);
on the image.
where HEIGHT_OF_EDIT_SPAN is the height of the EDIT span at the bottom.
So it clips the image at the bottom but still keeps the image centered.
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