How can I create a "Contact Us" hyperlink as the one present on the top-right of this page?
I am particalarly interested on the balloon style.
They use simple html for the link and css to show rounded corners and an arrow.
Contact Us<span class="arrow"><span></span></span>
li.contactus a {
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #EBE9D9;
border:1px solid #FFFFFF !important;
color:#4C4632 !important;
display:block;
float:left;
font-size:1.3em;
font-weight:bold;
line-height:1;
margin:0;
padding:0.4em 0.7em 0.6em 1.2em;
text-decoration:none;
text-shadow:1px 1px 0 #FFFFFF;
width:6em;
}
li.contactus a span.arrow {
border-left:0 none;
border-right:16px dashed transparent;
border-top:11px solid #FFFFFF;
bottom:-11px;
left:8px;
right:auto;
}
li.contactus a span span {
border-left:0 none;
border-right:14px dashed transparent;
border-top:10px solid #EBE9D9;
bottom:auto;
left:1px;
top:-12px;
}
li.contactus a span {
background:none repeat scroll 0 0 transparent;
border-bottom-width:0;
display:block;
height:0;
position:absolute;
width:0;
}
Since that is static, I would just use an <img> for this.
If you check the html and css in for that balloon you'll get your answer:
html:
<ul><li class="contactus">Contact Us<span class="arrow"><span></span></span></li></ul>
css:
li.contactus a span.arrow {
border-left:0 none;
border-right:16px dashed transparent;
border-top:11px solid #FFFFFF;
bottom:-11px;
left:8px;
right:auto;
}
li.contactus a span {
background:none repeat scroll 0 0 transparent;
border-bottom-width:0;
display:block;
height:0;
position:absolute;
width:0;
}
li.contactus, #home_nav li.contactus {
float:none;
font-size:1em !important;
margin:0;
overflow:visible !important;
padding:0;
position:absolute !important;
right:20px;
top:-0.5em;
width:10em;
z-index:99999;
}
li.contactus a {
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #EBE9D9;
border:1px solid #FFFFFF !important;
color:#4C4632 !important;
display:block;
float:left;
font-size:1.3em;
font-weight:bold;
line-height:1;
margin:0;
padding:0.4em 0.7em 0.6em 1.2em;
text-decoration:none;
text-shadow:1px 1px 0 #FFFFFF;
width:6em;
}
Related
I am trying to replicate as pixel perfect as I can get and im having trouble trying to do the shadow on the right. Is this possible with css?
CSS:
*{margin:0px;padding:0px;}
html {
width:100%;
height:100%;
text-align: center;
}
.bold {
font-weight:700;
}
#ribbon {
padding: .34em 1em;
margin: 0;
margin-top: 5%;
position:relative;
color: #000;
text-align: center;
letter-spacing:0.1em;
padding-top:12px;
padding-bottom:12px;
display: inline-block;
background: #ffd82b;
z-index:100;
box-shadow: 0 7px 0px -2px #ebeced;
}
#ribbon:after {
content: "";
width:3.2em;
bottom:-.5em;
position:absolute;
display:block;
border: .9em solid #ffd82b;
box-shadow: 0 7px 0px -2px #ebeced;
z-index:-2;
}
#ribbon:after {
right: -4.3em;
border-left-width: .75em;
border-right-color:transparent;
}
#content:after {
content:"";
bottom:-.5em;
position:absolute;
display:block;
border-style:solid;
border-color: #fc9f42 transparent transparent transparent;
z-index:-1;
}
#content:before {
content:"";
top:-.5em;
transform: rotate(90deg);
position:absolute;
display:block;
border-style:solid;
border-color: #fc9f42 transparent transparent transparent;
z-index:-1;
}
#content:before {
left: 0;
border-width: .5em 0 0 .5em;
}
#content:after {
right: 0;
border-width: .5em .5em 0 0;
}
HTML:
<div id="ribbon">
<span id="content"><span class="bold">Special Offer:</span> Recieve bonus rewards points for signing up</span>
</div>
Or here's a jsfiddle:
http://jsfiddle.net/k0a6jhv6/
You can make this ribbon without using box-shadows, only with borders, z-index and pseudo elements :
DEMO
output :
.ribbon{
font-size:20px;
position:relative;
display:inline-block;
margin: 2em 1em;
text-align:center;
}
.text{
display:inline-block;
padding:0.5em 1em;
min-width:20em;
line-height:1.2em;
background: #FFD72A;
position:relative;
}
.ribbon:after,.ribbon:before,
.text:before,.text:after,
.bold:before{
content:'';
position:absolute;
border-style:solid;
}
.ribbon:before{
top:0.3em; left:0.2em;
width:100%; height:100%;
border:none;
background:#EBECED;
z-index:-2;
}
.text:before{
bottom:100%; left:0;
border-width: .5em .7em 0 0;
border-color: transparent #FC9544 transparent transparent;
}
.text:after{
top:100%; right:0;
border-width: .5em 2em 0 0;
border-color: #FC9544 transparent transparent transparent;
}
.ribbon:after, .bold:before{
top:0.5em;right:-2em;
border-width: 1.1em 1em 1.1em 3em;
border-color: #FECC30 transparent #FECC30 #FECC30;
z-index:-1;
}
.bold:before{
border-color: #EBECED transparent #EBECED #EBECED;
top:0.7em;
right:-2.3em;
}
<p class="ribbon">
<span class="text"><strong class="bold">Special Offer:</strong> Recieve bonus rewards points for signing up</span>
</p>
What if you add a new element to create missing shadow?
#abc {
display:inline-block;
border: .9em solid #ebeced;
border-right-color:transparent;
position:absolute;
right:-73px;
z-index:-3;
bottom:-12px;
}
http://jsfiddle.net/k0a6jhv6/9/
another solution, use span:after inside #content
#content span:after {
content:'';
display:block;
border: .9em solid #ebeced;
border-right-color:transparent;
position:absolute;
right:-73px;
z-index:-3;
bottom:-12px;
}
http://jsfiddle.net/k0a6jhv6/11/
So I have an image inside a div that is centered in an outer-wrapper. I have a horizontal menu at the top of the wrapper that displays 5 sub divs inline. I have added css for a drop down menu that appears when you hover over the first of the 5 inline sub divs. When the drop down menu appears, it causes the image to shift to the right and I can't for the life of me figure out how to correct it. As you can see I have played around with z-index but i'm not sure if I understand what is happening or not happening with z-index and how it is used correctly.
HTML:
<div class="wrapper">
<div id="topmenu">
<div id="home">Home
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
<div id="logo">
<img src="image.jpeg" />
</div>
</div>
CSS
.wrapper{
position:relative;
width:960px;
height:905px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
/*text-align:left;
border:2px solid red;*/
background-color:#FFFFFF;
}
#topmenu{
position:relative;
border-bottom:2px solid #164207;
height:30px;
background-color:#ffffff;
z-index:3;
}
#logo{
position:relative;
border-bottom:2px solid #164207;
}
#logo img{
position:relative;
height:350px;
width:500px;
z-index:1;
}
#home{
display:inline-block;
float:left;
margin-top:5px;
margin-left:15px;
width:169px;
color:#164207;
font-family:serif;
font-weight:bold;
font-size:20px;
text-align:center;
border-right:2px solid #164207;
}
#home:hover .sub-menu {display:inline-block;}
.sub-menu {
overflow:hidden;
display: none;
width: 169px;
background-color: #164207;
color:#FFFFFF;
margin-top: 5px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
.sub-menu li {
position:relative;
list-style-type: none;
display: block;
border-bottom: 1px solid #FFFFFF /*#eaeaea*/;
font-family:serif;
font-size: 12px;
height: 15px;
padding: 8px 0;
}
You need to add position: absolute; to .sub-menu to create a stacking context.
jsFiddle
#home{
display:block;
float:left;
margin-top:5px;
width:184px;
color:#164207;
font-family:serif;
font-weight:bold;
font-size:20px;
text-align:center;
border-right:2px solid #164207;
}
#home:hover .sub-menu {display:block;}
#course:hover .sub-menu{display:block;}
#leagues:hover .sub-menu{display:block;}
#events:hover .sub-menu{display:block;}
#about:hover .sub-menu{display:block;}
.sub-menu {
overflow:hidden;
display: none;
width: 182px;
background-color: #164207;
color:#FFFFFF;
/*padding: 10px 10px;
margin-left: 0px;*/
margin-top: 5px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
position:absolute; /**************************** Important Bit*/
top:24px;
}
To re-adjust alignment- Remove margin-left:15px; from #home, #course, #leagues, #events, and #about and adjust widths on all of them. Then adjust the width of .sub-menu. See updated jsFiddle above for details and working model.
Example with navigation set up in <ul> unordered list </ul>. - Don't Need all the id's and resulting redundant CSS.
I'm trying to build a generic hover class that uses box-shadow amd that will work with multiple colors of buttons. For this reason, I want the "shadow" to be different for every color of button. I'm trying to figure out if there is a way to use or set only the color attribute of a shadow element?
Here is what I mean:
/*Notice that .button shadows does not have a color value*/
.button {
-webkit-box-shadow:
0px 8px 16px 0px;
box-shadow:
0px 8px 16px 0px;
}
.button:hover{
-webkit-box-shadow:
0px 16px 16px 0px;
box-shadow:
0px 16px 16px 0px;
}
/*And color elements does not have other values for the shadow*/
.red{
-webkit-box-shadow:
rgba(255, 0, 0, 0.1);
box-shadow:
rgba(255, 0, 0, 0.1);
}
.green{
-webkit-box-shadow:
rgba(0, 255, 0, 0.1);
box-shadow:
rgba(0, 255, 0, 0.1);
}
...to be used as follows:
<div class="button red>Red Button</div>
<div class="button green>Green Button</div>
I hope that explains the situation. Brainstorm time!
You need to add color: red
.red{
color:red
}
.green{
color:green
}
Since color: property applies to the text also, you need to wrap the text with span tag and give color:black to span.
DEMO
Unfortunately there is no way to specify ONLY the color for a box shadow as specified here: http://dev.w3.org/csswg/css3-background/#the-box-shadow
You will need to give a separate box shadow rule for each color class.
In CSS3 there in no box-shadow-color rule, so for different buttons you need to specify all shadow parameters (size, position, color).
try this css styles in this style using color for individual menu, u can try shadow to set instead of color...
HTMl Code
<div class="menu">
<ul>
<li class="active1">Home</li>
<li>About Us</li>
<li>Portfolio</li>
<li>Product</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS Style
.menu{
font-family:Arial, Helvetica, sans-serif;
color:white;
float:left;
position:absolute;
top:95px;
width:855px;
background-image:url(../images/bottom-menu-line.png);
background-position:center bottom;
background-repeat:no-repeat;
}
.menu ul{padding:0; margin-left:65px; border-radius:10px;}
.menu ul li {
float:left;
border-radius:10px;
width:110px;
height:47px;
list-style:none;
padding:0;
margin-left:5px;
margin-right:5px;
/*overflow:hidden*/
}
.menu ul li a {
font-size:12px;
color:#fffcc7;
background-image:url(../images/button.png);
background-position:center;
height:47px;
overflow:hidden;
line-height:47px;
text-decoration:none;
width:110px;
text-align:center;
float:left;
border-radius:10px;
}
.menu li {float:left; padding:0;}
.menu ul li a:hover {
margin: -3px;
}
.menu ul li:nth-of-type(6) a:hover {
border:3px solid #c10202 !important;
border-radius:10px !important;
}
.menu ul li:nth-of-type(5) a:hover {
border:#c1d65f solid 3px;
border-radius:10px;
}
.menu ul li:nth-of-type(4) a:hover {
border:#01d290 solid 3px;
border-radius:10px;
}
.menu ul li:nth-of-type(3) a:hover {
border:#904ca1 solid 3px;
border-radius:10px;
}
.menu ul li:nth-of-type(2) a:hover {
border:#00caf3 solid 3px;
border-radius:10px;
}
.menu ul li:nth-of-type(1) a:hover {
border:3px #d44c1f solid;
border-radius:10px;
}
.active1{
border:3px #d44c1f solid;
width:110px !important;
border-radius:10px;
height:47px !important;
margin-bottom:7px !important;
margin-right:5px !important;
}
.active2{
border:#00caf3 solid 3px;
width:110px !important;
border-radius:10px;
height:47px !important;
margin-bottom:7px !important;
margin-right:5px !important;
}
.active3{
border:#904ca1 solid 3px;
width:110px !important;
border-radius:10px;
height:47px !important;
margin-bottom:7px !important;
margin-right:5px !important;
}
.active4{
border:#01d290 solid 3px;
width:110px !important;
border-radius:10px;
height:47px !important;
margin-bottom:7px !important;
margin-right:5px !important;
}
.active5{
border:#c1d65f solid 3px;
width:110px !important;
border-radius:10px;
height:47px !important;
margin-bottom:7px !important;
margin-right:5px !important;
}
.active6{
border:3px solid #c10202;
width:110px !important;
border-radius:10px;
height:47px !important;
margin-bottom:7px !important;
margin-right:5px !important;
}
No you can't, you have to put the 2 cases normal and hover for each button
http://dev.w3.org/csswg/css3-background/#the-box-shadow
I was experimenting with text-align:; and text-justify:;, which only appears in the header id, and am now getting the effect on divs I no longer want it on. I've since removed the rules entirely with no effect. This especially irritating when li's are involved with syntax highlighting etc. Any idea where this is coming from?
css:
#content{
position:relative;
float:left;
clear:both;
background-color:#ffffff;
width:100%;
overflow:hidden;
text-align:left;
vertical-align:left;
margin:10px 3px 3px 03x;
padding:10px 10px 10px 10px;
}
#contentspace{
position:relative;
float:left;
clear:both;
background-color:#ffffff;
width:91%;
overflow:hidden;
text-align:left;
vertical-align:center;
left:4%;
margin:10px 0px 0px 0px;
padding:5px 5px 5px 5px;
border-top:1px solid #000000;
border-left:1px solid #000000;
}
#header{
position:relative;
float:left;
clear:both;
background-color:#ffffff;
vertical-align:center;
text-align:center;
text-align:justify;
text-justify:distribute;
width:91%;
left:4%;
margin:15px 0px 0px 0px;
padding:5px 5px 5px 5px;
border-top:1px solid #000000;
border-left:1px solid #000000;
}
html:
the content div is loaded into the contentspace div
I have the following HTML:
<div id="pager">1
2
3<span class="elip">...</span>
4</div>
And CSS:
.elip
{
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
}
#pager a{
BORDER-BOTTOM: #E6E6E6 1px solid;
BORDER-TOP: #E6E6E6 1px solid;
BORDER-RIGHT: #E6E6E6 1px solid;
BORDER-LEFT: #E6E6E6 1px solid;
color: #585858;
padding: 7px;
padding-top:30px;
text-decoration: none;
color: #808080;
}
No matter what I do, I cannot get the '...' to be aligned down the bottom at the bottom. When testing in JSFiddle, all works, but not outside it as the shot below (red X is what it is, green tick is what I would like):
Padding, text size, alignment, line height, nothing seems to work.
Try this:
.elip {
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
position:relative;
bottom:-10px;
}
You could use relative positioning, I also cleaned up your css a bit: http://jsfiddle.net/ptriek/LfUDB/2/
.elip {
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
}
#pager a {
border: #E6E6E6 1px solid;
color: #808080;
padding:30px 7px 7px 7px;
text-decoration: none;
}
#pager span {
top: 9px;
position:relative;
}