background video image
Hi I have a background video (The jellyfish move) this is a photo of a frame of this video
I need to understand why writing "Medusa" text has a background color, maybe the color is #222, but I don't see how to disable it in code. i need to create a navbar but the background color is getting in the way!
I need the navigation bar to be transparent like this
tesla navbar example
See Code
import logo from './logo.svg';
import './App.css';
import bgvideo from './components/bgvideo.mp4';
function App() {
return (
<div className="App">
<div className='navbar'>
<h1>Medusa</h1>
</div>
<div className='bg'>
<video autoPlay muted loop>
<source src= {bgvideo} type ="video/mp4" />
</video>
</div>
</div>
);
}
export default App;
* {
margin: 0;
padding: 0;
background-color: #222;
}
video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
h1 {
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
text-align: center;
font-size: 6rem;
margin-top: 30vh;
background-image: none;
background-color: none;
}
* {
margin: 0;
padding: 0;
/* background-color: #222; remove this line */
}
video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
h1 {
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
text-align: center;
font-size: 6rem;
margin-top: 30vh;
/* background-image: none; and no need for this */
/* background-color: none; and this */
}
this should fix your problem of navbar not being translucent
.navbar {
background-color: rgb(0 ,0 , 0, 0.5);
}
using the rgb coloring it you can have a 4th value for opacity or you can simply use the opacity type
.navbar {
opacity: 50%;
}
background-color: none; is not valid CSS, background-color will only take a colour value. You can use transparent instead so use background-color: transparent; instead of background-color: none;. You may find this does nothing when you add it to your <h1> element and that is because the *{} css query selector is giving absolutely every single element that styling, this will make the div containing the text have a background colour. Putting stuff like background color in a * query selector is generally a bad practice. However I don't know what your intentions are. You should probably give the <body> element the background color styling so it doesn't interfere with other elements .
Related
I have a issue that my scroll bar does not appear when more elements are added to the page. I also have a modal that overlays the entire page when you click on an item.
However, the modal does not appear if I change the position: fixed to something else in the CSS.
So my question is, how do I make it so that the scroll bar appears and the modal still overlays correctly?
Here are some images:
Elements with no scroll bar
Modal overlay
Elements with scroll bar, but no modal
App.css:
.page-container {
height: 100%;
width: 100%;
position: fixed;
z-index: 0;
}
.modify-modal-container {
height: 100%;
width: 100%;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0, 0.5);
z-index: 1;
}
.modify-modal-container-hide {
display: none;
}
Index.css:
body, html, #root, .App {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: white;
}
As you can see with the above pictures, I can get the scroll bar to appear. But when trying to click on an item to open the modal, it does not appear / open.
Any help is appreciated, thank you!
Changing .page-container{} position to absolute and changing .modify-modal-container{} position to fixed.
This fixed my issue!
How can I use a transparent PNG image instead of clipping the svg.
Please help need a transparent PNG image instead of circle.
CodePen link
Here is the Javascript
var section = document.querySelector('section');
window.addEventListener('scroll', function(){
var value = window.scrollY;
section.style.clipPath = "circle("+ value +"px at center)"
})
Thanks!
If I understood the problem correctly,
you need to change CSS section like background: url(/yourlink);
It can be through specifying height width and giving border-radius to the image .
And value change on scroll
var section = document.querySelector('section');
window.addEventListener('scroll', function(){
var value = window.scrollY;
section.style.height = value +"px"
section.style.width = value +"px"
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
section {
position: fixed;
top: 0;
left: 0;
/*width: 100%;
height: 100vh;*/
background: url(https://www.prixgen.com/wp-content/uploads/2018/04/mission.jpg);
background-size: contain;
background-attachment: fixed;
border-radius:500px;
}
.container {
position: relative;
margin-top: 200vh;
background: #fff;
padding: 100px;
}
.container h2 {
font-size: 2.5em;
}
.title {
position: relative;
top: 250px;
z-index: 1;
font-size: 2em;
text-align: center;
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Join us</title>
</head>
<body>
<h2 class="title">Join us for Better Future</h2>
<section></section>
<div class="container">
</div>
</body>
</html>
I'm new to Javascript and I have an assignment where I essentially just copied code from the instructions but when I go to run the whole website the JS doesn't do anything.
The objective is to add a click event handler to each of the thumbnail images so that when the smaller image is clicked, your code will show the larger version of the image in the <img> element within the <figure> element.
This same event handler will also set the <figcaption> text of the <figure> to the clicked thumbnail image's title attribute. The click event handler will be attached to the <div id="thumbnails"> element and not to the individual <img> elements.
This is what the JS should do:
When you click on one of the thumbnail images, the corresponding larger image is displayed as the main figure.
When you mouse over the main figure, the title should display against a slightly opaque white background and then fades once the mouse pointer is moved off
window.addEventListener("load", function() {
/*Noah Ratcliff*/
var thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() == 'img') {
var clickedImageSource = e.target.src;
var newSrc = clickedImageSource.replace("small", "medium");
var featuredImage = document.querySelector("#featured img");
featuredImage.src = newSrc;
featuredImage.title = e.target.title;
}
});
var featured = document.getElementById("featured");
thumbs.addEventListener("mouseover", function(e) {
var caption = document.querySelector("#featured figcaption");
caption.style.transition = "opacity 1.5s";
caption.style.opacity = 0.80;
caption.innerHTML = document.querySelector("#featured img").title;
var caption = document.querySelector("#featured figcaption");
caption.style.transition = "opacity 1.5s";
caption.style.opacity = 0;
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lobster);
p,
h1,
h2,
h3,
ul,
li,
body {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
nav,
footer {
font-family: Lobster, Cambria, "Times New Roman", serif;
}
body {
font-family: "Open Sans", Verdana, Arial, sans-serif;
font-size: 100%;
background-color: #E8EAF6;
}
header {
padding: 15px;
width: auto;
margin: 0 0;
background-color: #303F9F;
color: #FAFAFA;
height: 30px;
}
header h2 {
float: left;
font-size: 22pt;
margin-left: 10px;
}
header nav {
float: right;
margin: 10px 15px 10px 10px;
top: 5px;
}
main {
margin: 20px 20px;
}
#featured {
margin: 0 2px;
border: solid 1px #ccc;
padding: 8px 5px 3px 9px;
width: 646px;
background-color: #FAFAFA;
}
#featured figcaption {
position: absolute;
top: 476px;
left: 32px;
width: 636px;
height: 70px;
background-color: floralwhite;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
opacity: 0;
padding: 22px 2px 2px 2px;
text-align: center;
display: block;
}
#thumbnails img {
width: 116px;
height: 116px;
border: solid 1px #ccc;
padding: 4px;
margin: 5px 2px;
background-color: #FAFAFA;
}
#thumbnails img:hover {
transform: scale(1.1);
transition-duration: 300ms;
cursor: pointer;
}
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" alt="big version">
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" alt="Battle">
<img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg">
<img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda">
<img src="images/small/8711645510.jpg" title="Athens" alt="Athens">
<img src="images/small/9504449928.jpg" title="Florence" alt="Florence">
</div>
</main>
There are several things that are not right in the code: put the event listener on the thumbs instead of figure, abusing id's for css, using the style javascript instead of adding and removing classes (which makes it harder and is a bad practice in general), using querySelector when there is no need (witch also makes your code harder to read and querySelector is slower than getElementById).
Here is an example which should do what I understand you want. I'm not sure tough if I got the opacity thing right. There you will have to work.
window.addEventListener("load", function() {
/*Noah Ratcliff*/
const thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() == 'img') {
const clickedImageSource = e.target.src;
const newSrc = clickedImageSource.replace("small", "medium");
const featuredImage = document.getElementById("featured-img");
featuredImage.src = newSrc;
featuredImage.title = e.target.title;
featuredImage.alt = e.target.alt
}
});
const featured = document.getElementById("featured");
featured.addEventListener("mouseover", function(e) {
const captition = document.getElementById("fig-captition");
captition.classList.add("captition-hovered");
});
featured.addEventListener("mouseout",function(e) {
const captition = document.getElementById("fig-captition");
captition.classList.remove("captition-hovered");
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lobster);
p,
h1,
h2,
h3,
ul,
li,
body {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
nav,
footer {
font-family: Lobster, Cambria, "Times New Roman", serif;
}
body {
font-family: "Open Sans", Verdana, Arial, sans-serif;
font-size: 100%;
background-color: #E8EAF6;
}
header {
padding: 15px;
width: auto;
margin: 0 0;
background-color: #303F9F;
color: #FAFAFA;
height: 30px;
}
header h2 {
float: left;
font-size: 22pt;
margin-left: 10px;
}
header nav {
float: right;
margin: 10px 15px 10px 10px;
top: 5px;
}
main {
margin: 20px 20px;
}
.featured {
margin: 0 2px;
border: solid 1px #ccc;
padding: 8px 5px 3px 9px;
width: 646px;
background-color: #FAFAFA;
}
.captition-hovered {
position: absolute;
top: 476px;
left: 32px;
width: 636px;
height: 70px;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
padding: 22px 2px 2px 2px;
text-align: center;
position: absolute;
z-index:1;
top: 50%;
opacity: 1;
background: rgba(255,250,240, 0.51);
}
.thumbnails img {
width: 116px;
height: 116px;
border: solid 1px #ccc;
padding: 4px;
margin: 5px 2px;
background-color: #FAFAFA;
}
.thumbnails img:hover {
transform: scale(1.1);
transition-duration: 300ms;
cursor: pointer;
}
.featured {
position: relative;
}
.featured-img:hover {
transition:opacity 1.5s;
opacity: 0.5;
}
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure class="featured" id="featured">
<img class="featured-img" id="featured-img" src="https://www.w3schools.com/css/img_lights.jpg" title="Battle" alt="big version">
<figcaption id="fig-captition">Battle</figcaption>
</figure>
<div class="thumbnails" id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" alt="Battle">
<img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg">
<img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda">
<img src="images/small/8711645510.jpg" title="Athens" alt="Athens">
<img src="images/small/9504449928.jpg" title="Florence" alt="Florence">
</div>
</main>
I also replaced var keyword since now is really indicated to use const and let for your variables.
inline style css link
Also notice how I just added and removed a class instead of manipulating the style one by one. Is way easier to maintain and read. Not to mention that inline styling is overwriting any other type of css. So if you want to change it later the only way is inline styling which can be annoying in certain circumstances.
query selector vs getDocumentById
I am making a website for my university project and I am going through some issues regarding my text classes. For some reason my classes seem to have an odd height, resulting in a white strip appearing at the bottom of my web page.
#index-section div.index-title-quote{
top: 165%;
left: 50%;
margin-bottom: -100%;
transform: translate(-50%,-50%);
position: absolute;
z-index: 1;
}
#index-section div.index-title-quote h2{
font-family: 'Bebas Neue', cursive;
color: #fff;
font-size: 20px;
padding: 20px;
opacity: 0.8;
}
#index-section div.index-title-quote h5{
font-family: 'Roboto', sans-serif;
color: #fff;
font-style: italic;
font-size: 13px;
opacity: 0.6;
}
<div id="index-section">
<div class="index-title-quote">
<center><h2>"Honour may not win power, but it wins respect. And respect earns power</h2></center>
<center><h5>- Ishida Mitsunari, legendary samurai</h5></center>
</div>
here is my code, thank you for taking the time to read this.
Your code has quite a lot wrong with it. To begin with, your first <div> tag is not closed.
<div id="index-section">
Your text is white on a white background, making it impossible to see.
color: #fff;
Your div text is positioned 165% of the page-height away from the top, ensuring that it can't be seen at all.
top: 165%;
I've attached a snippet with these fixes
#index-section div.index-title-quote{
top: 10%;
left: 50%;
margin-bottom: -100%;
transform: translate(-50%,-50%);
position: absolute;
z-index: 1;
}
#index-section div.index-title-quote h2{
font-family: 'Bebas Neue', cursive;
color: black;
font-size: 20px;
padding: 20px;
opacity: 0.8;
}
#index-section div.index-title-quote h5{
font-family: 'Roboto', sans-serif;
color: black;
font-style: italic;
font-size: 13px;
opacity: 0.6;
}
<div id="index-section">
<div class="index-title-quote">
<center><h2>"Honour may not win power, but it wins respect. And respect earns power</h2></center>
<center><h5>- Ishida Mitsunari, legendary samurai</h5></center>
</div>
</div>
I'm using React, and I want to render either a button element or a Link (which transpiles to an anchor tag)
if (this.props.link) {
e = (
<Link
className={["button link", this.props.className].join(' ')}
to={this.props.link}
>
{this.props.buttonLabel}
</Link>
)
} else {
e = (
<button
className={["button", this.props.className].join(' ')}
type={this.props.type}
>
{this.props.buttonLabel}
</button>
);
}
return e;
I looked up the default button and anchor styles and normalized them. I still have one problem however. The text on the is centered vertically and horizontally, but the text on the is centered only horizontally. I went so far as to copy all the computed styles on the button and apply them to that same class shared by the anchor tag. To be safe, I also normalized .link class which I believe is added by React Links.
What's going wrong here? Here is the CSS for reference.
.button, .link {
/* Normalize anchors nad buttons */
display: inline-block;
cursor: pointer;
outline: 0;
margin: 0;
padding: 0;
border: 0;
background: none;
background-color: var(--primary);
color: black;
text-decoration: none !important;
text-shadow: none;
font: unset;
font-family: 'Source Sans Pro';
font-size: 1rem;
text-align: center;
text-rendering: auto;
text-indent: 0;
text-transform: none;
align-items: unset;
justify-content: center;
vertical-align: middle;
line-height: 1rem;
height: 3rem;
width: 8rem;
writing-mode: horizontal-tb;
word-spacing: 0;
font-stretch: 100%;
font-style: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
letter-spacing: normal;
-webkit-appearance: none;
-webkit-border-image: none;
}
You have two options;
Set display: tabel-cell; so your vertical-align: middle; applies; or
Set line-height: 3rem; so it matches your button height.
I would also recommend using a utility library for conditionally joining classNames together in React, such as https://github.com/JedWatson/classnames.