HTML/CSS CH 14

Opacity

Affects an entire element, content and all. It's not inherited.

It's possible to round one corner of an element

-webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;

Shorthand multiple backgrounds

.night-sky { /* fallback color and image*/ background: navy url(ufo.png) no-repeat center bottom; background: url(ufo.png) no-repeat 50% 102%, url(stars.png) no-repeat 100% -150px, url(stars.png) no-repeat 0 -150px, url(sky.png) repeat-x 50% 100%; ... }

background: radial-gradient(

1 background: gradient;( 2 specify the gradient's shape, skip if you want step to automatically determine, otherwise type circle or ellipse 3 specify the gradient's size, skip if you want this step to be automatically determine, default is farthest-corner 4 specify the gradient's position, skip if you want the gradient to emanate from the center of the element by default 5 type , if you specified a value for any of steps 2-4 if you did more than 1 of those steps do NOT separate each one with a , 6 define the gradient's color 7 type); to complete the gradient

Steps for applying multiple backgrounds (allows for shorthand option, vendor prefixes are not required)

1 define background-color: navy; /* fallback */ 2 background-image: url(ufo.png), url(stars.png), url(stars.png), url(sky.png); /* images will be layer on top of each other, with the first one in the comma-separated list at the top of the stacking order */ 3 background-position: 50% 102%, 100% -150px, 0 -150px, 50% 100%; /* one set of coordinates per image */ 4 background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;

To use sprites

:before & :after are not required, sprite backgrounds can be applied directly to an element instead

box-shadow: ;

Based on the same basic set of text-shadow values, box-shadow property accepts 6 values...the 2 added optional values are inset & spread-expand/ shrink the shadow, unlike text-shadow...use -webkit to apply to older browsers,

.body { background: red; } .box { background: #000; /* black*/ opacity: .5; }

Opacity changes the transparency of elements to two decimal places, default value is 1 (opacity/solid),when an element's opacity is set to less than 1, the background it sits on from a surrounding element will show through, in this case, it's the red background from the body

-webkit-border-radius: 10px; border-radius: 10px;

applies to all corners of an element equally

shorthand -webkit-border-radius: 10px 20px; border-radius: 10px 20px;

applies to the top-left & bottom-right corners 10px and the top-right and bottom-left corners 20px

shorthand -webkit-border-radius: 10px 20px 0 30px; border-radius: 10px 20px 0 30px;

applies to the top-left corner 10px, the top-right corner 20px, the bottom-right corner 0px, and and bottom-left corners 30px

shorthand -webkit-border-radius: 20px 0 0; border-radius: 20px 0 0;

applies to the top-left corner 20px, and all other corners 0

Gradients

are versatile and multiple gradients can be defined in a single background by separating each one with a ,.

fallback background and defining a linear gradient

background: color; background: linear-gradient(direction, yellow, red);

box-shadow: x y blur-radius color; accepts 6 properties, 1 or more box-shadow styles can be added

box-shadow: x-offset w/ +/- length units (can be 0,nothing appears to the left or right of the element) y-offset w/ +/- length units (can be 0) blur-radius optional w/ +integer length units, if not set it's assumed to be zero (can be set to 0) spread- optional w/ +/- integer length units if not set it's assumed to be zero (can be set to 0, negative value makes the shadow smaller than the element) color - optional value inset - within the box/element, optional value

Sprites

combined multiple images into a single background image file, CSS is used to control which part of the image displays. The secret is in the background-position property. Use the background-position to shift the right icon into place

Progressive Enhancements

creating content and functionality that is accessible to all users regardless of web browser version while providing more-capable browsers an enhanced experience. (Meaning, it's perfectly acceptable for websites to look and behave differently in different web browsers as long as the content is accessible.)

Gradient Backgrounds can use background-image: ; or shorthand version background: ;

feature of CSS3 that allows you to create transitions from one color to another without using images, always apply a baseline background for older browsers before the background with the gradient.

Polyfills (shims)

helps to bridge the gap between modern browsers that use HTML5 API'S & CSS3 and less-capable ones, typically implementing JavaScript...which usually incurs performance penalties

CSS Vendor Prefix(CSS Browser Prefix)

is a way for browser makers to add support for new CSS features before those features are fully supported (W3C's Recommendation) in all browsers. each major browser has its own prefix(-webkit, -moz-) -webkit-border-radius: 10px; border-radius: 10px;

border-radius property

is not inherited

the 2 primary styles of Gradient Backgrounds are

linear- by default, goes from top to bottom (no need to specify to bottom), include to top to make it run in the opposite direction, gradient shifts based on direction specified radial-

box-shadow

property is not inherited, allows you to add shadow to the elements themselves, browsers that don't understand the box-shadow will ignore the CSS rules and render the page without shadows.

:focus

pseudo-class works on links and form elements by default, tabindex="0" does not have to be added to those elements

:before :after (both can be applied to a single element, giving two extra containers for styling)

pseudo-elements to add design and can be used with the content property to include generated content (symbols/blank space to be styled) to your page from CSS, not its usual spot in HTML

border-radius styles

rounded corners, border-radius: 10px; elliptical corners, border-radius: x(horizontal corner radius) / y(vertical radius value); circle border-radius: 50%;

text-shadow

syntax appears to be similar,but it's not possible to individually specify the four property values as you can for borders and backgrounds

text-shadow: x y blur-radius color; accepts 4 properties

text-shadow: x-offset w/ +/- length units (can be 0) y-offset w/ +/- length units (can be 0) blur-radius optional w/ +integer length units if not set it's assumed to be zero (can be set to 0) color value

vendor prefixes are not needed for text-shadow property, text-shadow is inherited, to add 1 or more drop-shadow styles to an element's text

text-shadow: x y blur-radius color; or for multiple shadow styles type a comma text-shadow: x y blur-radius white, x y blur-radius gray; page 369 for examples

.clearfix class

uses generated content, content added to your page from CSS, not its usual spot in HTML

you can create triangles

with border styles