I got an image that contains a complex gradient with different intermediate colors. height: 1px; width:100px
I got div blocks with a background color.
I want the background color of the div blocks to come from the gradient image.
For example : .div50 class will have the 50th pixel of the gradient image as background and repeat-x and repeat-y.
What is the best way to achieve this ?
Thanks !
There doesn't currently seem to be a cross-browser solution to this.
w3 seems to be developing a cool solution to this problem of being unable to use "image fragments".
They propose cropping the image within the actual image call.
Instead of using:
background-image: url('swirl.png'); /* old UAs */
They propose:
background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */
Due to the fact that this is still in the works, it probably isn't so useful to you...
If you need a solution now, use Mozilla:
background: -moz-image-rect(url('Image.jpg'), 0, 1, 1, 0);
This will get the first pixel (top left) of your image.
-moz-image-rect takes five values:
Image URL
Top-The distance to begin from the top.
Right-The distance to end from the left.
Designates the width.
Must always be larger than "Left".
Bottom-The distance to end from the top.
Designates the height.
Must always be larger than "Top".
Left-The distance to begin from the left.
Example Only viewable in Mozilla browsers
Made using this image:
-moz-image-rect(url('Image.jpg'), 10, 100, 25, 50);
Image: Image.jpg
This image will be cropped to 15px tall (starting immediately after the 10th pixel and continuing to the 25th pixel) and 50px wide (starting immediately after the 50th pixel and continuing to the 100th pixel).
A somewhat simple no-image-required solution, would be to use a pixel color finder, such as instant eyedropper, to figure out the 100 different colors you would need to represent all of the pixels in your 1x100 image. Using those colors, you can very easily create backgrounds that will function cross-browser.
Hope this helps!
I'd do it like this:
HTML :
<div class="background_color">
<div class="gradient_50"></div>
</div>
CSS :
.background_color{
background-color:#121212;
position:relative;
height:150px;
width:300px;
}
.gradient_50{
background-color:red;
height:50px;
position:absolute;
bottom:0px;
width:100%;
}
JsFiddle you can put background-image for your effect
Related
I'm pretty positive this can't be done, but I figured I'd check before moving on to Plan B. I have a <header> that contains a photograph, which can be switched at will by the user whose left edge fades to transparent to reveal the remainder of the underlying color or pattern or whatever... whatever it is, it's also user-supplied so it could be anything.
In to order to retain the design while allowing users without knowledge of or access to an image editor that would apply the mask to the photo they want to use, I'm trying to find a way to use an unedited texture/color along with an unedited photograph to produce the following effect:
All I can come up with right now is to manually apply a 100% white to 0% white mask to the left edge of the photo in Photoshop. But like I said, this can't be done by my target user - I need for them to be able to upload a new image and keep the image-fading-into-background effect.
I have done this successfully with 1 of the 2 elements being a solid background with a pseudo-element as in this CodePen (extremely rough - for proof of concept only). But again, I need BOTH the contents or background of .inner and the background of .outer to be user-supplied (and possibly changed in response browser events). The same Pen also shows a version using -webkit-mask-image rather than the pseudo element, which gets it closer, but is lacking IE support.
Without extensive SVG coding (it's not worth the time -- for this use case -- to keep the variable background pattern/image), is there a way (preferably PURE CSS) to achieve this masking effect without having to edit either image?
As said by #Bryce Howitson you can use mask
.box {
width:300px;
height:200px;
position:relative;
}
.box:before,
.box:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:url(https://picsum.photos/id/2/800/800);
background-size:cover;
background-position:center;
}
.box:after {
background-image:url(https://picsum.photos/id/13/800/800);
-webkit-mask:linear-gradient(to right,#fff 35%,transparent 70%);
mask:linear-gradient(to right,#fff 35%,transparent 70%);
}
<div class="box">
</div>
¯_(ツ)_/¯
IF IE support is a hard requirement, you're pretty much out of luck using pure CSS for masking. You could simply dump support for IE and then proceed with mask-image since it even works in MS Edge. Only your own usage stats can tell you if this is a good idea.
Option 2
Dump the second image and use a gradient overlay of the main image to a flat color background. Which you probably don't want to do, but it's a decent progressive enhancement option.
Option 3
Its a lot of work but you could use Canvas and Javascript to fake it. The basic idea is to slice the main image into individual canvas elements. One element for each pixel wide the image is and then draw the source image into the canvas elements with the correct offset. The slices then stack side by side in the canvas re-making the full image. At this point, you can change the opacity of each slice until you get a gradient fade effect.
For example, if the image fades out to the right side, the furthest right slice is 0% opaque, the next to the left is 1%, then next is 2%, etc
This is untested, but something along these lines except this fades evenly from left opaque to right trasnparent:
var theCanvas = document.getElementById('canvasContainer');
fadeImage = theCanvas.getContext('2d');
for (var i = 0; i < sourceImage.width; i++) {
fadeImage.globalAlpha = (sourceImage.width - i) / sourceImage.width;
fadeImage.drawImage(sourceImage, i, 0, 1, sourceImage.height, i, 0, 1, sourceImage.height);
}
Following guides such as this, I have successfully created a monotone image from a full color JPG.
This is the CSS code I am currently using to convert an image to blue monotone:
filter: grayscale(100%) brightness(200%) sepia(100%) hue-rotate(-180deg) saturate(200%) contrast(1);
What I would like to do from here is lay that image on top of another so that where the image is white, it is transparent. Or at least, close enough.
I have tried using mix-blend-mode of which it seems the darken parameter is the closest to what I'm after. However, the problem with mix-blend-mode is that it doesn't just act on one image. It takes values from both top and bottom image and what is visible or not results from the relationship between the two. This creates unpredictable results when trying to create a general system in which the top and bottom image may be any combination of light and dark.
Also, I'm a little concerned about browser support for mix-blend-mode.
I have created a fiddle here that shows the stage I'm at now.
This may ultimately be impossible, but, is there any way I can at an image to be transparent depending on how white the pixels are, regardless of the contents of the image underneath? Is there a way I can get close to this effect?
Just porting my comment to an answer since the suggestion worked: you should be using mix-blend-mode: multiply. This blend mode will actually make white pixels completely transparent because of how it works—it multiplies the luminance levels of the current layer's pixels (e.g. your hello kitty overlay) with the pixels in the layers below (e.g. your background image).
Multiply blend mode multiplies the numbers for each pixel of the top layer with the corresponding pixel for the bottom layer. The result is a darker picture.
Source: Wikipedia
Since white multiplied with anything produces white (think along the lines of multiplying 0 with any number), you are guaranteed to have 100% transparency and no color changes where the overlaying pixels are white.
The next question is how you should increase the contrast of the image so that even the coloured parts of your figure will turn out white. This is as simple as pumping the brightness up to a sufficiently high level (I've used 500%, arbitrarily determined), and it seems to work:
See proof-of-concept fiddle below:
img {
position: absolute;
top: 0;
left: 0;
}
.blue {
filter: grayscale(100%) brightness(600%);
mix-blend-mode: multiply;
}
<img src="http://i.dailymail.co.uk/i/pix/2017/10/14/12/4551406D00000578-4979962-image-a-1_1507978862213.jpg">
<img class="blue" src="http://www.altpress.com/images/uploads/news/Hello_Kitty.jpg" alt="This is a cool picture" width="300px" />
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.
I want to use a linear gradient background color for a website. For example the gradient color starts from header and ends to the footer. Now the problem is that, since different pages have different amount of content, so the height of the pages varies. So in that case how can I set ending point of the color? For example I want the gradient from #b68d4c to #f6e7cf.
Using an image:
You'll need to figure out the shortest height of content that you want to cover. Then, in your image editor, create your gradient. Since it's linear, you can create it something like 10px wide by 500px tall (if 500px is the shortest height) and repeat it along the x-axis. Once your image is created, you would then write in your CSS:
body {
background:#f6e7cf url(path/to/gradient.jpg) top left repeat-x;
}
Note: the #f6e7cf should be the finishing color of the gradient. What this does is if the page is taller than 500px, it will show the same color as the bottom of the gradient, giving it the illusion that it is continuing.
Using CSS3
As Ryan Casas pointed out, using the Colorzilla Gradient Editor is the most simple way to I've found (although, you don't learn as well because you aren't hand coding, but that's a different discussion). Essentially, you would put your two colors at 0% and 100%, ensure that it's going vertical, and copy the code into the body { } selector.
Use % on the gradients. Here you have a generator: http://www.colorzilla.com/gradient-editor/
I have a web application whose performance I am working to enhance. In an attempt to do this, I decided to use css sprites. I have placed all of my images in a .png file called images.png.
CSS sprites have worked well for all css classes that just display an image once. However, several of my images need to be repeated. For instance, I have a banner.png image used for the banner background. Whenever I set the background-repeat property, it seems that the image does not repeat. To show my CSS definitions, here they are:
Before CSS Sprites
------------------
.ghwc {
background-image: url(/images/layout/banner.png);
background-repeat:repeat-x;
color:White;
width:300px;
}
After CSS Sprites
-----------------
.ghwc {
background-image: url(/images/images.png);
background-repeat:repeat-x;
color:White;
background-position:60px 319px;
width:300px;
}
My question is, how do I use CSS sprites for repeated images like backgrounds?
Thank you,
My question is, how do I use CSS sprites for repeated images like backgrounds?
You don't. That is simply not possible using CSS sprites. To do that, you would have to be able to specify an area of the image that is to be repeated, and to my knowledge that is impossible in both CSS 2 and 3.
You can do this if you're only background-repeat:repeat-x; as in the example, you just need to make all backgrounds contained within the sprite image container the same width and lay the sprite image file out vertically. Then your background position property will always have the first x position be 0 and the sprite is located with the second y position (e.g. background-position:0 0; background-position:0 -100px; background-position:0 -200px; etc) . This might not work across all browsers if you can't specify the exact height and set overflow:hidden.
Assuming your background image (images.png) shows at all, your code should work. If you want this to render correctly on Opera and Firefox, you'll need to add
background-attachment:fixed;
Edit: I just realized you're probably talking about a specific coordinate set in a "sprite" image comprised of several 'images'. You're not going to get any one particular area of an image to repeat like that. Crop the image to the size you're concerned about, then use the code you have.
If you want to use repeat-x, you must not put several images next to each other in your sprite as the whole sprite is duplicated in x-direction (as you already noticed). But you can put them in one vertical line. (The other way around if you want to use repeat-y. There is nothing like "background-crop" up to now (maybe in CSS4? ;) )