CSS

Animering med CSS

CSS Animations Level 1
All About CSS Animations
The falling snow effect

Bouncing Clouds (demo)
The falling snow effect (demo)

CSS reference
Using CSS flexible boxes
Using CSS custom properties (variables)
:root

CSS @rules

At-rules are instructions or directives to the CSS parser. They can be used for a variety of purposes.

The @charset at-rule can be used to specify the character encoding of an e xternal style sheet. It must appear before anything else in the file.

The @import at-rule allows us to import one style sheet into another.
All @import at-rules must appear before any rules.

The @media at-rule lets us target rules to the media types we specify.

The @page at-rule can be used to specify margins for paged media. You can set different margins for left- and right-hand pages when you’re printing double-sided pages, as well as for the first page.

The @font-face at-rule allows us to specify custom fonts.

The @namespace at-rule in CSS3 lets us declare an XML namespace, as well as an optional prefix with which that namespace can be specified.

The @keyframes at-rule allows you to control how the content of an animation is displayed.
Check out the source code of Bouncing Clouds demo for an example.

@charset example:

This example indicates that the style sheet will use the ISO-8859-15 character encoding:

@charset "ISO-8859-15";

@import example:

The @import at-rule is a mechanism for importing one style sheet into another.

@import url("/css/main.css");
@import "local.css";

@media example:

@media screen, projection {
  html {
    background: #fffef0;
    color: #300;
  }
  body {
    max-width: 35em;
    margin: 0 auto;
  }
}

@media print {
  html {
    background: #fff;
    color: #000;
  }
  body {
    padding: 1in;
    border: 0.5pt solid #666;
  }
}

CSS Media Types:

all	- Used for all media type devices
aural	- Used for speech and sound synthesizers
braille	- Used for braille tactile feedback devices
embossed	- Used for paged braille printers
handheld	- Used for small or handheld devices
print	- Used for printers
projection	- Used for projected presentations, like slides
screen	- Used for computer screens
tty	- Used for media using a fixed-pitch character grid, like teletypes and terminals
tv	- Used for television-type devices

@page example:

You can use the @page at-rule to specify margin values for the page box in style sheets for paged media such as the print media type.

@page {
  margin: 2.5cm; /* default for all pages */
}

@page :left {
  margin-left: 5cm; /* left pages only */
}

@page :right {
  margin-right: 5cm; /* right pages only */
}

@page :first {
  margin-top: 8cm; /* extra top margin on the first page */
}

@font-face example:

@font-face {
font-family: "Example Font";
src: url("http://www.example.com/fonts/example");
}
h1 {
font-family: "Example Font", sans-serif;
}

@namespace example:

The @namespace at-rule declares an XML namespace and, optionally, a prefix with which we can refer to it. @namespace rules must follow all @charset and @import rules, and precede all other at-rules and rule sets in a style sheet.

@namespace "http://www.w3.org/1999/xhtml";
@namespace foo "http://example.com/ns/foo";

If a prefix is specified, you can refer to elements in that namespace by prepending the prefix and a vertical bar, |, to the element selector, like so:

@namespace "http://www.w3.org/1999/xhtml";
@namespace foo "http://example.com/ns/foo";

table {
declarations
}
foo|bar {
declarations
}

Sources:
SitePoint - CSS Reference
CSS Media types and printer friendly pages
W3Schools - CSS Media Queries

SitePoint - CSS At-rules
SitePoint - @charset
SitePoint - @import
SitePoint - @media
SitePoint - @page
SitePoint - @fontface
SitePoint - @namespace

Till toppen

Anpassa webbsidans utseende med CSS Media Types

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
@media screen{
body{
background-color:yellow;
font-family:sans-serif;
}
}

@media print{
body{
background-color:#FFFFFF;
font-family:serif; 
font-size:small;
}
}
</style>
</head>
<body>
Hello!
</body>
</html>

CSS Media Types:

all	- Used for all media type devices
aural	- Used for speech and sound synthesizers
braille	- Used for braille tactile feedback devices
embossed	- Used for paged braille printers
handheld	- Used for small or handheld devices
print	- Used for printers
projection	- Used for projected presentations, like slides
screen	- Used for computer screens
tty	- Used for media using a fixed-pitch character grid, like teletypes and terminals
tv	- Used for television-type devices

Mer info:
CSS Media types and printer friendly pages
W3Schools - CSS Media Queries

Till toppen

CSS

Anpassa bakgrundsbild så att den fyller webbläsarfönstret

<!DOCTYPE html>
<html lang="en">
<head>
<title>test page</title>
<meta charset="ISO-8859-1" />
<style type="text/css">
#background{
width: 100%; 
height: 100%; 
position: fixed; 
left: 0px; 
top: 0px; 
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="background">
<img src="./images/xbg1.jpg" class="stretch" alt="" />
</div>

<div style="width:100px; height:50px; background-color:yellow;">
Hallo
</div>
</body>
</html>

Mer info:
Stretch and scale a CSS image in the background - with CSS only
CSS3 background-size Property

Till toppen