may I know how do I program the seemingly simple navigation bar in the attached image of the pied piper website in the show "silicon valley" in HTML/CSS? In particular, how do one program the dark blue portion?
Do I attach a dark blue image and have its position set to "absolute" and have the link buttons and logos placed on top of it?
Or is it any other better way?
Thank you!!
Or is it any other better way?
Are you really asking how to set a background (color) with CSS?
You should have a look at the w3 tutorial about CSS backgrounds then.
Just have a div and apply a dark blue background with CSS like
div.whatever-class-you-choose
{
background: rgb(3, 10, 24);
}
Or check out the fiddle I made. It's all pretty self-explaining.
Related
I was looking at the Nike website and I cannot understand how the inverted scroll effect is achieved with css.
When scrolling on this website - https://www.swoosh.nike/ - you can see the join and the svg logo become inverted based on the background color, here's a picture of the effect to incase the website changes for future reference:
How do they achieve this effect. I can't see any css that tells the colors in the svg or button to become inverted on background color.
The entire Header-Element has
mix-blend-mode: difference;
set in CSS.
I took the code from https://bootstrapious.com/tutorial/sidebar/index2.html which shows a Bootstrap Sidebar. Its background is dark with white lettering. There is a nice scrollbar for the sidebar. I am being forced at work to swap my coloring so that the background is white and the letters are dark. I did it without any problems, except now I cannot see the scrollbar unless I hover over one of the menu items, then I can see a part of it.
I changed my #sidebar css from this:
background: #4CB7EF;
color: #fff;
to this:
background: #fff;
color: #0088CE;
I did not change any of the mCustomScrollbar css.
But now I can't see the dragger_bar in the scrollbar when the background is white, as shown in the attached picture. I know it's really there (over the white background), because my cursor changes from an arrow to a hand with a pointing finger.
Any ideas please?
UPDATE 1
I tried changing the mCustomScrollbar's css where it uses rgb of 255, 255, 255 (white) to 0, 0, 0 (black), but it did not work. If you cannot provide a solution, can you please provide an example that uses the Bootstrap sidebar with a white background to refer me to?
UPDATE 2
Here is the code from bootstrapious, but I cannot get jsFiddle to work with Bootstrap, but I wanted to provide the code.
Ondrej here - I'm the author of the tutorial - https://bootstrapious.com/p/bootstrap-sidebar.
There shouldn't be any need to change the mCustomScrollbar's CSS, just use a different theme when initializing it in JS.
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html
$("#sidebar").mCustomScrollbar({
theme: "minimal-dark"
});
Cheers,
Ondrej
It is happening because the colour of the custom scroll bar is white and when are changing the background colour of the sidebar to be white it is making it look like disappeared.
I added this svg logo to my website. I saved it in illustrator with not background and when it pops up in the web browser its has a white background. Not sure how to fix this or what the problem may be.
heres what it looks like on my end
Here is a fiddle
https://jsfiddle.net/n3ov9czj/
<img src="images/logo.svg" />
Is this what you are trying to do?
Jsfiddle 1
Or was it more like this?
Jsfiddle 2
This obviously didnt work :(
svg { background: transparent; }
It looks as if your linked image (logo?) black areas are actually transparent, showing the background. White areas are actually the (logo) image. It's kind of a negative youre trying to accomplish in that case, I guess. I can see some text behind the letter h. It would be really more helpful with the actual svg logo image to figure out the problem.
Simply test colouring the image background.
<img src="images/logo.svg" style="background-color:grey"/>
If this is the case, then you probably want to apply the background image behind the logo or whatever was the idea you want to implement.
Could anyone tell me if the scenario below would be achievable with HTML and CSS? My goal is to show the background-image of my HTML body through a clipped div.
Please bear in mind that the final website would be responsive (mobile-first), so the solution should allow the different positioning of the body background images upon resizing.
Basically: is there anyway to show a div as a cutout of the underlying div?
I thought about providing separate background images for each circle to show the illusion that the circles show the body background, but as the design is responsive, alignment issues would quickly occur.
Any insights? Please let me know if more data is necessary. Thanks in advance.
I think this is similar:
http://ask.webatall.com/html5/7619_transparent-half-circle-cut-out-of-a-div.html
and should help? Instead of the shape you'd have to use circles, but the principle should be the same.
Also, if it doesn't work a combination of 2 elements with half circles cut out could achieve the effect.
This answer does a similar thing with another shape:
http://www.samhohce.net/questions/30259780/onhover-button-cut-out-a-triangle-and-show-background
I'm a person that learns best from example. Currently, I'm diving into the field of Web Development after fifteen years of developing desktop apps. I'm still getting used to all the web technologies used for developing modern web sites and everywhere I look, I see cool little UI elements and question how they're implemented. So I thought I'd ask you, the web experts...the wexperts :)
What are some straight forward or creative ways you could code this grid-breaking arrow...
The basic layout for this page looks like...
What would the html/css code look like?
Would you split the image into multiple images or could you use a single image?
I'm sure this is a really simple concept and it completely boggles me. I'm sorry if this is a strange question, remember I'm a noob! :)
Thanks in advance for all your help!
Here's a link to the original tutorial where I found these images
If you look at your mockup the Header Panel includes the height from the top of the green box to the bottom of the box.
background: green url(images/header-bottom.jpg) no-repeat bottom left;
That jpg file includes that last 70 of so pixels in height including the whole arrow. Since your header and navigation are below where that arrow goes the containers will be exactly how you show it.
This also enables you to have Submenu and Content to just have background colors since the only gradient you seem to have in those two regions are in the same zone as the arrow in Header Panel.
You could make a rectangle image which is wide and short to handle it. Use the same colors as the rest of the page so that it blends in. Check it in all browsers to make sure the image renders the same as the html colors. With some image formats this is not the case at least in some browsers.
There are so many ways to do this... there are two or three ways that are better than most.
Here is an image of what Ballsacian and Sean are talking about. Ignore the black bits of the top of text on the bottom, imprecise screenshot taking on my part.
alt text http://img171.imageshack.us/img171/9392/picture6e.png
You can make the green part of the arrow transparent and save it as a gif or png, since the slope appears to be 45 degrees (no jaggies in GIF). You would still have to edit the image to match the subnav and content background colors if you ever change them, but the transparent triangle will automatically show the header background color through.
You would also have to remove the margins between the header, subnav, and content containers.
The Photoshop guy who made this clearly wanted the background to show through "naturally" by making the margins between the header and subnav/content, but that is impossible without un-semantic markup with the arrow. The way you could do this without even using CSS is to just put the image in right after the header, in between the header and subnav/content.
<header>
<img src="arrow.gif" />
<section class="subnav" />
<section class="content" />
Then make the line be transparent instead of the arrow. Now you would have to change the image if you ever changed the header, subnav, or content background-colors, but not the body background-color. This accomplishes what the Photoshop guy wanted in spirit, but is ultimately not as satisfying markup wise.
I can see that this concept is very awesome in photoshop, you only have to change the background colors of each of the sections and transparency takes care of the rest, cool! If you were confused as to how to do this and keep the Photoshop guy's concept true to itself, I don't blame you. It is impossible to do with basic HTML and CSS with images. Maybe with SVG you can do it.
For fun, here is the super-optimized sprite way of doing it. This requires you to put in a huge vertical transparent space between the arrow and the content top gradient. Then use this background on the UL of the subnav and the div/section of the content container. Set the background-position to 0 -(verticalspace + arrowheight) and repeat-x for the content. 3k single http request.
alt text http://img37.imageshack.us/img37/8503/arrowy.gif