I have few css clases that uses properties like below:
.rfs_left_btn
{
width: 176px;
height: 20px;
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0%, #fafafa 48%, #f1f1f1 50%, #e9e9e9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(48%,#fafafa), color-stop(50%,#f1f1f1), color-stop(100%,#e9e9e9));
background: -webkit-linear-gradient(top, #fefefe 0%,#fafafa 48%,#f1f1f1 50%,#e9e9e9 100%);
background: -o-linear-gradient(top, #fefefe 0%,#fafafa 48%,#f1f1f1 50%,#e9e9e9 100%);
background: -ms-linear-gradient(top, #fefefe 0%,#fafafa 48%,#f1f1f1 50%,#e9e9e9 100%);
background: linear-gradient(top, #fefefe 0%,#fafafa 48%,#f1f1f1 50%,#e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e9e9e9',GradientType=0 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* Drop shadow*/
-webkit-box-shadow: 0px 1px 1px #cecece;
-moz-box-shadow: 0px 1px 1px #cecece;
box-shadow: 0px 1px 1px #cecece;
margin-bottom: 5px;
}
When creating a StyleBundle like below:
StyleBundle bundle_cssSession = new StyleBundle("~/Css/bundle_session");
bundle_cssSession.Include("~/Styles/_catalog.css");
The System.Web.Optimization.Styles.Render("~/Css/bundle_session") fails with the following error:
/* Minification failed. Returning unminified contents.
(2196,14): run-time error CSS1036: Expected expression, found '0'
*/
If I remove the multiple 'background' properties (and leave just one of them) the minification works.
Is there a solution to use the StyleBundle with CSS3 properties like the ones above?
Thank you.
There are known bugs in the Optimization namespace that cause it to fail on CSS3. The bug reports are here and here. The only advice I can offer is to either compress them yourself and give the style bundle the .min file to use when serving optimised content or use a different minification method.
Maybe, it can be a wrong mode to do (or a 'gambiarra', like we say in Brasil), but I fixed it moving the gradients tag to inline.
Related
So I'm trying to do some quick prototyping with Bootstrap and I'd like to use the purple theme that's in action over on the Bootstrap site, however I can't seem to find where the styles are hidden. For example, .bs-docs-header gets no styling by default. In fact, I can't even find styling for .bs-docs-header in any of the CSS.
This is how it looks over on the Bootstrap site:
And this is how it looks over on my site:
No idea where those styles are coming from, or aren't. Any help getting this to work would be appreciated.
Thanks in advance.
The bootstrap site has a reference to docs.min.css which contains this:
.bs-docs-header {
position: relative;
padding: 30px 15px;
color: #cdbfe3;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.1);
background-color: #6f5499;
background-image: -webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));
background-image: -webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);
background-image: -o-linear-gradient(top,#563d7c 0,#6f5499 100%);
background-image: linear-gradient(to bottom,#563d7c 0,#6f5499 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
background-repeat: repeat-x;
}
I have two css file.I have a class following in one css below
input[type="submit"], input[type="button"], .butLink {
padding: 3px 9px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
font-weight: bold;
cursor: pointer;
color: #FFFFFF;
background: #A5BD24;
background: -moz-linear-gradient(top, #A5BD24 0%, #7DAC38 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A5BD24), color-stop(100%,#7DAC38));
background: -webkit-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
background: -o-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
background: -ms-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5bd24', endColorstr='#7DAC38',GradientType=0 );
background: linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
border: 1px solid #781;
}
Now I want to change this style from another css file.I tried following below which isnt working -
input[type="submit"], input[type="button"], .butLink
{
background-color:#000 !important;
}
Any Idea?
Writing background will override previously defined properties.
Write:
input[type="submit"], input[type="button"], .butLink{
background:#000;
}
Try using the background rule instead of background-color, and make sure that your stylesheets are in the correct order in the <head> of your HTML. If they are in the correct order, the rule should not need the !important.
You can do it easily.
Option one: If you apply this css rule for the particular page so use internal css .Add this rule within the header tag like this
<style>
input[type="submit"], input[type="button"], .butLink
{
background-color:#000 !important;
}
</style>
It will perfectly works because internal css overwrite the external css rule.
Option two: If you apply this css rule for the all pages so use external css .Add this rule after the last css property:value;like this
color: #FFFFFF;
background: #A5BD24;
background:#000;/* This will overwrite with the previous background property value #A5BD24;
Hope the answer!
I've got a PIE folder in my libraries directory, and css3pie module folder in my modules directory.
I've got the following css in my layout.css:
#block-block-1, #block-block-7, #triptych, #block-block-8 {
border: 1px solid #EEEEEE;
padding: 10px 20px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEEEEE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEEEEE), to(#FFFFFF));
background: -webkit-linear-gradient(#EEEEEE, #FFFFFF);
background: -moz-linear-gradient(#EEEEEE, #FFFFFF);
background: -ms-linear-gradient(#EEEEEE, #FFFFFF);
background: -o-linear-gradient(#EEEEEE, #FFFFFF);
background: linear-gradient(#EEEEEE, #FFFFFF);
-pie-background: linear-gradient(#EEEEEE, #FFFFFF);
behavior: url(/../libraries/pie/PIE.htc);
}
I've enabled the module and have the following option selected: Use theme settings
Use selector settings from theme info file.
The rounded corners are not working in IE, but they are working in Firefox. What am I missing?
This site uses css3pie and it's meant to be working, but for me, on IE8 the corners are not rounded.
Perhaps try removing the first forward slash in your behavior line and see if that helps.
Try adding a position: relative into you CSS statement. I've had that issue a couple of times and it's normally resolved by doing that. Further information can be found at: http://css3pie.com/documentation/known-issues/.
I wish do a rectangle in CSS with graceful degradation to work in IE8+. And work fine in Chrome, Firefox and Safari browsers.
Supposed HTML Tag:
<span class="tag tag-gray">FRETE GRÁTIS</span>
See sample:
http://imageshack.us/photo/my-images/850/roundcutcorner.png/
Thank's
Pure CSS Solution
Here's the jsFiddle example with comparison to original image and the CSS:
span.tag {
margin:4px 5px;
position:relative;
border-radius:5px;
background:red;
display:inline-block;
padding:.6em 4.5em;
text-align:center;
}
span.tag-gray {
background: #7c7d80; /* Old browsers */
background: -moz-linear-gradient(top, #7c7d80 0%, #7c7d80 50%, #66686b 51%, #66686b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c7d80), color-stop(50%,#7c7d80), color-stop(51%,#66686b), color-stop(100%,#66686b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* IE10+ */
background: linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c7d80', endColorstr='#66686b',GradientType=0 ); /* IE6-9 */
color:#fff;
font-family:sans-serif;
font-size:.7em;
font-weight:bold;
}
span.tag:after {
/* right, height, and width should equal eachother */
right:-18px;
height:18px;
width:18px;
content:".";
display:block;
position:absolute;
top:0;
font-size:0;
overflow:hidden;
background:#fff;
-moz-transform-origin:0 0;
-moz-transform:rotate(-45deg) translate(-50%, -50%);
-webkit-transform-origin:0 0;
-webkit-transform:rotate(-45deg) translate(-50%, -50%);
transform-origin:0 0;
transform:rotate(-45deg) translate(-50%, -50%);
}
Assuming the HTML is:
<span class="tag tag-gray">FRETE GRÁTIS</span>
Gotchas
To get it to work with older (and other) browsers, you may want to add the prefixed versions of border-radius
To get it to work in non-webkit/moz browsers, simply add the corresponding prefixed versions of transform and transform-origin
The "cut" cannot be transparent, but you can make it appear to be by setting it to the same color(s) as the background
Due to using border-radius, you cannot set div.cut's overflow to hidden as the div's background will bleed through along the outer edge of the radius, so you have to make sure you have enough room outside of the element to avoid covering other elements/text. A workaround is to set the background to a gradient and have the outer edge be transparent (aka right side)
a funny but probably not the best solution is to cover your image with triangle div using position-absolute and z-index :). To round your corners you can use border-radius (but it will not work in IE8 unless you add js to support css3 properties)
Is this fiddle something similar to what you need?
Here is the code for it
`.tag.tag-gray {
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 300px;
-moz-border-radius: 5px;
-moz-border-radius-topright: 300px;
border-radius: 5px;
border-top-right-radius: 300px;
}`
Try this:
<div class="rounded">FRETE GRÁTIS<div class="tri"></div></div>
CSS:
.tri {
width: 0;
height: 0;
border-top: 0px solid transparent;
border-bottom: 20px solid transparent;
border-right:20px solid #ffffff;
position:absolute;
top:0px;
right:0px;
}
.rounded {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 6px 20px;
background: -moz-linear-gradient(
top,
#c0c0c0 0%,
#333333);
background: -webkit-gradient(
linear, left top, left bottom,
from(#c0c0c0),
to(#333333));
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 0px solid #000000;
width:120px;
position:relative;
}
And for IE8, I'd use CSS3 PIE
If you're okay with using one image, you could make a simple white triangle image with a transparent background (PNG 24), then do something like this:
.tag-grey {
background: grey url(triangle.png) no-repeat right top;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
It's not pure css, but it uses a standard CSS method. The upshot is that this will work in IE7 and up, just without the other rounded corners.
I'm using javascript to dynamically add spans to the html on my page, and giving those spans the class "query_error" and a dynamic title based on the value of err_msg, e.g,
"<span class=query_error title='" + err_msg + "'>" + replacement + "</span>"
(where "replacement" is simply the piece of text that has the query error). All this works fine, and I can apply css to the span with
.query_error{
font-family: "Monaco", "Inconsolata", Courier, monospace;
font-size: 15px;
font-weight: bold;
color: red;
}
But I can't figure out how to add css to the title itself so I can change the font color, size, etc. Is this possible (without using a plugin)?
TIA
With CSS3 you can now target the [title] attribute but as to a real world solution i don't see any. I would rather suggest you used a plugin such as tipsy for that task, as it is more cross browser supported and less fuss.
This is a demo of a styled [title] attribute:
CSS
span:hover {
color: red;
position: relative;
}
span[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
Demo: http://jsfiddle.net/BvGHS/
Short answer, nop. The title attribute is that, a title and can't be styled.
Long answer, you probably need a tooltip plugin for this which replaces the title with an html element.
The tooltip which appears when you move your cursor over an element with the optional title attribute is a browser feature and can, as far as I know, not be styled using CSS.
You can create your own custom tooltips using JavaScript. There are a couple of plug-ins and tutorials on the web.