I have the following problem. I have a element and want to blur just a part of it. An example is given below, where the main background is a element
In short, I want to blur the content underneath the <div> that has the blur filter.
I have checked and found how to do this for images (http://jsfiddle.net/ezaLot4d/), using the CSS :before selector. However, it is not valuable in my case, as my element is a video, so that the bluring should happen continuosly and not only when the page is rendered.
Any ideas?
Thanks
Check out BlurJS, a JavaScript Library that blurs whatever is underneath something.
http://blurjs.com/
You can use it like so:
$('.target').blurjs(options);
I've included the default options here:
{
source: 'body', //Background to blur
radius: 5, //Blur Radius
overlay: '', //Overlay Color, follow CSS3's rgba() syntax
offset: { //Pixel offset of background-position
x: 0,
y: 0
},
optClass: '', //Class to add to all affected elements
cache: false, //If set to true, blurred image will be cached and used in the future. If image is in cache already, it will be used.
cacheKeyPrefix: 'blurjs-', //Prefix to the keyname in the localStorage object
draggable: false //Only used if jQuery UI is present. Will change background-position to fixed
}
You can now do this with backdrop-filter:
backdrop-filter: blur(10px);
src: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
Related
Currently I'm trying to add an animation to a page of a few shooting stars flying across the screen. I want the star to appear and end at certain percentages of the available screen to make it responsive and visible on any device. However when I try to do this, my values seem to default to 0px rather than the percentage that I am passing into my tailwind.config.js from my React Component. The values work if I pass in pixels, but as I mentioned, I would rather do percentages so that it can work well on any screen.
Currently, I am passing in my desired percentage values using this method with an alteration to make it React compatible like this:
style={{"--startingX":props.startingX}}
I am currently using NextJS and TailwindCSS to attempt to make this.
Here are (what I believe are) the relevant files:
/components/shootingStar.js
export default function ShootingStar(props) {
return (
<div>
<div style={{"--percentage":props.startingX}} className="absolute animate-star">
<div className="transform absolute top-2/4 ..."></div>
<div className="absolute top-full left-2/4 ..."></div>
</div>
</div>
)
}
animation: 'star' is the animation in question, inside of keyframes I created my custom animation.
tailwind.config.js:
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
'Quicksand': ['Quicksand', ...defaultTheme.fontFamily.sans],
},
'animation': {
...
star : "star 3s linear infinite"
},
'keyframes': {
...
star: {
'0%' : {
transform : 'translateX(var(--percentage)) translateY(0px) rotate(235deg)',
'opacity': '50%'
},
'75%' : {
'opacity' : '100%'
},
'100%' : {
transform : 'translateX(350px) translateY(500px) rotate(235deg)',
'opacity' : '0%'
}
}
}
},
},
plugins: [],
}
index.js
return (
//This div is the parent div to the whole page which is why I included it.
<div className="bg-gradient-to-tl from-blue-900 to-black overflow-x-auto h-screen w-screen ">
<ShootingStar startingX={'25%'} startingY={'25%'} endingX={'500px'} endingY={'500px'}</ShootingStar>
{The remaining shooting stars would eventually get created here}
</div>
...
)
When the animation is at 0%, I would like my star component to start at a specified X% of my screen (for example if I pass in 25% to my percentage var, I would like it to start 1/4 of the way into the screen from the left hand side of the window.)
If this is possible, I plan to expand this for the starting Y value and the ending values of X & Y as well which is why I have those props passed in.
If I pass in 25% to my percentage var, my starting value is at the top left of the screen (or 0). and allows the animation to run. If I try to hardcode percentage values into my Keyframe animation, the animation does not occur since all of the values are technically defaulting to 0.
I am expecting the animation to start at 1/4 of the way in from the left hand side.
I feel as if I'm doing something slightly wrong that won't allow me to make this animation possible but I am not entirely sure what that would be.
I figured out why my animation was stuck in the top left after further research. Keyframe animations take the height and width specifications of the component that is being animated, and do not inherit their parent's height or width (as I initially thought they did). Because I had not specified a height or width for my component it could not move across the screen as I originally wanted it to.
For anyone who might run into this as I did make sure you are setting the height and width of your components to allow your animation to go through your component. Otherwise, if you want it to run through your entire viewport, use vh rather than % when setting your animation values.
Regardless, I decided to opt for viewport since it better fits my use case.
I want to make changes to the MuiInputLabel.outlined. Although, I can see other changes when I inspect on browser, I'm not particularly able to see the transform property change.
This is my MuiInputLabel.
MuiInputLabel: {
outlined: {
paddingLeft: 10,
zIndex: 1,
transform: 'translate(-4,8), scale(1)',
pointerEvents: 'none'
},
And this is when I inspect on browser:
this is not the right way to add multiple transform property in css. There shouldn't be , in the transform style. And also transform value needs a unit like px, em and others.
The right way is:-
transform: 'translate(-4px ,8px) scale(1)'
I have a vue component that uses the tsparticles library, and I would like to set is as background as it is overlapping over all my other components, can anyone help as to how I can do that?
If you want it to be running but not displayed expect when booleanToShow is true:
<div v-show="booleanToShow"></div>
If you want to remove it from the DOM (and stop it from running)
<div v-if="booleanToToggle"></div>
You can set tsparticles to be in background using the backgroundMode property.
You can see a working sample here: https://codesandbox.io/s/xenodochial-colden-uvs85?file=/src/App.vue
The property backgroundMode sets the tsparticles canvas to full screen, it's an object with two properties: enable and zIndex.
enable (boolean): (obviously) enables the full screen mode
zIndex (number): sets the canvas element z-index property to whatever you want
A sample of backgroundMode:
{
/* root object */
backgroundMode: {
enable: true,
zIndex: -1
}
/* root object */
}
You can set the background property too, it's a shorthand to the CSS background property.
You can use that property to change the canvas background color, for example:
{
/* root object */
background: {
color: "#000"
}
/* root object */
}
If you set a negative zIndex you need to use detectsOn: "window" in interactivity object to keep mouse events working.
Just started using Bonsai JS and can't find anything in the docs so I thought I ask here. How can I set an elements class attribute so I can define some styles in CSS? Most of the styles are supported directly in Bonsai but I would also need to change the cursor type on hover over an element.
BonsaiJS doesn't let you set a "class" attribute. Instead you add a listener when the curser hovers over a DisplayObject.
new Rect(150, 150, 150, 150).attr({
fillColor: "red"
}).addTo(stage).on("mouseover mouseout", function(e) {
this.attr({
cursor: e.type == "mouseover" ? "pointer" : "inherit"
});
});
Open in Orbit: http://orbit.bonsaijs.org/#new%20Rect(150%2C%20150%2C%20150%2C%20150).attr(%7B%0A%20%20fillColor%3A%20%22red%22%0A%7D).addTo(stage).on(%22mouseover%20mouseout%22%2C%20function(e)%20%7B%0A%20%20this.attr(%7B%0A%20%20%20%20cursor%3A%20e.type%20%3D%3D%20%22mouseover%22%20%3F%20%22pointer%22%20%3A%20%22inherit%22%0A%20%20%7D)%3B%0A%7D)%3B%0A%20
I am building charts with Raphael.js that have all sorts of styling attached to them, including different hover styling. The following works across browsers:
var bar = paper.rect(x, y, width, height)
.attr({"stroke-width": 0, fill: #baeadd; "fill-opacity": 0.3})
In an attempt to fully separate the appearance from the functionality, I am trying to target my Raphael elements with CSS and add all the styling from there.
I used the technique outlined here to be able to target my shapes in all browsers, using unique ID-s:
bar.node.id = "bar-" + id;
-
*[id^="bar"] {
// Attributes listed here seem to work in modern browsers
// http://raphaeljs.com/reference.html#Element.attr
fill: #baeadd;
fill-opacity: 0.3;
}
*[id^="bar"]:hover {
fill-opacity: 0.5;
}
The above does not work on IE8, where Raphael injects vml shape elements instead. I am able to specify standard CSS properties such as background-color, and the shape element will get the styling fine, but I would like to know how to apply attributes such as fill-opacity, stroke-width, and the likes.
Is it possible to set fill and stroke colors and opacity on VML paths using CSS? explains the role of behavior: url(#default#VML). I can see that Raphael already adds a .rvml class to all the shape elements it creates, and applies this behavior property, but it doesn't seem to take effect as soon as I stop applying attributes via JS and start specifying them in the CSS.
There isn't a way of doing this since IE8 requires setting the attributes on the VML elements.
Based on my answer to Is it possible to set fill and stroke colors and opacity on VML paths using CSS?, you should be able to use a DHTML behaviour file to read the SVG styles applied in your style sheet and map them to the corresponding VML attributes.
Start by creating the behavior file, eg: vmlcss.htc
<PUBLIC:COMPONENT>
<SCRIPT LANGUAGE="JScript">
var currentStyle = element.currentStyle;
if (currentStyle)
{
// Apply stroke style
element.stroked = currentStyle["stroke"] && currentStyle["stroke"] != "none";
if (element.stroked)
{
element.strokecolor = currentStyle["stroke"] || "none";
element.strokeweight = currentStyle["stroke-width"] || "1px";
}
// Apply fill style
element.filled = currentStyle["fill"] != "none";
if (element.filled)
{
element.fillcolor = currentStyle["fill"] || "Black";
}
}
</SCRIPT>
</PUBLIC:COMPONENT>
Then add this block to your pages in order to apply this new behavior to the VML elements:
<style>
.rvml
{
behavior: url(#default#VML) url(vmlcss.htc);
}
</style>
That's all. The stroke color and fill color specified in your CSS should now be applied to the VML elements when running IE<9.
You may further extend the behavior file to map other SVG styles to VML attributes as needed.
In my opinion, Raphael should offer the possibility to specify either identifiers or class names for the created shapes, making styling via CSS much easier.
Note: I was not able to test this code, please let me know if there are issues with it so that we can improve the answer.