css3

问题 I don't want the styles for the <a> tag. I've found threads like this How to "turn off" jQuery Mobile's styling of <select> drop downs? but I don't want to be adding data-enhance=false to every anchor I have. I was also hoping linkBindingEnabled would work (from http://jquerymobile.com/demos/1.2.0/docs/api/globalconfig.html), as in it wouldn't add custom classes to the <a> tag. I could delete the definitions in the CSS file, but I'd prefer a programmatic way to do it. For example, I comment

问题 I am using CSS Grid and have made the following layout in the codepen found here: https://codepen.io/alexg2195/pen/xLEeMd My issue is that when using repeat(auto-fill, minmax(400px, 1fr)); I end up with a layout that goes beyond just two columns. Is there a way to force two columns but still have the same min auto fill resize behaviors? body { margin: 40px; } .layout { display: grid; grid-gap: 10px; grid-template-columns: 1fr 100px; grid-template-areas: "main btn" "main ."; } .btn { grid-area

问题 Is there a way to force all the items in the last row, of a grid, to fill the row, no matter how many they are? I do not know the number of items that will be in the grid so I cannot target them directly. I tried to use grid-auto-flow: dense , but it is not really helping. This is my question visualized: : div { margin:20px auto; width: 400px; background: #d8d8d8; display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); } span { height: 50px; background: blue; } <div> <span><

问题 I'm trying to make marquee in css that will slow down on hovering over the element. I have done something like this but it doesn't stop the main animation and when the mouse exits the marquee it goes back to it's position as if I didn't do anything. Here's the code in CSS and HTML .prices { background-color: #f5fafd; font-size: 14px; padding: 6px 0; border-bottom: solid 1px #d9d9d9; margin-left: 0; margin-right: 0; } .currency { text-align: center; color: #444444; font-weight: 300; } .marquee

问题 Why, in this example, is the .main element (blue) dividing space only with .aside-1 (yellow) and .aside-2 (pink), and not with all elements? We have a wrapper that is putting all elements occupying one line. In .main we say flex: 3 0px , which I think says, this element will be 3x bigger than the other four elements and will occupy 3/(3+1+1+1+1). However, I've noticed that with a nowrap wrapper the smallest item is .main . And with wrap , it divides with the two closest elements. Can't

问题 The problem is that the transform property's value has multiple part like translate , scale etc. This is a theoretical question about element, let's .loader that has transform:translate(10px, 10px) and in the animation I want to animate the scale property. In this case, the browser will not take the transform:translate(10px, 10px) and will take only the scale . I am looking for a way around this problem. Here is an example to this question. Please, keep attention that I'm not looking for an

问题 Is it possible to use jQuery to animate a webkit translate3d? I read that when using the animate property of jQuery that you must camel case the css properties but in the case of the translate3d this doesn't seem to work. I have the following code that I would like to animate instead of it just happening immediately? $("#main-nav").css('-webkit-transform', "translate3d(0px, " + e + "px, 0px) scale(1)"); For clarification "e" is a variable that is passed to a function that my above code is run

问题 I'm using CSS3 and RGBA to create a white-to-transparent gradient: div { background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(left, rgba

问题 I need to recreate the following design using only CSS : What you're seeing in the picture is the top of a website container - the "links" are part of the main menu. As it stands, I've created the container but I'm not sure how to go about making the slant on the navigation without using an image. For the record: I'd rather not use an image as the chances of the box shadow on the slant matching up with box shadow rendered by the browser are slim-to-none, especially when it comes to multiple

问题 I've played around with responsive flexbox grids, with no media queries. http://jsbin.com/qurumisu/1 (rescale the window to see how it works) It fits as many flex items as it can per row and stretches their width equally to fill the whole line. However, this doesn't help "orphan" items. If the first line fits 5/6 items there is only one left for the second line, making it stretch much wider than it's siblings. I would prefer to avoid this behavior by having the elements divided evenly on the