I saw that many websites have similar backgrounds to this, and many designs on dribble have this backgrounds landing page. My question is how create this, and the photos on it is that SVG, IMG, or coded in CSS. dribbledesign
another design
Generally we make them using Illustrator or Photoshop
They just attach some background image and make the navbar transparent and do the rest of the things
For samples: https://www.google.co.in/search?q=illustrator+designs&rlz=1C1RLNS_enIN802IN802&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjzo_v1vcfdAhXbeX0KHVHOAAAQ_AUIDigB&biw=1517&bih=695
Set background-image to selected element or the body using css and png image just like on the example
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
I'm trying to create a header for my website but I'm having a bit of difficulty as I'm new to HTML and CSS. I want to create a banner with the same font and background as shown below. They consist of a certain colour with a pattern overlay at 44% opacity, which I'm not sure how to do.
I originally uploaded the header as an image, but I was told it's bad to use large images on websites as it make it longer to load. So I tried creating it via code. If anybody could please help replicate the header below, I'd greatly appreciate it. Thanks.
Link to my current HTML & CSS Code via Fiddle
Link to Banner I want to replicate
Here you have your fiddle updated: FIDDLE
I've fixed a few things in the html like tags not closed (your headers) and now the "container" contains the banner propely.
So now you just have to add a background image with the pattern you want and (as you did) play with the opacity value of your text.
#container {
background-image:url(http://zimasolutions.com/Images/pattern.png);
repeat:repeat;
}
Use the repeat option for the background image so you just need a little image.
I uploaded temporally the image pattern.png I have used as an example. I took the sample for the image you linked. In a few hours I may delete that image.
Edited: IF you want the pattern image OVER the text insteed of under it may be more complicated. You could absolute position a container over the banner but in this case you may need to change the image opacity with an image editor (like photoshop).
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.
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>