I want to make an earthquake effect by using transparent-insides circles that rapidly get bigger, is there a way to do this instead of making circles with different alphas 100s of times? I have already searched this up but it only gave me fully transparent circles
Have you tried using gradients?
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
I've been trying all day to find a solution to colorize text when a slanted element is over it. I have partially solved this with mix-blend-mode. But I don't like that you don't have a full control over the colors.
The buttons should be available in many different colors and you have to be able to clearly define what color the text should have and what color it should get when the element moves over it.
I have created a Stackblitz here. With a yellow background, the text should be black and become white when the element is placed over it, this does not seem to be possible with mix-blend-mode.
Does anyone have an idea? In worst case is a js solution also fine for me.
https://stackblitz.com/edit/mix-blend-mode-text-color?file=styles.scss
I have not found a suitable answer using mix-blend-mode but, depending on your use case, you may be able to get the required effect using background clip and linear gradients as you will have absolute control over the colors.
This is a simple snippet which just does the styling for the text and background to give the idea:
button {
background-image: linear-gradient(-45deg, #f7ff14 0, #f7ff14 50%, black 50%, black 100%);
}
button span {
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(-45deg, black, black 50%, white 50%, white 100%);
color: transparent;
}
<button>
<span>Weiter</span>
</button>
I am designing a tool in which when you hover over an element, it gets highlighted (I do it by applying box-shadow with large radius so that it tints the element). I would now like to also visually show the padding and margin, but I don't know how to accomplish this and show it like in the inspector. Does anyone have any experience with this?
My tool description: I'm building a tool similar to WebFlow that allows to open up a page, perform modifications (change text, some CSS rules etc) there and share the updated page among colleagues.
Thanks in advance!
You can try wrapping the div inside another for coloured margins.
Refering the link coloured padding for adding coloured padding.
Note: for margins I have used the property "display:flow-root", I am not sure if this is the best property, it may have cross browser issues.
this is with HTML and CSS alone, if you use javascript you can just get the properties of the element and add styling automatically.
.tester{
padding:15px;
margin:15px;
background-image: linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
background-clip: content-box, padding-box;
}
.wrapper{
background-color:gray;
display: flow-root;
}
<div class="wrapper">
<div class="tester">
gray is for margin and red is for padding
</div>
</div>
The effect can be seen live at Webdesignerdepot.com . When you hover over the title of a post the title highlights progressively also when you remove the cursor from the title before the animation is complete the highlight rolls back to its original state.
I tried animating the background color, but the problem that I faced was background color extended the whole div even when text didn't completely filled the div.
I have been thinking of adding an extra div with a z-index less than that of the text and then animating its width, but it would fail since text can extend more than one line. If the resulting effect is to be achieved with the same process it will result in multiple divs making the program really complex.
I couldn't think of any other way of achieving this.
Any other workarounds/techniques I can use?
Use javascript console or firebug or something like that and it's really easy to get a website styles.
CSS
a {
background-size: 200.22% auto;
-webkit-background-size: 200.22% auto;
-moz-background-size: 200.22% auto;
background-position: -0% 0;
background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, #ddd 50%);
transition: background-position 0.5s ease-out;
-webkit-transition: background-position 0.5s ease-out;
}
a:hover {
background-position: -99.99% 0;
}
HTML
<a>something</a>
I'm trying to set a radial gradient to a div as background with JS. I want the gradient to start in the middle with something like 0.8 opacity and as it goes further to the edges the opacity becomes 0, creating soft fading effect. I tried a few things, but some didn't work at all and some worked not as good as I hoped for.
The one that worked, but not very good, was when I tried to apply it with many rgba definitions and reduce the opacity by 0.1 stop:
arrCircleDivs[i].firstChild.style.backgroundImage =
'-webkit-radial-gradient(center,rgba('+r+','+g+','+b+',0.8),
rgba('+r+','+g+','+b+',0.8),rgba('+r+','+g+','+b+',0.8),rgba('+r+','+g+','+b+',0.7),rgba('+r+','+g+','+b+',0.6),rgba('+r+','+g+','+b+',0.5),rgba('+r+','+g+','+b+',0.4),
rgba('+r+','+g+','+b+',0.3),rgba('+r+','+g+','+b+',0.2),
rgba('+r+','+g+','+b+',0.1),rgba('+r+','+g+','+b+',0))';
And these ones didn't work at all:
arrCircleDivs[i].firstChild.style.backgroundImage = '-webkit-radial-gradient
(center, circle cover, rgba(30,87,153,0.7) 0%,rgba(30,87,153,0) 100%);
arrCircleDivs[i].firstChild.style.backgroundImage = '-webkit-gradient
(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(30,87,153,0.7)),
color-stop(100%,rgba(30,87,153,0)));
I got the following error message:
Uncaught SyntaxError: Unexpected token ILLEGAL
So is there any way to set such effect with JS?
The only way i have found to do this is to use the element.style=backgroundVar and in your backgroundVar have it set to the background:...
E.G
let bg = `background:radial-gradient(circle at 0% 0%,
rgba(255,0,0,1), rgba(255,0,0,0) 75%),
radial-gradient(circle at 0% 100%,
rgba(0,0,255,1), rgba(0,0,255,0) 75%),
radial-gradient(circle at 100% 0%,
rgba(255,255,0,1), rgba(255,255,0,0) 75%),
radial-gradient(circle at 100% 100%,
rgba(0,255,0,1), rgba(0,255,0,0) 75%);`
document.getElementById("background").style = bg;
You could create it using CSS. You'll want to use all of the browser extension calls to ensure cross-platform consistency.
To create a radial gradient you must also define at least two color stops.
Example of Radial Gradient:
Radial Gradient Syntax
background: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Radial Gradient - Evenly Spaced Color Stops (this is default)
Example
A radial gradient with evenly spaced color stops:
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}
Why even use JS ?
A better approach would be to simply add a class to your 'arrCircleDivs[i].firstChild' , something like .new-gradient-class.
Then On the actual CSS, you use this class to set the gradients you want.