Logo F2FInterview

CSS3 Interview Questions

Q   |   QA

Like below we can create Box Shadow using CSS3

.boxshadowpcds
{
box-shadow: 10px 10px 5px #ccccc;
}
.textshadowpcds
{
text-shadow: 5px 5px 5px #FF0000;
}

and then need to use these class boxshadownpcds ,textshadowpcds 

The background-size property specifies the size of the background image.
As we know Before CSS3, the background image size was find out by the real size of the image. In CSS3 it is possible to specify the size of the background image, which allows you to re-use background images in different ways.

.pcdsbp1
{
background:url(background.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px; /* or we can do background-size:100% 100%;*/
background-repeat:no-repeat;
} 

To Allow long words to be able to break and wrap onto the next line in css3 we used word-wrap property like below class

.wordwrappcds{word-wrap:break-word;} 

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

  • Specify the name of the animation
  • Specify the duration of the animation 

Opacity is used to show or hide the html element For example 0 for hide and 1 for show

<p style="opacity: 0">Show Me</p>
<p style="opacity: 0.5">Show Me</p>
<p style="opacity: 1">Show Me</p> 

In order to link this F2FInterview's page as Reference on your website or Blog, click on below text area and pres (CTRL-C) to copy the code in clipboard or right click then copy the following lines after that paste into your website or Blog.

Get Reference Link To This Page: (copy below code by (CTRL-C) and paste into your website or Blog)
HTML Rendering of above code: