css3

问题 I have a card built with CSS Grid layout. There might be an image to the left, some text to the right top and maybe a button or a link at the right bottom. In the code below, how can I make the green area take up as much space as possible and at the same time make the blue area take up as little space as possible? The green should push the blue area down as far as possible. https://jsfiddle.net/9nxpvs5m/ .grid { display: grid; grid-template-columns: 1fr 3fr; grid-template-areas: "one two"

问题 I use the following HTML code: <div id="list"> <div class="row"> <div class="col-md-3">1</div> <div class="col-md-3">2</div> <div class="col-md-3">3</div> <div class="col-md-3">n-times</div> </div> </div> So, I need to display one row with infinity columns by horizontal with scrolling in the bottom of page. How can I do this? So, I tried to set fixed width for list container and have set overflow-x: auto 回答1: It's okay to exceed 12 column units in a row. It causes the columns to wrap, but you

问题 I have this triangle in CSS: .triangle { width: 0; height: 0; border-style: solid; border-width: 200px 200px 0 0; border-color: #007bff transparent transparent transparent; } <div class="triangle"></div> How can I apply a 1px shadow on the hypotenuse line? 回答1: Since box-shadow won't work, you have to apply a drop shadow filter on the triangle: .triangle { width: 0; height: 0; border-style: solid; border-width: 200px 200px 0 0; border-color: #007bff transparent transparent transparent;

问题 I have the following code for my menu: HTML: <div class="container wrapper"> <nav> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">page1</a></li> <li><a href="#">page2</a></li> </ul> </nav> And the CSS: .wrapper{ padding:20px; background:#d3d3d3; height:200px; } .menu{ background:#7F7979; } .menu li{ padding-top: 20px; padding-bottom: 20px; padding-left: 15px; display: inline-block; } .menu li a{ color:white; } nav ul{ list-style:none; margin:0 padding:0; } What I want to

问题 I have found a bug in IE9 but googling for it hasn't helped finding any solution yet. The following works fine in FF 3 + 4, Chrome, Opera and even IE8, but not in IE9. The HTML: <div class="outer"> <p class="inner">Lorem ipsum dolor</p> </div> The CSS: div p { font-size: 1.2em; } div p:after { content: " sit amet"; } div p:after { font-size: 1.3em; } div.outer p:after, div p.inner:after { font-size: 3em; } The "sit amet" is huge in IE9, as it seems to multiply the font-size again and again.

问题 I'm trying to make kind of masonry layout of items using display: flex; It's running good until my items has different sizes: here is example: http://jsfiddle.net/2pL3j07x/1/ I want small items below big items to wrap it around (2 items in a 'row' below big item should easly fit but only 1 goes there) Is it possible with css flex to do so? 回答1: I know you don't want to use transforms, but this works exactly as described and actually has better browser support than flexbox does (although as

问题 I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of

问题 I have a mobile app created using HTML/JS(jQuery)/CSS and I'm looking to include page transitions that mimic those found in jQuery Mobile (in specific the flip transition) without the need to include the whole jQuery Mobile Framework. These animations appear to be CSS3 transitions tied to jQuery triggers but I have no idea where to start. Does anyone have any ideas? Any help would be greatly appreciated! 回答1: Download the non-minified version of the CSS file for jQuery Mobile and copy out the

问题 I have a mobile app created using HTML/JS(jQuery)/CSS and I'm looking to include page transitions that mimic those found in jQuery Mobile (in specific the flip transition) without the need to include the whole jQuery Mobile Framework. These animations appear to be CSS3 transitions tied to jQuery triggers but I have no idea where to start. Does anyone have any ideas? Any help would be greatly appreciated! 回答1: Download the non-minified version of the CSS file for jQuery Mobile and copy out the

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed last year . I am trying to see if its possible to achieve this kind of shadow using pure css3: I quickly mocked this up in photoshop. I am looking for that curved shadow effect. I know its possible to get straigt shadow effects. I tried to look on google I dont even know what to call that