css3

问题 I have a table with some th tags that contain text that is rotated via CSS. The problem I have is that the th is not expanding vertically with the content. Here is a basic example of the markup I have: HTML: <table> <thead> <th> <div class="rotated-text">Some Text</div> </th> <th> <div class="rotated-text">Some More Text</div> </th> <th> <div class="rotated-text">Even More Text</div> </th> </thead> </table> CSS: .rotated-text { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

问题 I am using the excellent animate.css library for animations. I was wondering if its possible to create a "peek in" and "peek out" effect that is similar to the SlideIn/SlideOut but with the following difference: slideOutRight +-------------+ +-------------+ | | | | | | | | | +---------+ | +---+----+ | | anim | | | anim | | +---------+ | +---+----+ | | | | +-------------+ +-------------+ peekOutRight +-------------+ +--------------+ | | | | | | | | | +---------+ | +----+ | | anim | | | an| | +

问题 I am using the excellent animate.css library for animations. I was wondering if its possible to create a "peek in" and "peek out" effect that is similar to the SlideIn/SlideOut but with the following difference: slideOutRight +-------------+ +-------------+ | | | | | | | | | +---------+ | +---+----+ | | anim | | | anim | | +---------+ | +---+----+ | | | | +-------------+ +-------------+ peekOutRight +-------------+ +--------------+ | | | | | | | | | +---------+ | +----+ | | anim | | | an| | +

问题 I am using column count to allow my text to flow into two different columns but the top of the first column (leftmost) is lower than the other column? #col { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } <div id="col"> <h3> Options </h3> <h3> Features and Benefits </h3> <h3> Specifications </h3> <h3> hey </h3> <h3> 30 Years Experience </h3> </div> I have included a limited section of the code, and even when I fill it with text, there is still a difference in the top of the

问题 I have this background image that is 175x175 but I am trying to make a "CD" cover out of it. In the code below (jsFiddle available), you will see it is not resized but merely "cropped". How do I fix this? HTML: <div class="cd"><div class="hole"></div></div> <p>I want the image above to be resized to 75x75... but it's not</p> <img src="http://userserve-ak.last.fm/serve/126/23679395.jpg" alt="Test" /> <p>Actual image size above.</p> CSS: .cd { -moz-border-radius: 63px; -webkit-border-radius:

问题 I'm making a css3 loading animation for a mobile website. The loader works just fine by using the following HTML / CSS: HTML: <div class="loader"></div> CSS: .loader { background-color: rgba(0,0,0,0); border: 6px solid rgba(0,0,0,0.75); opacity: 0.5; border-top: 6px solid rgba(0,0,0,0); border-left: 6px solid rgba(0,0,0,0); border-radius: 60px; box-shadow: 0 0 5px rgba(0,0,0,0.5); width: 60px; height: 60px; margin: 0 auto; -moz-animation: spin 1s infinite linear; -webkit-animation: spin 1s

问题 I have tried to create a dropdown menu, but for some reason, but sub menu items do not appear directly below the parent. Here is my fiddle: http://jsfiddle.net/oampz/Lf3u3/2/ If you hover over a year, you can see the movie genres appear to the left. HTML: <nav class="site-nav"> <ul class="menu-nav wrap menu menu--hor"> <ul id="main-nav"> <li class="menu-nav--home main-link"> <a href="index.html" title="home"></a> </li> <li class="menu-border drop-down nav-dropdown"><a>2014</a> <ul class=

问题 I've got to this point in which I'm trying to do a hilite animation on an element which I can't move or modify its boundings, so i used an outline in addition to its background color to have an animation area bigger than the element itself (here's a sample): @keyframes hilite { 0% { background-color: transparent; outline: #ffffff solid 10px; } 20% { background-color: #F6F6BC; outline: #F6F6BC solid 10px; } 100% { background-color: transparent; outline: #ffffff solid 10px; } } But now i'm

问题 I have an issue with my CSS transition. I created a user profile design, and when a user hovers over the profile photo, the border changes its width from 3px to 10px. This results in the entire site shaking on the transition. Shaking can be seen here! CSS #timeline-user > .timeline-user-border{ border: 3px solid #2cbbee; padding: 7px; border-radius: 35px; width: 50px; height: 50px; -webkit-transition:all 0.2s ease; } #timeline-user > .timeline-user-border:hover{ border: 10px solid #2cbbee;

问题 So I have a html structure like this html, body { height: 100%; margin: 0; padding: 0; } #container { height: 100%; min-width: 900px; min-height: 650px; background: #dddbd9 url('../images/bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; } #content { clear: both; height: 345px; position: relative; margin: 0 auto; width: 790px; padding: 20px; overflow: hidden; } #bottomBar { height