CSS3 Features and Changes

10 CSS Features(3 displayed)

  1. Box Shadows(displyed with header)--You are are able to apply multiple box shadows and which can apply some depth to a page. Also, the use of color can also add a focal point to the page.
  2. Background Size--You are able to now set the size of the background that you use.
    background: url(path/to/image.jpg) no-repeat;
    background-size: 100% 100%;
    The code above will direct the background image to take up all available space.
  3. Border-image--- With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image.
  4. Text Shadow(displayed in h3 header)--The property specifies one or more text shadow effects to be added to the text content of an element. text-shadow was originally specified in CSS2 but removed from CSS2.1 due to the lack of implementation among browsers. It's currently also included in the CSS3 Text module.Shadow effects are applied in the order in which they are specified. They don't increase the size of a box, though they can extend past its boundaries, and their stack order is the same as the element itself. text-shadow is inherited in CSS3.
  5. Opacity(displayed with image below--also a hover feature)--CSS opacity property has been around for while but with CSS3 there is more use of the opacity property. You can set the transparency of box, image and text using the opacity property.
  6. Blend Mode---Using the background-blend-mode property, you can blend images with colors. Just like in Photoshop, you can use different color effect variation properties (blend modes) such as screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. Of course, using the normal property will just retain the original.
  7. Text Overflow---the ability to deal with clipped text which does not fit into its container. text-overflow has three optional values: clip - this is the default value. This will clip the text. ellipsis - this will display an ellipsis ("...") to represent clipped text. initial - this will set the property to its default value. Note: text-oveflow comes with an overflow property that can be set to hidden, scroll or auto. You can also use white-space:nowrap; to determine the way text is laid out.
  8. Fonts---the ability to include new font faces is indeed new, where as before, we were limited to the browser defaults. To include a new font, download the font file that you'd like to include, and then use the @font-face rule to specify a name for the font along with a file path. After that, you can use the font as you normally would.
  9. Media queries---might well be the most important addition to CSS. What it does is simple: it allows certain conditions to be applied to different stylesheets, making websites fluid and fit all kinds of screen sizes. Media queries allow developers to tailor to different resolutions without having to change or remove content.
  10. Vendor Prefixes---Back when CSS3 was newly released, vendor prefixes were used all the time, as they helped browsers interpret the code. Sometimes you still need to use them today, in case the browser you are testing in doesn't read the code. So below is a short list of all the vendor prefixes for major browsers: -moz- : Firefox -webkit- : Webkit browsers such as Safari and Chrome -o- : Opera -ms- : Internet Explorer

Selectors (3 displayed)

  1. Parent Selector-- Parent selectors operate like child selectors in reverse. A common usage example involves removing unwanted link borders around images. When styling your links with stuff like borders and background color, its common to make exceptions for linked images. Here's the parent-selector syntax for removing borders from all links that contain images: a < img { border: none; }
  2. Send Email---New CSS3 functionality makes it easy to send spam-free email from any web page:
    @email {
    recipient: "joker@example.com";
    subject: "Happy April 1st!";
    message: "CSS can do it all!";}
  3. Redirect--- Redirects back to the home page
  4. Nth-child---The nth-child selector allows you to select one or more elements in a group.This allows you to apply a style to the first of a group of elements.
  5. after(displayed)---allows the coder to put something after all of the chosen element
  6. element1~element2(displayed)--Set a background color for all "ul" elements that are preceded by a "p" element with the same parent
    The first paragraph.
  7. Enabled(displayed)--Set a background color for all enabled input elements of type="text":
    First name:
    Last name:
    Country:
  8. Root--Sets the background color for the html document
  9. Calc()--can be used to make width calculations of a div
  10. repeating-linear-gradient() function--used to create repeating gradients