/* CSS3: Styles */

.border-radius{
    background: grey;
    height: 50px;
    width: 200px;
}

/* Border Radius */
/*
- This property applies rounded corners to borders
- To achieve this, you can specify 4 different properties which represent each corner
*/

.border-radius{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* You can use the shorthand version to specify all sides at once */
.border-radius {
    border-radius: 15px;
}
/* You can specify each border-radius value individually */
.border-radius {
    border-radius: 15px 15px 15px 15px;
    /* top-left top-right bottom-right bottom-left */
}

/* You can also specify the border-radius value in percentages */
.border-radius {
    border-radius: 8%;
}

/* Box Shadow */
/*
- This property specifies a shadow on an element
*/
.box-shadow{
    box-shadow: 1px 2px 2px #000;
    /* Box shadow properties
    - Inset: If it is not specified(which is the default), a drop shadow is created, rather than an inset shadow
    - Offset-x: Move the shadow along the x-axis
    - Offset-y: Move the shadow along the y-axis
    - Blur-radius: Alters the blur amount of the shadow, causing it to become bigger and lighter
    - Spread-radius: Causes the shadow to expand or shrink
    - Color: Color of the shadow
    */

    /* If you want to specify the spread-radius instead of blur-radius, you need to add a 0 */
    box-shadow: 1px 2px 0 2px #000;
}

/* You can specify multiple box-shadows via a comma-separated list */
.box-shadow{
    box-shadow: 1px 2px 2px #000,
    inset 1px 1px 2px blue;
}
/* You can also specify negative values on the box-shadow */
.box-shadow{
    box-shadow: -1px -2px 2px #000;
}

/* Text Shadow */
/*
- This property is very similar to box-shadow, but it applies the shadow to text
*/
.text-shadow{
    text-shadow: 1px 2px 2px #000;
    /* Text shadow properties
    - Offset-x: Move the shadow along the x-axis
    - Offset-y: Move the shadow along the y-axis
    - Blur-radius: Alters the blur amount of the shadow, causing it to become bigger and lighter
    - Color: Color of the shadow
    */
}

/* Box sizing */
/*
- This property is used to change the default CSS box model,
  which is used to calculate widths and heights of given elements
*/
/*
- Note: The Box Model is covered in HTML/CSS: Basics course
*/
.box-sizing{
    border: 2px solid black;
    margin: 20px;
    padding: 10px;
    width: 300px; /* Represents the contents of the box */
}

/* 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
*/
.box-sizing{
    /* The padding has been included in the width (content) area,so they are treated as one region*/
    box-sizing: padding-box;
    border: 2px solid black;
    margin: 20px;
    padding: 10px;
    width: 300px; /* Represents the contents of the box */
}
/* Border-box */
/*
- The width and height include the padding and border, but do not include the margin
*/
.box-sizing{
    /* The padding and the border has been included in the width(content) area, so they are treated as one region*/
    box-sizing: border-box;
    border: 2px solid black;
    margin: 20px;
    padding: 10px;
    width: 300px; /* Represents the contents of the box */
}

/* Multiple backgrounds */
/*
- CSS3 allows you to apply multiple backgrounds to an element.
- The multiple backgrounds are stacked in the order in which you specify them
- You can then specify the background position for each element
*/
.multiple-backgrounds {
    background-image: url(../img/js.jpg), url(../img/html.jpg);
    background-position: top left, center right;
    background-repeat: no-repeat, no-repeat;
}

/* These properties can be specified in one line as well */
.multiple-backgrounds {
    background: url(../img/js.jpg), url(../img/html.jpg) no-repeat, no-repeat top left, center right;
}
/* Color */
/*
- CSS3 provides multiple ways to work with color
  * RGBa:
    - 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
  * HSLa:
    - Stands for Hue, Saturation and Lightness
    - You can specify the alpha value for the opacity of the color
*/
.RGBa{
    color: rgba(0,0,0,0.75); /* We are specifying a 75% opaque black color value */
}
.HSLa{
    color: hsla(240,100% ,50%,0.75);
    /* The parameters have the following order:
     - Hue
     - Saturation
     - Lightness
     - Alpha value
     */
}

/* HSLa vs RGBa */
/*
- HSLa is more intuitive than RGBa, and it's much easier to make color adjustments fast
*/

/* Opacity */
/*
- Allows you to specify the opacity of an element using the opacity property
- Opacity on an element affects all elements that are nested inside
*/
.opacity{
    /* Represents a 45% opaque color value */
    opacity: 0.45;
}

/* Gradients */
/*
- Smooth transitions between two or more colors
*/

/* Linear Gradients */
/*
- We need to specify the stating point, then ending point, and optional stop-color points.
*/
.linear-gradient{
    /* The parameters are the following:
      - Direction: This can be specified through an angle or a keyword
      - The angle is generally a degree (34deg)
      - The side-or-corner consists of two keywords (left or right) and (top or bottom)
    - Color Stops: Consists of a color and optional stop position, which can be either a percentage or length
    */
    background: linear-gradient(to bottom, red, yellow);
}

/* Radial Gradients */
/*
- 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
- Consists of three parts: center, the ending shape contour and position, and color stops
*/
.radial-gradient{
    /* Creates a two-color elliptical gradient that radiates from the center by default */
    background: radial-gradient(aqua,blue);
    /*
    Parameters (in order):
    - The shape of the gradient;circle or ellipsis. The default is ellipsis.
    - The size of the gradient, which consist of keywords
      (closest-side, closest-corner, farthest-side and farthest-corner*). *default
    - Position (same as background-position). Default is center
    - Color stops
    */
    background: radial-gradient(circle at top left, aqua, blue);
}

/* CSS3: Animations */

/* Transforms */
/*
- This property allows you to translate, rotate, scale, and skew elements in CSS
*/

/* Translate */
/*
- The translate() method moves an element from its current position
  (according to the parameters given for the X-axis and the Y-axis).
*/
.transform{
    /* Translate the element 20px to the right */
    /* Translate the element 30px down */
    transform: translate(20px, 30px);
    /* Translate parameters*/
    /*
    - A translation value for the x-axis, which can be either a length or a percentage
    - A translation value for the y-axis, which can be either a length or  a percentage, if not specified,the value is 0
    */
}
/* It is possible to use translateX and translateY to translate the x and y values individually */
.transform {
    transform: translateX(30px);
}
.transform {
    transform: translateY(40px);
}

/* Rotate */
/*
-  It is possible to rotate an element clockwise around its origin by the specified angle
*/
.rotate {
    transform: rotate(45deg);
}

/* Scale */
/*
- You can do a 2D scale by a specified unitless number
*/
.scale {
    /* The element is scaled to the unitless number: 4 */
    /* If you don't specify a value for y-axis, it defaults to the value of x-axis */
    transform: scale(4, 1);
}

/* Skew */
/*
- An element is skewed around the x or y axis by the angle specified
- You can use skewX and skewY that use an angle as its parameters
*/
.skew{
    transform: skewX(-25deg);
    transform: skewY(25deg);
}

/* Transitions */
/*
- Allow you to transition between two states of a specified element
*/
.transition{
    /* Parameters (in order):
    - Property: The CSS property you want to transition
    - Duration: The amount of time you want the transition to take place
    - Timing function: Timing of the transition itself (ease, ease-in, ease-in-out, linear, etc)
    - Delay: The amount of time to wait between the change that is being requested on a specific property,
      and the start of the transition
    */
    /* The background-color transitions from grey to crimson over the period of .5s*/
    transition: background-color 0.5s ease-in-out;
}
.transition:hover{
    background-color: crimson;
}

.transition:hover{
    color: navajowhite;
}
/* Using 'all' as the transition-property, we can transition multiple properties at once */
.transition{
    transition: all 0.5s ease-in-out;
}

/* 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.
*/
.progressive-enhancement{
    background: #ccc;
    /* If the border-radius and box-shadow properties aren't supported, we still get a usable experience */
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.75);
}

/* CSS3: Fonts */

/* Font Face */
/*
- Using @font-face, you can use online fonts on websites.
*/

@font-face {
    font-family: 'OpenSansRegular'; /* Name that is assigned to this font */
    /* It is possible to specify multiple font types, which can be added as additional urls() */
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    font-style: normal;
    font-weight: normal;
}

h1 {
    /* You need to specify the font-family as the same one established in the @font-face call */
    /* It is a good practice to provide fallback fonts*/
    font-family: 'OpenSansRegular', Helvetica;
}

/* You can alter the @font-face call in order to use the font-weight and font-style properties as usual */
@font-face {
    font-family: 'OpenSansRegular';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    font-style: normal;
    font-weight: bold;
}

h1 {
    /* Then you can use the bold version by changing the font-weight instead of the font-family */
    font-weight: bold;
}