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.
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 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
I am wondering how to make an angled element that acts as an arrow, attached to a tooltip. I've seen this done by Google Accounts, and I have attached a screenshot. It appears they are achieving this with a couple of span elements.
I can't figure out from their HTML/CSS how they did it... My only idea is to use a CSS3 rotation on a regular div, or an image, but I'm guessing there's a more basic way.
Can anyone give me a hint? I'm not looking for a full solution, I'm just stumped about how to approach it. Also it's not about the tooltip itself, it's about that angled element.
EDIT: Here's a related question. They are using transparent borders, border-radius and box-shadows?
You can create it using image or manipulated span, I know facebook create it using sprite image, google and twitter using styled span, just make border transparent except the bottom one. this is twitter:
this is a tutorial.
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 have been trying to make this PSD using CSS?
So far I have reached this. Can I achieve this design using CSS3 or do I have to use old school background image method?
In short, yes this is possible with CSS alone (without CSS2 even), but I would urge you to use background images instead.
Ranting
The problem with doing CSS like this is shadows. The way it renders the triangle is just a border that is transparent on the diagonal sides. In other words, your shadow would still be a box and would not look the way you want it to.
I see this a lot with people starting to use CSS3. They normally want everything done dynamically instead of with background images. And once it's done, there's this slew of CSS that barely does anything aesthetically for the page. In reality, it only takes 10-15% of what they end up with to achieve the same effect with images.
There isn't any problem with background images, they aren't going out of style, and they certainly won't stop working any time soon. My advice, stick with background images for what needs an image, and save CSS3 for special effects. It sounds boring and old-school, but it works and is a whole lot easier.
This seems like a relatively simple CSS project; simple, here, being relative, as I've seen people make an animated Twitter Fail Whale with CSS alone.
What you're going to have to do for the triangle edges (which I assume is the tricky part for you), is use the CSS matrix transform (elaborated on at W3Schools), and then just use box-shadow for the borders, and box-shadow: inset for the inset effect. Afterwards, just use appropriate padding and text alignment to get the text centred in each part of the object.
EDIT
Consider using the before and after pseudo elements to achieve this. Alternatively, you can use two skewed <div>s stacked on top of eachother for each section; however, this wouldn't give you an attractive shadow.
I don't think it is possible with CSS alone. You will have to make use of background image. You will be able to create the tapered edge effect using :after and :before psuedo classes. But will face problem with the inside shadow.
I once tried to create a similar breadcrumb using css3 alone when I saw the breadcrumb in Google Help Center (which is similar, but using background image), but was not able to do it.
http://support.google.com/adsense/bin/answer.py?hl=en&answer=1354760
I tried to do it with CSS (:after and :before) pseudo elements, without adding any other html elements.