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.
Related
I´m trying to create a header in a website with the following effect:
My idea is to keep the center of the Example image in smaller screens (the red guides indicate this screen side). Besides this, the bitmap would vanish on the side borders like a gradient.
Any help in how to accomplish this using HTML, SVG and CSS?
I ended up following a different approach to achieve the same result.
Instead of trying to crop the image, I created a white wave and used it over the image.
Here is small working code (it´s in React but it is simple to see the CSS/HTML parts):
https://codesandbox.io/s/header-cropped-vnlr0
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.
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.
I would like to create the effect of box-shadow/ribbon on my navigation menu using css I have a image and sample what would like to learn to create I am a beginner web developer sorta the same as this demo here http://www.templatemonster.com/demo/33211.html if any one can help me learn would be great.
I am just after learning how to create the nav bar which is similar to this link
Any reason why you don't just make a PNG with the required shadow? Alternatively create a shadow image png and background a div with it that encompasses the ribbon.
I would avoid CSS3 for this as cross-browser compatibility will be an issue for now.
Start with a new image, at the required padded out size, with a transparent background. Make the shadow using gradients and then save for web. Select PNG 24 and that's it really.
I have the image below - is it possible to fill it with a color (eg: the part in the triangle) using HTML/CSS?
Or can I create this shape with HTML/CSS and then fill it?
Or do I have to use a colored in image?
Would be preferable to use HTML/CSS completely or at least fill the image..
thx
If you leave the part that you want to fill transparant then you can fill it with a color using css. If you want to create the triangle without using an image you can use SVG but that is not supported in some versions of IE (8 and older) or you can use Raphael JS to draw it in pretty much all browsers.
HTML and CSS don't actually DO anything, they're just markup for how stuff should be presented. So no, you cannot edit an image using HTML and CSS only, though it is probably possible with JavaScript.
What you could do with HTML and CSS is to display an image with an alpha channel and set a background color on the element containing the image. The background color would then be displayed where the image is transparent.
you can... Make sure the triangle part of your png is transparent and the rest white... PLace your image in a div with the same width and height as your pic and give that div a background color. Voila... Everything is white except the transparent triangle.
Good luck.
<div style="width:66px;height:30px;background-color:green;">
<img src="yourimage" alt="" />
</div>