css3

问题 I want to move a div from left to right, when page is scroll down or up. When page scroll down it should move right and when page is scroll up it should move left. 回答1: See here a little example, a red box will scroll horizontally according to the percentage of the page you scrolled vertically: $(document).ready(function () { var $horizontal = $('#horizontal'); $(window).scroll(function () { var s = $(this).scrollTop(), d = $(document).height(), c = $(this).height(); scrollPercent = (s / (d -

问题 I need to create an input text box with a bottom border and the side borders should span half the height of the input on left and right. Is there an easy way to design this in CSS ? Image is show below: 回答1: Maybe this could be an elegant solution. If you use background then you can specify really nicely where what goes and it improves readability a bit. input[type="text"] { padding: 10px; background: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);

问题 I have following HTML: <ul> <li> <a href="#"> <h2>title</h2> </a> </li> <li> <a href="#"> <h2>title</h2> </a> </li> <li> <a href="#"> <h2>title</h2> </a> </li> </ul> CSS ul { list-style: none; text-align: center; } ul li { position: relative; float: right; margin-right: 20px; width: 30%; } ul li { transition: all 0.3s; } ul li:hover { top: -10px; } ul li> a{ color: red; } The question is the transition does not work with moz, it works on webkit. How do I implement this in a cross browser way?

问题 I am trying to get some buttons on my footer to align to the center but for some reason it does not seem to work. <div class="footer"> <div class="container"> <div class="navbar-text pull-left"> <p> Hello there </p> </div> <div class="Button" align="center"> <a href="#" class="btn btn-warning" onclick="changeLook()">Re</a> <a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a> </div> <div class="navbar-text pull-right"> <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a> <a

问题 This is for web dev. When using a 1px border radius on a circle or a square with really rounded corners, the stroke starts to break. If we were to change it to 2px's it would get better and better the more px we add. But is there a way to fix this problem with a 1px stroke? background: rgba(32, 32, 32, .9); height: 30px; width: 30px; border: 1px solid white; border-radius: 20px; :hover { height: 300px; width: 200px; } Images attached! 回答1: add box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px

问题 Can anyone explain why my media queries break when converting them FROM px TO ems In the body of my document, I have included the following rule font-size: 62.5%, Therefore I would assume that I could convert my media query to FROM 650px to 65em? Changing my media queries to ems breaks the layout As an alternative, can I convert the media query to REMS with a pixel fallback ?? that said, I have no idea how to do this @media screen and (min-width: 650px) { body { font-size: 62%; background

问题 I'm adding a class to a div that adds a box shadow to that div. This happens dynamically via jquery. Now, when the class is added, the shadow effect is added automatically as well, without any effect. Is there a way to add some transition effect via css in this case? HTML: <div id="box"></div> CSS: #box { width: 50px; height: 200px; } .shadow { -webkit-box-shadow: 0px 0px 4px 2px #D50E0E; -moz-box-shadow: 0px 0px 4px 2px #D50E0E; box-shadow: 0px 0px 4px 2px #D50E0E; } 回答1: Yes, simply add the

问题 When I was a child, I used to read all Dragon Ball manga books. The Super Saiyan effect (surrounding aura and lightning) is really cool! Now I have an event page which lists all upcoming events in cards and it looks like this: And here is the code <div class="col-sm-3 col-xs-12 event"> <div class="row hidden-xs icon"> <div class="title">16 Apr</div> <div class="event-time"><i>8:00PM</i></div> <div class="sub-title">Registration Opens 14 Apr</div> </div> <div class="row hidden-xs sub-icon">

问题 Can any one tell me how to do a border-bottom hover effect from bottom to top? Src: http://www.sony.com/electronics/playstation 回答1: Here is a simple sample using the pseudo element ::after The advantage using this in favor of the border-bottom , it will not move the element up and down a { position: relative; padding: 10px 20px; } a::after { content: ' '; position: absolute; left: 0; bottom: -5px; width: 100%; height: 0; background: blue; transition: height 0.3s; } a:hover::after { height:

问题 I'm learning css and I came across an example that has the following code: <body> <a href="#" class="CardLink CardLink_Hearts">Hearts</a> <a href="#" class="CardLink CardLink_Clubs">Clubs</a> <a href="#" class="CardLink CardLink_Spades">Spades</a> <a href="#" class="CardLink CardLink_Diamonds">Diamonds</a> </body> and css: .CardLink { display: block; color: #666; text-shadow: 0 2px 0 #efefef; text-decoration: none; height: 2.75rem; line-height: 2.75rem; border-bottom: 1px solid #bbb; position