css
My 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 MoreFixed position div isn’t staying fixed in Chrome
I was working on a little menu specifically for mobile devices. It was intended that this menu stay fixed at the bottom of the screen. It usually worked, but in some instances in chrome, it would be thrown all the way to the bottom of the document, not the bottom of the window. It looks […]
Read MoreRGBA Color Format
Just a sample RGBA color format. This will make a black line (rgb 0, 0, 0), but with .3 opacity: .sample-class{ border-right: 1px solid rgba(0,0,0,0.3); }
Read MoreTargeting the Submit Button with CSS
Yeah, I always forget how to apply styles to just the submit button. It\’s of course easy, but I can never get it to stick around in my brain for the next time I need to use it: input[type=”submit”]
Read MoreVertical Center an Image Within a Link (or Div)
How to vertically center an image within a div: <style> .valign-helper{ display: inline-block; height: 90px; } a img{ display: inline-block; vertical-align: middle; } </style> <a title=”my title” href=”#”> <span class=”valign-helper”></span> <img src=”image-path” /> </a>
Read Morewhy is 100% width body or div wider than the screen on mobile?
I’d been struggling with this one for quite a bit. I figured it was something stupid, but no matter what I did, whenever I set the width of my body, html, and/or div tag to 100% (I’d totally stripped down my testing page to the simplest of elements to see why it wasn’t working), the […]
Read MoreAn updated 2 Column (Fluid Fixed) Layout
An alternate method for 2 columns, with a fixed column on the right and fluid on the left. The main goal here was to be able to have the secondary column (\’.col-right\’) appear above the main column (\’.col-main’) when the screen width was decreased. This wan\’t possible with the other method for achieving the column […]
Read MoreIncluding Border and Padding In Box Dimensions
Generally when I’m assigning a width or height to a div, I want it to be that width or height. Yet some genius, whoever came up with the CSS box model, decided that the width of the box wouldn’t actually include the padding or border as part of the width. Fortunately, we can now include […]
Read More-
Adventure
-
The Built Environment
-
Locations
-
Web Dev