css3

问题 In my external css file, #slider { width:1200px; height:800px; margin:0 auto; } works, but #slider { max-width:1200px; max-height:800px; margin:0 auto; } does not. It gives 0 height. I am on latest chrome browser. What am I doing wrong? Also -webkit-calc(100% - 100px) or calc(100% - 100px) doesnt work. I am guessing none of css2/css3 properties are working. This html file I am using is a part of a complex html with many css and javascript includes. Is css2 being blocked or something in some

问题 I am trying to achieve a look on a Wordpress website which has a moving smoke effect in the background like this example http://hk.qeelin.com/collections/ I have seen that this is in Javascript, but I am unsure how it's working? Does anybody know how this look can be achieved please? 回答1: Is an iframe, you can search by bg-video-player source code. Is a youtube video. 回答2: This website uses two different loop videos to achieve such effect: There are two other ways to do that that comes to my

问题 I coded horizontal nav with superfish. It working fine when not added to my page. When added to my page its not getting displayed. my page here is the fiddle for navigation demo nav 回答1: You need to remove position: relative from #wrapper . Alternatively, you can add z-index: 1 to #chromemenu . You should read this to understand z-index : https://developer.mozilla.org/en/understanding_css_z-index 来源： https://stackoverflow.com/questions/5615502/superfish-horizontal-nav-bar-not-getting

问题 .header { display: flex } .logo, .contribute, .class 1, .class 2 { display: inline-block; margin: auto 0; } <header class="header"> <div class="logo"> </div> <nav </nav> <div class="contribute"> </div> <div class="class 1"> </div> <div class="class 2"> </div> </header> In this suppose .header has display: flex; set. .logo , .contributor , .class 1 , .class 2 has display: inline-block; set and are child to parent .header class, which is flex. How can we make sure that the .class 1 and .class 2

问题 What's the priority order on a CSS3 style sheet? I mean, imagine that we have different settings for the same content inside the CSS. Which one will the browser choose and apply? Is this something related to the position of the code inside the CSS? I mean from top to bottom? 回答1: The order that the Browser loads the CSS tags in will determine which value is taken. So, if you put the CSS files at the end of your document, then they will be applies in order, one by one, overwriting any existing

问题 I want to create a isometric game board using css and 3d transforms. See my codepen for my current work: https://codepen.io/eguneys/pen/NbYZgj. Here I paste my css code: section { background: #cccccc; height: 600px; width: 760px; } .cg_board { position: relative; background: #24201F; height: 600px; width: 600px; transform-style: preserve-3d; transform: translateX(100px) rotateX(60deg) rotateZ(45deg); } .isometric { perspective: 5000px; } .house { position: absolute; z-index: 1000; } .tile {

问题 I want to create a isometric game board using css and 3d transforms. See my codepen for my current work: https://codepen.io/eguneys/pen/NbYZgj. Here I paste my css code: section { background: #cccccc; height: 600px; width: 760px; } .cg_board { position: relative; background: #24201F; height: 600px; width: 600px; transform-style: preserve-3d; transform: translateX(100px) rotateX(60deg) rotateZ(45deg); } .isometric { perspective: 5000px; } .house { position: absolute; z-index: 1000; } .tile {

问题 I tried to draw a svg circle. As i need to animate it using stroke-dashoffest the circle's stroke fills only in anti-clockwise direction. Is there any way to move the animation in clock wise direction. My Code: <svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"> <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> <g> <title>Layer 1</title> <g> <path stroke="blue" id="svg_1" d="m66.75,11.75a54,52 0 1 0 0.00001,0l-0.00001,0z" opacity="0.5" stroke-width="5"

问题 How to design the curved style for the image in 3d! The original image has to be show like below image. Because In 3d rotation I need to show it in dynamically like the below image. For editing in Photoshop for each image has take much time so it need to be manipulate at run time. div.img img{ margin: 5px; padding: 5px; height:250px; width: 500px; float: left; text-align: center; } <div class="img"> <img src="http://po-web.com/wp-content/uploads/2013/12/it-solution1.jpg" alt="Klematis"> </div

问题 I have a div defined inside a div, the outer div has certain opacity, this leads to the inner-element whose z-index is higher than it's container appear dim.IS there way to not make the inner div appear dim even though the outer div is div. Here's the code <body> <style> #cont{ background-color:yellow; width:900px; height:900px; margin:auto; padding:40px; position:relative; } #top{ position:relative; background-color:orange; width:100%; padding:10px; } #cont1{ background-color:black; width