Hi guys i'm trying to create this(image) css border around a div, but having trouble.
I have created the border but cannot get the border to be smooth.
here is my code
border-left: 5px solid #036;
border-right: 5px solid #036;
border-top: 10px solid #036;
border-bottom: 5px solid #036;
Fiddle Up, You can see it here.
Hope it help.
EDIT:
Html:
<div class="a">
<span class="abs">Title here?</span>
<div class="b">
Hello.
</div>
</div>
Css:
div.a {
border-top: 10px solid #333;
border-left: 5px solid #333;
border-bottom: 5px solid #333;
border-right: 5px solid #333;
border-radius: 10px;
background-color: #333;
width: 200px;
height: 400px;
}
div.b {
border-radius: 5px;
background-color: #FFF;
width: 180px;
height: 350px;
padding: 10px;
}
.abs {
color: #FFF;
display: inline-block;
font-weight: bold;
margin-bottom: 10px;
}
You can attain such a setup using new CSS3 facilities, namely border-radius and gradient form of background image. You can find information about those all around the internet, for example background gradient and border radius.
Below is example, it will not work in all browsers, and is not exactly what you want, but it should be enough to give you the basic idea:
The html structure could look like this:
<div id="big_div">
Search for a hotel
<div id="small_white_div">
Some other content
</div>
</div>
And the corresponding css would be:
#big_div {height:450px;width:250px;border-radius: 5px;background-color:red;
background-image: linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -o-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -moz-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)
51%, rgb(33,51,140) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)
51%, rgb(33,51,140) 100%);
background-image: -ms-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, rgb(33,51,140)),
color-stop(0.51, rgb(125,187,209)),
color-stop(1, rgb(33,51,140))
);}
#small_white_div {height:400px;width:220px;margin:auto;border-radius:5px;
background-color:white;margin-top:20px;}
Good luck.
It's done with background image.
You are looking for border-radius to get the rounded corners. Try out something like this:
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
Note this is CSS3 and will not work in older versions of IE
Related
Was trying to make a multi-color bottom border like in below image, but failed.
Tried to use border-image: linear-gradient(), but didn't manage. it only gets one of the colors: #707070.
a {
color: #707070 !important;
font-size: 20px;
text-decoration: none;
margin-right: 50px;
border-bottom: 5px solid;
border-image: linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) 5;
}
<div id="nav">
HOME
PROJECTS
RESUME
</div>
The issue is that percentages are relative to the element not the border which will make the 20% bigger than 5px.
You need to consider pixel values. You also need to start from the bottom because the top reference is also the top of the element:
a {
color: #707070 !important;
font-size: 20px;
text-decoration: none;
margin-right: 50px;
border-bottom: 5px solid;
border-image:
linear-gradient(to top, #707070 1px, #a4c0e9 1px, #a4c0e9 4px, #707070 4px) 5;
}
<a>A link element</a>
Or use it as background and it will be easier to handle:
a {
color: #707070 !important;
font-size: 20px;
text-decoration: none;
margin-right: 50px;
border-bottom: 5px solid transparent;
background:
linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) bottom/100% 5px border-box no-repeat;
}
<a>A link element</a>
Related: border-image-slice for gradient border image
Here is an example to better illustrate the issue you were having:
.box {
width:100px;
height:100px;
display:inline-block;
border-bottom:10px solid rgba(0,0,0,0.2);
}
<div class="box" style="background:linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) border-box">
</div>
<div class="box" style="border-image:linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) 10 fill">
</div>
<div class="box" style="border-image:linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) 10 ">
</div>
In this example, the first box show the gradient we will be using. In the second one, we are applying it to the border using fill to also color the middle area and in the last one we are coloring only the border-bottom
It's always good to post your code, or a link to jsfiddle or codepen. You can refer help section on how to ask?
In your case, the design you have shown here doesn't look like a gradient. I have a solid color and borders on it. Gradients can be used on border, you can see it here
To achieve what you have shown I would have used :after and following style,
a{
position: relative;
padding-bottom: 20px;
&:after{
position: absolute;
content: '';
height: 10px;
width: 100%;
left: 0;
bottom: 0;
background: #a4c0e9;
border-top: 1px solid #707070;
border-bottom: 1px solid #707070;
}
}
Just started with styling buttons and my desire was to have a background to the left of the button while the text search was to the right of the image.
Heres the code I have so far. And here is how the button is so far
How can I add a small icon to the left of the text? I tried running this code but no luck.
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0;
.button {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color:#f9f9f9;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:76px;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:66px;
line-height:66px;
width:152px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.button:hover {
background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
background-color:#e9e9e9;
}
.button:active {
position:relative;
top:1px;
}
<div class="button">Search!</div>
Adding your exact code to the example code output works, so there's something wrong with the way you incorporated the line into your css definitions.
Unfortunately, your example code doesn't include the actual line, but my guess is that you might have put it above the linear-gradient background definitions, which would then override your image. To test if this is the error, put it all the way at the bottom of the .button declaration and see if it's being displayed.
To use multiple background images, you can comma-seperate the individual values, like so:
background-image: url('one.png'), url('two.jpg');
background-position: center center, left top;
Try to add your background image after background linear gradient
To add multiple backgrounds to an element, you need to declare them all in a comma-separated list, like this:
.button {
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0, linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
}
Backgrounds are painted from last to first, so your icon should show up just fine.
If you declare a property multiple times, the browser will really overwrite the previous value, unless the new one is invalid. Also, keep in mind that gradients are considered "images".
Try to give background-size property like this
.button {
-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
box-shadow: inset 0px 0px 0px 0px #ffffff;
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color: #f9f9f9;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
text-indent: 76px;
border: 1px solid #dcdcdc;
display: inline-block;
color: #666666;
font-family: Arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 66px;
line-height: 66px;
width: 152px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #ffffff;
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0;
background-size: contain;
}
<html>
<body>
<div class="button">Search!</div>
</body>
</html>
Here is the code in action:
http://jsfiddle.net/uop7dz7L/5/
This is menu. I used gradient background. When I remove gradients then the a:hover works. But somehow background:gradient is overriding it and disables it.
Any ideas?
#headwrap {
border-top: 2px solid #F5FBFD;
border-radius: 4px;
}
#inheader {
padding-top: 30px;
width: 973px;
margin: 0px auto;
}
#inheader ul {
font-size: 0;
padding: 0 0 0 0px;
list-style-type: none;
}
#inheader a {
text-decoration: none;
text-align: center;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ededed), color-stop(100%, #f7f7f7));
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0 );
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
display: inline-block;
font-family: 'open sans', sans-serif;
font-size: 14px;
height: 38px;
line-height: 38px;
color: #0088CB;
transition: color 0.4s ease 0s;
-webkit-transition: color 0.4s ease 0s;
padding: 0px 23px 0px 22px;
border-right: 1px solid #0088CB;
}
a#contactus {
padding: 0px 23px 0px 22px;
border-right: 0px;
}
div#inheader a:hover {
background-color: fuchsia;
}
#inheader li {
display: inline;
}
#nesmenu1 {
/*width: 972px;*/
border-bottom: 1px solid #E3E8EB;
border-left: 1px solid #E3E8EB;
border-radius: 4px;
}
#nesmenu2 {
border-top: 1px solid #ECF2F4;
border-right: 1px solid #ECF2F4;
border-bottom: 1px solid #CDD1D4;
border-left: 1px solid #CDD1D4;
border-radius: 4px;
}
#nesmenu3 {
border-top: 1px solid #DCE0E3;
border-right: 1px solid #DCE0E3;
border-bottom: 1px solid #B1B4B6;
border-left: 1px solid #B1B4B6;
border-radius: 4px;
}
#nesmenu4 {
border-bottom: 1px solid #F8F8F8;
border-radius: 4px;
}
<div id="headwrap">
<div id="header">
<div id="inheader">
<div id="nesmenu1">
<div id="nesmenu2">
<div id="nesmenu3">
<div id="nesmenu4">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SONIC TOOTHBRUSH</li>
<li>SONIC TRAVEL</li>
<li>SONIC PLUS</li>
<li>ACCESSORIES</li>
<li><a id="contactus" href="#">CONTACT US</a></li>
</ul>
</div><!--nesmenu4-->
</div><!--nesmenu3-->
</div><!--nesmenu2-->
</div><!--nesmenu1-->
</div><!--inheader-->
</div><!--header-->
</div><!--headwrap-->
How about using background instead of background-color;
div#inheader a:hover {
background: fuchsia;
}
Even better - if you want to keep the gradients, set new gradients in this div/id with the fuchsia colour like;
background: linear-gradient(to bottom, fuchsia 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
Change it depending on how you want to shade it..
http://jsfiddle.net/u5nt9h18/
The reason why background-color isn't working on :hover is because it's behind your gradient. From the W3C spec on background-image:
When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).
The background-color is like z-index: 0. The background-image always lays on top of the background color. Since you have specified a color for every color stop in your gradient, none of your :hover color is coming through.
Instead you will have to declare a new background gradient on hover. If you want the background color to be a full color, simply state the same color for 0% and 100%.
Also, as a side-note: when using background gradients, use background-image instead of background. The background element is a shorthand property for all other background properties. You're not declaring any of the other properties, so declare only the one you're using.
I've cleaned up your example with the correct CSS below.
#headwrap {
border-top: 2px solid #F5FBFD;
border-radius: 4px;
}
#inheader {
padding-top: 30px;
width: 973px;
margin: 0px auto;
}
#inheader ul {
font-size: 0;
padding: 0 0 0 0px;
list-style-type: none;
}
#inheader a {
text-decoration: none;
text-align: center;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ededed), color-stop(100%, #f7f7f7));
background-image: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
display: inline-block;
font-family: 'open sans', sans-serif;
font-size: 14px;
height: 38px;
line-height: 38px;
color: #0088CB;
-webkit-transition: color 0.4s ease 0s, background 0.1s ease-in;
transition: color 0.4s ease, background 0.1s ease-in;
padding: 0px 23px 0px 22px;
border-right: 1px solid #0088CB;
}
a#contactus {
padding: 0px 23px 0px 22px;
border-right: 0px;
}
div#inheader a:hover {
background-image: -moz-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: -webkit-gradient(left top, left bottom, color-stop(0%, fuchsia), color-stop(100%, fuchsia));
background-image: -webkit-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: -o-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: -ms-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: linear-gradient(to bottom, fuchsia 0%, fuchsia 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='fuchsia', endColorstr='fuchsia', GradientType=0);
background-image: linear-gradient(to bottom, fuchsia 0%, fuchsia 100%);
}
#inheader li {
display: inline;
}
#nesmenu1 {
/*width: 972px;*/
border-bottom: 1px solid #E3E8EB;
border-left: 1px solid #E3E8EB;
border-radius: 4px;
}
#nesmenu2 {
border-top: 1px solid #ECF2F4;
border-right: 1px solid #ECF2F4;
border-bottom: 1px solid #CDD1D4;
border-left: 1px solid #CDD1D4;
border-radius: 4px;
}
#nesmenu3 {
border-top: 1px solid #DCE0E3;
border-right: 1px solid #DCE0E3;
border-bottom: 1px solid #B1B4B6;
border-left: 1px solid #B1B4B6;
border-radius: 4px;
}
#nesmenu4 {
border-bottom: 1px solid #F8F8F8;
border-radius: 4px;
}
<div id="headwrap">
<div id="header">
<div id="inheader">
<div id="nesmenu1">
<div id="nesmenu2">
<div id="nesmenu3">
<div id="nesmenu4">
<ul>
<li>HOME
</li>
<li>PRODUCTS
</li>
<li>SONIC TOOTHBRUSH
</li>
<li>SONIC TRAVEL
</li>
<li>SONIC PLUS
</li>
<li>ACCESSORIES
</li>
<li><a id="contactus" href="#">CONTACT US</a>
</li>
</ul>
</div>
<!--nesmenu4-->
</div>
<!--nesmenu3-->
</div>
<!--nesmenu2-->
</div>
<!--nesmenu1-->
</div>
<!--inheader-->
</div>
<!--header-->
</div>
<!--headwrap-->
When you use background-color, you only change that property of the background property. Because gradients don't use the color and just show the gradient over the background-color, changing the background-color doesn't affect them.
To fix it, simply change the entire background instead of just background-color :
div#inheader a:hover {
background: fuchsia;
}
http://jsfiddle.net/zswr71Lc/
I have been trying to apply glow with CSS box-shadow property (tried inset) on hover. So far, I have been able to do this with inset - http://jsfiddle.net/bgGS6 (hover over list item to see the effect).
Test code:
HTML:
<ul>
<li>
home
</li>
</ul>
CSS:
ul {
list-style:none;
}
li {
width:50px;
height:25px;
background:black;
color:white;
font-size:1.25em;
padding:10px;
}
li:hover {
box-shadow: inset 0 9px 10px 0px #00abe3;
}
I'm trying to achieve something like this:
I'm wondering if it will be possible to increase glow toward the center and fade it out towards the edges. I assume ultimate solution will be to add a png on hover, but want to find out if this can be achieved with CSS alone.
Update: Added radial gradient to top and it is pretty close to what I need - http://jsfiddle.net/bgGS6/5 Will add rules for cross-browser compatibility as well.
It flickers because of transition, not sure how to fix that. Any suggestions?
You can simply chain your shadows, thus:
box-shadow: inset 0 3px 3px 0px #fff,inset 0 9px 10px 0px #00abe3;
Demo Fiddle
What this does is add an initial inset box shadow with the same colour as the background (in this case just white) to make it look like the element is faded at the edges, before applying your highlighing box shadow- with larger pixel distances defined.
just as a note, you should structure your html like this:
<ul>
<li>
<a>Home</a>
</li>
</ul>
The following is css to create a blue effect, and you can probably customize it to your liking but you can get the basic gist of it:
ul li a{
background-color: #759ae9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de));
background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
border-top: 1px solid #1f58cc;
border-right: 1px solid #1b4db3;
border-bottom: 1px solid #174299;
border-left: 1px solid #1b4db3;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
color: #fff;
font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
padding: 7px 0;
text-shadow: 0 -1px 1px #1a5ad9;
width: 150px;
}
As a further note, please check out some tutorials on CSS3. There are plenty out there that could help you get a more broad idea of the tools you have to play with to achieve what you need. A good place to start would be Codeacademy.com They have a pretty good tutorial on CSS3
You could add a :before pseudo-element which has a box-shadow;
li {
width:50px;
height:25px;
background:black;
color:white;
font-size:1.25em;
padding:10px;
position: relative;
}
li:hover {
box-shadow: inset 0 9px 10px 0px #00abe3;
}
li:hover:before {
position: absolute;
width: 10px;
height: 2px;
background: rgba(255, 255, 255, 0.4);
content:' ';
left: 30px;
top: 1px;
box-shadow: 0 3px 7px 5px rgba(255, 255, 255, 0.4);
}
See this fiddle
I am trying to make a pure css div with arrow ( like speech bubble )
I have created a fiddle here http://jsfiddle.net/ozzy/j9Wku/
Basically, I havent used an image in the fiddle but to the left of the div box when you hover over the image the div animates. You can see effect when you hover over the link.
I want to make it look like a speech bubble, but struggling to accomplish this.
Here is image of what I am after.
Any help greatly appreciated. I only need help doing the arrow for the div.
Easiest way I can think of is using before pseudo class to insert "blank space" before your P tag then style it with borders.
p::before {
display: block;
position: absolute;
top: 18px;
left: -10px;
content: '';
border-top: 10px solid transparent;
border-right: 10px solid #eeeeee;
border-bottom: 10px solid transparent;
}
http://jsfiddle.net/j9Wku/6/
I fiddled with this myself, and came up with a great solution. Code below.
.logo-heading {
position:absolute;
font-size:12px;
margin-left:230px;
float:left;
line-height:16px;
color:#404040;
background: rgb(255,255,255);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 );
top:38px;
padding:5px;
border-width:1px;
border-color: #cccccc #F6F6F6 #F6F6F6 #cccccc;
border-style:solid;
border-radius:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-shadow: 1px 1px 0 #fff;
}
.logo-heading2{
position:absolute;
font-size:12px;
margin-left:230px;
float:left;
line-height:16px;
display:none;
color:#404040;
background: rgb(255,255,255);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 );
top:38px;
padding:5px;
border-width:1px;
border-color: #cccccc #F6F6F6 #F6F6F6 #cccccc;
border-style:solid;
border-radius:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-shadow: 1px 1px 0 #fff;
}
#tail1 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #f0f0f0 transparent transparent;
position:absolute;
top: 14px;
left: -21px;
}
#tail2 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #ffffff transparent transparent;
position:absolute;
left: -20px;
top: 14px;
}
Changed a couple of things in the js and works perfect. Thanks guys
ther is an example
http://jsfiddle.net/amkrtchyan/j9Wku/7/
i try it with canvas