0
1
CSS3 is newly released. It introduces something un-expected and at the same time solve previous problem.
Some of new modules in CSS3 are:
Let's talk about some of them in detail:
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 |
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.
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>
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.
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>
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:
Figure 3: Shadow
Listing 3: Shadow
#stretch
{
border-image:url(im.png) 150 230 stretch;
box-shadow: 10px 10px 5px violet;
}
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 |
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.
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.
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:
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>
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>
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.
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>
Figure 7: Shadow
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:
Figure 8: Without word-warp
With word-wrap it will look like:
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
See the prices for this post in Mr.Bool Credits System below: