Scribd
Upload
83 views8 pages

Computer Programming 4TH Quarter

This document provides an overview of using CSS3 to create scalable graphics and animated user interfaces. It includes questions and answers related to differences between linear and radial gradients, the importance of HTML scalable vector graphics, and how to apply concepts related to CSS transitions, transforms, and animations to real-life situations.

Uploaded by

ronronsalucot
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
83 views8 pages

Computer Programming 4TH Quarter

This document provides an overview of using CSS3 to create scalable graphics and animated user interfaces. It includes questions and answers related to differences between linear and radial gradients, the importance of HTML scalable vector graphics, and how to apply concepts related to CSS transitions, transforms, and animations to real-life situations.

Uploaded by

ronronsalucot
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

COMPUTER PROGRAMMING

(.NET TECHNOLOGY) NC III


Quarter 4 – Module 1
Use CSS3 to create scalable graphics and animated
user interface

LET US REMEMBER
1B 6A
2D 7B
3A 8D
4A 9C
5B 10 D

LET US ASSESS
LET US ENHANCE

LET US REFLECT
1. What are the differences between Linear Gradient and Radial
Gradient?
-The differences between this Gradients is a Linear Gradient is a
gradient that changes from one color to another in a straight line,
while a Radial Gradient is a gradient that changes from one color
to another in a circular or elliptical pattern.
2. Cite the importance of HTML Scalable Vector Graphics?
-The importance of HTML Scalable Vector Graphics is it allows
fully scalable, smooth, reusable graphics, from simple graphics to
enhance HTML pages, to fully interactive chart and data
visualization, to games, to stand alone high-quality static images.
3. Relate the HTML Scalable Vector Graphics into Real Life situation.
Cite 2 real life situation where you can apply its concept.
-In real life situation where I can apply this concept is the problems
and stresses, for the reason that I can draw any paths what I want
to and specially in what way I can solve this circumstances.
( WEEK 2 )

LET US REMEMBER

1 textBasline 11 creatRadialGradient ()
2 shadowColor [ = value ] 12 font
3 globalCompositeOperation 13 clip ()
4 shadowOffsetX 14 getImageData ()
5 textBaseline 15 addColorStop ()
6 lineJoin 16 putImageData ()
7 shadowBlur [ = value ] 17 isPointInPath ()
8 textBaseline 18 globalAlpha
9 clearRect () 19 clip ()
10 globalCompositeOperation 20 translate ()

LET US ENHANCE

-The Output is empty for the reason that I use a Microsoft Edge,
the code said that alert('You need Safari or Firefox 1.5+ to see this
demo.'), so that’s why I cannot see what the code do.
LET US REFLECT

4. Why you need to learn HTML5 Canvas?


-I need to learn HTML5 Canvas for the reason that is to how easy
it is to turn a plain web page into a dynamic web application and
then convert that application into a mobile app for use on
smartphones and tablets.

5. Compare & Contrast HTML5 SVG and HTML5 Canvas.


-HTML5 SVG is the best choice for scalable and responsive
graphics, precise and detailed graphics, accessible and
searchable graphics, and styling and scripting capabilities. HTML5
Canvas is preferable if you need dynamic and interactive
graphics, fast and smooth graphics, customized and distorted
graphics, or low-level control over graphics.

6. Relate the HTML5 Canvas into Real Life Situation. Cite 2 real life
situations where you can apply the concept of HTML5 Canvas.
-The Cloth Stimulation
This interactive experiment uses the HTML5 canvas element
to display the simulation of the physics of how cloth material
moves. The application for this demonstration could be in 3D
animation.
-Wave
This demo shows you the smoothness of animation that can
be achieved.
( WEEK 3 )

LET US REMEMBER

1. Add a 2 second transition effect for background, and transform


changes of the <div> element.
-transition: width 2s;
2. With the transform property, rotate the <div> element 120 deg around
its Y-axis.
-transform: rotateY (120deg);
3. With transform property, change the size of the <div> to half its width,
but double its height.
-transform: scale (50,200);

LET US ENHANCE
LET US REFLECT

7. What is the purpose of CSS Transform?


-The purpose of CSS Transform is to changes the shape, position,
and orientation of page elements.

8. Explain the differences between CSS Transitions and CSS Transform.


- The CSS Transition property listens for changes to specified
properties (background-color, width, height, etc.) over time. While
the CSS Transform property rotates/scales/skews an element
over the X,Y, or Z axes. Its behavior does not relate to transition.
Simply put, on page load, the element will just appear
rotated/skewed/scaled.

9. Relate the CSS Transition into Real Life Situation. Cite 2 real life
situation where you can apply its concept.
-Condition and Improvements for the reason that the CSS
Transitions allows you to change property values smoothly, over a
given duration.
( WEEK 4 )

LET US REMEMBER

ANSWERS:
1. 0% {background-color: red; left: 0px; top: 0px;}
25% {background-color: blue; left: 0px; top: 200px;}
50% {background-color: green; left: 200px; top: 200px;}
75% {background-color: yellow; left: 200px; top: 0px;}
100% {background-color: red; left: 0px; top: 0px;}

2. animation-iteration-count: infinite;

3. animation-name: remember;
animation-duration: 2s;
}
@keyframes remember {
from {background-color: red;}
to {backgroung-color: blue;}
}

4. animation-direction: alternate;
LET US REFLECT

10. What is the differences between animation-direction and animation-


fill-mode?
-The differences between them is the animation-direction defines
the direction of the animation while the animation-fill-mode
specifies whether the animation styles are applied before or after
the animation plays.

11. Discuss how the CSS Animation works.


-CSS Animation make it possible to animate transitions from one
CSS style configuration to another.

12. Relate the @keyframes in Real Life Situation. Cite 2 real life
situation where you can apply its concept.
-The Moving Box and Spinning an object
This will create a box that moves in a rectangular orbit.
Besides the change in position, the size and color of the box
also change.

You might also like