Short Tag – Web Development Blog

Entries for the ‘CSS3’ Category

Border-radius not working on Opera

The border-radius CSS3 property is used to create round corners on elements. Basically you could use it on most elements.

border-radius:10px;

On Opera it will work only if the element you apply it to has display:block, it won’t work on any inline elements.
So, let’s have this link:

<a href="#" class="mylink">Link</a>

Css definitions:

.mylink
{
background: red;
[...]

Handling padding, margin, border position in CSS3 with boz-sizing

Firefox and other browsers (Opera, Safari, Chrome) will place the padding, margin and border outside of the box (div, table or other element) changing the width and height of the element. Internet Explorer will place them inside the box and the width/height of the element will remain the same. You can see how this will [...]

CSS3 cross-browser background gradient

Since CSS3’s gradient backgrounds are fairly new the functionality in all browsers is different.
Here is a sample of how you can achieve cross-browser functionality:

background-color: #2B2B2B;
background-image: mix(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0), 50%);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr="rgba(255, 255, 255, 0.5)", EndColorStr="rgba(255, 255, 255, 0)")";
[...]

CSS3 input highlight on focus with transition

CSS3 makes your job a lot easier with it’s new features.
For example creating an input that will highlight on focus with animation is an easy task now with CSS3 in comparison with all the work it would’ve needed with javascript and CSS2.
Style all the inputs, textareas and combo boxes:

input, select, textarea
{
background: [...]