This is how my current header looks like. I want to edit it that the part in the picture below has the same color as the div next to it / the border. How can I do this?
Code on jsbin: http://jsbin.com/ezeyib/3/
You can acheive this by oversizing the border thickness and then setting the parents overflow to hidden.
See this example.
http://jsbin.com/ezeyib/5/edit
I mean you need to create a png file using Photoshop or Illustrator to retrieve the expected result.
If you can have a plain background instead of a gradient background, you can create two big blocks (one green and one blue), and on top of those, create a shape with rounded corners which matches the actual look.
Related
Please have a look at the image. There is a black border in right side with text inside. How can I get this in css?
I would say use svg for this, use svg as background of container div, give content lot of margin top/left/right to make it fit.
Btw this design is most likely not gonna work on mobile so you have to figure out a decent alternative for that.
Here is a great website with weird CSS hard div: https://css-tricks.com/examples/ShapesOfCSS/
You'll see they did an egg, then you can modify the egg shape to try to get a similar shape like on the picture.
What you need to do is create a div with a class, then modify the div's shape and had a border on it.
How can I change the white color to the red, but only white should be changed, the rest should be what they are.
Using only CSS
CSS can't be used to dynamically edit certain pixels of an image, as far as I know.
Alternative solutions:
You could overlay another element over top of the image with a partially transparent red background to sort of "paint" the image red, but this wouldn't achieve exactly what you're asking for.
You could have another image to switch it to that has the red background. You'd switch the image likely by doing something like background-image: url(https://new_image_here)
You can use JavaScript or similar to modify the image or provide a fancier solution...
In CSS I can set multiple background images to appear one after another using the background: attribute, but when these images appear on the page there is no transition and the edge between them looks quite ugly. Is there a way to implement a shadowed border line between two consecutive backgrounds?
e.g.
#main-body{
background: #222222 url(background.jpg), url(background2.jpg);
}
This code will set two images to the background, when one image ends as you scroll down the page the next one immediately begins. There is no visual transition between the two, it's just two images one after another and doesn't look visually appealing.
The best way to handle the situation here is to draw borders on the top and bottom of your image with desired color and desired width. You can use any image editor to do this and this will also make your task simpler.
I have a question, since I couldn't find any solution yet.
So I have this image, which is fully transparent in the "center" and partially on the border as you can see. What I'd like to achieve is, the "border" should be transparent and the "center" should be red.But the border should be fully transparent. So in this case, white.
I'm not sure if is this even possible with CSS or HTML, the reason why I need to do this in CSS or HTML because I'm looping through the database, and every displayed record would have a different background color, but the "border" should remain transparent. So creating the whole image in 10 colors or more is not an option for me, because then the site might would be too heavy.
Thank you very much guys,
Mark
EDIT:
http://i.imgur.com/yMRxtqY.png
So to be more precise, I've created another image, what I want to achieve.
At the start I got the 2 images on the left side, the first one on the top is fully transparent in the middle, and has ~50% opacity on the border as you can see, so partially transparent. The second one is just an image, but the second image is always changing, like a slideshow.
The other image to the right would be the final result, I've set a gray background to be more visible. So what I have in my mind, is that possible? What I want to achieve is to cut the slideshow images border like this. But I don't want to photoshop every image which is in the slideshow, so I was thinking, maybe I can achieve something similar like this with CSS. I'm thinking in some z-index, or something. But thats not working, because I get an image like what I've linked on the top.
This is all I got: http://i.imgur.com/g7xpgQG.png
My problem here is, I can see the image on the partially transparent border, I'd like to get something similar what is on the first image on the right (without the blue things of course, I couldn't cut it, I'm not a designer :P )
Not sure if this is what you're looking for, but take a lok at this link : http://css-tricks.com/transparency-in-web-design/
You might have to take a look at the PNG file format you're using.
Is is possible to create the design shown in the image using HTML and CSS? If so then what would I need to do?
The image is zoomed in so that's why it looks pixelated. The slanted lines are overlaying on top of a different elements with different backgrounds (white and blue). The lines also blend into the background at the end.
You'd probably want to use two different background images for the top and the bottom elements . Use http://www.stripegenerator.com for the basic striped background then use your image editor of choice to create the fade.
This might get you started in the right direction. It's possible but tedious:
DEMO
You can swap the colors easily. I couldn't get an opacity gradient for the diagonals, however.
See here to build the lines' CSS.