CSS3 Interview Questions Part 6

26. How do you remove underline from an Anchor tag?

Answer:

Using text-decoration style property you can able to remove underline from an Anchor tag. For example,

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            a{
                text-decoration:none;
            }
        </style>
    </head>
    <body>
        <b><a href="default.asp" target="_blank">This is a link</a></b>
    </body>
</html>


Output:

anchor tag

27. What do you mean by Tweening?

Answer:

It is the short form for in-betweening.

It is a process of generating intermediate frames between two images.

It gives the appearance that the first image evolves smoothly into the second image.

In CSS3, Transforms (matrix, translate, rotate, scale etc.) module can be used to achieve tweening.

28. Which new features are added for borders in CSS3?

Answer:

There are three new features are added for borders in CSS3,
1. border-radius
2. box-shadow
3. border-image

1. border-radius

The border-radius property is used to add rounded corners to an element.

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                border: 2px solid #a1a1a1;
                padding: 10px 20px;
                background: #dddddd;
                width: 90px;
                border-radius: 25px;
            }
        </style>
    </head>
    <body>
        <div>TutorialRide</div>
    </body>
</html>


Output:

border radius

2. box-shadow

The box-shadow property attaches one or more shadows to an element.

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width: 200px;
                height: 100px;
                background-color: red;
                box-shadow: 10px 10px 5px #888888;
            }
        </style>
    </head>
    <body>
        <div>TutorialRide</div>
    </body>
</html>


Output:

box shadow
3. border-image

The border-image allows you to specify an image to be used instead of the normal border around an element.

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #borderimg1
            {
                border: 10px solid transparent;
                padding: 10px;
                border-image: url(border.png) 20 round;
            }
        </style>
    </head>
    <body>
        <p id="borderimg1"></p>
    </body>
</html>


Output:

border image
▲