I have two pages in my nuxt app and both pages should have different backgrounds. However one background is overriding the other
index.vue
<style scoped>
body {
background-color: #ffffff;
}
#banner {
background-image: url("~assets/img/newbg.png");
}
</style>
login.vue
<style >
body {
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.9),
rgba(0, 0, 0, 0.4)
),
url("~assets/img/starter_image.jpg");
background-position: center;
background-size: cover;
position: relative;
}
</style>
The background of the login.vue overrides the index.vue. if a scope the style of login.vue the styling of the page changes.
It will definitely override the styles because you're not using scoped attribute which will allow it to override the styles of the parent component.
If you want to have another background in Login.vue
then this might help:
Inside Login.vue
HTML:
<div id="wrapper" v-bind:style="bgc">
*Write your html here*
</div>
CSS
#wrapper {
height: 100vh;
width: 100vw;
background-color: #111;
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: 0.5s;
}
JS
new Vue({
el: '#wrapper',
data: {
bgc: {
backgroundColor: ''
}
}
})
index.vue
<style scoped>
body {
background-color: #ffffff;
}
#banner {
background-image: url("~assets/img/newbg.png");
}
</style>
login.vue
<style scoped>
body {
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.9),
rgba(0, 0, 0, 0.4)
),
url("~assets/img/starter_image.jpg");
background-position: center;
background-size: cover;
position: relative;
}
</style>
you can use scoped for your component that will not affect to your other component.there are two different components (login, index).
Related
I'm trying to create a black overlay for a picture featured in the header of my application, using ReactJS and CSS3. However, no matter what I do, it's not working. I've tried referencing old projects in the past, where I managed to pull it off, as well as explored StackOverflow for answers. But, nothing's worked.
Could somebody please help me understand what I'm doing wrong and how I can solve this? I'd really appreciate it.
Header.js
import React from 'react';
// import { Link } from 'react-router-dom';
import Button from 'react-bootstrap/Button';
import ButtonToolBar from 'react-bootstrap/ButtonToolbar';
import './header.css';
const Header = () => {
return (
<div className="header">
<h1 className="title">Linguist Otaku</h1>
<ButtonToolBar>
<Button href="/quiz" size="lg" id="quiz-btn">
Quiz Now
</Button>
</ButtonToolBar>
</div>
)
}
export default Header;
Header.css
:root{
--mainOpacity: rgb(0, 0, 0, .55);
}
.header {
background-image: url("../../images/italy.png");
opacity: var(--mainOpacity);
height: 30em !important;
}
h1 {
font-family: "Fjalla One";
text-align: center !important;
padding-top: 2em !important;
color: white !important;
font-size: 4em !important;
}
.btn-toolbar {
display: flex !important;
justify-content: center !important;
}
#quiz-btn {
font-family: "Roboto";
color: white !important;
margin-top: 3em !important;
background-color: transparent !important;
border: solid .05em white !important;
border-radius: 0em !important;
}
#quiz-btn:hover {
transition: all 0.5s ease-in-out;
background-color: var(--mainOpacity) !important;
}
To create an overlay, you should wrap the content in another div. Then with CSS, position it right in-front of the header/background like so: https://codesandbox.io/s/mystifying-ramanujan-sq491
Header.js
const Header = () => {
return (
<div className="header">
<div className="dark-overlay">
<h1 className="title">Linguist Otaku</h1>
<ButtonToolBar>
<Button href="/quiz" size="lg" id="quiz-btn">
Quiz Now
</Button>
</ButtonToolBar>
</div>
</div>
);
};
CSS
.dark-overlay {
background-color: rgba(0, 0, 0, 0.35);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can give a background image and black overlay together in the css to the "header" or your parent like this:
background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ),url("../../images/italy.png");
I am trying to create a custom cursor that changes when hovering over a <div>, but there is a flicker when moving left to right across it, but not when moving right to left. Why this is happening and what I can do to fix it?
document.addEventListener('mousemove', (ev) => cursorMove(ev));
function cursorMove(ev) {
let circle = document.getElementById('circle');
let posY = ev.clientY;
let posX = ev.clientX;
circle.style.top = posY + 'px';
circle.style.left = posX + 'px';
}
body {
margin: 0;
height: 100vh;
background-color: #acd1d2;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
}
#wrapper {
position: relative;
width: 70%;
height: 80%;
}
.box {
height: 25%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
#box-1 {
background-color: #e8edf3;
}
#box-1:hover ~ #circle {
background-color: #e6cf8b;
box-shadow:inset 0em -0.3em 0.4em 0.2em #ca9e03a6;
}
#box-2 {
background-color: #e6cf8b;
}
#box-2:hover ~ #circle {
background-color: transparent;
border: 3px solid #E91E63;
}
#box-3 {
background-color: #b56969;
}
#box-3:hover ~ #circle {
height: 1em;
width: 1em;
background-color: #e6cf8b;
}
#box-4 {
background-color: #22264b;
color: white;
}
#box-4:hover ~ #circle {
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
#circle {
position: fixed;
border-radius: 50%;
z-index: 5;
height: 32px;
width: 32px;
background-color: white;
}
<div id="wrapper">
<div id="box-1" class="box">Sphere</div>
<div id="box-2" class="box">Circle outline</div>
<div id="box-3" class="box">Circle pin</div>
<div id="box-4" class="box">Circle color gradient</div>
<div id="circle"></div>
</div>
That's because your mouse moves faster than the circle and you hover over it, so the styles that apply to it are the same ones than when the cursor is on the background green/blue-ish area of the page.
You can fix that by adding pointer-events: none to the circle so that it feels a bit like this:
Ok, where were we? Oh yes... So you should use position: fixed instead of absolute (as you really want your cursor to be positioned relative to the top-left corner of the viewport) and probably window.requestAnimationFrame to get a smoother animation and translate3d(0, 0, 0) to promote the element to its own layer and enable hardware-accelerated rendering, which will also contribute to make it feel smoother.
You could also hide the default cursor with cursor: none and center the circle where the arrowhead of the cursor is to make it feel just like a real cursor.
const circle = document.getElementById('circle');
const circleStyle = circle.style;
document.addEventListener('mousemove', e => {
window.requestAnimationFrame(() => {
circleStyle.top = `${ e.clientY - circle.offsetHeight/2 }px`;
circleStyle.left = `${ e.clientX - circle.offsetWidth/2 }px`;
});
});
body {
margin: 0;
height: 100vh;
background-color: #acd1d2;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
cursor: none;
}
#wrapper {
position: relative;
width: 70%;
height: 80%;
}
#circle {
position: fixed;
border-radius: 50%;
z-index: 5;
height: 32px;
width: 32px;
background-color: white;
pointer-events: none;
transition:
background ease-in 10ms,
box-shadow ease-in 150ms,
transform ease-in 150ms;
/* Promote it to its own layer to enable hardware accelerated rendering: */
transform: translate3d(0, 0, 0);
}
.box {
height: 25%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
#box-1 {
background-color: #e8edf3;
}
#box-1:hover ~ #circle {
background-color: #e6cf8b;
box-shadow: 0 0 0 0 transparent, inset 0em -0.3em 0.4em 0.2em #ca9e03a6;
}
#box-2 {
background-color: #e6cf8b;
}
#box-2:hover ~ #circle {
background-color: transparent;
/* Use box-shadow instead of border to avoid changing the dimensions of the
cursor, which will make it be off-center until the mouse moves again: */
aborder: 3px solid #E91E63;
box-shadow: 0 0 0 3px #E91E63;
}
#box-3 {
background-color: #b56969;
}
#box-3:hover ~ #circle {
background-color: #e6cf8b;
/* Change its size with scale() instead of width and height for better
performance performance: */
transform: scale(0.5) translate3d(0, 0, 0);
}
#box-4 {
background-color: #22264b;
color: white;
}
#box-4:hover ~ #circle {
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
<div id="wrapper">
<div id="box-1" class="box">Sphere</div>
<div id="box-2" class="box">Circle outline</div>
<div id="box-3" class="box">Circle pin</div>
<div id="box-4" class="box">Circle color gradient</div>
<div id="circle"></div>
</div>
Here you can see another cool example I made of a custom cursor using CSS that resembles a torch: How to darken a CSS background image but keep area around cursor brighter.
Also, you can check out the cursor on my website, which is quite similar to what you have done as it has animations/transitions between its different shapes or states.
🚀 Check it out here: https://gmzcodes.com/.
👨💻 Check the code here: https://github.com/Danziger/gmzcodes
I am trying to set an opacity on the body. However, I have run into an issue.
When setting the opacity on the body, only its content will be affected. The background is not affected by the opacity.
$("button").click(function() {
$("body").toggleClass("opacity");
});
* {
box-sizing: border-box;
}
body {
background: linear-gradient(to right, #1BBCB1, #37B9E9);
font-family: 'Arial';
margin: 0;
text-align: center;
opacity: 1;
}
body.opacity {
opacity: .3;
}
button {
background-color: transparent;
border: 2px solid #000;
border-radius: 3px;
margin-top: 15px;
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The background gradient disapears when I set the opacity smaller then 1</p>
<button>Toggle opacity</button>
When doing the same on a div it works fine.
$("button").click(function() {
$("div").toggleClass("opacity");
});
* {
box-sizing: border-box;
}
body {
font-family: 'Arial';
margin: 0;
text-align: center;
}
div {
background: linear-gradient(to right, #1BBCB1, #37B9E9);
opacity: 1;
}
div.opacity {
opacity: .3;
}
button {
background-color: transparent;
border: 2px solid #000;
border-radius: 3px;
margin-top: 15px;
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>The background gradient disapears when I set the opacity smaller than 1</p>
<button>Toggle opacity</button>
</div>
But I can't do this with a div. I have to set it on the body. How can I make the opacity affect the body's background?
P.S. Happy new year!
This is because the background of body is propagated to the html element (since this one doesn't have a background set) thus the html is also having the same background of the body. In your case, the opacity works fine with background also but you simply see the one of the html element.
Add a background to html to see the difference:
$("button").click(function() {
$("body").toggleClass("opacity");
});
* {
box-sizing: border-box;
}
html {
background:red;
}
body {
background: linear-gradient(to right, #1BBCB1, #37B9E9);
font-family: 'Arial';
margin: 0;
text-align: center;
opacity: 1;
}
body.opacity {
opacity: .3;
}
button {
background-color: transparent;
border: 2px solid #000;
border-radius: 3px;
margin-top: 15px;
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The background gradient disapears when I set the opacity smaller then 1</p>
<button>Toggle opacity</button>
Some usefull links to understand this behavior:
https://www.w3.org/TR/css-backgrounds-3/#special-backgrounds
https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
https://stackoverflow.com/a/47998865/8620333
What's the meaning of "propagated to the viewport" in the CSS spec?
Use rgba() for your linear gradient colors. That way you can set the transparency of the colors. By default have the alpha transparency value set to 1 (a.k.a. 100% opacity = no transparency). Then change the value to something less than 1 so the background becomes semi-transparent.
Note: This solution will only affect the background and not child elements. Of which, may or may not be the intended result.
$("button").click(function() {
$("body").toggleClass("opacity");
});
* {
box-sizing: border-box;
}
body {
background: linear-gradient(to right, rgba(27, 188, 177, 1), rgba(55, 185, 233, 1));
font-family: 'Arial';
margin: 0;
text-align: center;
opacity: 1;
}
body.opacity {
background: linear-gradient(to right, rgba(27, 188, 177, 0.3), rgba(55, 185, 233, 0.3));
}
button {
background-color: transparent;
border: 2px solid #000;
border-radius: 3px;
margin-top: 15px;
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The background gradient disapears when I set the opacity smaller than 1</p>
<button>Toggle opacity</button>
As far as I know, the opacity property of the body does not exist. So you can obtain the desired effect with something like this:
https://codepen.io/calexandru/pen/YYQLmW
$( function () {
$("#target").on("click", function() {
$('body').addClass('opacity-container');
});
} );
.opacity-container::after {
/*CSS*/
content: "";
background: url(https://firebasestorage.googleapis.com/v0/b/betaproject-8a669.appspot.com/o/Quote-Generator%2F1.jpg?alt=media&token=4de18117-665f-4166-9111-4401af0cd555);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click the button for background with opacity</p>
<button id="target">Click me</button>
I'm struggling to set the div width to the remaining width of the container div. In the example below I want the red div (an input) to take as much space as possible. If you enter anything in the input the green div appears, which should always be right aligned.
I don't want to use either flex nor display: table-* or workarounds like setting overflow: hidden for to make space for floats.
EDIT: I'm looking for any solution that works for IE10+ (including display: table-*, etc.)
Example: https://codesandbox.io/s/23xo3wjjrp (Change the template and style tag inside /components/SearchBox.vue for changes)
The example uses vue, but for completeness I post the code here too:
HTML
<div class="ms-Fabric ms-SearchBox" :class="searchBoxStyle">
<div class="ms-SearchBox-iconContainer">
<i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
</div>
<input class="ms-SearchBox-field" type="text" placeholder="Search"
v-model="searchQuery" ref="input"
#blur="onBlur" #focus="onFocus">
<div class="ms-SearchBox-clearButton" v-show="searchQuery.length > 0"
#click="clear">
<i class="ms-SearchBox-icon ms-Icon ms-Icon--Clear"></i>
</div>
</div>
SCSS
// Active styles
.ms-SearchBox.is-active {
.ms-SearchBox-iconContainer {
width: 4px;
transition: width .167s;
.ms-SearchBox-icon {
opacity: 0;
}
}
}
// Static styles
.ms-SearchBox {
display: inline-block;
font-size: 0px;
font-weight: 400;
color: #333;
border: 1px solid #a6a6a6;
height: 32px;
padding-left: 8px;
width: 208px;
.ms-SearchBox-iconContainer {
font-size: 14px;
color: #106ebe;
transition: width .167s;
.ms-SearchBox-icon {
opacity: 1;
transition: opacity .167s 0s;
}
background: rgba(0, 0, 0, 0.2);
}
.ms-SearchBox-field {
display: inline-block;
font-size: 14px;
margin: 0;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
border: none;
outline: 1px solid transparent;
height: 32px;
vertical-align: top;
background: rgba(255, 0, 0, 0.2);
}
.ms-SearchBox-iconContainer,
.ms-SearchBox-clearButton {
display: inline-block;
height: 32px;
line-height: 32px;
width: 32px;
text-align: center;
}
.ms-SearchBox-clearButton {
font-size: 14px;
background: rgba(0, 255, 0, 0.2);
&:hover {
cursor: pointer;
}
}
}
You should try to set a width:100% to your input, and to set position:absolute to your icon containers. With paddings on the input, this should do the thing.
Hope I understood the question :)
In a previous post (How do I reset all css styles for a certain div? (Jekyll blog)) I did ask about a timeline that losses its style when I use it with my Jekyll site.
I did try to us an iframe but that is not a good solution for mobile.
My timeline is based on this project: https://github.com/ybogdanov/history-timeline. That timeline uses LESS to provide styles.
The problem is that Jekyll uses SASS instead of CSS.
This is my modified less style that works perfect with an iframe:
#content {
flex: 1;
overflow: scroll;
position: relative;
}
#ruler {
top: 0px;
height: 30px;
padding-top: 5px;
position: absolute;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
transition: top 0.1s linear;
}
#chart {
margin-top: 35px;
}
svg {
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 18px;
}
}
I used a LESS to CSS converter and I get this:
#content {
flex: 1;
overflow: scroll;
position: relative;
}
#ruler {
top: 0px;
height: 30px;
padding-top: 5px;
position: absolute;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
transition: top 0.1s linear;
}
#chart {
margin-top: 35px;
}
svg .axis path,
svg .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
svg .axis text {
font-family: sans-serif;
font-size: 18px;
}
But some lines give me a warning about "unknown property" and the styles are missing when I insert the timeline using a div.
What can I do? I only wonder about having a readable text.
Timeline with iframe:
Timeline with div:
The original file only use LESS for some indentation and should work with Sass, just rename the file and put it in the _sass folder, so that Jekyll can build it.
mv styles.less timeline.scss && mv timeline.scss _sass
Create a css/main.scss file with:
---
---
#import "timeline";
In your layout or your include file, you should link to the the generated main.css file:
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">