I cannot make #font-face work on IE.
I was trying many ways suggested but nothing seems to work.
I was generated my font here: fontsquirrel
I added the mime type '.woff' for this website.
CSS:
#font-face {
font-family: 'fbahava_regularregular';
src: url('http://2send.co.il/Content/Fonts/fbahava-regular-webfont.eot');
src: url('http://2send.co.il/Content/Fonts/fbahava-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://2send.co.il/Content/Fonts/fbahava-regular-webfont.woff') format('woff'),
url('http://2send.co.il/Content/Fonts/fbahava-regular-webfont.ttf') format('truetype'),
url('http://2send.co.il/Content/Fonts/fbahava-regular-webfont.svg#fbahava_regularregular') format('svg');
font-weight: normal;
font-style: normal;
}
.btn_submit {
font-family: 'fbahava_regularregular' ,Arial;
height: 56px;
padding: 0px 35px;
background-image: url('../images/btn_pix.png');
border: 0 solid white;
font-size: 48px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 1px 0 #BE331B inset, 1px 0 0 #A42A15 inset, -1px 0 0 #A42A15 inset, 0 -1px 0 #8C200E inset, 0 2px 0 rgba(255, 255, 255, 0.3) inset, 0 0 4px rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 #BE331B inset, 1px 0 0 #A42A15 inset, -1px 0 0 #A42A15 inset, 0 -1px 0 #8C200E inset, 0 2px 0 rgba(255, 255, 255, 0.3) inset, 0 0 4px rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 0 #BE331B inset, 1px 0 0 #A42A15 inset, -1px 0 0 #A42A15 inset, 0 -1px 0 #8C200E inset, 0 2px 0 rgba(255, 255, 255, 0.3) inset, 0 0 4px rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
I am stuck, any idea will be appreciated.
you should single quote you're reference:
.btn_submit{
font-family: 'fbahava_regularregular' ,Arial;
}
Related
I have the following css for headers:
h1 {
color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
This is the css I use for print:
#media print {
h1 {
-webkit-print-color-adjust:exact;
}
}
When I try to print it with Chrome, I only get a blank box.
Here is the solution:
h1 {
text-shadow: 1px 0 #000, 0 1px #000, -1px 0 #000, 0 -1px #000;
}
#media print {
-webkit-filter: drop-shadow(1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 -1px 0 #000);
text-shadow: 1px 0 #000, 0 1px #000, -1px 0 #000, 0 -1px #000;
}
My CSS skills are pretty beginner...
I'm unable to override the font color for a link. I want the font color for the link with class="button2" to be white but it stays blue no matter what I try. How can I get the 'color' in my button2 style to be respected?
(it is a Drupal 7 site with UberCart)
Here is the style:
.button2 {
height: 60px;
padding: 10px 15px;
/*background: #4479BA;*/
background: #00CC66;
color: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/*border: solid 1px #20538D;*/
border: solid 1px #003319;
/*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);*/
text-shadow: 0 -1px 0 rgba(121, 121, 121, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
Firebug shows this CSS from another style sheet that appears to be overriding my style
a:link, a:visited, a:active, a.active, li a.active {
color:#2079d2;
}
Did you add this?
color: #FFF !important;
The important part makes it override the other stuff.
I have a div with borders with different colors. The design that im working towards blends the point at which these 2 borders join. Can this be done with CSS?
<div class="panel">
dfds
</div>
body {
background: green;
}
.panel {
margin: auto;
width: 300px;
height: 300px;
background: white;
border-radius: 10px;
padding: 10px;
border-right: 6px solid #D7D7D7;
border-bottom: 6px solid #B9B9B9;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
http://codepen.io/anon/pen/XJEWqp
Below you can see the bottom right corner has a sharp diagonal join:
This is the same detail in the design that im creating:
Howsabout this:
body {
background: green;
}
.panel {
margin: auto;
width: 100px;
height: 100px;
background: white;
border-radius: 10px;
padding: 10px;
-webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
-moz-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
}
<div class="panel">
dfds
</div>
Used red and blue to highlight the overlapping
You can use a border-image for this purpose.
div {
margin: 30px;
width: 50px;
height: 50px;
background: #DDD;
border: 10px solid transparent;
-webkit-border-image: url('http://i.imgur.com/7qsGJvm.png') 30 30 round;
-o-border-image: url(http://i.imgur.com/7qsGJvm.png'') 30 30 round;
border-image: url('http://i.imgur.com/7qsGJvm.png') 30 30 round;
}
<div></div>
What would be the best approach of creating other colors of link buttons, without copying the entire thing again and again.
I already have a blue button.. now i want to have another orange or green button
.blue-button {
padding: 10px 15px;
background: #4479BA;
color: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.blue-button:hover {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
.blue-buttonk:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #2E5481;
border: solid 1px #203E5F;
}
You can separate the color and background from the button and create another class just for the those properties. i.e. .blue and .red
Then you can move those properties inside those classes applying also the :hover and :active selectors.
In case you want to change color, change the html and change the class blue into red.
HTML
<div class="button blue">Click me</div>
CSS
.button {
display:inline-block;
padding: 10px 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.button:hover {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
.button:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
border: solid 1px #203E5F;
}
.button.blue{background: #4479BA; color: #FFF;}
.button.blue:hover{ background: #356094; }
.button.blue:active { background: #2E5481; }
.button.red{background: red; color: yellow;}
.button.red:hover{ background: green; }
.button.red:active { background: pink; }
DEMO http://jsfiddle.net/a_incarnati/douv8oby/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
The code that I currently have is this:
.button2 {
margin-left: 10px;
background-color: lightgreen;
width: 180px;
height:100px;
padding: 50px,60px;
color: rgba(20, 15, 30, 0.8);
text-transform: uppercase;
border: 1px solid green ;
font-weight: bold;
font-size: 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9);
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-transition: background 0.2s ease-out;
.button2:hover {
background-color:#FF0000;
}
The problem, however, is that whenever I hover my mouse over the div, the background color of the box does not change to red.
How can I make it so that whenever I hover over divs with class button2 it will change to the background color red? Is there a problem with the formatting?
My current HTML is:
<html>
<div class=button2></div>
</html>
Simple syntax error - you forgot to close .button2 {}
jsFiddle example - it works now
Updated CSS
.button2 {
margin-left: 10px;
background-color: lightgreen;
width: 180px;
height: 100px;
padding: 50px,60px;
color: rgba(20, 15, 30, 0.8);
text-transform: uppercase;
border: 1px solid green;
font-weight: bold;
font-size: 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9);
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-transition: background 0.2s ease-out;
}
.button2:hover {
background-color: #FF0000;
}
As a side note, it's always helpful to view these errors in the F12 dev tool.