Multiple backgrounds! body { background: #eb01a5; background-image: url(“IMAGE_URL”); /* fallback */ background-image: url(“IMAGE_URL”), linear-gradient(#eb01a5, #d13531); /* W3C */ } These 2 lines are the fallback for any browser that doesn’t do gradients. See notes for stacking images only IE < 9 below. Line 1 sets a flat background color. Line 2 sets the background image … Read more
This works for me: #content { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100px; /* Need a specific value to work */ } <body> <div> <div id=”content”> I’m the content </div> </div> </body>
If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container. If the container is the body, what you are looking for is Viewport-percentage lengths: The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial … Read more
This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though: textarea:focus, input:focus{ outline: none; } You may want to add some other way for users to know what element has keyboard focus though … Read more
No, there is no “previous sibling” selector. On a related note, ~ is for general successor sibling (meaning the element comes after this one, but not necessarily immediately after) and is a CSS3 selector. + is for next sibling and is CSS2.1. See Adjacent sibling combinator from Selectors Level 3 and 5.7 Adjacent sibling selectors … Read more
The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements. So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/ .frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you … Read more
Interpolate: body height: calc(100% – #{$body_padding}) For this case, border-box would also suffice: body box-sizing: border-box height: 100% padding-top: $body_padding
You can concatenate two transitions or more, and visibility is what comes handy this time. div { border: 1px solid #eee; } div > ul { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } div:hover > ul { visibility: visible; opacity: 1; } <div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> … Read more
Yes, you CAN do this. Using pointer-events: none along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem. Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks flow through to elements underneath. CSS: pointer-events: … Read more
CSS Triangles: A Tragedy in Five Acts As alex said, borders of equal width butt up against each other at 45 degree angles: When you have no top border, it looks like this: Then you give it a width of 0… …and a height of 0… …and finally, you make the two side borders transparent: … Read more