Border Images

• The border-image property allows you to use an image as a border around an element
• Syntax: border-image(url(image url), slice, color stop, ...) 
• direction (optional)
• an angle: 45deg
• to a side: to left
• to a corner: to top left
• color and stop
• color can be a color keyword, rgb, rgba, hsl, or hsla: blue
• stop (optional) can be a percentage or a pixel value: 70%
• any number of color stop pairs can be listed
• Let's start with this image:
  
  
  
• Now make it the border around a div
  style="border-image: url(border.png) 60 stretch; border:30px solid transparent;"


  This div has an image for a border
  Note that we had to give it a wider border so that we could see the border image
• Try it: W3Schools, CSS3 border-image Property
  

CSS3 Opacity

• CSS3 opacity style syntax: opacity: value;
• The value ranges from 0, completely transparent, to 1, completely opaque.
• Example:
  style="opacity: 0.5;"


• Try it: W3Schools, opacity property
  

Using Special Styles for Different Media Types

• There are many possible devices that could be used to display a web page. Each of the following is a device type that is defined for the HTML media attribute
• braille - Braille tactile feedback device
• embossed - Braille printer that produces embossed pages
• handheld - Mobile devices like phones and tablets
• print - Printers
• projection - Video projectors
• screen - Computer monitors
• speech - Speech synthesizers
• tty - Teletypes and other text-only devices devices with fixed with fonts (archaic)
• tv - Televisions and devices with displays that function like a TV
• all - All of the above
• Select CSS stylesheets based on media type
•  You can specify that special styling be applied for certain media types.
• To use a special style sheet for one media type, specify it in the link element. For example, to load a special style sheet for mobile devices, use a link like this:
  <link href="mobile.css" media="handheld" />


• You can specify styling for multiple media types:
  <link href="mobile.css" media="speech, braille" />


• You can also specify an embedded style be used for a specific media type:
  <style media="handheld">
   /* style rules go here */
</style>

  
• Tutorial: W3Schools, HTML media Attribute
  
  
• Define CSS style rules based on media type.
• Instead of having multiple style sheets, you can define certain rules within your style sheet be used only for specific media types.
• CSS @media rule
• Put all the rules to be used for a particular media type (or types) inside the @media rule's curly braces. For example:
  @media handheld {
   body {
      font-size: 8px;
   }
   h1 {
      font-size: 10px;
   }
}

• Try it: W3Schools, CSS @Media Rule 
• The @media rule is one of several CSS at-rules
• at-rules are CSS rules that don't have a selector
• Some at-rules are conditional
  
• Reference: MDN, at-rule

Print Styling

• CSS @page rule
• For printing, CSS has a special box-model that has two areas: page content and margin
• Use the @page rule to selectively apply style properties for printing. For example use this rule to set the page content size and the margin:
  @page  {
   size: 8.5in 11in portrait;
   margin: 0.5in;
}

• CSS page-break property
• Control page breaks using: 
• page-break-before: type or page-break-after: type
  where type can be:
• always
• avoid
• left
• right
• inherit
• auto
  
• page-break-inside: type
  where type can be:
• avoid
• inherit
• auto
• Example (assume this rule is in a special style sheet for printing)
  section {
   page-break-after: always;
   page-break-inside: avoid;
}

Using Viewports

• A visual viewport is a rectangular region defined for a web page. There can be different visual viewport definitions for different kinds of devices:
• Desktop computer screen - the whole page
• Printed material - the page-box
• Mobile devices - some region smaller than the whole page
• The visual viewport shows a portion of the page and users can pan around inside the page to see different parts
• The mobile browser (Safari on an iPad or iPhone, Chrome on an Android) sets the visual viewport size
• The viewport meta element
• Syntax: <meta name="viewport" content="properties" />
• Example:
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />


• A layout viewport contains the complete page

Create a Media Query

• The CSS3 media rule and HTML5 media attribute can have a "query" added to them so that they apply to not just certain devices, but also to certain media sizes or types.
• @media style rule example:
  @media screen and (max-width: 700px) {
   /* style properties go here */
}
• media HTML attribute example:
  <link href="mobile2.css" media="screen and (device-width: 700px)" />
  
• Note:Today's mobile devices can have very high pixel count. My Nexus 6P has a screen with 1440 X 2560 pixels

Create Styles for Mobile Devices

• You can create special style sheets or rules for portrait and landscape orientations of mobile devices. Determination of orientation is based on the aspect ratio of the screen, not on actual rotation of the device, so you can simulate this by adjusting the size of a desktop browser.
• Example with @media CSS rule:
  @media screen and (orientation: landscape) {
   /* style rules for landscape orientation go here */
}
• Example with media HTML attribute:
  <link href="landscape.css" media="screen and (max-width: 700px)" />


• This page has embedded styles that change the background color of the page based on size and orientation.