I'm using a script to have a spotlight effect. In the web version it follows the cursor, in the mobile version should it remain static at the center of the page but when I try to fix it there something weird happen and it seems like it goes below something and it's visible only in the upper part of the website.
www.civitonia.com
CSS:
.spotlight {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0.85) 200px);
}
#media only screen and (min-width: 800px) {
.spotlight {
position: fixed;
background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0) 200px);
}
}
Script:
<script>
window.addEventListener("DOMContentLoaded", ()=>{
const spotlight = document.querySelector('.spotlight');
let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
//attach mousemove event listener if media query matches.
if (matchMedia('only screen and (min-width: 800px)').matches) {
window.addEventListener('mousemove', updateSpotlight);
function updateSpotlight(e) {
spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
}
} else {
spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`;
}
});
</script>
HTML:
<div class="spotlight" style="background-image: radial-gradient(circle at 98.3559% 72.549%, transparent 160px, rgba(0, 0, 0, 0.85) 200px);"></div>
Could someone help me to keep the spotlight fixed (only in the mobile version) at the center of the page? the spotlight must remain the same in the web version (it keeps following the cursor as it does right now)
Related
My teacher assigned me to make a snake game using javascript, html and css but i really don't get how to change the background on the game area. I'm a beginner so i know my code might be bad, sorry in advance.
#gameCanvas {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid black;
background-image:
linear-gradient(90deg, #333 30px, white 30px),
linear-gradient(90deg, white 30px, #333 30px),
linear-gradient(90deg, #333 30px, white 30px);
background-position: 0 0, 0 30px, 0 60px;
background-repeat: repeat-x;
background-size: 60px 30px, 60px 30px, 60px 30px;
margin: 15px auto;
border-radius: 12px;
background-size: repeat;
}
var gameCanvas = document.getElementById("gameCanvas");
var ctx = gameCanvas.getContext("2d");
function Canvas() {
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);
}
function drawFood() {
ctx.fillStyle = "red";
ctx.strokestyle = "darkred";
ctx.fillRect(foodX, foodY, 10, 10);
ctx.strokeRect(foodX, foodY, 10, 10);
}
function make_snake() {
snake.forEach(draw_snake)
}
function draw_snake(snakePart) {
ctx.fillStyle = "pink";
ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
I'd like the gameCanvas background to be a grid that actually fits the snake but as you might see from the code, at the very beginning, when you refresh the page, you can see some kind of grid but it gets updated to a blue background and it doesn't even fit the whole canvas.
I am trying to apply linear-gradient to html progress bar but it's not applying the gradient
var customColor = '#cf014d';
ReactDOM.render(React.createElement("progress", { max: "100", value: "80",
style: { color: "linear-gradient(to left, #fff, #fff)" } }), document.getElementById('root'));
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>
you need to use background: instead of color:
color - is for text color
Use background: for the background color. color is for the foreground color.
But, beyond that, progress bars are rendered in a proprietary way by each user agent, one set of styling rules won't work for all browsers. Just setting the style of the element is not enough, the browser renders a progress bar as a series of elements and each part must be styled correctly.
Here' is an example of creating the progress bar with React, but styling it with static CSS for rendering in browsers compliant with the -webkit- vendor prefix.
ReactDOM.render(React.createElement("progress", { max: "100", value: "80" }), document.getElementById('root'));
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
width: 500px;
height: 20px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 25px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>
Background property will style the "background" part - not the value.
Here is a nice article for styling the progress bar.
https://css-tricks.com/html5-progress-element/
So I was able to create a slideshow using the jquery backstretch.
$.backstretch([
'assets/images/main-01.jpg'
, 'assets/images/main-02.jpg'
, 'assets/images/main-03.jpg'
], {duration: 5000, fade: 850});
However, I wish to add a repeating-linear-gradient effect on the images
background-image:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 3px);
Is it possible to apply the above css to the backstretch images?
Yes it is possible.
You just need an overlay for the backstretch images:
#backstretch-overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent
2px, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 3px
);
}
In this fiddle I attached backstretch to a container to have some control over it, but that is not particularly necessary.
you can see me demo:
html {
height: 100%;
overflow-y: hidden;
}
body {
background-image: url('http://dl.dropbox.com/u/515046/www/garfield-interior.jpg');
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
DEMO
or
You just have to Include the jQuery library (version 1.7 or newer) and Backstretch plugin files in your webpage, preferably at the bottom of the page, before the closing `` tag.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
// To attach Backstrech as the body's background
$.backstretch("path/to/image.jpg");
// You may also attach Backstretch to a block-level element
$(".foo").backstretch("path/to/image.jpg");
// Or, to start a slideshow, just pass in an array of images
$(".foo").backstretch([
"path/to/image.jpg",
"path/to/image2.jpg",
"path/to/image3.jpg"
], {duration: 4000});
</script>
I have an image that is within the div tag. This div has no background color, but I want to add a background color. but when I add background color are disappearing photos.
For example, cc into the div tag when I add background color within the div tag are disappearing photos
Codepen.io DEMO
HTML CODE
<div class="cc">
<div class="container">
<img src="http://lorempixel.com/1920/480/">
</div>
</div>
And CSS CODE:
body {
background: #000;
}
.container {
max-width: 1920px;
background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
}
img {
max-width: 100%;
position: relative;
z-index: -1;
}
.cc {
width:100%;
height:100%;
padding:10px;
}
Digging through your CSS, I came across a z-index: -1. If you specify this, the image will be rendered behind all elements with a higher z-index. Thus it was hidden
EDIT:
Give your .img_400px400px (which has the gradient) a z-index: 1 and your .img_400px400px img a z-index: 2. Then your background color, gradient and image show. See this jsFiddle
I have a graphic background, and I need to display a colored triangle in the top left corner (independing the resolution).
Can I create a triangle shaped element using only HTML/CSS/JS with width = 100% and height = 200px with background = red?
I can create it by IMG with width=100%, but I was hoping for a better solution than resizing an image.
The solution needs to be compatible with IE7+ and using browser's versions (more than 2%).
Thanks
Because you can't create a border which has a percentage, try using vw (viewer width) instead. So:
.triangle{
width: 0;
height: 0;
border-bottom: 600px solid blue;
border-left: 100vw solid transparent;
}
Vw units aren't supported by IE8, you will need to use a JS fallback for browsers that don't support these units.
Here is a jQuery script that sets the border-width according to the window size and adjusts it on window resize. Tested in IE8 (IE tester) :
$(document).ready(function() {
function triangle() {
var width = $('#wrap').width(),
border = width / 4;
$("#wrap .tr").css({
"border-left": border + "px solid #fff",
"border-bottom": border + "px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
border-left: 200px solid #fff;
border-bottom: 200px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>
To expand on web-tiki's answer, I think this is actually what you're going for:
$(document).ready(function() {
function triangle() {
$("#wrap .tr").css({
"border-left": $('#wrap').width() + "px solid #fff",
"border-bottom": "200px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>
I think it would be best to use background instead of borders:
.my-triangle {
width: 100%;
height: 200px;
background: linear-gradient(to left top, transparent 50%, red 50%);
}
<div class="my-triangle"></div>
Note that in order for it to be cross-browser compatible you will need to fiddle around with CSS prefixes, IE filters and SVG. (I don't readily have access to IE so I'll leave that one for you, but it would be something along these lines:)
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, transparent), color-stop(0.5, transparent), color-stop(0.5, #FF0000), color-stop(1, #FF0000));
background-image: -webkit-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -moz-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -ms-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -o-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: linear-gradient(to top left, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
Just take a div element, give a class name 'triangle-topleft', and write the below given css
.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
color of border-top would be the div's background color..Here it's red.
For more triangle structures, follow this link..
[http://css-tricks.com/examples/ShapesOfCSS/][1]