How can I create a box with a coloured "heading area" that has a shadow on the bottom just like this example on the right sidebar of this website: Box with heading on this website
This website uses images to create this effect. I would like to use pure CSS3 and HTML5 to achieve this.
I have tried looking for this on Google, but I can't find it anywhere. I'm assuming that I am calling it the wrong thing, that is why I cannot find it. Also, I've tried using a table with two cells, but it does not work out right and I cannot create or place the shadow correctly.
I would like my box to be exactly the same as the example except that I would change the colours.
I would really appreciate any help I can get.
My approach is to use borders for a triangular mask, and underneath use a background gradient.
Check out my code on codepen
The updated version. For pseudo elements (:before and :after) you had to make some space for the border (1px on left and right).
Remember that the tricky part is with adjusting the width with this sidebar. First thing to change is the sidebar class, then you should match the borders for the pseudo element :after.
try this code
<!DOCTYPE html>
<html>
<head>
<style>
#nav{
width:950px;
height:50px;
float:left;
position:relative;
background:#F4F4F4;
background:linear-gradient(top,#FFF,#F4F4F4);
background:-moz-linear-gradient(top,#FFF,#F4F4F4);
background:-o-linear-gradient(#FFF,#F4F4F4);
background:-webkit-gradient(linear,left top,left bottom,from(#FFF),to(#F4F4F4));
box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.21);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC');
}
#nav ul{
list-style-type:none;
margin:0;
width:910px;
padding:0px;
padding-left:30px;
float:left;
}
#nav ul li{
display:inline;
}
#nav ul li a{
text-decoration:none;
color:#06C;
padding:8px;
padding-left:25px;
padding-right:25px;
font-family: 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
float:left;
margin:5px;
}
#nav ul li a:hover{
color:#FFF;
background:#666;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a >Home</a></li>
<li><a >Profile</a></li>
<li><a >About</a></li>
<li><a>Contact US</a></li>
</ul>
</div>
let me know if it work for you.
If you want to make this effect with CSS3 use box-shadow.
For example, check fiddle:
http://jsfiddle.net/PwerX/
More documentation check this link, it helped me!
http://css-tricks.com/snippets/css/css-box-shadow/
Have fun!
Related
I will short and clear. I have this html code snippet.
<nav>
<span class="heading">CodingHero</span>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
Now I have this CSS part
nav ul li a {
font-family:'Poppins', sans-serif;
font-size:20px;
color:white;
opacity:0.8;
margin:0px 20px;
}
This is also okay. But I found this weird behavior while dealing inside media queries.
nav ul a {
font-size:44px;
background-color:yellow;
margin:0px;
}
My background color works yellow fine.
But my font-size and margin doesn't work.
As soon as I provide specificity as I originally used in CSS part,
nav ul li a {
font-size:44px;
background-color:yellow;
margin:0px;
}
This works, my font-size and margin also comes into effect.
Can someone explain why I have to use the original selector that I first used to get all properties to act?
Why my font-size and margin were not applied when background color in same part is applied.
What's going on here? Any resources to clear my head.
Any response is appreciated.
Thanks !
background-color:yellow; was applied because the other selector with higher specificity (nav ul li a) doesn't contain a background-color property, so nothing overrides it.
If you were to add one like
nav ul li a {
font-family:'Poppins', sans-serif;
font-size:20px;
color:white;
opacity:0.8;
margin:0px 20px;
background-color: red; /* added */
}
then it'll override background-color:yellow, just like it override margin and font-size
I got strange problem with different rendering of one simple nav/menu. Here is code:
HTML:
<nav id="navigation">
<ul>
<li class="active">HOME<br><span>What we do</span></li>
<li>ABOUT<br> <span>Our expertise</span></li>
<li>SERVICES<br><span>Our products</span></li>
<li>WHY CHOOSE US<br><span>Our promise</span></li>
<li>NEWS<br><span>Updates</span></li>
<li>OUR CHOSEN CHARITY<br><span>Great Ormond Street</span> </li>
<li>CONTACT US<br><span>Get in touch</span> </li>
</ul>
</nav>
Relevant CSS:
#navigation {
width:100%;
clear:both;
background-color:#a9218e;
height:72px;
}
#navigation ul {
width:894px;
height:72px;
list-style-type:none;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
#navigation ul li {
display:block;
float:left;
text-align:center;
padding:10px 22px 0 22px;
margin:0;
height:72px;
box-sizing:border-box;
}
#navigation ul li:last-child {
padding:10px 20px 0 19px;
}
#navigation ul li a {
color:#fff;
text-decoration:none;
width:100%;
height:72px;
font-size:15px;
font-weight:400;
}
#navigation ul li.active {
background-color:#00837e;
}
Test link: http://bybyweb.com/hygeineco/
Well... In Firefox, menu is perfect, it fits container's size (894px). However, in Chrome and IE11 (and i guess lower IE versions), one item is pushed down. So, i guess that there is no space for that item (contact) because of paddings. I've tried to resize container, or to reduce padding, and rendering difference is ~2px, between Chrome and Firefox... With container width of 896px - all is working fine in Chrome, in IE11, anyway, container width should be at least 903px?! What causes these strange differences? I guess that chosen google font rendering is different in every browser. How to solve this issue?
Add This Code Where Ever You Used box-sizing:border-box; :
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit- is for Safari And Chrome
-moz- is for Mozila (but in your case , the browser could understand it without -moz- )
-o- for Opera and -ms- for IE ;
Almost solved it by using display:table for ul, and display:table-cell for li elements... However, now i just have to remove margin/padding at the bottom.... :)
EDIT: background image position was in question... so, now is perfect. Good old tables - still the best solution for some things. :)
EDIT2: I would remove this question, but i am sure it will help to someone who have similar situation. Conclusion -> when you have menu with different widths of/for every menu item, BUT if you want to place that menu inside fixed width container, setting of right/left padding to li elements (menu items) is obviously not the best solution. Display: table, and display:table-cell is the best (and maybe only?) possible solution.
Was just amusing myself with a little useless site, practicing this and that.
I came across a problem, where the link is only clickable on the left, not the right.
how it looks:
div, inside it a header(2) with in it a link
<div class="button one"><h2>example</h2></div>
It has a right border, a hover function and quite a width. It is absolute positioned. Been trying around a bit a came up with following code (it is a bith messy, sorry)
.button{
position:absolute;
padding:0px;
margin:0px;
width:300px;
height:70px;
background-color:#999999;
border-left:solid 7px #FF6600;
border-bottom:solid 1px #FF6600;
border-top:solid 1px #FF6600;
}
.button h2{
padding:0px;
margin:0px;
text-transform:uppercase;
color:#FFFFFF;
font-size:1,5em;
}
a{
margin:0px;
display:block;
text-decoration:none;
color:#FFFFFF;
padding:20px;
}
a:hover{
background-color:#FF6600;
}
problem: links are only links up about 1/2 the width. They background color of the hover changes the complete area, but only works when the mouse is in that link area. Not sure where I missed something. All help is appreciated!
For those who want to look into the css and html files themselves, i put them in a test.rar file:
http://www.sendspace.com/file/pe42e0
It's because the image #content_image_1 is positioned above your buttons. If you remove the z-index: 1; from that image, your buttons work as intended. Albeit with your image behind the buttons.
I have a sprite, consisting of 4 bubbles that I will use for the selected version of my navigation, that looks like this:
The best example of what I'm trying to achieve that I can find is Dribbble. Look at the header navigation selected navigation. They are using a bubble similar to mine to cover the "Jobs" link, except they use pure css to achieve the look, whereas I'm using images.
Here's my code:
.inline-block{
/* Inline block class for li navigation */
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#header li a{
width:40px; /* without padding = 110px*/
height:15px; /* without padding = 31px*/
padding:8px 35px;
}
#header li a.selected{
background: url('../img/btn-header-sprite.png') 0 -1px;
display:inline-block;
}
#header li a{
color:#FFF;
font-weight:bold;
font-size:15px;
}
#header li:hover{
background-position:0 -34px;
}
#header li:active{
background-position:0 -67px;
}
Right now it looks like this:
I'm having to individually align the padding for each one, and as you can see, if the padding is not correct, the text is not centered in the bubble. Is there a better way to format this, than individually giving padding to each bubble?
Thanks for all help! If you need more clarification, just say!
You can try
display:table-cell;
vertical-align: middle;
Its the weirdest thing I've ever seen. I can't click the last 3 links in the following code (when I use FF or Chrome):
HTML:
<div id="leftmanulist">
<div class="abouttop">
<ul class="aboutlist">
<li class="index"><a>成立宗旨</a></li>
<li>樂器編制</li>
<li>演奏曲目</li>
<li>服裝介紹</li>
<li>關於法輪大法</li>
<li>各界褒獎</li>
</ul>
</div>
<div class="aboutbutton"></div>
</div>
CSS:
#leftmanulist{ background:url("images/abouttop.gif") no-repeat;
float: left;
margin: 2px 2px 5px 30px;
padding:39px 0 0 0;
width:237px;}
#leftmanulist ul li{line-height:35px;text-align:left; text-decoration:none;}
#leftmanulist ul li a{ text-decoration:none;}
#leftmanulist ul li:hover{ color:#0068FF;}
#leftmanulist ul li a:hover{ color:#0068FF;}
#leftmanulist ul li.index{ color:#0068FF;}
#leftmanulist ul li.index a{ color:#0068FF;}
.abouttop{background:url("images/leftmanulist_z.gif") repeat-y ;
padding:0 6px; position:relative; z-index:0;
width:237px;}
.aboutlist{position:relative;left:28px;}
.aboutbutton{background:url("images/leftmanulist_b.gif") no-repeat;
width:237px; height:20px; position:relative; top:-17px; z-index:2;}
Works for me, but then I might not have the complete HTML/CSS.
If I had to make a guess I'd say your aboutbutton element is probably overlapping the bottom links (as you're positioning it top: -17px; and it has a higher z-index than abouttop). Give abouttop a higher z-index and see if that helps.
Something is most likely overlapping those elements in Firefox/Chrome. In Chrome, right click and inspect element. This will take you to the element that's overlapping in the tools panel, then....can't help you any further without more information, but if you update the question with that info we can.
Hopefully just identifying the overlapping element is an "ahhhhh that damn thing" moment and problem solved :)
For some reason I changed the z-index to 2 and worked.