MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

CSS3 Modules: Borders, background and text-effects

In this article we will start our discussion about css models. We will talk about Borders, background and text-effects.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

CSS3 is newly released. It introduces something un-expected and at the same time solve previous problem.

Some of new modules in CSS3 are:

  • Box Model
  • Selectors
  • Backgrounds and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface
  • Speech module
  • Hyperlink Presentation

Let's talk about some of them in detail:

Borders

Dealing with borders is really easy in CSS3.We have only 3 properties that we really use inside the selector.

border-image Which specify an image as a frame border instead of the traditional lines
border-radius Which specify rounded border
box-shadow Add shadow to border

a) Bounded Borders

Bounded Borders was tedious work before as you need to specify 4 images for each corner, but with CSS3 all you have to do is to determine border radius only to desired scale and it will do the work.

Bounded Border

Figure 1: Bounded Border

Listing 1: Bounded Border

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Borders, background and text-effects - MrBool Tutorial</title>
        <style>
            div
            {
                border:2px solid blue;
                padding:10px 40px;
                background: tomato;
                width:100px;
                height: 50px;
                border-radius:70px;
            }
        </style>
    </head>
    <body>
        <div>Rounded Borders using CSS.</div>
    </body>
</html>

b) Imaged Borders

Easy and cool, no need to write more code, just specify the location of image and assign the selector to the element. It will do the work for you.

Imaged Border Output

Figure 2: Imaged Border Output

Listing 2: Imaged Border

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Borders, background and text-effects - MrBool Tutorial</title>
        <style>
            div
            {
                border:15px solid transparent;
                width:250px;
                padding:100px 20px;
            }
            #stretch
            {
                border-image:url(im.png) 150 230 stretch;
            }
        </style>
    </head>
    <body>
        <div id="stretch">Image Border</div>
    </body>
</html>

c) Adding Shadows to element

Without the need of JQuery or any other external Javascript library, or much code to be written, CSS3 provides attribute box-shadow which add shadow to certain element with the specified dimensions and colors.

By adding shadow to the previous border it will look like that, and the only modification that is applied is:

Shadow

Figure 3: Shadow

Listing 3: Shadow

  #stretch
            {

                border-image:url(im.png) 150 230 stretch;
                box-shadow: 10px 10px 5px violet;
            }

Background

CSS3 provided several new background properties which facilitate background control. The newly specified properties in CSS3 for background are:

background-clip Specifying the painting area of the background images
background-origin Where the background will be painted
background-size Determining the size of the background-image

a) background-size

It's sometime needed to specify a certain size to the background image.

To control the background image size, all you need to do is to use background-size property in body selector as will be shown in the following code.

Background size

Figure 4: Background size

Listing 4: Background size

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Borders, background and text-effects - MrBool Tutorial</title>
        <style>
            body{
                background:url(css.png);
                background-size:180px 160px;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
    </body>
</html>

Important note: if you didn't specify background-repeat property to no-repeat, it will repeat the images several times.

To use the original size of the image just set the background dimensions to auto, instead of using values.

b) background-origin

We noticed that the background images are put in the default place since no position is specified to put it.

Background-origin property specifies position to the background, so it can be placed in a certain place on the page.

The following image shows how to use:

Background origin

Figure 5: Background origin

Listing 5: Background origin

<html>
    <head>
<title>CSS3 Modules: Borders, background and text-effects - MrBool Tutorial</title>
        <style>
            div
            {
                border:1px solid black;
                padding:35px;
                background-image:url('css.png');
                background-repeat:no-repeat;
                background-position:left;
                background-size: 100px 100px;
            }

            #div2
            {
                background-origin:content-box;
                width: 25%;
            }
        </style>
    </head>
    <body>

        <div id="div2">
        </div>

    </body>
</html>

c) Adding Multiple Images in Background

Another fancy feature of CSS3, which allow us to put more than one image in background using many background-image property separated by, the following demo will show the idea:

Listing 6: Multiple images

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Borders, background and text-effects - MrBool Tutorial</title>
        <style>
            body
            {
                background-image:url(css.png),url(im.png);
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>

    </body>
</html>
Multiple images

Figure 6: Multiple images

So, dealing with background is easy and is also interesting. The CSS3 new fancy features make all this happen with less efforts.

Text-Effects

Do you remember those old days while designing a text logo how many hours we spent using Photoshop trying to write down the text and adjust size, effects...etc, and if it's not available then searching for online image creator that creates image for me and at the end it looks like what you were looking for?

Say Good bye to those days because Web technology had brought up CSS3 to save our time and efforts.

No need to do anything except write down your text and the effects you need in few lines and let CSS3 do the work for you.

Properties provided by CSS3 for text editing is showing below:

hanging-punctuation specifies whether a punctuation mark may be placed outside the line box at the start or at the end of a full line of text
punctuation-trim specifies whether a punctuation character should be trimmed if it appears at the start or end of a line
text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"
text-emphasis Applies emphasis marks
text-justify Justify text
text-outline Specifies a text outline
text-overflow Specify behavior is the text overflow it's container
text-shadow Add shadow to the text , “like fire and ice”
text-wrap Wrap text into multiple lines according to certain delimiter
word-break Specifies line breaking rules
word-wrap Break long words and divide them to more than one line like:immunosuppressive which can make it immuno suppressive

a) shadowing:

Applying shadow is short coded mission.

All you need to do is to use text-shadow property and specify dimensions and shadow's color.

Of course it's applied to a certain element or set of elements, although it's interesting but some browsers don't support it like IE.

The following code shows how to apply it:

Listing 7: Shadow example

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Borders, background and text-effects - MrBool Tutorial</title>
        <style>
            h1
            {
                text-shadow: 5px 15px 2px threedhighlight;
            }
        </style>
    </head>
    <body>

        <h1>OMG! it's true shadow</h1>

    </body>
</html>
Shadow

Figure 7: Shadow

b) word-wrapping:

Sometimes, while writing in a container on a web page, the end of line is not displayed properly. It's not cool at all and is considered to be a bug specially if the application is interactive “i.e. the user is writing on a container”.

The solution was provided CSS3 in word-wrap property which wrap the long words to the next line.

It's supported by all browsers, so it's so good so far. The following demo will show how to use it.

Without word-wrap it will look like that:

Without word-warp

Figure 8: Without word-warp

With word-wrap it will look like:

word-wrap example

Figure 9: word-wrap example

Listing 8: Wordwrap

<!DOCTYPE html> 
<html>
    <head>
<title>CSS3 Modules: Borders, background and text-effects - MrBool Tutorial</title>
        <style>
            p.test
            {
                width:11em;
                border:1px solid #000000;
                box-shadow: 10px 10px 5px aqua;
                word-wrap:break-word;
            }
        </style>
    </head>
    <body>

        <p class="test">  thisisaveryveryveryveryveryverylongword. It will be wrapped by the help of CSS3 THXXXXXXXXXXXXXXX.</p>

    </body>
</html>

That's without completion!!! What do you think it will be after it’s officially released???

Hope you liked the article. See you next time



My main area of specialization is Java and J2EE. I have worked on many international projects like Recorders,Websites,Crawlers etc.Also i am an Oracle Certified java professional as well as DB2 certified

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login