body
{
background-image:url("hamburger.jpg"),url("glitter.png");
background-blend-mode:color-dodge;
filter:blur(5px);
}
I've added two background images,a main jpg image and another png image with glitter effect. I'm trying to blend them using color-dodge, but the glitter dominates. Also,I need to blur the glittering? I tried blurring the image, but only the text gets blurred.
I'm totally getting what you want to achieve here. Yes, you can stack one background-image over the other, either by making use of two separate elements or with the help of a pseudo-element.
With that being said, you won't be able to bring about the effect you are looking for. Why? Because on blurring the image, you are blurring the whole image, not the specific sparkle particles present in the bitmap (there is no way you could do that). Blurring of the whole image creates a misty-kinda effect and I guess it is not what you might be looking for.
I played a bit with some images, stacked them up one over the other, adjusted opacity and filter, and below is what I came up with; see if that helps.
.effect {
position: relative;
height: 100vh;
width: 100vw;
background-image: url("https://unsplash.it/700/400?image=411");
display: flex;
justify-content: center;
align-items: center;
}
.effect:after {
position: absolute;
z-index: 2000;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("https://s3.amazonaws.com/spoonflower/public/design_thumbnails/0249/0963/rrrrSparkle_silver_mirror.png") 0 0 no-repeat / cover;
content: "";
filter: blur(3px);
opacity: .35;
}
.effect-inner {
position: relative;
z-index: 3000;
}
<div class="effect">
<div class="effect-inner">
<h2>CSS is fun!</h2>
</div>
</div>
If you are looking for more, you definitely need a JavaScript solution as CSS is not going to help much here.
You forgot to specify which language you want, JavaScript, CSS or HTML. For CSS you want the code in, but for CSS just type in:
.Background Image {
filter: blur(20px);
}
That is way easier. But if you are using color blend, then you will need to blur the bigger image
You can also do many other things with filer, for example you can edit the contrast and shadow. If you want to learn more about filter go to this website:
Learn More
If you are asking about HTML or JavaScript, then comment, becouse you didn't write it in the "question's description".
Related
I am looking for an advice. I have to draw a wind turbine generator. I'm guessing its possible with html, css or canvas but maybe it would take ages.
I have in mind to do it with just images, have the main image for the generator and then have other images over the main one. I think it's the easiest solution to achieve it.
It has to have responsive as well.
The small pieces change the color depending on the data. So I am thinking to replace the images depending on it.
Any recommendation?.
Thanks in advance.
You could skin this cat in several ways, but if you're sure that these are all the components you need (and you won't need to keep expanding it), I agree that canvas is overkill.
Probably all you need is some markup like this:
<div id="turbine">
<div id="injector"></div>
<div id="motor"></div>
<div id="block"></div>
<div id="battery"></div>
</div>
And some CSS that looks something like this:
#turbine {
background: url("turbine-main.png");
position: relative;
}
#injector {
background: url("injector-green.png");
position: absolute;
left: 160px;
top: 130px;
width: 40px;
height: 30px;
}
#injector.failing {
background: url("injector-red.png");
}
#motor {
background: url("motor-green.png");
position: absolute;
left: 220px;
top: 140px;
}
#motor.failing {
background: url("motor-red.png");
}
Rinse and repeat for each part (adjusting image names, coordinates, and size as necessary, so that your pieces fit nicely over the main image). Add and remove the failing class from your individual pieces to toggle the red/green for each part, probably using javascript. (Or just do it in the HTML, if this is a statically rendered page.)
If you should be able to click these engine parts and jump to additional information, replace my <div>'s with <a>'s.
I need a textarea control with mask able property, if the textarea is mask able then the text should appear as stars instead of actual text.
I can have any no of textareas in my form, So i can't save actual text in other variable and save the stars or dots for actual textarea.
Can somebody help me to solve this issue?
As others have already pointed out, it's not possible and should not be done. But here is something which you should give a try. If you really want to achieve it, you'll have to compromise on something. Use contenteditable div instead of input and use following CSS:
Demo: http://jsfiddle.net/GCu2D/793/
CSS:
.checked {
font-size:20px;
position:relative;
display:inline-block;
border:1px solid red;
}
.checked:before {
font-size: inherit;
content:" ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: #FFF;
width: 100%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Asterisk.svg/32px-Asterisk.svg.png");
background-repeat: repeat-x;
z-index: 1;
background-size: 12px;
background-position: left center;
}
HTML:
<div contenteditable class="checked">Sample Text</div>
Obviously, this is not a perfect solution, but you can start from here.
Note: You will need to adjust the font-size and the image used. Both dimensions needs to be in sync. Ofcourse you can change the size of image using background-size . Border here is just for visual feedback. If you need to adjust the width of the stars, then you may use calc() and play around with the exact dimension.
I have being wondering thinking what do one achieve this type of background in css for quite a while now. It's an image background, yet the image does not seem to be there. You cant download the image and cant drag it along. Please see the Pink stylish image background here . How can I achieve that? Or can some one help me with the feature name? Or perhaps a good link where I can learn or see the example on that? I just try googling but don't know what it's call. Another example is the chinese new year background Here.
Its a background-image:
New year:
.homepage-background-cny {
background: url("../../img/cny.jpg") no-repeat scroll right top transparent;
}
Etsy:
#seasonal-hero {
background: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg") repeat scroll center center #FEEEEF;
width: 100%;
height: 400px;
min-width: 1030px;
cursor: pointer;
position: relative;
}
Background images usually cannot be dragged, the source of the elements background can be found with the inspector:
JSFiddle Demo
div{
height:300px;
background: url('http://lorempizza.com/1000/500');
}
<div>Background-Image</div>
They're just CSS background images:
Demo
HTML
<div id="container">
This is the content.
</div>
CSS
#container {
padding: 10px;
min-height: 600px;
width: 100%;
background: url(//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg) repeat-x;
}
In CSS you use the background-image rule:
background-image: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg");
this is the one on the page you link uses.
Best,
Michael
I want to achieve this functionality as shown in image.
Image on left is orignal and when I hover over that image, Some color defined by us should overlay image as shown in Right. I have tried using CSS no use. I was trying to achieve this thru SVGs, but I am not much experienced in it. Is there any method which can be used to achieve this effect.
UPDATE
I don't want to use any extra image on hover.
I may be able to select any other color instead of black on hover.
This is possible with webkit-filter.
Please try for not hovered image:
img {
-webkit-filter: contrast(10) grayscale(1);
}
And then drop all filters on hovered:
img:hover {
-webkit-filter: none;
}
What you have to know, NOT ALL browsers supports -webkit-filter. Also its nice idea to check this page. It will help you with finding correct values.
use can use two Images on hover u can show second image and hide first image.similarly u can do this with second image
propose here is a solution using sprites demo
<div class="picture-hover"></div>
.picture-hover {
background: url(http://i.stack.imgur.com/55veX.png);
width: 239px;
height: 180px;
}
.picture-hover:hover {
background: url(http://i.stack.imgur.com/55veX.png);
width: 239px;
height: 180px;
background-position: -239px 0px;
}
I've run in to a bit of a problem. I have a menu list where I custom made some image hover states for list items. This worked perfectly fine until I needed to change the menu items (list item text length, etc). I have to go back and re-make all of the images each time something changes.
Here are some images of what I'm trying to accomplish:
Basically the hover adds a red background and a duplicate of that red region rotated ~2 degrees and is lighter colored. Would it be possible to do this via CSS with :after and transform: rotate()? If not, what would be a nice way of accomplishing this effect for varying word lengths?
Thanks ahead of time!
Tre
This can easily be done with transform as you say. You'll need to have two elements in each button though, one for the text and one for the skewed background:
<div class="menu-button">
<div class="text">Screenings</div>
<div class="hover-bg"></div>
</div>
And style the .hover-bg class something like this:
#menu .menu-button:hover .hover-bg
{
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(220, 50, 50, 0.4);
transform: rotate(2deg) scale(1.05, 1);
transform-origin: center right;
}
Here's an example on JSFiddle
Here's an example where I had some fun with transitions. Due to lazyness I only bothered to make it work in Webkit, meaning Chrome and Webkit.
Note that for cross-browser compatibility you'll need the vendor specific property prefixes (-webkit-, -moz-, etc)
this can be done in pure CSS (not even 3).
On hover have a tilted background image, position it a few pixel to the left and top and add background color.
Because of the background color, you will see only a part of the image:
<div class="text">Screenings</div>
.text {
color: #000;
margin-left: 5px;/*to make room for the hover image */
padding: 4px;
}
.text:hover {
background: #900 url(tiltedimage.png) no-repeat -5px -5px;
color: #fff;
}
This will point you to the solution.