- Web Developer's Reference Guide
- Table of Contents
- Web Developer's Reference Guide
- Credits
- About the Authors
- About the Reviewers
- www.PacktPub.com
- Preface
- 1. HTML Elements
- DOCTYPE
- html
- Document metadata
- Semantic content sections
- Content sections
- Inline elements
- Embedded content
- Tables
- Forms
- Drawing elements
- 2. HTML Attributes
- Global attributes
- Miscellaneous
- accept
- accept-charset
- action
- alt
- async
- autocomplete
- autofocus
- autoplay
- autosave
- cite
- cols
- colspan
- datetime
- disabled
- download
- content
- controls
- for
- form
- formaction
- height
- href
- hreflang
- label
- list
- loop
- max
- maxlength
- media
- method
- min
- multiple
- name
- novalidate
- pattern
- placeholder
- poster
- readonly
- rel
- required
- reversed
- rows
- rowspan
- scope
- selected
- size
- src
- start
- step
- type
- value
- width
- wrap
- 3. CSS Concepts and Applications
- Basic selectors
- Combinators
- Pseudo-classes
- Validation
- Pseudo-elements
- Generated content
- 4. CSS Properties – Part 1
- Animation
- Background
- Box model
- Border radius
- Unit
- Flexible box (flexbox)
- Summary
- 5. CSS Properties – Part 2
- Fonts
- Transform
- Positioning
- Text
- Tables
- Words and paragraphs
- Paging
- 6. CSS Properties – Part 3
- Page box
- List
- Counter
- Drop shadows
- Display and visibility
- Masking and clipping
- Image rendering and orientation
- User interface
- 3-Dimensional
- Summary
- 7. CSS Functions
- Filter
- brightness()
- contrast()
- grayscale()
- invert()
- hue-rotate()
- blur()
- saturate()
- sepia()
- Transforms
- matrix()
- matrix3d()
- rotate()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- skew()
- skewX()
- skewY()
- steps()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()
- Colors
- Gradients
- Values
- Miscellaneous
- At-rules
- Global CSS keyword values
- Summary
- Filter
- 8. JavaScript Implementations, Syntax Basics, and Variable Types
- History of JavaScript
- JavaScript implementations
- The language syntax
- The character set
- Data type
- Variable, scope, and memory
- 9. JavaScript Expressions, Operators, Statements, and Arrays
- Expressions
- Operators
- Overview
- Arithmetic operators
- Logical operators
- Assignment operators
- Exponentiation assignment (**=)
- Relational operators
- Statements
- Arrays
- Array types
- Array type object
- Creating arrays
- Reading and writing array elements
- Multidimensional arrays in JavaScript
- Properties in an array
- Array methods
- ECMA5 Array methods
- array.prototype.map()
- array.prototype.filter()
- array.prototype.reduce()
- array.prototype.forEach()
- array.prototype.indexOf()
- array.prototype.lastIndexOf()
- array.prototype.every()
- array.prototype.some()
- array.prototype.reduceRight()
- Returns
- Parameters
- Description
- 10. JavaScript Object-Oriented Programming
- Polymorphism
- Objects
- Creating objects
- Design patterns
- Property getter and setter
- Deleting properties
- Testing properties
- Enumerating properties
- Property attributes
- Serializing objects
- Objects methods
- Functions and methods
- Classes and modules
- Inheritance
- Built-in objects
- Global objects
- Date object
- Math object
- The RegExp object
- String object
- Array objects
- .Pop()
- .Push()
- .ToString()
- .ValueOf()
- .Join()
- .Splice()
- .sort()
- .reverse()
- .slice()
- .concat()
- Parameters
- Returns
- Description
- 11. Extending JavaScript and ECMAScript 6
- Compatibility and goals
- JavaScript subset and extensions
- Scoped variables and constants
- Shorthand functions
- Multiple catch clauses
- E4X – ECMAScript for XML
- ECMAScript 6 features
- Arrow functions
- Classes
- Enhanced object literals
- Template strings
- Destructuring assignment
- Extended parameter handling
- Bindings
- Iterators and the for...of operator
- Generators
- Better Unicode support
- Modules
- Module loaders
- Collections
- Proxies
- Symbols
- Subclassable built-ins
- Promises
- Core math library APIs
- Binary and octal literals
- Reflect API
- Reflect.get(target, prop, [receiver])
- Reflect.set(target, prop, value, [receiver])
- Reflect.has(target, prop)
- Reflect.apply(target, receiver, args)
- Reflect.construct(target, args)
- Reflect.getOwnPropertyDescriptor(target, prop)
- Reflect.defineProperty(target, prop, desc)
- Reflect.getPrototypeOf(target)
- Reflect.setPrototypeOf(target, newProto)
- Reflect.deleteProperty(target, prop)
- Reflect.enumerate(target)
- Reflect.preventExtensions(target)
- Reflect.isExtensible(target)
- Reflect.ownKeys(target)
- Tail calls
- 12. Server-side JavaScript – NodeJS
- File and process management
- Utilities
- Events
- Crypto
- Buffer
- Console
- npm (Node Package Manager)
- Stream
The power of CSS is mind-boggling; not only can we do amazing animations just with CSS, but CSS can also handle three-dimensional designs.
Let's check out the properties that allows us to do so.
The
perspective CSS property defines the distance between the screen and the user in the Z axis, and it looks like this:
perspective: 300px;
Keep in mind that the perspective property is applied to the parent element in order to enable a 3D canvas or space in which its child elements will move.
This property accepts a keyword value, normal, and a length value.
This is when we use one of the following units: px, em, in, mm, cm, vw, and so on.
The lower the value, the closer the elements will move in the Z axis. Thus, the perspective is more pronounced. With higher values, the perspective effect is less intense.
CSS:
/*Enable perspective for child elements by applying it on the parent container*/
.parent-container { perspective: 300px; }
/*Child element will move in a 3D plane*/
.parent-container .element { transform: rotateX(170deg); }The
perspective-origin CSS property defines the origin of the X and Y axis of an element in a 3D space, and it looks like this:
Perspective-origin: 24% center;
This is what is known as the
vanishing point used by the perspective property. The perspective-origin property supports a combination of three types of value: a length value, a percentage value, and five keyword values in both X and Y axes.
The five keyword values are top, right, bottom, left, and center.
CSS:
Adding to the prior CSS from the perspective example:
/*Enable perspective for child elements by applying it on the parent container*/ /*The origin of the perspective X and Y-axis*/ .parent-container { perspective: 300px; perspective-origin: 24% center; } /*Child element will move in a 3D plane*/ .parent-container .element { transform: rotateX(170deg); }
The
backface-visibility CSS property defines whether the rear face of an element that's facing the viewer is visible or not, and it looks like this:
backface-visibility: hidden;
The
backface-visibility property supports two self-explanatory keyword values: visible and hidden.
CSS:
And finalizing the prior example from the perspective-origin example:
/*Enable perspective for child elements by applying it on the parent container*/
/*The origin of the perspective X and Y-axis*/
.parent-container {
perspective: 300px;
perspective-origin: 24% center;
}
/*Child element will move in a 3D plane*/
/*The backside of the element will not be visible*/
.parent-container .element {
transform: rotateX(170deg);
backface-visibility: hidden;
}-
No Comment