css3

问题 I'm just getting into CSS3 transitions (about time!) and I witness some strange behavior in Opera 11.60. I use a transition to change an element from background:none to background:#fff . However, the transition actually goes through black/dark grey before reaching its target. Now, I can understand why this happens - the opacity and the color are animated at the same time, and since the color used to be none , Opera regards it as #000 . Looks like a bug to me. Is there a way to fix this, save

问题 I am in the process of creating a simple placeholder page to announce a new website. The page consists of nothing other than a centered background logo image a "catch phrase" immediately below that image I thought this would be easy - I place a positioned background image with its size specified and then place an absolutely positioned h1 header to get the "catch phrase" right below the background image. * { color:white; font-family:arial; margin:0 !important; padding:0 !important; } body {

问题 I have a page layout in which I have a fixed header which can have any height and a footer positioned at the bottom of the page. I'm looking for a css solution so that the content div fills the remaining space (vertically). In the jsfiddle below I've tried to do this, but as you can see the content is behind the footer. HTML: <main> <header> <ol> <li>bar</li> <li>foo</li> </ol> </header> <section> <div class="content"><div> </section> <footer></footer> </main> CSS: header { background-color:

问题 I'm trying to have 3 different logo sizes ( small , med , big ) based on different screen sizes. Here's my code: @media screen and (max-width: 487px) { .site-header .site-branding { background-image: url("../images/logo_small.png") !important; } } @media screen and (max-width: 1079px) { .site-header .site-branding { background-image: url("../images/logo_med.png") !important; } } @media screen and (min-width: 1080px) { .site-header .site-branding { background-image: url("../images/logo_big.png

问题 Building a website using Bootstrap3 and I would like for it to work on IE. It seems to be working when I do include respond.js at the bottom of the page but I would like to make sure this is in fact true before I go live with it. My question is simply, does it matter where I include my JS files specifically respond.js? 回答1: From the GitHub page it says: Reference the respond.min.js script (1kb min/gzipped) after all of your CSS ( the earlier it runs, the greater chance IE users will not see a

问题 I've a div like this: .x{ ... } And a sort of "submenu" initially hidden: .x_submenu { ... display:none; ... } The submenu will be visible only when the user is on the x div: div.x:hover .x_submenu {display:block; } Now, I'd like to make it visible with a transaction or an effect that makes the visibility more "slow". Is there a way to achieve that goal, possibly with a cross-browser solution? Thanks, A 回答1: you won't be able to make transition work on 'display' property. You will have to

问题 I want to apply red background color to 1st li only i have tried several method but not able to get what i want: #rightmxmenu > ul > li:first-child > {background-color:#ca212d;} #rightmxmenu > li:first-child > {background-color:#ca212d;} it does not affect anything here is my code and css http://jsfiddle.net/gwdp3/1/ hope any expert can tell me what should i need to change. 回答1: Change this: #rightmxmenu > ul > li:first-child > { background-color:#ca212d; } to this: #rightmxmenu > ul > li

问题 I'm restyling my current project and found a simple way to fade the left and right edges of my div background by using the following. I've been experimenting trying to edit the radius of the centered circle, to make it smaller. I can't seem to alter it, without the whole gradient style disappearing. I'm trying to set the yellow area as the background of the text with less gradual fade to transparent. What do I need to do to get more transparent and less colored circle? background-image:

问题 Hello i got the following issue my following code doesn't work for me and i cant figure out why. I hope you guys can help me. Edit: The submit handler simply doesn't get called. I don't even get the alert message. I wanted to disable the submit button till the form is validated. $('form').validate({ onsubmit: true, debug: true, errorLabelContainer: "#errorBox", rules: { user_email: { minlength: 4, email: true, required: true }, user_textField: { minlength: 3, required: true }, user_phone: {

问题 Usually when I make a gradient I use the colorzilla gradient edtior. By default it generates the CSS for you. Here is an example: background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,