Box-Sizing property in CSS3
Are you finding it difficult to code the size of the boxed elements in your websites? Apply this plug-in in your website to make it easy to give some padding and borders to some box. Fixing the height and the width of the boxes is no more a difficult task; with the help of this plug-in it is much easier to do them. The presence of the padding and the borders involves the coder to calculate the require values to be entered. But this plug-in makes the require calculations and gives the required output. With such plug-in we can build websites quickly and easily.
For example, let’s say we have one
If, you can measure out above box you’ll find that, it actually has, 260px width and 160px of height. That padding of 30px has been added up to the actual size of this ‘
Now, in CSS3 one interesting property called, box-sizing has been introduced to overcome this issue. What it does is, it prevents size of padding or border from adding up to the size of element. Here is the code to make this thing work across all major browsers.
Above code will not include padding of, 30px to the width and height of our layer.
So, it’s gr8. And without any nasty calculation we can achieve nice result.
NOTE: This property is supported by : IE8+, Safari 3.1+ , Firefox 3+, Opera 9.6+, Chrome 2+
CSS3 and HTML 5 are capable of revolutionizing the way we design websites. you will be amazed what it is capable of. Stay with us for lots of upcoming articles with plenty of great tutorials, guidelines to get you started with CSS3 and HTML 5..
Additional Articles From "Box Effect"
- Power PWChecker – Secures user data
- jTable – Create feature-rich tables
- Mega Menu Complete Set – Comprehensive set of menu creation
- Moving Boxes – Present images or photos in a sequence of moving boxes
- Featured Box Slider – Interactive slider with enormous features
- Moving Boxes Content with jQuery – Beauty at its best
- MDMagick – MarkDown WYSIWYG Editing
- Freeow! – Plug-in for Making Alerts or Message Boxes
- jQuery Super Labels Plug-in – Gives details about the field entered
- prettyCheckable – jQuery Plug-in to Style Checkbox and Radio buttons