css3

问题 I have a button with a linear-gradient background, orange border, and some text. When I hover over the button, I want the background to become transparent without changing the other properties of the button. I've tried to transition the opacity to 0, but obviously, this will hide the border and text. I've also tried transitioning the background, but it does not work because I don't have an endpoint to transition to since it needs to be transparent. body { background-color: darkblue; } .button

问题 I have a simple "pulsating" effect on the play-button (which is an anchor tag), using CSS3 and keyframes. While it works flawlessly in Chrome and Safari, it doesn't seem to be working in Firefox. Does anyone have an idea on why? li > a { -webkit-animation: pulsate 3s ease-in-out; -moz-animation: pulsate 3s ease-in-out; -o-animation: pulsate 3s ease-in-out; animation: pulsate 3s ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation

问题 Why do these 3D CSS planes overlap in Firefox and Chrome and not in Safari? http://jsfiddle.net/yNfQX/6/ ..and how do I make it behave like safari? Safari & Firefox Preview 回答1: Looks like a bug... from https://bugzilla.mozilla.org/show_bug.cgi?id=689498: Bug 689498 - Intersecting planes are not z-ordered properly Alistair MacDonald 2012-04-12 12:22:25 PDT Safari & Mobile Safari no longer have this problem. The problem still exists in Chrome and Firefox. Broken: Firefox 14.0a1 (2012-04-12)

问题 Hey guys I was wondering if there was a way of adding a stroke and shadow to text, I can get it working in Chrome and Safari as webkit supports text-stroke and text-shadow. I can get the stroke to display in Firefox but that is using text-shadow and playing with the offset. So does anyone know a way around this issue. 回答1: The text-stroke property isn't part of the standard CSS spec, so it's best to avoid it - Chrome would be well within their rights to pull out it at any time. You're right

问题 Okay, so this is more of a question that has lots of solutions that are not CSS, but I'm looking for doing this more from a theoretical perspective. I have an application for it, but its not worth coding it out in any other way. The (Fun) Question How do you color the text of an element using the text of the element? I have an element, all on it's own, which will contain a hex value for a color, and I want the text to be that color, but I want to do it only using CSS (likely only can be done

问题 Is there any option or solution to pass Numbers is Bootstrap 3 Glyphicons like Thanks 回答1: Is there any option or solution to pass Numbers is Bootstrap 3 Glyphicons? In short, no. Here are all the available glyphicons. Glyphicons either come as an image file or font set. Either way, they are not extensible. They are individual icons. It's like saying, I know there's a character set of a-z, but can it also have a icon of a puppy. Or I know this is an image of an apple, but can the pixels

问题 I have a button image I'm using as a background image for some links. The background image has rounded corners. I want to use a css drop shadow instead of putting the drop shadow in the image The problem is, the drop shadow appears to be drawn around the element. Although I kind of expected to see the drop shadow color through the transparent parts of the background image, I'm seeing the background color instead (see this jsfiddle). My actual goal is a little more complex, but if I can satify

问题 I recently read this article about creating a pure CSS modal box: Creating a modal window with HTML5 & CSS3 I've tested the code and it works great. I'm using it for my site's contact and register/log-in pages. There is one part of the code I haven't fully grasped. How does this... <a href="#close" title="Close" class="close">X</a> ... close the box? There is nothing in the CSS that hides or removes an element with a close class, nor any similar function targeting href , #close or title . It

问题 I have an H3 heading that I'd like to style as having a particular background color, but without having the element's background take up the full width of the parent element. Seeing as H3 is by default a block element, my style would need to change the element to an inline-block element, or just an inline inline element like so: h3 { background-color: #333; color: white; display: inline-block; } This will work fine, but only if it is immediately followed by a block element. I do not want to

问题 I have an element with two classes: <div class="class1 class2"></div> .class1 {transition: background-color 0.4s;} .class2 {transition: top 1s;} The problem is that the transition of class2 overwrites the transition of class1 . I can't use .class2 {transition: all 1s} because the transition duration must be different. I also don't want to duplicate the code from class1 to class2 because class2 can be applied to other elements as well. Is there a way to add transitions to an element without