Web Development

CSS3 Offers For Interfacing

CSS3 Offers for Interfacing is the section 12 and the final section of Basics of CSS3.

With CSS3 there comes advanced features to support creating user interfaces. Such as resizing elements, box sizing, and outlining. Look at the complete list it offers.

Property Description CSS
appearance Allows you to make an element look like a standard user interface element 3
box-sizing Allows you to define certain elements to fit an area in a certain way 3
icon Provides the author the ability to style an element with an iconic equivalent 3
nav-down Specifies where to navigate when using the arrow-down navigation key 3
nav-index Specifies the tabbing order for an element 3
nav-left Specifies where to navigate when using the arrow-left navigation key 3
nav-right Specifies where to navigate when using the arrow-right navigation key 3
nav-up Specifies where to navigate when using the arrow-up navigation key 3
outline-offset Offsets an outline, and draws it beyond the border edge 3
resize Specifies whether or not an element is resizable by the user 3

Let’s go through what are the important ones because some of them are still not supported by all the web browsers.

CSS3 Resizing

In CSS3, the resize property specifies whether or not an element should be resizable by the user. Before CSS3, this feature only applied for HTML text area element and it came by default. But now you can specify whether some element is resizable or not by the user. Look at the following division. You’ll see some mark in the bottom right corner. Click and drag it. You’ll see with your own eyes, what would happen.

Click and drag the bottom right marker in here
[code language=”css”] div{
resize: both;
overflow: auto;
}
[/code]

CSS3 Box Sizing

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include. Should they include the border-box or just the content-box which is the default value of the width and height properties. For example, if you want two bordered boxes side by side, it can be achieved through setting box-sizing to “border-box”. This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.

Look at the following example. It specify two bordered boxes side by side.

This div occupies the left half.
This div occupies the right half.
[code language=”css”] div{
box-sizing: border-box;
width: 50%;
float: left;
}
[/code]

CSS3 Outline Offset

The outline-offset property offsets an outline, and draws it beyond the border edge. Outlines differ from borders in two ways:

  • Outlines do not take up space
  • Outlines may be non-rectangular

Look at the following example. What you see in red color is the outline and what you see in black color is the border.

This div has an outline border 20px outside the border edge.
[code language=”css”] div{
border: 2px solid black;
outline: 2px solid red;
outline-offset: 20px;
}
[/code]

So this is all the basic information we have to give you in CSS3. We guess now you can build a cool web page using the tips and tricks we had given to you with all these 12 sections. We’ll come back with another amazing tutorial. So till then stay tuned… Keep in Touch!!

 

HOPE YOU ENJOYED THIS TUTORIAL. PLEASE DON’T FORGET TO SUBSCRIBE FOR NEW UPDATES.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

4 Comments on "CSS3 Offers For Interfacing"

Notify of
avatar
Sort by:   newest | oldest | most voted
Almeda
Guest

It’s actually a cool and useful piee of information. I’m
happy that yyou just shared this helpful information with us.
Please stay us informed like this. Thank youu for sharing.

Janeen
Guest

What’s up, just wanted tto mention, I loved this
article. It was funny. Keep on posting!

April monroy
Guest

Veery energetic post, I loved that a lot.

Kaylee
Guest

This is really interesting, You are a very skilled blogger.
I’ve joined your rss feed and look forward tto seeking more
of yoiur great post. Also, I’ve shared you web site in my social networks!

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW