How can I generate in realtime this outline effect similar to this image using css3 or javascript?
http://i.imgur.com/1OEnuKF.jpg
Here is an similar effect achieved with filter and background-blending
div {
width: 180px;
height: 400px;
display: inline-block;
}
.test {
background: url(http://i.imgur.com/1OEnuKF.jpg), url(http://i.imgur.com/1OEnuKF.jpg);
background-position: 0px 0px, 3px 3px;
background-size: cover;
background-blend-mode: difference;
-webkit-filter: blur(1px)invert(1);
}
.target {
background: url(http://i.imgur.com/1OEnuKF.jpg);
background-position: top right;
background-size: cover;
}
<div class="test"></div>
<div class="target"></div>
The left part of the image is achieved from the original image; the right hand is the target image.
there are some filter effects in CSS3 , only for webkit
I've no idea how to use them to make the effect you showed
but I think they can help
here is a link that you can test CSS3 filters and get the css code
http://html5-demos.appspot.com/static/css/filters/index.html
and here you can see it's Browser compatibility
hope that help's
Related
I'm trying to make an NVG effect using CSS any ideas I don't know where to start and how to add glow and noise effect and all that stuff.
If anyone knows any tips or tried something like that before please guide me thanks <3
If you want a 'real' infrared feel, you need to invert the colors of an image and desaturate the result. The inversion will make it feel like objects are glowing. Mix it with a shade of green and you have your NVG.
div {
background-color: green;
}
img {
display: block;
width: 100%;
object-fit: cover;
filter: invert(100%) saturate(0%);
/* To blend with parent background use: */
mix-blend-mode: multiply;
}
<div>
<img src="https://picsum.photos/600?random">
</div>
This is the answer to your question you can play with
background-blend-mode
to achieve different kinds of effects
div{width: 50vw;
height: 50vw;
background-image: url(https://images.unsplash.com/photo-1671938576119-9e1c53d868dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80); /*Photo From Unsplash https://unsplash.com/*/
background-color: green;
background-blend-mode: overlay;
}
<div></div>
It's just that simple:
Adding the image to a div
Adding a radial-gradient with green and black to the div
Adding a mix-blend-mode with overlay to the image itself
The code:
div{
width: 300px; height: 300px;
background-image: radial-gradient(green, black);
}
img{ mix-blend-mode: overlay; }
<div>
<img src="https://source.unsplash.com/300x300">
</div>
I'm using bootstrap inside of React to display a grid of images in fixed size boxes. The images are all of different sizes and I don't want to distort them. The behavior I'm looking for is an image displayed in the center of a fixed size box, say 325X250 with a white(or any color) background. I'm really not a CSS person, thus the question.
This is my React code.
return (
<div className="row">
<div className="image-viewer">
{this.state.overlay}
<ul className="list-inline">
{this.state.images.map(function (image) {
return (<li key={image.src}><a href="#" onClick={this.handleClick} data-id={image.mediaId}><div className="img-container "><img
src={image.src}
className="img-responsive"
alt={image.mediaId}/></div></a></li>);
}, this)}
</ul>
</div>
</div>
);
This is the styling I've done till now,
.image-container{
width: 250px;
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.image-container img{
height: auto;
width: 100%;
}
This clearly doesn't work. I've looked into this link,
How can I make all images of different height and width the same via CSS?
But couldn't get any solution to work to my requirement.
Any help appreciated.
As an alternative to the <img> tag, you could use any block level element and CSS background properties:
background-image: url(http://domain.top/path/to/img.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
The property background-size and the value contain will render a background image to stretch to it's containing element's edges as far as it can without distortion and will maintain original aspect ratio.
SNIPPET
.img {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
outline: 1px dashed red;
width: 325px;
height: 250px;
margin: 10px auto;
}
#bbc {
background-image: url(http://i.imgur.com/4TLlrL3.png);
}
#lena {
background-image: url(http://i.imgur.com/o1RbMvI.png);
}
#normal {
background-image: url(http://i.imgur.com/43uy0hP.png);
}
<div id='bbc' class='img'></div>
<figure id='lena' class='img'></figure>
<section id='normal' class='img'></section>
Try adding 100% to both of them:
.image-container img{
height: 100%;
width: 100%;
}
Adding 100% to both of them will have it go full width of parent element
I am unsure of why I cannot get a background-image to appear in the following snippet. The url is correct and I have set size to the image. Also, how can you align a background-image in the center of a page? I know there are properties like right top, but I do not see one for center vertically and horizontally.
Thanks.
$("#arrow-icon").slideToggle(1000);
.arrow {
height: 400px;
width: 100%;
background-color: blue;
text-align: center;
}
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
<div id="arrow-icon">
<!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
</div>
</div>
The problem is that the div is smaller that the picture.
You can get around this with the background-size property
Example:
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
background-size:100% 100%;
}
fiddle - https://fiddle.jshell.net/800modgt/
Or you can change the div width and height to the image width and height...
And in terms of centering, simply use:
background-position: center;
That said, I'm noticing that it's not center on the page on the Fiddle previously posts. You can use
margin:auto;
to center a <div> horizontally
You might consider for the positioning using CSS3 for positioning, as it's very versatile in changing position of a div and how far it slides out. Here is a JSFiddle. It's for side animation, but it will work for just a standard up/down, too.
https://jsbin.com/yovaqo/edit?html,css,js,output
I wish to use JavaScript to apply the style given below to the body of the HTML or another div on mouseover. And reverse on mouseout. Both with a fade if possible?
Style:
.box-style_img2 {
background-image: url(img.png);
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
background-color: #00a0b0;
}
Thanks in advance.
P.S. Just beginning to learn Javascript.
It is always better to do things in CSS if you can avoid Javascript
Try using :hover property of css. For animation use transition property
<div class="box-style_img2">
</div>
.box-style_img2 {
background-size: auto;
height: 100px;
width: 100px;
background-repeat: repeat;
background-attachment: scroll;
background-color: #00a0b0;
transition: all 1s ease;
}
.box-style_img2:hover {
background-size: auto;
height: 100px;
width: 100px;
background-repeat: repeat;
background-attachment: scroll;
background-color: #000000;
transition: all 1s ease;
}
Also you can check this fiddle
function on_mouseover(){
document.body.className += "your-class-to be applied";//for body
or
document.getElementById("div-id").className ="your-class-to be applied"
}
function on_mouseout(){
document.body.className += "your-initial-css-class";//for body
or
document.getElementById("div-id").className ="your-initial-css-class";
}
Your HTML:
<div id="div-id" onmouseover="on_mouseover()" onmouseout="on_mouseout()"></div>
Or you can use addEventListener if you dont want to write javascript inline
document.getElementById('your-id').addEventListener("mouseover",on_mouseover);
document.getElementById('your-id').addEventListener("mouseout",on_mouseout);
Note:This task can also be done using plain css also.
.your-class{
//properties to be applied on mouseout
}
.your-class:hover{
//properties to be applied on mouseover
}
Can I do something like this with pure html and if needed css and javascript:
And when the mouse focuses, it becomes like this:
So I was thinking of an image placeholder. Am I on the right track, or is there a better/more simpler or more straightforward method?
EDIT: Just out of pure curiosity, how would I accomplish this using JavaScript, as all the current answers are all CSS-related?
From my knowledge this is simply CSS background image.
http://www.w3schools.com/cssref/pr_background-image.asp
Have it look there, you can accomplish this by setting its position like here: http://www.w3schools.com/cssref/pr_background-position.asp
You can also change the background image depend on if the item is focused or not simply showing the back ground image when focused and hiding it when its not like:
#item:focus{
bacground image code here
}
More details on focus here: http://www.w3schools.com/cssref/sel_focus.asp
And some focus usage example: http://www.mozilla.org/access/keyboard/snav/css_usage.html
UPDATE WITH RESOURCE - THANKS #MrMisterMan
http://developer.mozilla.org/en/CSS/background-image
http://developer.mozilla.org/en/CSS/background-position
JAVASCRIPT:
Using JavaScript add the attribute to your element like below:
This will call your function when it has focus and pass it the input element.
Also you can detect onfocusout
Hope this helps, any questions just ask :)
If you only need to support the latest Browser use this:
HTML:
<input placeholder="Google Custom Search" type="search" name="q">
CSS:
#myInput::-webkit-input-placeholder {
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-moz-placeholder {
/* Firefox 18- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-ms-input-placeholder {
/* IE 10- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
JSFiddle
Browser Support
If you need an image (google logo in the question) you should set the placeholder image as the background of the text field:
input.search {
background-image: url("placeholder.gif");
background-repeat: no-repeat;
}
input.search:focus {
background-image: none;
}
Note: :focus is a pseudo-class in css, which is activated on focus
You may use just CSS.
You can give a solid border with say 4px width.
You can make round corners foor your input using moz-border or webkit-border radius.
You can use a border background image.
here you can read about css3 borders http://www.w3schools.com/css3/css3_borders.asp
You may try
input {
border:2px solid #dadada;
border-radius:7px;
font-size:20px;
padding:5px;
}
input:focus {
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
}
Here is the working fiddle