- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Nifty Corners Cube: niftycube.js
Watching Chris Coyiers WordPress video series I saw how rounded corners was used for Mozilla and Safari web browsers using the CSS-styles -moz-border-radius and -webkit-border-radius, but Internet Explorer only showed the square box with no round corners.
I wanted to have rounded corners for my left and right sidebar boxes without having to use images or lots of CSS code. I was reading "The CSS Anthology" by Rachel Andrew looking for ideas and found the section about rounded corners using Nifty Corners Cube (page 371). http://www.html.it/articoli/niftycube/index.html
Very simple to set up in WordPress if you are running your own blog. Download the file, unzip, and install: niftycube.js and niftyCorners.css to your WordPress theme file.
In your header.php link the Javascript file to the <head> of your document:
I am using Chris Coyiers .widget style in the CSS:
NOTE: Padding inside your box must be specified in pixels. Any other unit will not render the corners properly.
Here is my practice blog URL – http://www.marbleheadllc.net – notice the rounded corners on the right and left sidebar boxes. I tested this out in Internet Explorer, FireFox, Safari, and Opera. :D