Given a div that has an image in its background, if this image is transparent (this is an important detail), how can I change its color? Is it possible?
HTML
<body>
<div>
<hr/>
<div id ='imagediv' class="ornament"></div>
</div>
</body>
CSS
body {
margin-top: 100px;
background: url('http://hostmypicture.com/images/fundokairo.png') repeat;
}
hr {
height: 30px;
color: #578daf;
background: url('http://hostmypicture.com/images/barrapreta.png') repeat-x 0 50%;
border: 0;
padding: 0;
margin: 9px 0 0 0;
}
.ornament {
width: 169px;
height: 169px;
background: url('http://s23.postimg.org/6prq112g7/mascara_Fundo_Branco_Kairos.png') 0 50%;
margin: -104px auto 0 auto;
}
ornament is the class of the div.
JavaScript
var divImage = document.getElementById('imagediv');
var divStyle = divImage.currentStyle || window.getComputedStyle(divImage, false);
var divBackImage = divStyle.backgroundImage;
How can the image be filled?
I tried without success to fill the image using fillStyle and fill() of JavaScript. But it seems that using canvas is a possibility.
Fiddle: http://jsfiddle.net/9EFdF/21/
Note: I want the effect of a progress bar, so the color needs to come from underside.
You can simply set a new style for the element like this - note: it will be the transparent parts of the image that will change so in this case if you want the inner part to change color change transparency so that part is transparent:
imagediv.style.backgroundColor = '#000'; //new color
You can chose to use getElementById first, however, elements that has an ID can be referenced directly, but for example's sake:
var el = document.getElementById('imagediv');
el.style.backgroundColor = '#000'; //new color
UPDATED FIDDLE
If you want to keep the image as-is and fill it's inner part the only other option is to use canvas and its composite modes.
If the div is the same size as the background image, you could add a background-color style to the div and the colour would show through the transparent image.
Related
I finished my idea and it works as it is, but it's static and as all developer like, we want to make it better. I have a script where user choose his own top border color for posts(self-developed forum feature).
There is forum post and top border is colored in some color. How can I make it animated. You know when there is a circle and color goes around (it can be different colors) and makes that cool effect (never ending). I don't want something complex as that. I would like a very "simple" concept. Top border color is red (example). Animation starts from left all the way to the right and then repeats. It works like a pulse when heart beats. Like some different color going in that single line, reaching end, stops, repeat.
This is my code:
$(document).ready(function() {
var postDivs = $(".post");
$.each(postDivs, function(index, div) {
var color = ($(".post .postprofile-info")[index].firstChild.nextSibling.data[0] == "#") ? $(".post .postprofile-info")[index].firstChild.nextSibling.data : "#d4d4d4";
$(this).css("border-top", "15px solid " + color);
var element1 = $(".post .postprofile-info ")[index].firstChild;
$(".post .postprofile-info")[index].firstChild.nextSibling.data = "";
element1.style.visibility = "hidden";
});
I know it's quite messy and very badly written but it works :D
Focus here on this line:
$(this).css("border-top", "15px solid " + color);
How can I animate that? I hope I managed to explain myself as best as I could. :)
You can't change the border in the way you would like on the actual element, but you can get the effect using pure CSS (without having to add extra elements to the DOM) by using a before pseudo element.
Here's a simple example in pure HTML/CSS:
div {
height: fit-content;
width: fit-content;
position: relative;
}
div::before {
content: '';
width: 100%;
height: 2px;
background: red;
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 0;
animation: grow 2s infinite;
}
#keyframes grow {
to {
width: 100%;
}
}
<div>some info</div>
I'm developing an application with ReactJS. I have a content editable div where the user can add pictures and write text on those pictures. In order to do so when the user adds a picture I append another content editable div to the main content editable and set the background to the picture he selected. This a screenshot of what it looks like:
(Note: still trying to figure out why I get that extra margin on the right, it doesn't happen with all pictures; I suppose it has something to do with proportions, rounding and conversion from 100% to pixels. Check the code below.) --> edit: this issue was caused by the border 1px of the div. I fixed it by removing 2px from the image width.
To resize the div and make it of the right size I add a hidden image tag where I load the picture, and on onload retrieve the height and width and set my div size accordingly, as follows:
// here I create the div that will have the background image
let div = document.createElement('div');
div.setAttribute('contenteditable', 'true');
div.style.backgroundImage = 'url(' + image.webformatURL + ')';
div.style.backgroundSize = 'contain';
div.classList.add('text-page');
// here I create the image tag that will be invisible
// the css tells the image to have width: 100%, hence
// the picture will grow to fit the width
let img = document.createElement('img');
img.src = image.webformatURL;
img.classList.add('editor-thumb');
// here I add the image to the div
div.appendChild(img);
// here I append the div to the main content editable with id 'editor'
document.getElementById('editor').appendChild(div);
img.onload = () => {
// once the image has loaded I set the div height and width
// I believe that somehow this is where I get the extra margin mentioned above
div.style.height = img.height + 'px';
// fixing the extra margin here below
div.style.width = (parseInt(img.width) - 2) + 'px';
// then I get rid of the picture used to get height and width
div.removeChild(img);
};
The css:
.text-page {
background-size: contain;
text-shadow: 0.075em 0.08em 0.1em rgba(0, 0, 0, 1);
font-size: 30px;
color: white;
line-height: 90%;
display: table-cell;
vertical-align: middle;
}
.editor-thumb, .text-page {
width: 100%;
height: auto;
box-shadow: var(--box-shadow);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
}
This is working, but I'm wondering if there's a better / cleaner way to do it. Any help would be appreciated.
I'm trying to make a shadow of an image using Color Thief (like the image below):
I'm trying to make Color Thief detect the color and make the shadow look like the shadow colored by the color that came from Color Thief.
How can I do this?
Due to cross-domain issues with canvas and images, I can't produce a working snippet here, but this should do the trick (maybe with some slight tweaks).
var $img = $('img');
$img.load(function() {
var colorThief = new ColorThief();
// uncomment this (x-domain issues):
//var color = colorThief.getColor($img.get(0));
// here's what it would produce:
var color = 'rgb(72, 174, 216)';
$img.css('box-shadow', color + ' 0 5px 15px');
});
img {
display: block;
width: 200px;
margin: 10px auto 0;
border-radius: 10px;
}
canvas {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js"></script>
<img id="image" src="https://i.imgur.com/rb3admc.jpg" />
You can add multiple shadows in different colors with this generator
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator.
I want to change color of a pixel in web page.
I will use JavaScript or vbscript.
I tried making a table with 1x1 size cells and color them, but it was very slow.
I need a faster way.
What is the lowest-cost way to color a pixel?
Here you go...
CSS
#myDot {
position:fixed; /* always stays there even when other elements change */
width:1px; /* change if you need a bigger dot */
height:1px; /* change if you need a bigger dot */
}
HTML
<div id="myDot"></div> <!-- Can be span also -->
JS
document.getElementById("myDot").style.left = 100; // x position
document.getElementById("myDot").style.top = 100; // y position
document.getElementById("myDot").style.background = "red"; // color
#mycss {
position: fixed;
left: {X}px; // x coordinate
top: {Y}px; // y coordinate
width: 1px;
height: 1px;
background-color: black; // your color
}
Just put the id of the table you created as "mycss"
In Javascript
document.getElementById("<your-element-id>").style.position = absolute;
document.getElementById("<your-element-id>").style.left = [<your-pixel-x-coordinate>]px;
document.getElementById("<your-element-id>").style.top= [<your-pixel-y-coordinate>]px;
document.getElementById("<your-element-id>").style.width = 1px;
document.getElementById("<your-element-id>").style.height = 1px;
document.getElementById("<your-element-id>").style.background-color = <your-bg-color>;
I seems to me like you want to procedurally create a pixel-based graphic. In that case, the new HTML5 Canvas could be what you are searching for. It's an image-like HTML element which you can paint on by drawing lines, shapes, other images, text and much more using javascript.
When a user clicks a link which has an image as a background, I need an onClick event that changes the background position of it. This is the link:
Favorite
It's already set in css and there are two states, regular and hover, with hover being shifted by 12px.
a.favorite {
width: 15px;
height: 12px;
background: url(img/icon-fav.png) no-repeat;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
text-indent: -300px;
}
a.favorite:hover {
background-position: 0 -12px
}
When I click the image once, I need the background position to be set the same as the hover state.
I'm doing that like this, and it works:
document.getElementById("favorite_1").style.backgroundPosition = "0 -12px";
But when the link is clicked again, I need it to switch back to the normal background position and I can't get that to work. This is the function I'm trying but it only works for moving the background to "0 -12px", not for moving it back to its original position.
function favoriteBusiness(id){
if(document.getElementById("favorite_1").style.backgroundPosition == "0 -12px")
document.getElementById("favorite_1").style.backgroundPosition = "";
else
document.getElementById("favorite_1").style.backgroundPosition = "0 -12px";
}
Can someone point me in the right direction here?
Unless you're making calculations, you're better off adding and removing classes that contain the new position. This is usually what's done for manipulating CSS sprites.