css3

Question 1

By default anchor tags have a display property of…

Answer 1

inline

Question 2

What triggers a CSS3 animation?

Answer 2

When a property is changed on a CSS3 object, if it has a transition set - it will trigger the animation. This can occur even from pseudo selectors, such as hover.

Question 3

How do you set a transition animation to change the color when a roll over occurs?

Answer 3

a.btn {
display: inline-block;
border: 1px solid rgba(255,255,255,.5);
padding: 5px 20px 5px 10px;
text-decoration: none;
letter-spacing: 2px;
margin: 0px 0px 10px 0px;
color: #fff;
width: 200px;

    transition-property: background-color;
    transition-duration: 1s; }

a.btn:hover {
background-color: rgba(0, 0, 0, 0.4);
}

// NOTE: The hover pseudo selector is what triggers the animation. That property (background-color) matches the proeprty that is being watched in the a.btn selector.

Question 4

What property would you use to specify a delay before the animation / transition kicks off?

Answer 4

transition-delay: 3s;

Question 5

How would you do a shorthand transition?

Answer 5

transition: background-color 1s ease-out .2s;
or
transition: property || duration || timing-function || delay [, …];

Question 6

How can you make the defining of a transition more efficient when you have multiple properties to define?

Answer 6

If you are changing multiple border properties for instance, just define ‘border’ on the transition.

transition: background-color .5s,
border .5s;

a.btn:hover {
       background-color: rgba(0, 0, 0, 0.4);
       border-color: #fff;
       border-left-width: 15px; 
 }

Question 7

What’s the difference between a pseudo selector/class and a pseudo element?

Answer 7

A pseudo selector allows you to choose an element in a page, a pseudo element actually addresses a sub element of an element.

Question 8

Which is correct?

a:after
or
a::after?

Answer 8

Technically both - the :: notation isn’t recognised on some older browsers. You can just stick with :

Question 9

An absolute positioned element is positioned relative too…

Answer 9

….the first parent element that has a position other than static applied to it. If no parent element up the chain meets that condition the absolutely positioned element is positioned relative to the document window.

Question 10

Fixed positioned elements are placed relative too?

Answer 10

First the fixed positioned element is always positioned relative to the browser window and take the now familiar top, right, bottom, and left properties.. It’s the positioning rebel that ignores it’s parents.

Question 11

Relative positioned elements are positioned…

Answer 11

Relatively positioned elements are positioned based on the same top, right, bottom, and left properties, but are simply shifted from where they would normally sit. In a sense adding relative positioning is similar to adding a margin with one very important difference. The elements around a relatively positioned element act as though that shift didn’t exist. They ignore it.

Question 12

Do absolute positioned elements have to have a parent element that is set “position: relative” in order to be positioned relative to it’s parent.

Answer 12

Technically no - it’s not tthat the parent is positioned relative, it’s that it has a position at all. Remember, elements with absolute position will be positioned relative to the first parent up the chain that has a position other than static.

It doesn’t matter if it is relative - it just happens that a relative position is convenient because it doesn’t take the element out of the document flow.

Question 13

If you have a pseudo element that has it’s own transition - and it is within an element that also has a transition on it - will the pseudo element transition be triggered when the parents transition is triggered?

Answer 13

No - you will have to trigger it separately.

Question 14

If you have a pseudo element - a.btn:after, how would you target it’s hover state?

Answer 14

a.btn:hover:after {}

Question 15

If you add padding of 10px to the left - what happens to the overall width of the element?

Answer 15

It becomes 10px wider - so you can use this to make a button slide out.

Question 16

How can you reduce the amount of text that is used in a transition statemtent?

Answer 16

Use the keyword - if you have a lot of changing elements, and they use the same time…

transition: all .5s;

Question 17

What is the downside to using the all property?

Answer 17

In something like a rollover, you may change a lot of properties that you don’t actually want to animate. By using all - any animatable property will be animated. IF you have a mix of stuff, you will need to specify each element to change

Question 18

Why shouldn’t you use movement (where the object physically moves out of the way) in a UI?

Answer 18

The user may trigger the event, the element moves out of the way, untriggering it.

Question 19

How do you add a text shadow to text?

Answer 19

text-shadow: 0px 5px 2px rgb(255,255,255, 0.5);

x offset
y offset
blur
colour

Question 20

If you are using a transition to change the line height, how can you make sure the containing box doesn’t increase in size?

Answer 20

Set the lineheight - as you scale the text size, the line-height will grow with it. If you fix it it size, it will not change unless you animate it.

Question 21

What does the clip property do?

Answer 21

It allows us to mask out an image in CSS only

Question 22

If you set the clip property to:

clip: rect( 0px, 75px, 75px, 0px);

on an image that is 75px in size - what happens?

Answer 22

Nothing - the values will set a mask that is aligned with it’s outside edge (since both are 75px). This will allow us to resize the image, in an animation, but keep the outside edges clipped.

NOTE: The dimensions are based on top, right, bottom, left - just like margin/padding. The origin of the image is the top left corner, so setting your right value to 75px, is setting a clipping line on the right side, 75px from the origin.

Question 23

How would you crop 10px on all sides of an image that is 75px on all sides?

Answer 23

clip: rect(10px, 65px, 65px, 10px);

Question 24

How can you pause an animation?

Answer 24

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

By simply adding this class.

Question 25

Transition declarations are always added to…

Answer 25

the initial state

Question 26

What are the trigger states?

Answer 26

\:hover
\:focus,
\:active
\:target
\:checked (form elements)
\:disabled

Question 27

What CSS rule can be used to scale a window?

Answer 27

@viewport {
zoom: 1.0;
width: device-width;
}

Question 28

What CSS media query can be used to load different stuff based on screen dimenions?

Answer 28

@media (min-width: 500px) and (max-width: 600px) {

}

Question 29

How do you use javascript to change the style of say the background-color of an element?

Answer 29

element.style.backgroundColor = ‘red’;

Question 30

What is one way to resize a CSS object without resorting to changing the width and height?

Answer 30

On the hover, you can just use:

transform: scale(1.2);

(NOTE: You still need a transition effect on the target element)

transition: transform 2s;

Question 31

When you are specifying time, on a transition - what do the two numbers do?

Answer 31

transition: transform 2s 0.5s;

The first number is the duration, the second is the delay

Question 32

If you want to add a rotation transform, what’s one thing that you must remember to do?

Answer 32

In the containing div - give it a perspective value.

perspective: 1000px;

Question 33

How would you rotate an object around the x axis?

Answer 33

transform: rotateX(30deg);

Question 34

How would you define a character to slide from position to another using keyframes??

Answer 34

Use the @keyframe keyword

@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(900px); }
}

NOTE: The target of this keyframe will need to reference it.

.robot {
animation-name: slide;
animation-duration: 2s;
}

Question 35

Other than using “from and to” to define the keyframes, what is the other method?

Answer 35

percentages.

Question 36

What do you use the cubic-bezier function for?

Answer 36

It’s a way of specifying the animation-timing-function. This would normally be were you put ‘ease, ease-in’ etc. But you can be more precise.

animation-timing-function: cubic-bezier(.5,.69,.72,1.17)

Question 37

You can combine two sets of animations on one css object - but there is a catch, what is it?

Answer 37

They must be different sets of properties. You can’t combine to sets of transforms for instance, once would transform, one can be colour / opacity.

Question 38

If you have a transform of “rotate”, what is it’s unit of measure?

Answer 38

transform: rotate(0turn)

Question 39

How do you make it so that your animation doesn’t start immediately (say if you want to trigger it on a hover)?

Answer 39

set the
animation-play-state: paused

attribute

Question 40

HOw do you trigger your paused animatoin to play?

Answer 40

By triggering the state:

animation-play-state: running

This can be done in an :hover for instance.

Question 41

What is the process for playing a sprite animation in CSS?

Answer 41

You setup a div, load the image in the background. The div should be the width / height of a single frame. THe position is 0 0 no-repeat. and the background will be transparent.

You animate this using the same animation timing functions as you do for transforms / transitions.

Question 42

How would you set your keyframes to play a sprite animation in a div?

Answer 42

// From the div - set the animation	
animation: walker 2s steps(10) infinite;
}

@keyframes walker {
0% { background-position: 0 0; }
100% { background-position: 0 -5000px;}
}

NOTE: The keyframes aren’t moving the div itself, they are changing the background position. It’s the timing function (steps) that’s important - as it’s performing the flip book effect. So the -5000 / 10 (value in steps) - should give the coordinates to each frame in the file.

Question 43

When is the :active selector triggered?

Answer 43

usually only for a short duration - i.e. when clicking on a link , it indicates that something has become active.

Question 44

Describe the box model?

Answer 44

Every element on the page in CSS can be described as a box. The box model is made up of the content width, height, the border, the padding and the margin.

The margin is unique in that it doesn’t actually contribute to the width of the box, but does affects it’s relationship with objects around it. So it’s still considered a part of the box model.

Browsers have handled the model differently however, over the years.

Some browsers used the w3c standard, width gave the content width.

Some used the IE traditional method. Width included up to the border edges (including padding).

The box-sizing attribute allows you to change between models:

box-sizing: border-box
box-sizing: content-box

Question 45

What’s the difference between inline, inline-block, and block?

Answer 45

The way they flow things around them, and the way they can be positioned.

So an inline element is like text, it can sit in amongst text, and does not obey height commands, and padding commands to the top and bottom don’t affect the layout.

They can not have their height / width set.

inline-block on the other hand, does obey width and height, and can have padding set. But it doesn’t take up the full line.

Block level elements on the other hand, by default take up the full line - and can have width / height etc set. You can control how elements flow around a block level element using the float attribute.