Any way to do this kind of tab design? I can't seem to get my hands on good code online to accomplish it. There's two border-radius for each tab. IS it even possible?
You can use an internal div in each tab and set border for that.set border for your main tab and now you have two border
A quick Google search for "css curved tabs" gives an excellent article from css-tricks.com as the first hit: (Better) CSS Tabs With Round Out Borders. The code is right there to copy and paste, but here is a summary of the css tricks involved:
Use the css :before and :after pseudo-elements to create the tab's rounded elements with curved border-radius styles. (These pseudo-elements with position: absolute essentially provide two extra drawing layers - think of layering a transparency sheet on top of your tab's <li> html element, and drawing your tab's rounded elements on top of that).
Use clever box-shadow settings on the rounded elements to hide the square edges of the underlying <li> element.
Use slight negative margins on the <li> elements to allow the tabs to overlap each other.
This keeps all the css styling on the same element, and is easily configurable with different gradients, color schemes, and styling elements.
It's definitely possible, but a little bit tricky, because the effect has to be simulated somewhat. For example, for the right edge of the middle tab, the top border curve must be defined using border-radius on the middle tab, but the bottom curve must be defined using border-radius on the right tab. The rest of the effect is done by having elements behind the tabs with the appropriate background colors.
There are several ways this could be accomplished with images. You could do background image with a transparent png, for example.
Related
I am trying to create an element with either :before or :after and position it at the bottom of its parent, halfway out of the element, to hide the box shadow there. This seems to work, except for IE.
Demonstration: http://jsfiddle.net/XV6pT/
The white border from :before should overlay the bottom border and its box-shadow. However, in Internet Explorer, the parts of the element below the bottom boundary of the button are not displayed.
There is no filter or similar which would set something to hidden (according to How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?). The CSS is copied as-is.
The general aim (maybe someone has a better idea) is, that below the button, there is a dropdown navigation, that should look like the dropdown and the button are "one part", so there should not be any border or box shadow between the button and the dropdown.
It seems that the problem occurs in IE9 and IE10. Switching from absolute to relative positioning also didn't help.
Any hints?
Take a look at this: Creating a CSS3 box-shadow on all sides but one
It involves a bit more html, but IE and pseudo-elements can drive you nuts. That answer also includes a shadow for the menu "baseline" but without deeply looking into it, I think it can be safely removed.
Good luck!
I am having a bit of trouble styling a navigation menu where you can select packages.
This is going to be a nav menu for a mobile website.
The active green li tab I need to be evenly spaced across the full with of the ul
My problem is when I click on the tab to make it active the green doesnt fill up all the li and blue is still visible.
Secondly on the green active tab li I need to display a down arrow at the bottom center of the active tab.
I have included a fiddle with it more or less done, just need help with styling it to finish it off.
http://jsfiddle.net/8C3U3/
<ul id="navlist">
<li>Basic</li>
<li class="spacer"><a class="m-active"href='#'>Standard</a></li>
<li><a class="m-active"href='#'>Premium</a></li>
</ul>
I. Why does the blue still display?
The blue still displays for a few reasons. I'll go through each of them.
The first reason is that you've given your lis padding and a blue background color. Yet you assign the green background color to your as. Since the a is contained within the li, and the li has padding, the a couldn't possibly extend the full dimensions of the li and cover up the blue. View this JSFiddle, where that problem is corrected.
The second reason is that your lis are set to be inline elements. Inline elements interpret all whitespace in your code (spacebar spaces, new lines, etc.) as a single space between the elements. To get rid of that spacing, get rid of the whitespace between the elements in the code itself. View that here.
Unsolved questions: You'll see that there's still blue visible. This is because borders are rendered outside of the element, and this border doesn't extend the whole height of your li (let alone the ul, which also has a blue background set). You'll need to figure out how to handle this. One option is that you could use :before and :after pseudoelement so that the spacing between the elements is closed.
II. Making an arrow beneath the active tab
The way I usually make arrows is with an :after pseudoelement. Here are the steps:
We want to position the arrow as we want, which is best done by setting it to position: absolute;. To make it relative to the parent, we need to explicitly define the position on the parent. So let's go with position: relative;, as that won't change the location of the parent. Now we can move the arrow around wherever we want!
Let's set the pseudoelement to be display: block; and give it empty content. This makes it display as we want it to.
You can either use the border hack to create the triangle, or use the unicode triangle down character. I chose to use that in this JSFiddle.
Unsolved questions: Right now, your lis aren't the same width. This means that no single line of CSS code could center the triangles for all of the lis. You either need to set the lis to be the same width, then position the triangle, or target each li individually and manually place the triangle based on the width. I suggest the former of these two possibilities.
III. How I'd Do It
And here's how I'd make the menu, with most of the issues above resolved. Maybe this will be a place for you to work from.
If you're not planning on fading the arrow in, then you might prefer to use the border hack to create the triangle, which has deeper browser support.
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.
I am dealing with some web development issues and want to know how I can achieve this specific menu layout in HTML, CSS, Javascript.
When hovering over "Design" or "Hintergründe" the main area changes and shows the content. My problem is the border, the outline that changes when the active menu point is changed. So I would take 2 div containers for "Design" and "Hintergründe" with borders at left, top and right (no bottom). And the main area has to be a div with borders itself. How can I achieve the mising party of the border where menu-choice and main area blend one into another?
By the way: Are those costum (thin) scrollbars possible in HTML for div containers?
Thx in advance
All the best
Michael
The tab that you click on has the same background colour as the content area, and it has margin-bottom:-1px and a z-index to place it over the content. This makes the background cover up the content area's border, producing the effect you're looking for.
MichiMichbeck gave a good answer regarding the tabs.
For the thin scrollbar try one of the many javascript/jquery plugins that are available.
One example is: http://jscrollpane.kelvinluck.com/
You can also change the scrollbar for webkit browser in CSS: http://css-tricks.com/custom-scrollbars-in-webkit/. But the javasript solution would probably be preferred.
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.