create a white rgba / CSS3

The code you have is a white with low opacity. If something white with a low opacity is above something black, you end up with a lighter shade of gray. Above red? Lighter red, etc. That is how opacity works. Here is a simple demo. If you want it to look ‘more white’, make it …

Read more

Make input value uppercase in CSS without affecting the placeholder

Each browser engine has a different implementation to control placeholder styling. Use the following: jsBin example. input { text-transform: uppercase; } ::-webkit-input-placeholder { /* WebKit browsers */ text-transform: none; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ text-transform: none; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ text-transform: none; } :-ms-input-placeholder { /* …

Read more

Position fixed not working is working like absolute [closed]

The issue here lies with your .content-container wrapper class, which has a CSS declaration of webkit-transform: translate3d(0,0,0). The transform declaration, as this answer illustrates, changes the positioning context from the viewport to the rotated element, which essentially means that your fixed element behaves as if it were absolutely positioned. Here’s an example showing the difference …

Read more

height: calc(100%) not working correctly in CSS

You need to ensure the html and body are set to 100% and also be sure to add vendor prefixes for calc, so -moz-calc, -webkit-calc. Following CSS works: html,body { background: blue; height:100%; padding:0; margin:0; } header { background: red; height: 20px; width:100% } h1 { font-size:1.2em; margin:0; padding:0; height: 30px; font-weight: bold; background:yellow } …

Read more