New

Long-Term Learning

Learn efficiently and remember over time.

Start Long-Term Learning

Get personalized study reminders at intervals optimized for better retention.
Track your progress on this set by creating a folder
Or add to an existing folder

Add this set to a folder

  • You use the CSS3 «border-radius» property to create ___

    rounded corners around layout elements, like headers, footers, sidebars, graphics boxes, and outlines around images.

    «border-radius» is a length, which is usually expressed in pixels or ems but can be a percentage.

    ...

    The length is the radius of the circle that defines the "roundedness" of each box corner.

    ...

    «border-radius» is a length, which is usually expressed in pixels or ems but can be a percentage. The length is the radius of the circle that defines the "roundedness" of each box corner.

    ????

    The lower the number, the less rounded the corner. Some browsers have problems rendering the percentage properly, so use a pixel or em length whenever possible.

    ???

    You can also round a single corner of a box using the following properties: ___

    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-right-radius
    • border-bottom-left-radius

    If you plan to use single rounded corners on several elements in an HTML document, you can save time by creating a separate class for each (top left, top right, bottom left, and bottom right). The syntax would look similar to the following: ___

    .top-left-corner {
    border-top-left-radius:25px;
    }

    To create a box with a rounded border, the CSS code and markup might look like this: ___

    <style>
    div {
    background: dodgerblue;
    color: #fff;
    border-radius: 25px;
    }
    </style>
    ...
    <body>
    <div>A box with rounded corners</div>
    </body>

    CSS3 introduces the «box-shadow» property to create drop shadows around layout elements.

    ...

    A «drop shadow» is a visual effect in which an object is repeated behind and slightly below itself to create the illusion that the object floats over its background.

    ...

    The CSS syntax for creating a shadow is: ___

    box-shadow: h-shadow v-shadow blur spread color inset;

    The 'h-shadow' and 'v-shadow' attributes indicate the horizontal and vertical position of the shadow in relation to the box. Both of these attributes are required.

    ...

    The ''h-shadow' value defines the horizontal offset of the shadow.

    ...

    The 'h-shadow' value defines the horizontal offset of the shadow. A positive value offsets the shadow to the ___

    right of the element, and a negative value to the left.

    The v-shadow value defines the vertical offset
    of the shadow.

    ...

    The 'v-shadow' value defines the vertical offset of the shadow. A positive value offsets the shadow from the ___

    bottom of the element, and a negative value from the top.

    The 'blur' attribute, in pixels, indicates the amount of blur applied to the shadow.

    ...

    The 'spread' attribute indicates the size of the shadow,

    ...

    'inset' moves the shadow from the outside to the inside of the box.

    ...

    in box-shadow property, 'color' specifies the color of the drop shadow

    ...

    Example of the rounded-corners box with a drop shadow (The shadow was created from these values, which specify the horizontal and vertical shadow position, the amount of blur, and the color of the shadow):

    box-shadow: 10px 10px 5px #808080;

    CSS3 also provides the «text-shadow» property to apply shadowing to text.

    ...

    CSS3 also provides the «text-shadow» property to apply shadowing to text. The attributes are the same as the box-shadow property, except that spread and inset are not included.

    ...

    An opaque item does not let light pass through, whereas you can see through a transparent item.

    ...

    by reducing the opacity of an item or increasing its transparency, you eventually reach the same point.

    ...

    The syntax for applying a transparency to an image or other element is: ___

    opacity: value

    opacity: value, The value is a floating-point value between 0.0 (100% transparent) and 1.0 (100% opaque). To apply a 45% transparency, for example, you would use the value 0.55 (1.0 - 0.45).

    ...

    A «gradient» is a smooth change of colors

    ...

    A gradient is a smooth change of colors, either within the same hue or starting with one color and ending with a different color.

    ...

    The different types, or methods, of CSS3 gradients are:

    • linear-gradient
    • radial-gradient
    • repeating-linear-gradient
    • repeating-radial-gradient

    «linear-gradient»: ___

    Creates a gradient from top to bottom or vice versa, or from corner to corner

    «radial-gradient»: ___

    Creates a gradient that radiates out from a central point

    repeating-linear-gradient: ___

    Creates a repeating linear gradient, which results in straight bands of gradient color

    repeating-radial-gradient: ___

    Creates a repeating radial gradient, which results in circular bands of gradient color

    To apply a gradient to an HTML image, use the «background» property with one of the gradient methods listed above, along with the parameters specific to each method.

    ...

    A «linear gradient» is a horizontal, vertical, or diagonal gradient.

    ...

    To create a linear gradient from black to white, use the following CSS code:

    background: linear-gradient(black, white);

    The default gradient goes from top to bottom.

    ...

    The 'default gradient' goes from top to bottom. You can insert "top," "bottom," "right," or "left" as the first value to control the direction of the gradient.

    ...

    A 'diagonal gradient' is a type of 'linear gradient' that extends from one corner of a container diagonally to another corner.

    ...

    The code for a 'diagonal gradient' that starts in the lower-left corner and extends to the upper-right corner of a container is:

    background: linear-gradient(45deg, white, black);

    CSS3 gradients also support color interpolation in the alpha color space, which is part of the red blue green alpha (RGBA) color model, to produce ___

    smoother color transitions in gradients.

    Color interpolation in the alpha color space eliminates the ___

    "bandy" look.

    The following is an example of the use of rgba colors:

    linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,255,0.9));

    «Radial gradients» start from a central point and radiate color out to the edges of a container.

    ...

    The values for radials differ slightly from ___

    linear gradients.

    The general syntax for radial gradients is: ___

    radial-gradient(position, size and shape,color stops);

    (radial-gradient(shape size at position, start-color, ..., last-color);)

    Let's look at an example of a radial gradient that begins with light blue (indicated by the hexidecimal code #99CCFF) at the center and changes to a darker blue (indicated by #3D5266) at the edges. The code might look like the following : ___

    ...

    radial-gradient(50% 50%, 70% 70%, #99CCFF, #3D5266);

    The first set of percentages (50% 50%) defines the horizontal and vertical center values. In this case, the gradient starts in the center of the element.

    ...

    radial-gradient(50% 50%, 70% 70%, #99CCFF, #3D5266);

    The second set of percentages
    (70% 70%) specifies the size and shape of the gradient.

    ...

    Because a radial gradient resembles
    an ellipse, the percentages refer to radii.

    ...

    radial-gradient(50% 50%, 70% 70%, #99CCFF, #3D5266);

    The hexadecimal codes in the example are the color stops; the first color stop is the starting point and the second color stop is the ending point.

    ...

    You might see the background-image property in some sources; it works the same as the shorthand ___

    background property.

    By including all of the major vendor prefixes,
    your HTML document is more likely to be rendered properly by the largest number of users.

    ...

    A browser that doesn't support a certain feature will not display the feature properly, even with a vendor prefix.

    ...

    During the transition to CSS3, you should test your code in all of the major browsers before using a certain feature in HTML/CSS documents that will be displayed to a wide audience.

    ...

    WOFF ? ___

    Web Open Font Format

    The flexibility to use any font is a big change from the pre-WOFF restrictions on font usage in HTML documents.

    ...

    Web developers are beginning to use the Web Open Font Format (WOFF) as a way to ___

    enhance UIs with just about any font available or custom-created fonts.

    You use CSS font-related properties such as ___

    font-family, font-size, font-style, font-variant, and font-weight to style HTML documents.

    For years, Web and application developers have been limited to a set of standard fonts that are considered «Web safe», which means ___

    they are typically located on a user's computer and therefore render consistently in the majority of browsers.

    «Web-safe» fonts don't work in ___

    every situation.

    «Web-safe» fonts don't work in every situation. For example, many companies use particular fonts as part of their ___

    brand identity, which aren't often part of the Web-safe font set.

    Designers and developers strive to make sites look interesting, more appealing, and unique, which can't always be accomplished with ___

    Web-safe fonts.

    To use a non-standard font in a heading, title, or block of text, developers have had to create the content in a page layout or graphics program, save it as an image, and then use the <img> tag in an HTML document. This method has several drawbacks: ___

    • It's time-consuming.
    • It interferes with accessibility page readers; images of text cannot be read aloud.
    • It reduces the effectiveness of search engine optimization (SEO) because search engines look for text, not images of text.

    SEO ? ___

    search engine optimization

    ...Developers have also used embedded fonts, which are font sets loaded on their servers. The designer inserts a link to the font set within an HTML document or CSS file, which helps the browser render the font properly.

    ???

    Although embedded fonts are still widely used, a new and better technique for handling non-standard fonts is WOFF.

    ...

    The Web Open Font Format (WOFF) is a means of bringing better typography to the Web.

    ...

    WOFF allows Web developers to use custom fonts - pretty much any font - instead of ___

    being limited to the standard Web fonts.

    WOFF files are compressed True Type, OpenType, or Open Font Format fonts that contain additional metadata.

    ...

    To use WOFF, you can host fonts on your server or use a Web font service.

    ...

    Font services include FontFont and FontShop, among others. They require a ___

    paid subscription, which gives you full rights to use the font on your Web site as long as the subscription is current.

    Free fonts are available from a variety of sources like ___

    fontsquirrel and the Open Font Library.

    To use a WOFF font from a font vendor's site, for example, include the @font-face rule in the CSS file, similar to the following:

    <style>
    @font-face {
    font-family: "font-family-name";
    src: url("http://website/fonts/fontfile")
    }
    </style>

    Some WOFF fonts work better than others depending on the browser in which they're
    being viewed.

    ...

    Before purchasing a WOFF font or font package, be sure to research the font on the Web to find out if other developers have had any problems using it.

    ...

    Some font vendors provide a way for you to preview fonts in all of the major ___

    browsers before purchase.

    The «CSS3 transform property» translates, scales, rotates, skews, and even spins 2D and 3D elements.

    VER questão 81

    In HTML5/CSS3, a «transform» is an effect that lets you change the ___

    size, shape, and position of an element.

    Transformations are either 2D or 3D, and include translating (moving), scaling, rotating, skewing (stretching), and spinning elements.

    VER QUESTÃO 79

    You use the «CSS transform property» to specify different kinds of ___

    transformations made to HTML elements.

    The «transform property» uses several methods for 2D and 3D transformations : ___

    matrix (...); matrix3d (...); perspective(n); rotate (a); rotate3d (...); rotateX (a); rotateY (a); rotateZ (a); scale (...); scale3d (...); scaleX (x); scaleY (y); scaleZ (z); skew (xa,ya); skewX (a); skewY (a); translate (...); translate3d (...); translateX (x); translateY (y); translateZ (z)

    JavaScript or some other form of scripting would be required to actually see a 2D or 3D transformation taking place. Without scripting, you only view the end result of a transformation.

    ...

    matrix (n,n,n,n,n,n) ? ___

    Specifies a 2D transformation using a six-value matrix

    matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) ? ___

    Specifies a 3D transformation using a 4x4 matrix of 16 values

    perspective(n) ? ___

    Specifies a perspective view for a 3D element that's been transformed

    rotate (angle) ? ___

    Rotates an element in 2D

    rotate3d (x,y,z,angle) ? ___

    Rotates an element in 3D

    rotateX (angle) ? ___

    Rotates an element in 3D along the x-axis

    rotateY (angle) ? ___

    Rotates an element in 3D along the y-axis

    rotateZ (angle) ? ___

    Rotates an element in 3D along the z-axis

    scale (x,y) ? ___

    Scales an element in 2D (width and height)

    scale3d (x,y,z) ? ___

    Scales an element in 3D (width, height, and an arbitrary vector in 3D space)

    scaleX (x) ? ___

    Scales an element in 3D along the x-axis

    scaleY (y) ? ___

    Scales an element in 3D along the y-axis

    scaleZ (z) ? ___

    Scales an element in 3D along the z-axis (a vector in 3D space)

    skew (x-angle,y-angle) ? ___

    Skews an element in 2D along the x-axis and the y-axis

    skewX (angle) ? ___

    Skews an element in 3D along the x-axis

    skewY (angle) ? ___

    Skews an element in 3D along the y-axis

    translate (x,y) ? ___

    Translates (moves) an element in 2D

    translate3d (x,y,z) ? ___

    Translates (moves) an element in 3D

    translateX (x) ? ___

    Translates an element in 3D using the x-axis

    translateY (y) ? ___

    Translates an element in 3D using the y-axis

    translateZ (z) ? ___

    Translates an element in 3D using the z-axis

    To «translate» an element means to move it, without rotating, skewing, or otherwise turning the image.

    ...

    To move an element, you use the «translate()» method in CSS and provide x- and y-axis values to position the element relative to its original or default position.

    ...

    For example, the following code moves the element 100 pixels from the left and
    50 pixels from the top:

    transform: translate(100px,50px);

    To «scale» an element is ___

    to increase or decrease its size.

    To grow or shrink an element dynamically, you use the «scale()» method in CSS and provide x-axis (width) and y-axis (height) values.

    ...

    the following code increases the width of the element two times its original size, and increases the height four times its original size: ___

    transform: scale(2,4);

    To scale the box so that it's twice as wide and twice as tall as the original box, add
    scale(2,2) to the transform lines, as follows:

    transform: translate(200px,100px) scale(2,2);

    To rotate an element turns it clockwise by a specified number of degrees.

    ...

    To rotate an element, you use the rotate() method in CSS and specify the degrees of rotation.

    ...

    the following code rotates an element by 30 degrees in the 2D plane:

    transform: rotate(30deg);

    3D rotation uses the ___

    rotateX() and rotateY() methods.

    With rotateX(), the element rotates around its x-axis, and rotateY() rotates the element around its y-axis.

    ...

    The following code rotates an element 180 degrees around its x-axis.

    transform: rotateX(180deg);

    to see the 3D effect occurring requires JavaScript or some other form of scripting;

    ...

    Using the rotateY(180deg) method with an element that display text results in the text appearing backwards

    ...

    To «skew» an element is to stretch it in one or more directions.

    ...

    To skew an element using CSS, you use the «skew()» method and provide x-axis and y-axis values, in degrees, to create an angular shape.

    ...

    the following code turns an element 20 degrees around the x-axis
    and 30 degrees around the y-axis:

    transform: skew(20deg,30deg);

    3D skewing uses the «skewX()» and «skewY()» methods to skew an element around its x-axis and y-axis, respectively.

    ...

    the following code skews an element 45 degrees : ___

    transform: skewX(45deg);

    «Perspective», in terms of drawings and illustrations, is the convergence of lines that give the illusion of depth.

    ...

    The «CSS3 3D perspective property» defines how a browser renders the depth of a 3D transformed element.

    ...

    The «perspective property» takes on a number value: lower values (in the range of 1 to 1000) create a more pronounced effect than higher values.

    ...

    perspective applies only to 3D transformed elements.

    ...

    The general syntax for «perspective» is:

    perspective: number;

    The following is a markup example for perspective: ___

    #div1{ ...
    perspective: 100px; }

    #div2{ ...
    transform: rotateX(60deg); }
    ...
    <div id="div1"> ...
    <div id="div2">Transformed element</div>
    </div>

    Now let's focus on «transitions» and animation. A transition is a change from one thing to another;

    ...

    in CSS, a «transition» is the change in an element from one style to another.

    ...

    You use the «transition property» to create a ___

    CSS3 transition.

    In CSS3, the action of a transition is visible. The changes render onscreen in an ___

    animated fashion as if powered by a script, but no scripts are involved.

    At a minimum, you must specify the CSS property to be acted upon during the transition.

    ...

    At a minimum, you must specify the CSS property to be acted upon during the transition. This can be an ___

    element's position, size, color, background color, letter spacing, rotation, and so on.

    Most transitions also specify the length (duration) of the transition.

    ...

    Most transitions also specify the length (duration) of the transition. If the duration value is not set, the default is 0.

    ...

    You specify CSS3 transitions using the properties ___

    transition, transition-property, transition-delay, transition-duration, transition-timing- function

    transition ? ___

    Is the shorthand way to specify settings for transition-property, transition-delay, transition-duration, and transition-timing-function at once

    transition-property ? ___

    Specifies the CSS properties that are to be transitioned

    transition-delay ? ___

    Specifies the amount of time that passes after the value changes and before the transition starts; in seconds or milliseconds

    transition-duration ? ___

    Specifies the length of the transition in seconds or milliseconds; starts after the transition-delay property

    transition-timing-function ? ___

    Specifies the speed curve of the transition effect; allows a transition to change speed over its duration (Default value = ease, which starts relatively fast and slows down toward the end)

    The following is an example of a simple transition that displays text in a box: ___

    ...
    #wrapper {
    ...
    }
    #wrapper #front, #wrapper:hover #back{
    opacity: 1;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: linear;
    }
    #wrapper:hover #front, #wrapper #back {
    opacity: 0;
    }
    ...
    <div id="wrapper">
    <div id="front">Knock knock</div>
    <div id="back">Who's there?</div>
    </div>
    </body>

    Please allow access to your computer’s microphone to use Voice Recording.

    Having trouble? Click here for help.

    We can’t access your microphone!

    Click the icon above to update your browser permissions above and try again

    Example:

    Reload the page to try again!

    Reload

    Press Cmd-0 to reset your zoom

    Press Ctrl-0 to reset your zoom

    It looks like your browser might be zoomed in or out. Your browser needs to be zoomed to a normal size to record audio.

    Please upgrade Flash or install Chrome
    to use Voice Recording.

    For more help, see our troubleshooting page.

    Your microphone is muted

    For help fixing this issue, see this FAQ.

    Star this term

    You can study starred terms together

    NEW! Voice Recording

    This is a Plus feature