- 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
There are three ways to create the effect of depth: using lights, shadows, or both.
Let's see how we create box shadows for our containers.
The box-shadow CSS property creates one or several shadows on an element, and it looks like this:
box-shadow: 10px 10px 13px 5px rgba(0, 0, 0, .5) inset;
The box-shadow property supports three, four, five, or six values in the same declaration: four length values, one color value, and the keyword inset.
We use one of the following units when we use the length values: px, em, in, mm, cm, vw, and so on.
The four length values are as follows:
- The first value is for the horizontal offset of the shadow. Negative values are valid. This value is required.
- The second value is for the vertical offset of the shadow. Negative values are valid. This value is required.
- The third value is for the blur radius of the shadow. The larger the value, the more spread the shadow becomes, but also more translucent. Negative values are not valid. This value is required.
- The fourth value is for the size of the shadow (or "spread radius"). Negative values are valid. This value is optional.
This is the fifth value in the list. It supports all color modes: HEX, RGB, RGBa, HSL, HSLs, and color name.
This value is optional. If no color is specified, it's up to the browser to decide which color to use. Some browsers may not even display a shadow at all without a color value.
The color value can go either at the beginning or at the end of the declaration but never between the length values; otherwise, the box-shadow property won't work.
The sixth value in the list is
inset. It creates the shadow inside the container, like a background. However, if there is actually a background color or image, the inset shadow will sit on top of it but under the content without affecting the layout of the child elements of the container.
This value is optional. If this value is not declared, the shadow defaults to displaying the shadow outside the element.
This value can go either at the beginning or at the end of the declaration but never between the length values; otherwise, the box-shadow property won't work.
CSS:
/*Left 10px, top 10px, blur 13px, spread 5px, RGBa mode, inside the element*/
.element {
box-shadow: 10px 10px 13px 5px rgba(0, 0, 0, .5) inset;
}-
No Comment