Since now, in the design of one of the websites I work, I've been using a graphic to decorate the header section that consists in a diagonal division white in the lower side and transparent in the upper side. The result is this:
If I change upper color, as the image is transparent in its upper area the effect seems perfect:
Now, I need to allow users to change page background and that's the problem:
Background changes to red, but the image I used to decorate the header doesn't change.
Is there any way to allow users to change the background without ruin the header decoration?
Note that store a copies of the decoration imagen in different colors is not an option due I allow users to choose any 24-bit color. Also, to change the image in real time like explained here isn't an option due multiple users may access the same file.
You could try changing the image in realtime using data URIs: https://developer.mozilla.org/en/data_URIs
With a data URI, you can do something like the following: <img src="data:image/png;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" />. The image can be changed dynamically in JS by generating a new image and setting the src attribute to the new data URI.
You will need to find a suitable format for generating images in JS though. I have used pnglib.js before, and it works, but it might be slower than you'd prefer. You might need to test some different libraries and image formats to see which can be generated quickly. Also, make the image as small as possible - should be only the area with the diagonal split, the area to the right can be done with a div instead.
Alternatively, you could generate a unique image server-side via a script. Make a script that takes a GET parameter for the background color and generates the appropriate image (for PHP, you can use GD or IMagick). Advantage is that the server may generate the image and send it to the client quicker than the client could generate it in JS.
Add the following to the div with the background image:
position: absolute;
top: 0px;
right: 0px;
The problem currently is that the background cannot overlap your div with the background image. Adding the position: absolute gives your div some kind of "ghost box" model, thus allowing the background of the body to overlap it.
P.S.: you can also play with z-index if you want to.
Related
I stumbled upon a German ecommerce site that seems to manipulate via filter all product images' background on the fly and I need to know how that works.
Original URL with exmaplary product image:
https://toom.de/p/kapp-gehrungssaege-hm80l/1500896
If I inspect it this url with some variables is given and obviously the "more or less" white background of product image is changed to a consistent #f5f5f5 gray tone.
https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png?quality=85&bg-color=f5f5f5&width=960&grey=1&format=jpg
I need to know how this is working.
I always have problems to make nice product photography with consistent white background (255 255 255 / #fff). So, I think this way of manipulating background via filter could be very handy.
I asked the good programmers I know about this and showed them the toom.de website but no could tell me how they made that....
You can use css filter property if you are not going with service what they using , but you need to manually set the percent to fit in to your background.
img{
filter: invert(4%);
}
if you want to know just inspect their content where they use image and use following code.
HTML
<img class="a-picture__image" data-js-picture-image="" src="https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png" srcset="https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png" alt="hauptbild">
Css
.a-picture__image {
width: 100%;
height: auto;
filter: invert(4%);
}
They have written an service to change image based on query string what you provide with image source based on that they return back the image as response .
For example check i have changed the query string for width you will get to see the differences.
Original what you given : https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png?quality=85&bg-color=f5f5f5&width=960&grey=1&format=jpg
and i changed query string width:160: https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png?quality=85&bg-color=f5f5f5&width=160&grey=1&format=jpg
check the differences
Is there any way to resize the image and reduce it's weight in Angular/TS or in CSS? I mean something like 'picture' tag in HTML 5.1.
Resizing the image on the frontend won't change it's weight, as the full image has to be retrieved from the server anyways. The 'picture' tag isn't able to do this either.
The only thing coming close to what I believe you want to achieve is this Angular directive I found online:
https://github.com/oukan/angular-image-compress
This also only compresses on the client side and won't change the weight of the image retrieved in the first place.
I'd like to place an icon in the right part of the text input. I'd use a background image with the following CSS setting:
input[type=text].dropdown {
bachground-image: /images/down.png
background-repeat: no-repeat;
background-position: right center;
}
I foresee the following problems:
the text I will put into the input will overlap the image unless I will made some extra styles for the input basing on the image size (if the size is not predictable it will a real headache!)
if the input size will change - I will have to scale the image by my self
if I will need to place one more image on the left I will not be able to do it
Is there any better practices to do such a thing?
the text I will put into the input will overlap the image unless I will made some extra styles for the input basing on the image size
It is common to simply apply padding-right to the element in this case in order to "clear" the background-image. But you do obviously need to know the approximate size of the image....
However, you seem to have a lot of "what-ifs", which makes me think you are over engineering (or over thinking) the problem? Unless perhaps you are wanting to allow users to customise the interface? But even then I think these could be solved in different ways.
if the size is not predictable it will a real headache!
Why is it not predictable? Something like this would normally be solved at the design stage and is very predictable. If you are allowing users to submit images, then you should perhaps resize the image when submitted.
if the input size will change - I will have to scale the image by my self
That will really depend on how the input size changes. If the element simply grows longer then you may not need to change anything. But again, this would normally be something which is solved at the design stage.
if I will need to place one more image on the left I will not be able to do it
Why would you need to place an image on the left and the right - at the same time? I can imagine if you needed to account for right-to-left text then you might need to swap the image placement, but not normally both at the same time?
However, you can actually use multiple background images with CSS3, as long as you don't need to support IE8 and earlier. Ref: http://caniuse.com/multibackgrounds
But if you did have multiple background images, how would you deal with assigning event handlers (which seems to be what you are doing with the "dropdown")? You'll need a separate element.
w3d raises very good concerns. A lot of the "if's" you are thinking about don't seem too common. And if they do happen because you are setting up an environment that will allow it or need it (hard to say until I see the actual environment) then what you should do is use dynamic code to make the adjustments.
Here is an example I made with the most basic way to do what you're doing
JSFiddle Demo
Now, as far, as covering your 6 on the possibility that another image would be inserted, etc. You will need the following logic:
Assuming the user is the one inputting the images you want to stack next to each other. Have the image post to the database
Dynamically echo it with a conditional statement that says if image != 0 then echo as many as you want
Each instance of a below would be dynamically done as I explained above
HTML
<div class="form-group">
<label for="txtDate">LABEL</label>
<input type="text" class="txtcalendar" id="txtDate" placeholder="E.g. mm/dd/yyyy" />
<span>
<img class="calendar"src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkW2p-FHKOHJhdBUX1to1VfGMWn18eGlZgDRU5YHLrzw8rkDgB" alt=""/>
<img class="calendar"src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkW2p-FHKOHJhdBUX1to1VfGMWn18eGlZgDRU5YHLrzw8rkDgB" alt=""/>
</span>
</div>
I'm stuck with the menu below. All the website needs to be in HTML.
http://hpics.li/740c57f
WHAT: I want to have an hover image for all the different parts when the mouse go on it. (event/brand/website/print/UI/VIDEO)
PROBLEM: The images are overlapping and the mouseover start when i'm on the transparency of the png.
SOLUTIONS I TRIED: Imagemap to detect the zone and then put javascript code inside the AREA. doesn't work.
Imagemap to detect the zone, put an id in the AREA and use a separated JQUERY with .hover(function(). doesn't work.
Use z-index: impossible because there will be always an image that will hide the one under.
QUESTION: If I can't use ImapeMAP to select my zone and use CSS or JQUERY, how can I do ?
Thank you so much for your help!
Might be too late but the exact case can actually be solved by a class I wrote around 3 months ago. It allows you to check whether you're on a transparent area or not and also check for other elements behind the transparent area, this allows to overlap multiple transparent images and correctly jump from one image to another at the correct point.
http://www.cw-internetdienste.de/pixelselection/
i have some variables on PHP who gain values from 0 to 100. I want to develop a simple graph system that draw a horizontal rectangle given the number (0, 1 , 50 and soo). Also i want to add some gradient to the background, doing this in php is complicated and i dont want more load in my server, so i know this is possible in css, but im not a css developer. So if any body can help me with this. In this page (http://www.answerbag.com/) you can se how i want the rectangle, in the results of the pool section in the middle of the above page.
that's very simple since you know the width. Since you probably want the full spectrum of the gradient to show, you probably want to resize the gradient image by using a css #score1 { width: 30px } on that <img id="score1" src="blue_gradient.png"> Then later on, you can use one of the many rounder corner methods to add the round corners to it.