How to center image horizontally within a div element?
#artiststhumbnail a img { display:block; margin:auto; } Here’s my solution in: http://jsfiddle.net/marvo/3k3CC/2/
css
How to make a HTML Page in A4 paper size page(s)?
Ages ago, in November 2005, AlistApart.com published an article on how they published a book using nothing but HTML and CSS. See: http://alistapart.com/article/boom Here’s an excerpt of that article: CSS2 has a notion of paged media (think sheets of paper), as opposed to continuous media (think scrollbars). Style sheets can set the size of pages … Read more
How to see an HTML page on Github as a normal rendered HTML page to see preview in browser, without downloading?
The most comfortable way to preview HTML files on GitHub is to go to https://htmlpreview.github.io/ or just prepend it to the original URL, i.e.: https://htmlpreview.github.io/?https://github.com/bartaz/impress.js/blob/master/index.html
SVG drop shadow using css3
Use the new CSS filter property. Supported by webkit browsers, Firefox 34+ and Edge. You can use this polyfill that will support FF < 34, IE6+. You would use it like so: /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ .shadow { -webkit-filter: drop-shadow( 3px 3px 2px … Read more
Dynamically change color to lighter or darker by percentage CSS
You can do this with CSS filters in all modern browsers (see the caniuse compatibility table). .button { color: #ff0000; } /* note: 100% is baseline so 85% is slightly darker, 20% would be significantly darker */ .button:hover { filter: brightness(85%); } <button class=”button”>Foo lorem ipsum</button> Here’s more reading from CSS Tricks about the various … Read more
Is embedding background image data into CSS as Base64 good or bad practice?
It’s not a good idea when you want your images and style information to be cached separately. Also if you encode a large image or a significant number of images in to your css file it will take the browser longer to download the file leaving your site without any of the style information until … Read more
Why don’t flex items shrink past content size?
The Automatic Minimum Size of Flex Items You’re encountering a flexbox default setting. A flex item cannot be smaller than the size of its content along the main axis. The defaults are… min-width: auto min-height: auto …for flex items in row-direction and column-direction, respectively. You can override these defaults by setting flex items to: min-width: … Read more
Select all child elements recursively in CSS
Use a white space to match all descendants of an element: div.dropdown * { color: red; } x y matches every element y that is inside x, however deeply nested it may be – children, grandchildren and so on. The asterisk * matches any element. Official Specification: CSS 2.1: Chapter 5.5: Descendant Selectors
CSS3 gradient background set on body doesn’t stretch but instead repeats?
Apply the following CSS: html { height: 100%; } body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; } Edit: Added margin: 0; to body declaration per comments (Martin). Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).
z-index not working with fixed positioning
Add position: relative to #over as shown in this snippet: #over { width: 600px; z-index: 10; position: relative; } #under { position: fixed; top: 14px; width: 415px; left: 53px; border: 1px solid; height: 10%; background: #f0f; z-index: 1; } <!DOCTYPE html> <html> <body> <div id=”over”><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod … Read more