css
Blurry Background Images in CSS
There are a number of reasons why background image can look blurry in CSS, but recently I came across this issue that I haven’t noticed before — in part, because usually text doesn’t seem to be present, and so blurriness is a little less noticable. Both the top and bottom screenshots in the image below […]
Read MoreDifferent Image Files Based on Browser Width
.ipad,.mobile{display:none;} @media(max-width: 768px){ .desktop,.mobile{ display:none; } .ipad{ display:block; } } @media(max-width: 500px){ .desktop,.ipad{ display:none; } .mobile{ display:block; } } <img src=”image-file-desktop” class=”desktop”> <img src=”image-file-ipad” class=”ipad”> <img src=”image-file-mobile” class=”mobile”>
Read MoreFlexbox Spacing on Last Line of Items
I had tiles spaced nicely on my page for all of my blog posts. All was fantastic, except for the last row, which had a large space in between the blog posts. So my layout had three tiles across for each row, but by the end of the page, I had run out of blog […]
Read MoreCSS Cursor Types
I can never quite remember the common cursor types. For some reason, I always think the arrow cursor style, which is what you normally have when browsing a page is set as an ‘arrow’ (which isn’t part of the spec), or as a ‘pointer’, because, well, I guess that seems closer to an arrow, which […]
Read MoreMultiline Ellipsis CSS
Use this, seems to work pretty well. Note, that you don’t want to add any padding on the target element, otherwise it will show text beyond the overflow: .blog-tile-excerpt{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
Read MoreFixed Position Div Isn’t Staying Fixed When Scrolling on Android
My nice fixed position toolbar wasn’t sticking as it should as I scrolled through on my mobile browser window. It would appear sticky at times, but as I scrolled, it would slide up or down. The solution is to add “minimum-scale=1” to the meta viewport tag, which for me, now looks like this: <meta name=”viewport” […]
Read MoreRemoving the Horizontal Margins on a Google Chart Graph
I seem to be able to successfully modify quite a bit with google charts, but I couldn’t find a good way to remove the horizontal padding to the left and right of a google graph. From what I can find, there really isn’t a good way to do it. I thought I was close with […]
Read MoreMy Emerging CSS System
I’ve been thinking about javascript, sass, css, and the DRY (Don’t Repeat Yourself) principle a bit too much today. It’s partly due to working on a new code base, which makes it easy to point out what I would do differently, but also makes me re-examine my own code, or standards that are out there […]
Read MoreChange Placeholder Text Color
Change the placeholder color of the text for input boxes in a form: ::-webkit-input-placeholder { color: #000; } :-moz-placeholder { color: #000; } ::-moz-placeholder { color: #000; } :-ms-input-placeholder { color: #000; }
Read MoreFixing Jagged Rendering on CSS Shapes and Arrows in Firefox
I\’ve been using the border elements on divs to create useful shapes, like arrows, like on this page. Unfortunately, recently Firefox recently began having trouble rendering the diagonals — making them appear jagged, and just not very pleasing. To fix this, just add the following to the css: -moz-transform: scale(.9999);
Read More