Reading...
Play button
Play button
Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
74 Cards in this Set
- Front
- Back
|
HTML5
|
HTML5 is a new standard of HTML which includes:
-New HTML elements and attributes. -Full CSS3 support. -Video and audio elements. -2D and 3D graphics. -Local storage. -A local SQL database. |
|
|
CSS3
|
A new standard of CSS.
|
|
|
<!DOCTYPE html>
|
The HTML5 <!DOCTYPE> declaration that needs to be at the start of all HTML5 web pages.
<!DOCTYPE html> <html> [More HTML5 code here] </html> |
|
|
<meta charset="UTF-8" />
|
This is the new HTML5 "meta" tag that specifies the character set being used for a website.
Although a [meta] tag without a closing [/] is valid ALWAYS use the closed [/] to keep consistent so when you edit HTML4 websites the code will still be valid. |
|
|
<script src="script.js"></script>
|
In HTML5 I don't need to use the [type="text/javascript"] attribute with the [script] tag as the browser will infer that JavaScript is the type.
|
|
|
<link rel="stylesheet" href="style.css" />
|
In HTML5 I don't need to use the [type="text/css"] attribute with the [link] tag for CSS files as the browser will infer that CSS is the type.
|
|
|
<i>Text here</i>
|
In HTML5 the [i] tag represents text in an "alternate voice" such as such as transliterated foreign words, technical terms, taxonomical designations, thoughts or ship names in Western texts.
The text below is wrapped inside an [i] tag as it's a thought. <p><i>I hope this works</i>, he thought.</p> |
|
|
<b>Text here</b>
|
In HTML5 the [b] tag represents text that is "stylistically offset" such as key words in a document, product names in a review, actionable works in interactive text-driven software (like <b>ls -a</b> when writing down linux commands) and article leads.
The code below represents an article lead. <p><b class="lead">Seattle Ranked #1 US City in 2015</b></p> |
|
|
<em>Text here</em>
|
In HTML5 the [em] tag represents text that has a "stress emphasis", or text that I'd pronounce differently than the rest of surrounding text. Below is an example.
<p>Make sure you sign up <em>before</em> September 1, 2014.</p> |
|
|
<strong>Text here</strong>
|
In HTML5 the [strong] tag represents text that has a "strong importance". This has a higher precedence than the [em] tag. Below is an example.
<p>Make sure you sign up <strong>before September 1, 2014</strong>.</p> |
|
|
<section>[Code here]</section>
|
"The [section] elements represents a generic document or application section."
~W3C Specification A [div] has no semantic meaning, but the [section] element does. It's used for grouping together thematically related content. Per Jeremy Keith in "HTML5 for Web Designers" only replace a [div] with a [section] tag if all of the content contained inside is related. Below is code showing paintings for an art gallery website. <section> <h2>The Gallery</h2> [Info on the paintings here] </section> |
|
|
The Document Outline with an Example of an Outline for the [section] Element
|
The document outline produces an outline summary of an HTML document based on how it is marked up.
The following elements have their own self-contained outline including: [article] [aside] [nav] [section] Below is an example of an outline for the [section] element. More than one [h1] elements are OK as long as it's not overdone. <h1>Page Title</h1> <section> <h1>Sub-section Title</h1> </section> 1. Page Title 1.1. Sub-section Title |
|
|
<header>
[Code here] </header> |
A group of introductory or navigational aids.
~W3C Specification There can be more than one [header]s on a page. A [header] element is usually placed at the top of a page but is defined more by its content than its position. Art gallery website code example below: <header> [Logo here] [Nav here] </header> Another example is below as the [header] element code be included anywhere in website. <section> <header> <h1>The heading of the section</h1> <p>This is the content of the header.</p> </header> <p>This is some info within the section.</p> </section> |
|
|
<footer>
[Code here] </footer> |
The [footer] element represents a footer for its nearest ancestor sectioning content or sectioning root element.
~W3C Specification Like the [header] the [footer] element is not position-dependent. It should describe the content it is contained within. Multiple [footer]s can be used. Below is an example for an art gallery website: <footer> <nav> <ul> <li>Gallery</li> <li>About</li> <li>Contact</li> </ul> </nav> </footer> Another example is below as the [footer] element code be included anywhere in website. <section> <header> <h1>The heading of the section</h1> </header> <p>This is some info within the section.</p> <footer> <p>By Author Name</p> </footer> </section> |
|
|
<aside>
[Code here] </aside> |
The [aside] element covers various contexts:
-When used within an [article] element, the [aside] contents should be related to the particular [article] element it is contained within. -When used outside an [article] element, the [aside] contents should be specifically related to the website as a whole. -This CAN be nested in a [section] element. An [aside] element is appropriate when it is used to represent content that is NOT the primary focus of an article or website, but IS still related to the [article] element contents or website. An art gallery website example: <section> <header> <h1>The heading of the section</h1> </header> <p>This is some info within the section.</p> <aside> <p>Some secondary info.</p> </aside> <footer> <p>By Author Name</p> </footer> </section> |
|
|
<nav>
[Code here] </nav> |
The [nav] element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
~W3C Specification The [nav] element is intended for major navigation. Below is an example for an art gallery website. <nav id="utility"> <ul> <li>Gallery</li> <li>About</li> <li>Contact</li> </ul> </nav> |
|
|
<article>
[Code here] </article> |
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in priniciple, independently distributable or reusable, e.g. in syndication.
~W3C Specification Content can be placed in an [article] element if I could syndicate it in an RSS or Atom feed. Some uses for the [article] tag: -A blog post -A news story -A comment on a post -A review <article> [Code here] </article> |
|
|
<main>
[Code here] </main> |
The main element represents the main content of the body of a document or application.
~W3C Specification The main content area consists of content that is directly related to or expands upon the center topic of a document or central functionality of an application. ~W3C Specification DON'TS for the [main] element: -Don't include more than one [main] element in a document. -Don't include the [main] element inside of an [article], [aside], [footer], [header] or [nav] element <main> [Code here] </main> |
|
|
<figure>
[Code here] </figure> |
The [figure] element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document's meaning.
~W3C Specification <figure> <img src="image.jpg" alt="My Picture" /> </figure> |
|
|
<figure>
<img src="image.jpg" alt="My Picture" /> <figcaption>This is a caption for the picture.</figcaption> </figure> |
The [figcation] element represents a caption or legend for a [figure].
~W3C Specification |
|
|
<time>
[Code here] </time> |
The [time] element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.
~W3C Specification The example below could be used for the date when a photo and caption was added to an art gallery website. The [datetime] attribute allows we to display the date as "09/16/2013" rather than "2013-09-16". Without the [datetime] attribute, content must be a valid date, time, or precise datetime. <time datetime="09/16/2013">09/16/2013</time> |
|
|
HTML5 [input] Types
|
New HTML5 [input] types are below:
-Search -URL -Tel -Number -Range -Date -Month -Week -Time -Datetime -Datetime-local If a browser doesn't suppor the [input] type, it defaults to text. |
|
|
Search [input] Type
|
The [input] element with a type attribute whose value is "search" represents a one-line plain-text edit control for entering one or more search terms.
~W3C Specification An example: <input type="search" /> |
|
|
Email [input] Type
|
The "email" [input] looks just like a regular text input, but with added usability on mobile devices.
An example: <input type="email" /> |
|
|
URL [input] Type
|
The "url" [input] looks just like a regular text input, but with added usability on mobile devices.
An example: <input type="url" /> |
|
|
Date [input] Type
|
The [input] element with a type attribute whose value is "date" represents a control for setting the element's value to a string representing a date.
An example which includes a date picker on Desktop and mobile machines: <input type="date" /> |
|
|
Tel [input] Type
|
The "tel" [input] looks just like a regular text [input], but with added usability on mobile devices.
When using a mobile phone for the example below, the keyboard will change to show digits to dial when the "tel" [input] field gets focus. <input type="tel" /> |
|
|
Number [input] Type
|
The [input] element with a type attribute whose value is "number" represents a precise control for setting the element's value to a string representing a number.
~W3C Specification When the example below is used on browsers that support HTML5, controls on the right side of the [input] element enable me to easily increase or decrease the number added to the [input] field. <input type="number" /> |
|
|
Range [input] Type
|
The [input] element with a type attribute whose value is "range" represents an imprecise control for setting the element's value to a string representing a number.
~W3C Specification Below is an example. On a HTML5-supported browser I'll see a slider control where I can change a number value. <input type="range" /> |
|
|
Month [input] Type
Week [input] Type |
The "month" [input] type provides controls for me to select a given month - see below:
<input type="month" /> The "week" [input] type provides controls for me to select a given week - see below: <input type="week" /> |
|
|
Time [input] Type
Datetime-Local [input] Type |
The "time" [input] type adds controls that allows me to select a given time - see below:
<input type="time" /> The "datetime-local" [input] type adds controls that allows me to select a given time AND date - see below: <input type="datetime-local" /> |
|
|
Datetime-Local vs. Datetime [input] Type
|
"Datetime-Local":
The input element with a type attribute whose value is "datetime-local" represents a control for setting the element's value to a string representing a local date and time (with no timezone information). ~W3C Specification <input type="datetime-local" /> "Datetime" The input element with a type attribute whose value is "datetime" represents a control for setting the element’s value to a string representing a global date and time (with timezone information). <input type="datetime-local" /> |
|
|
Color [input] Type
|
The [input] element with a type attribute whose value is "color" represents a color-well control, for setting the element's value to a string representing a simple color.
~W3C Specification When I click into a "color" [input] type field a color picker appears for me to chose a color of the field. See below: <input type="color" /> |
|
|
HTML5 Form Elements
|
HTML5 provides new form elements:
-Datalist -Keygen -Output |
|
|
[datalist] Element
|
The [datalist] element represents a set of option elements that represent predefined options for other controls.
~W3C Specification This example gives auto-complete options when I type in a browser name within the [database] element. For example, if I type "Chr" in the [input] field then "Chrome" will appear as an auto-complete option. The list="browsers" attribute value of the [input] element and the id="browsers" attribute value of the [datalist] elements MUST be the same for this to work. <input type="text" list="browsers" /> <datalist id="browsers"> <option value="Chrome" /> <option value="Firefox" /> <option value="Internet Explorer" /> <option value="Opera" /> <option value="Safari" /> </datalist> |
|
|
"placeholder" Input Attribute
|
The "placehold" attribute allows you to specify a message that is shown INSIDE the form field, HIDDEN when the user starts typing, and then RETURNS when focus is lost on the input (when the input is blank).
<input type="text" placeholder="Enter your email..." /> |
|
|
"autofocus" Input Attribute
|
The "autofocus" attribute will automatically focus the specified input when the page is rendered.
<input type="text" autofocus /> |
|
|
"required" Input Attribute
|
If you add the new HTML5 "required" attribute to an input, when the form is submitted, the user will be notified of an error if the field is left BLANK.
<input type="text" required /> |
|
|
"pattern" Input Attribute
|
The "pattern" attribute accepts a JavaScript regular expression that can be used to validate a form field to match the pattern.
The form below accepts ONLY three digits from 0-9. If the user submits the form not matching this pattern then an error message appears. <input type="text" pattern="[0-9]{3}" /> |
|
|
Longhand "border-radius"
|
The "border-radius" property applies rounded corners to borders.
**Longhand** .box { background: #808080; height: 50px; width: 200px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; -moz-border-top-left-radius: 15px; -moz-border-top-right-radius: 15px; -moz-border-bottom-right-radius: 15px; -moz-border-bottom-left-radius: 15px -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -o-border-top-left-radius: 15px; -o-border-top-right-radius: 15px; -o-border-bottom-right-radius: 15px; -o-border-bottom-left-radius: 15px; } |
|
|
Shorthand "border-radius"
|
**Shorthand to Make All Corners Have the Same Border Radius**
.box { background: #808080; height: 50px; width: 200px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; } **Another Method of Shorthand to Make All Corners Have the Same Border Radius** .box { background: #808080; height: 50px; width: 200px; border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px; -o-border-radius: 15px 15px 15px 15px; } |
|
|
Order of Border Radius Values
|
border-radius: <top left> <top right> <bottom right> <bottom left>;
-moz-border-radius: <top left> <top right> <bottom right> <bottom left>; -webkit-border-radius: <top left> <top right> <bottom right> <bottom left>; -o-border-radius: <top left> <top right> <bottom right> <bottom left>; |
|
|
Border Radius Property Using Percentages
|
This code displays a perfect circle.
.box { width: 100px; height: 100px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; } |
|
|
Box Shadow
|
The "box-shadow" property specifies a shadow on an element.
.box { box-shadow: 1px 2px 2px #000; -moz-box-shadow: 1px 2px 2px #000; -webkit-box-shadow: 1px 2px 2px #000; -o-box-shadow: 1px 2px 2px #000; } |
|
|
Box Shadow Values Explained
|
**Explanation of Values**
-Inset (OPTIONAL): If used the shadow occurs INSIDE the element. If omitted the shadow occurs OUTSIDE the element. -Offset-x: The shadow is moved on the x-axis. -Offset-y: The shadow is moved on the y-axis. -Blur-radius: This property alters the blur amount of the shadow, causing it to become bigger and lighter with a larger value. -Spread-radius (OPTIONAL): This property causes the shadow to expand or shrink. -Color: The color of the shadow. **Code Example** box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>; -moz-box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>; -webkit-box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>; -o-box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>; |
|
|
Multiple Box Shadows on the Same Element
|
Use a comma after a "box-shadow" value to add another "box-shadow" value for the same element.
.box { box-shadow: 1px 1px 2px #000, inset 1px 1px 2px blue; -moz-box-shadow: 1px 1px 2px #000, inset 1px 1px 2px blue; -webkit-box-shadow: 1px 1px 2px #000, inset 1px 1px 2px blue; -o-box-shadow: 1px 1px 2px #000, inset 1px 1px 2px blue; } |
|
|
Negative Box Shadow Values
|
In the example below the shadow is moved 1px to the left and 2px up.
If the values were 1px and 2px INSTEAD of -1px and -2px then the shadow would be moved 1px to the right and 2px to the left. .box { box-shadow: -1px -2px 2px #000; -moz-box-shadow: -1px -2px 2px #000; -webkit-box-shadow: -1px -2px 2px #000; -o-box-shadow: -1px -2px 2px #000; } |
|
|
Text Shadow
|
The "text-shadow" property is very similar to "box-shadow", but it applies the shadow to text, as the name implies.
h1 { text-shadow: 1px 2px 2px #000; -moz-text-shadow: 1px 2px 2px #000; -webkit-text-shadow: 1px 2px 2px #000; -o-text-shadow: 1px 2px 2px #000; color: #fff; } -moz-text-shadow: <offset-x> <offset-y> <blur-radius> <color>; -webkit-text-shadow: <offset-x> <offset-y> <blur-radius> <color>; -o-text-shadow: <offset-x> <offset-y> <blur-radius> <color>; text-shadow: <offset-x> <offset-y> <blur-radius> <color>; |
|
|
Box Sizing Definition
|
The "box-sizing" property is used to change the default CSS box model, which is used to calculate widths and heights of given elements.
|
|
|
Box Sizing and Examples
|
Content-box:
This is the default value. The width and height are measured by including only the content, but not the border, margin or padding Padding-box: The width and height include the padding, but do not include the border or margin. Padding Box Example below where the "padding" property value is removed from the total size of the element so the new width of the element is 304px: .box { -moz-box-sizing: padding-box; -webkit-box-sizing: padding-box; -o-box-sizing:padding-box; box-sizing: padding-box; border:2px solid black; margin:20px; padding: 10px; width: 300px; } Border Box Example below where the "margin" and "padding" property values are removed from the total size of the element so the new width of the element is 300px: .box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; border: 2px solid black; margin: 20px; padding: 10px; width: 300px; } |
|
|
Multiple Backgrounds
|
CSS3 allows you to apply multiple backgrounds to an element. They are stacked in the order in which you specify them.
First, specify your "background-images" in a comma-delimited list in this longhand example: .box { background-image: url(bg1.png), url(bg2.png); background-position: top left, center right; background-repeat: no-repeat, no-repeat; } A shorthand example: .box { background: url(bg1.png) top left no-repeat, url(bg2.png) center right no-repeat; } |
|
|
Background Shorthand
|
.box {
<background-color> <background-image> <background-repeat> <background-attachment> <background-position>; } |
|
|
CSS3 Color Property
|
**RGBa**
RGB represents the three additive primary colors, red, green and blue. In CSS3, we can also pass the alpha value (the "a" in RGBa), which represents the opacity of a color. The example below has a value of black that is 75% opaque: .box { color: rgba(0, 0, 0, 0.75); } **HSLa** CSS3 also adds HSLa (Hue, Saturation, Lightness). In addition to providing the hue, saturation, and lightness values, you can specify the alpha value for the opacity of the color. The example below has a 240 hue value, 100% saturation value, 50% saturation value, and 0.75 alpha value. .box { color: hsla(240, 100%, 50%, 0.75); color: -moz-hsla(240, 100%, 50%, 0.75); color: -o-hsla(240, 100%, 50%, 0.75); color: -webkit-hsla(240, 100%, 50%, 0.75); } |
|
|
RGBa vs HSLa
|
HSLa is more intuitive than RGBa, and it's much easier to make color adjustments on the fly.
|
|
|
Opacity
|
CSS3 allows you to specify the opacity of an element using the "opacity" property.
The example below makes the black backround color 45% opaque: .box { background: #000; opacity: 0.45; -moz-opacity: 0.45; -o-opacity: 0.45; -webkit-opacity: 0.45; } |
|
|
Opacity on an element affects all elements that are nested inside.
|
In the example below a 45% "opacity" value is applied to the element (including it's "background-image" value) and text ("Hello"):
<style> .box { background: url(bg.jpg) center no-repeat; opacity: 0.45; -moz-opacity: 0.45; -o-opacity: 0.45; -webkit-opacity: 0.45; } </style> <div class="box"> <h2>Hello.</h2> </div> |
|
|
Gradients
|
CSS3 provides the ability to create gradients, smooth transitions between two or more colors.
There are two types of gradients browsers support: - Linear gradients - Radial gradients |
|
|
Linear Gradient
|
To create a linear gradient, we need to specify the starting point, the ending point, and optional stop-color points.
line-gradient(<angle[OPTIONAL]> to <side-or-corner>, <color-stop>); The example below makes the gradient start as red then fade into yellow at the bottom: .box { background: linear-gradient(to bottom, red, yellow); } ANOTHER way to write this with degree values is below: .box { background: linear-gradient(180deg, red, yellow); background: -moz-linear-gradient(180deg, red, yellow); background: -o-linear-gradient(180deg, red, yellow); background: -webkit-linear-gradient(180deg, red, yellow); } Degree value keywords below: - to top == 0deg - to left == 90deg - to bottom == 180deg - to right == 270deg |
|
|
Radial Gradient
|
A radial gradient, unlike a linear gradient, creates a gradient that extends from an origin, the center of the element, extending outward in a circular or elliptical shape.
A "radial-gradient" consists of: - The center - The ending shape contour and position - Color stops In the example below the gradient starts at "aqua" in the center and then ends at "blue" on the outer edges. .box { background: radial-gradient(aqua, blue); background: -moz-radial-gradient(aqua, blue); background: -o-radial-gradient(aqua, blue); background: -webkit-radial-gradient(aqua, blue); } |
|
|
Radial Gradient Values
|
**Radial Gradient Values**
radial-gradient(<shape> <size> at <position>, <color-stop>); -moz-radial-gradient(<shape> <size> at <position>, <color-stop>); -o-radial-gradient(<shape> <size> at <position>, <color-stop>); -webkit-radial-gradient(<shape> <size> at <position>, <color-stop>); **Radial Gradient Values Explained** - <shape>: The shape of the gradient can be a circle or elipses. The default is ellipsis. - <size>: The size fo the gradient consists of keywords below. The size can also be a length or percentage. -- closest-side -- closest-corner -- farthest-side -- farthest-corner - <position>: The default is "center" and I can use the same values as for the "background-position" property. - <color-stop>: The "color-stop" consists of a color and an optional stop position, which can be either a percentage or length. There can be MULTIPLE color stops. |
|
|
Radial Gradient with Color Stops
|
.box {
background: radial-gradient(circle at top left, aqua, blue); background: -moz-radial-gradient(circle at top left, aqua, blue); background: -o-radial-gradient(circle at top left, aqua, blue); background: -webkit-radial-gradient(circle at top left, aqua, blue); } |
|
|
@font-face
|
Using "@font-face", we have the ability to provide online fonts for use on our websites.
The example below is a template that can be used for all CSS created using "@font-face" and a webfont generator like at http://www.fontsquirrel.com/tools/webfont-generator. Also I need to upload a TTF or OTF font file to the webfont generator. **EXAMPLE** @font-face { font-family: 'athena_unicoderegular'; src: url('athena_u-webfont.eot'); src: url('athena_u-webfont.eot?#iefix') format('embedded-opentype'), url('athena_u-webfont.woff') format('woff'), url('athena_u-webfont.ttf') format('truetype'), url('athena_u-webfont.svg#athena_unicoderegular') format('svg'); font-weight: normal; font-style: normal; } |
|
|
Applying an @font-face Rule to an Element
|
Example below includes fallback fonts:
h1 { font-family: 'athena_unicoderegular', 'Times New Roman', serif; } |
|
|
CSS3 Transforms
|
Using the "transform" property in CSS3, we can "translate", "rotate", "scale", and "skew" elements in CSS.
|
|
|
transform: translate(<value #1>, <value #2>);
|
**Example**
.box { transform: translate(20px, 30px); } **Explained** The values for "translate" can be a length or percentage. "0" can also be used as a value. translate(<x value>, <y value>); **The Values Can Be Used Separately Like the Example Below** - "translateX" .box { transform: translateX(20px); } - "translateY" .box { transform: translateY(30px); } |
|
|
transform: rotate(<number>deg);
|
With "rotate", you can rotate an element clockwise around its origin by the specified angle.
.box { transform: rotate(45deg); } |
|
|
transform: scale(<unitless number>);
|
With "scale", you can do a 2D scale by a specified unitless number.
.box { transform: scale(1.2); } **Explanation** scale(<scale x-axis>, <scale y-axis>); If the <scale y-axis> valued isn't specified then here's the output: scale(<scale x-axis>); |
|
|
scaleX and scaleY Translate Values
|
**Using the x and y values Individually**
.box { transform: scaleX(1.2); } .box { transform: scaleY(0.3); } |
|
|
transform: skewX(<degrees>);
transform: skewY(<degrees>); |
With "skewX" or "skewY", an element is skewed around the x or y axis by the angle specified.
There is no "skew" property so I need to specify "skewX" OR "skewY" properties for one element and NOT both. **Example** .box1 { transform: skewX(-25deg); } .box2 { transform: skewY(-85deg); } |
|
|
CSS3 Transitions
|
CSS3 provides transitions, which allows you to transition between two states of a specified element.
The example below transitions the "background-color" of the element from "black" to "blue" over 0.2 seconds: .box { background: black; transition: background-color 0.2s ease-in-out; } .box:hover { background: blue; } |
|
|
"transition" Property Shorthand
|
transition: <property> <duration> <timing-function> <delay>;
**<property>** The CSS property I want to transition. **<duration>** The amount of time I want the transition to take place in seconds. The default value is "0s" or 0 seconds. **<timing-function>** The timing of the "transition" itself. Keywords for this value are: - ease - ease-in - ease-in-out - linear - cubic-bezier - step-start - step-end - steps() **<delay>** The amount of time to wait between the change this is being requested on a specific property, and the start of the "transition". |
|
|
Setting "transition" Values Individually
|
Example:
.box { transition-property: background-color; transition-duration: 0.2s ; transition-timing-function: ease-in-out; transition-delay: 0.1s; } |
|
|
"transition: all [...];" Property
|
In the example below all black background-color and white text color are "all" transitioned to a grey background-color and black text color when the ".box" element is hovered over.
.box { background-color: black; color: white; transition: all 0.2s ease-in-out; } .box:hover { background-color: grey; color: black; } |
|
|
Progressive Enhancement
|
The term "progressive enhancement" refers to the use of newer features that add to the experience in modern browsers that support those features, but doesn't detract from the experience in older browsers.
Example: .box { background: #ccc; border-radius: 10px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); } |
