You can achieve this with the background-size property, which is now supported by most browsers. To scale the background image to fit inside the div: background-size: contain; To scale the background image to cover the whole div: background-size: cover; JSFiddle example There also exists a filter for IE 5.5+ support, as well as vendor prefixes … Read more
The Google AJAX Libraries API, which includes jQuery UI (currently v1.10.3), also includes popular themes as per the jQuery UI blog: Google Ajax Libraries API (CDN) Uncompressed: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js Compressed: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js Themes Uncompressed: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast,pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and … Read more
Using an escaped string (a.k.a. escaped value): width: ~”calc(100% – 200px)”; Also, in case you need to mix Less math with escaped strings: width: calc(~”100% – 15rem +” (10px+5px) ~”+ 2em”); Compiles to: width: calc(100% – 15rem + 15px + 2em); This works as Less concatenates values (the escaped strings and math result) with a … Read more
It means, essentially, what it says; that ‘this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!’ In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element … Read more
box-sizing: border-box is a quick, easy way to fix it: This will work in all modern browsers, and IE8+. Here’s a demo: http://jsfiddle.net/thirtydot/QkmSk/301/ .content { width: 100%; box-sizing: border-box; } The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.
Firstly, use an IMG tag in your HTML to embed an SVG graphic. I used Adobe Illustrator to make the graphic. <img id=”facebook-logo” class=”svg social-link” src=”https://stackoverflow.com/images/logo-facebook.svg”/> This is just like how you’d embed a normal image. Note that you need to set the IMG to have a class of svg. The ‘social-link’ class is just … Read more
Why not forget the hacks and just do it with CSS? One I use frequently: .boxsizingBorder { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } See browser support here.
Important! Vertical center is relative to the height of the parent If the parent of the element you’re trying to center has no defined height, none of the vertical centering solutions will work! Now, onto vertical centering… Bootstrap 5 (Updated 2021) Bootstrap 5 is still flexbox based so vertical centering works the same way as … Read more
Instead of using opacity, set a background-color with rgba, where ‘a’ is the level of transparency. So instead of: background-color: rgb(0,0,255); opacity: 0.5; use background-color: rgba(0,0,255,0.5);
I found this CSS3 feature helpful: /* to position the element 10px from the right */ background-position: right 10px top; As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine. See Can I use for details on the supported browsers. Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/ Update: This feature is now … Read more