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!
Related
I want to remove the white edges and the black shadow from my text box in the page of https://help.penny.co/portal/en/home:
Here's what I tried:
.SearchBox__searchpart{
background-color:transparent;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
This is the input text CSS:
.SearchBox__searchpart input {
background-color: transparent;
border: 1px solid #818a91;
vertical-align: middle;
border-radius: 24px;
}
The shadow that you see is applied to #searchContainer, try this in your stylesheet:
#searchContainer {
box-shadow: none;
}
The problem is you're targeting the wrong element. The element with box shadow in the website you posted is the element with the class Header__searchLink. If you set box-shadow: none; on that element, you'll achieve nirvana.
Look at the parent of the input element and and a css box-shadow: none; there.
Next time you ask, please add more details so that you can find answers easily.
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.
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 trying to connect these 2 hover classes, so they activate at the same time:
#recent-posts .content:hover {
-webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.04);
-moz-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.04);
box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.04);
}
#recent-posts img:hover {
outline: 11px solid #ff7454;
margin-bottom: 15px;
}
So whenever you hover over content OR an image both hover classes will activate. I have tried a bunch of different ways to do this and read all over but this seems a little more complicated than it should be.
Can anyone point me in the right direction?
Here is a jsfiddle with what I have so far: http://jsfiddle.net/zpwnL/
I would use the parent selector to style the child-elements:
#recent-posts .thumbnail:hover {
...
}
#recent-posts .thumbnail:hover img {
box-shadow:....
}
If the elements would not have one common parent, you have to use JavaScript.
You should apply the :hover for an element from this element to keep adding selectors also apply to these
See this fiddle: http://jsfiddle.net/LD4qN/
update with you fiddle: http://jsfiddle.net/zpwnL/
I specify a box shadow for a span. The shadow only shows on the right. Something seems to cover the bottom side of the shadow. I tried resizing the span but this doesn't do it. I have this in the style specifications.
#feastsaint:hover span {
display:block;
width:385px;
height:65px;
margin-left: 120px;
border:1px solid #808080;
padding:2px;
font-size:11px;
border-radius: 5px;
box-shadow: 3px 5px 8px #888;
-moz-border-radius: 5px;
-moz-box-shadow: 3px 5px 8px #888;
padding: 5px 5px 5px 15px;
background:#CCFFCC;
/* border:1px solid #404040;
background-color:#FFCCCF; */
color:#404040;
white-space: normal;
z-index:99;
}
What could be the problem?
NOTE: Couldn't upload the image for the box shadow.
Add some margin-bottom to your span.
#feastsaint:hover span {
....
margin-bottom: 5px; // (play with this a bit till you get the desired effect)
}
you really should post more info about your problem such as the html code your trying to affect, that said try:
change
#feastsaint:hover span
to
span#feastsaint:hover
I recently experienced some problems with Chrome on MAC. I just had to restart Chrome several times until it worked again. For me bitmaps and some images online were messed up (no vectors). Maybe just restart Chrome and look if it works. Otherwise just revise your CSS as the other answers suggest. Good Luck