So I would like to have a similar border to Google's UI in there documentation in Firebase.
https://firebase.google.com/docs/cloud-messaging/
You can see in the big blue box under the navbar there is a list of tabs. How could I achieve adding an bottom border to my tabs by also having the curved radius at the top? I understand how to use css to create a bottom border but i am clueless in how to add the top curves.
.navbar-light .navbar-nav .nav-link {
border-bottom: 2px Solid #fff;
}
okay i try to fix this with border top left and right properties:
have a look, this might help you
#example1 {
border: 2px solid #0277bd;;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
<div>Document</div>
<div id="example1">
</div>
.navbar-light .navbar-nav .nav-link::after {
border-radius: 5px 5px 0 0;
bottom: 0;
height: 5px;
}
They are actually adding a pseudo-element via ::after and customising it.
You can customise this style as per your wish.
Related
When I use the following CSS, I go from the output of the image at the top to the image at the bottom:
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
The purpose is to have a larger hover area for the mega menu, otherwise the mega menu disappears when the mouse is between the ''Assessment'' menu and the mega menu box. However, when my padding is at 30px, all the menu items shift higher up. What would I need to add to keep this large box (the edges will be white - I put black so it is easier to see now) without affecting the rest of the menu?
edit1: the menu is generated from the pearl theme for wordpress. The .menu-border is an added css class for the ''assessment'' menu.
If we could get a working snippet it would be easier to help.
Also, there are two menus in your capture. I guess that adding the code it's the second one. Looks you're missing vertical-align property
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
vertical-align: middle;
}
I'm unsure what you're exactly looking for but have a crack at this CSS that's using the inline-block property -
.menu-border {
display: inline-block;
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
Further reading on CSS inline-block
https://www.w3schools.com/css/css_inline-block.asp
If someone ever face that problem, the solution was to replace my code with this
body .stm-header .stm-navigation__default > ul > li > a {
padding: 30px 30px;
}
I have a CSS "tab bar" with a bottom border. The active tab should have a "hole" in the bottom border. I've implemented this by a negative bottom margin and a bottom border the same colour as the background.
This looks fine at normal browser zoom:
But looks bad in various ways in Chrome and Safari if I zoom the browser window:
How do I make it not look bad when zooming? Ideally without introducing additional markup. I would like for it to work at least in all modern browsers.
Here's the code (JSFiddle: https://jsfiddle.net/4utwsvt2/):
HTML:
<body>
<div class="tabs">
<div class="tab active">Foo</div>
<div class="tab">Bar</div>
</div>
</body>
CSS:
body { background: #fff; }
.tabs {
border-bottom: 1px solid #000;
}
.tab {
display: inline-block;
border: 1px solid #000;
margin: 0 5px -1px;
padding: 5px;
}
.tab.active {
border-bottom-color: #fff;
}
I've tried decimal pixel values as suggested here with no luck (JSFiddle: https://jsfiddle.net/1gyz7me5/1/).
I've tried using position: relative instead of a negative margin, with no luck (looks good in Chrome but not Safari – JSFiddle: https://jsfiddle.net/qwkvxdj4/).
I've tried using translate instead of a negative margin, with no luck (JSFiddle: https://jsfiddle.net/qwkvxdj4/1/).
I found a solution on Chrome zoom levels except for 75% and 33% and 20%:
body { background: #fff; }
.tabs {
border-bottom: 1px solid #000;
}
.tab {
display: inline-block;
position: relative;
top: 1px;
border: 1px solid #000;
margin: 0 5px;
padding: 5px;
}
.tab.active {
border-bottom-color: #fff;
}
The problem is "hiding" the bottom border with the tab's bottom border to appear active. At certain zoom levels, the aesthetic will only partially cover (if at all) the bottom border. By removing the negative margin and making the position relative, you're moving the tabs after the page has rendered, which is a decent pseudo-fix for zooming in at least.
I just want to know how can I add a border to the bottom of my container like this:
http://awesomescreenshot.com/0a551tq923
Assuming the border is white there and the container is above that.
I know it requires some minor CSS but can not figure that out.
Thank you.
I created a JSFiddle to show an example of what you could do. All using CSS.
I could see multiple ways of accomplishing this using the basic example I provided.
The css used for the bottom slant:
#bottom {
width: 0;
height: 0;
border-top: 20px solid black;
border-left: 500px solid transparent;
}
Edit:
Here is another example. More close to the website.
Also the website is using parallax. So it's going to be a little different then what I threw together.
you can do like :
#container {
background:url('path to image which needed as border') no-repeat center bottom;
}
With CSS3 you can do the same of the image that you like, try with:
#container {
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px; /* firefox */
-webkit-border-radius: 10px; /* safari, chrome */
}
And if you want even the shadow try with:
-webkit-box-shadow: 0 5px 10px #303030;
I am designing a custom arrow (using background image) for a group of select boxes.
Problem is that each select box should be very short in width and therefore if the text is longer than this width it appears over the background arrow.
I need to find a way to display the background image over the text.
The other problem is that there are about 500 such select boxes and I do not wish to add a span layer in the HTML code for each of those boxes to accomplish the goal.
Therefore I am looking for a CSS solution only. JS would not work either.
Here is the CSS:
.dropdown{
width:57px;
border: 1px solid #cfcfcf;
height: auto;
border-radius: 5px;
padding:3px 4px 4px;
position: relative;
z-index: 0;
overflow:hidden;
}
.dropdown select{
border: none;
background-color: transparent;
outline: none;
padding: 1px 0 0 5px;
width:145%;
background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right;
background-position: 55%;
}
JSFiddle here:
http://jsfiddle.net/pazzesco/r6c9zcpc/
Any comments or ideas will be greatly appreciated.
Have you considered just increasing the right padding on your .dropdown selector to say 10px?
padding:3px 10px 4px; should make sure your text never overlaps over the arrow.
Or do you actually want the text to display behind the arrow (which won't work as you've got the arrow as a background image)? :)
I hope I haven't misunderstood the question!
Cheers
Ines
Just increase padding-right values by 30px.
.dropdown select{ padding: 1px 30px 0 5px; }
Result: This will clip the text; 30px from right side.
JSFiddle Here: [http://jsfiddle.net/nvishnu/Lq7hosrd/2/]
Here is the design for the tabs
I need each tab to be the same width. The top green border on active tab should be over the left and right borders.
Here is the code I've written so far: http://jsbin.com/ricuzubo/1/edit
Can anyone help me?
Instead of applying border-right: none; to your anchor tag, remove that style and add margin-right: -10px to it. This will do the trick.
SEE THE DEMO and THE CODE for reference.
li a {
border: 10px solid #ccc;
margin-right: -10px;
}
li.active a {
box-shadow: 0px -10px 0px green;
}
If you can use CSS3 remove your border and add this effect using box-shadow.
Like This:
li.active a
{
box-shadow: 0px -10px 0px green;
}
Here is a FSfiddle: http://jsfiddle.net/NicoO/BcA6K/
I've solved your problem here using some jQuery and CSS.
Good Luck!