Related
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've implemented a search bar on my Rails app but it will not pull right for the life of me. With the method I've used, there's a form_tag that seems to overlay the top navbar.
The code for the search bar looks like this:
<%= form_tag search_path, :method => 'get', :class => "form-search", :style => "height:24px;" do %>
<div class="input-append" style="padding-top:5px;">
<%= text_field_tag :search, params[:search], :class=>"span3 watermark search-query", :placeholder => "Search By Device or PIN"%>
<button class="btn" type="submit"><i class="icon-search"></i></button>
</div>
<% end %>
The navbar looks like:
Adding pull-right as a style in any of the tags is not working. Has anyone experienced this problem before?
The Bootstrap CSS override code:
#Wrapper {
margin: 0 auto;
width: 900px;
}
.navbar-fixed-top {
padding-bottom:0px !important;
height:42px;
}
.navbar-inner {
background-color: hsl(27, 94%, 39%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c05a05", endColorstr="#c05a05");
background-image: -khtml-gradient(linear, left top, left bottom, from(#c05a05), to(#c05a05));
background-image: -moz-linear-gradient(top, #c05a05, #c05a05);
background-image: -ms-linear-gradient(top, #c05a05, #c05a05);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c05a05), color-stop(100%, #c05a05));
background-image: -webkit-linear-gradient(top, #c05a05, #c05a05);
background-image: -o-linear-gradient(top, #c05a05, #c05a05);
background-image: linear-gradient(#c05a05, #c05a05);
border-color: #c05a05 #c05a05 hsl(27, 94%, 39%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.00);
-webkit-font-smoothing: antialiased;
.border-radius(0) !important;
}
.navbar .brand {
display: block;
float: left;
padding: 10px 20px 10px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: white;
text-shadow: 0 0px 0 #;
}
.navbar .nav > li > a {
color: white;
float: none;
padding: 10px 15px;
text-decoration: none;
text-shadow: 0 0px 0 #ffffff;
}
.navbar .nav > li > a:focus
.navbar .nav > li > a:hover {
color: orange;
text-decoration: none;
background-color: transparent;
}
.container {
max-width:900px;
}
.row-fluid {
max-width:900px;
}
.span3 {
max-width:210px;
}
.well {
background-color: hsl(33, 100%, 93%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffeedb", endColorstr="#ffeedb");
background-image: -khtml-gradient(linear, left top, left bottom, from(#ffeedb), to(#ffeedb));
background-image: -moz-linear-gradient(top, #ffeedb, #ffeedb);
background-image: -ms-linear-gradient(top, #ffeedb, #ffeedb);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffeedb), color-stop(100%, #ffeedb));
background-image: -webkit-linear-gradient(top, #ffeedb, #ffeedb);
background-image: -o-linear-gradient(top, #ffeedb, #ffeedb);
background-image: linear-gradient(#ffeedb, #ffeedb);
border-color: #ffeedb #ffeedb hsl(33, 100%, 93%);
color: #333 !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.00);
-webkit-font-smoothing: antialiased;
}
.well-thumbnail {
background-color: white;
border-radius: 5px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
}
.row-padded {
padding-top: 10px;
background-color: #B8B8B8;
border: 5px solid #DDD;
margin-top: 10px;
}
.btn-danger {
}
.btn-custom-danger {
background-color: hsl(0, 69%, 22%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111");
background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111));
background-image: -moz-linear-gradient(top, #b42121, #5e1111);
background-image: -ms-linear-gradient(top, #b42121, #5e1111);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111));
background-image: -webkit-linear-gradient(top, #b42121, #5e1111);
background-image: -o-linear-gradient(top, #b42121, #5e1111);
background-image: linear-gradient(#b42121, #5e1111);
border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
-webkit-font-smoothing: antialiased;
}
.btn-custom-primary {
background-color: hsl(193, 32%, 49%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b8d3da", endColorstr="#5493a4");
background-image: -khtml-gradient(linear, left top, left bottom, from(#b8d3da), to(#5493a4));
background-image: -moz-linear-gradient(top, #b8d3da, #5493a4);
background-image: -ms-linear-gradient(top, #b8d3da, #5493a4);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8d3da), color-stop(100%, #5493a4));
background-image: -webkit-linear-gradient(top, #b8d3da, #5493a4);
background-image: -o-linear-gradient(top, #b8d3da, #5493a4);
background-image: linear-gradient(#b8d3da, #5493a4);
border-color: #5493a4 #5493a4 hsl(193, 32%, 41.5%);
color: #333 !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.49);
-webkit-font-smoothing: antialiased;
}
#thumbnail-font{
font-size:small;
}
Thank you.
Try using float:right to sent .form-search to the right of the header.
.form-search {
float:right;
}
Firefox version 19 is giving me problems with spacing between an input field and a button. I would like the input button to appear to be inside the form background, and vertically centered, but the button is larger in Firefox than in Chrome or IE9 so it touches with the bottom of the form background. I am seeing this on a 1600x900 display. It looks fine on Chrome and IE9. Here is the jsfiddle http://jsfiddle.net/gyFS4/1/
HTML
<div id="signUp">
<form action="" method="post" id="signup">
<input type="text" class="left" id="email" name="email" placeholder="Enter your email address" value="">
<input type="submit" id="notify-me" class="button" value="Sign me up!">
</form>
</div>
CSS
form {
width: 406px;
margin: 0px auto;
margin-top: 32px;
background: #ffffff;
height: 46px;
border-radius: 22px;
-moz-box-shadow: 0px 0px 0px 6px rgba(255, 255, 255, 0.4);
-webkit-box-shadow: 0px 0px 0px 6px rgba(255, 255, 255, 0.4);
box-shadow: 0px 0px 0px 6px rgba(255, 255, 255, 0.4);
}
#email {
margin-left: 16px;
margin-right: 16px;
height: 36px;
width: 240px;
font-size: 1em;
color: #202020;
background: transparent;
border: none;
}
#email:focus {
outline: none;
}
.button {
margin-top: 3px;
background-color: #c3d753;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c3d753), color-stop(100%, #a7ba3f));
background-image: -webkit-linear-gradient(top, #c3d753, #a7ba3f);
background-image: -moz-linear-gradient(top, #c3d753, #a7ba3f);
background-image: -ms-linear-gradient(top, #c3d753, #a7ba3f);
background-image: -o-linear-gradient(top, #c3d753, #a7ba3f);
background-image: linear-gradient(top, #c3d753, #a7ba3f);
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
border:1px solid #82922d;
display:inline-block;
color:#ffffff;
font-family: Open Sans, sans-serif;
font-size:1em;
font-weight: 400;
padding:8px 16px;
text-decoration:none;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.button:hover {
background-color: #daf159;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #daf159), color-stop(100%, #a7ba3f));
background-image: -webkit-linear-gradient(top, #daf159, #a7ba3f);
background-image: -moz-linear-gradient(top, #daf159, #a7ba3f);
background-image: -ms-linear-gradient(top, #daf159, #a7ba3f);
background-image: -o-linear-gradient(top, #daf159, #a7ba3f);
background-image: linear-gradient(top, #daf159, #a7ba3f);
}
.button:active {
background-color: #c3d753;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a7ba3f), color-stop(100%, #c3d753));
background-image: -webkit-linear-gradient(top, #a7ba3f, #c3d753);
background-image: -moz-linear-gradient(top, #a7ba3f, #c3d753);
background-image: -ms-linear-gradient(top, #a7ba3f, #c3d753);
background-image: -o-linear-gradient(top, #a7ba3f, #c3d753);
background-image: linear-gradient(top, #a7ba3f, #c3d753);
-moz-box-shadow:inset 0px 1px 3px rgba(0, 0, 0, 0.7);
-webkit-box-shadow:inset 0px 1px 3px rgba(0, 0, 0, 0.7);
box-shadow:inset 0px 1px 3px rgba(0, 0, 0, 0.7);
}
You need to specify a height and width on .button class.
.button {
...
width:125px;
height:40px;
}
The above looks good to me. Adjust to your tastes.
http://jsfiddle.net/gyFS4/10/
Try:
#-moz-document url-prefix() {
form {
padding: 0px 0px 3px;
}
}
I just looked at your site in Firefox 19 and it looked fine. But that maybe because my browser picked a font as I don't have the "Open sans" font on my computer.
Usually the problem you're describing is caused by the parent elements width being too small. Make sure you are adding each child elements width and both sides of all margins, borders, and padding. And as the button is being auto sized based on the font you may want to use firebug's "Layout" tab to see what the actual size of the button is. Also to avoid the font problem use a font that is on all computers, or use "#font-face" to give the visitors computer the font it needs to use (as long as the font isn't copyrighted).
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