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.
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.
This is my first time working with TweenMax in JavaScript. I'm trying to make a function that will create a "Card" with rounded edges that will eventually hold images and text. For now I just want to make one with an image inside (clipping is irrelevant at this point), at a certain size and location inside one of my tags.
Right now, all that this does is display the image at (0, 0) no matter the x/y value, there's no scaling or clipping from the parent block, and there's no rounded edges or shadow. So pretty much I'm thinking either my TweenMax is not working, or I'm not doing something right.
cards.js
mainView = document.getElementById('mainView');
create_card(25, 25, "image.png");
function create_card(theX, theY, img){
//CARD VARS
cardElement = document.createElement('div');
cardElement.setAttribute('class', 'card');
cardImage = document.createElement('img');
cardImage.setAttribute('src', img);
cardImage.setAttribute('class', 'image');
//LAYOUTS
TweenMax.set(".card", {
position:'absolute',
display: 'block',
x: theX,
y: theY,
width:140,
height:140,
backgroundColor:'#ff0000',
borderRadius:2,
overflow:'hidden',
scale:1,
boxShadow:'5px 5px 5px #ff7f00'
});
//APPEND CARD TO STAGE
cardElement.appendChild(cardImage);
mainView.appendChild(cardElement);
}
In the body of the HTML:
<div id="wrapper">
<div id="mainView" class="mainView"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="javascript/cards.js"></script>
The CSS stylesheet (I think this might be irrelevant but to be thorough):
body{
background-color: #888888;
margin: 0 0 0 0;
}
#wrapper {
margin-left: 100px;
}
#mainView {
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 100%;
background-color: #444444;
box-shadow: 0px 0px 10px #222222;
}
So, to compile this into a single question: Why isn't my TweenMax working?
I up-vote/mark answer to all who make valid answers and contribution :)
What worked for me was changing https to http in:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
Like so:
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
Such a simple solution hahaha. I found this out quite a while ago, but maybe someone will find this useful :)
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.
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.