noteforW3schoolsCSS

CSS Borders

this is usually used in design.

p {
    border-left: 6px solid red;
    background-color: lightgrey;
}

and this is more good-looking than rectangle.

p {
    border: 2px solid red;
    border-radius: 5px;
}

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

CSS Outline

The CSS outline properties specify the style, color, and width of an outline.

An outline is a line that is drawn around elements (outside the borders) to make the element “stand out”.

However, the outline property is different from the border property - The outline is NOT a part of an element’s dimensions; the element’s total width and height is not affected by the width of the outline.

but what’s it designed for?

CSS Font Families

In CSS, there are two types of font family names:

• generic family - a group of font families with a similar look (like “Serif” or “Monospace”)
• font family - a specific font family (like “Times New Roman” or “Arial”)

Generic family / Font family / Description
—————-/—————/—————
Serif / Times New Roman Georgia / Serif fonts have small lines at the ends on some characters
Sans-serif / Arial Verdana / “Sans” means without - these fonts do not have the lines at the ends of characters
Monospace / Courier New Lucida Console / All monospace characters have the same width

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use em instead of pixels.

The em size unit is recommended by the W3C.

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

Example

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

In the example above, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers.

Unfortunately, there is still a problem with older versions of IE. The text becomes larger than it should when made larger, and smaller than it should when made smaller.

Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the element:

Example

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!

CSS links

1. In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it

• a:active - a link the moment it is clicked

  1. When setting the style for several link states, there are some order rules:

• a:hover MUST come after a:link and a:visited

• a:active MUST come after a:hover

Example

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Striped Tables

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

Example

tr:nth-child(even) {background-color: #f2f2f2}

be careful about sequence of statement, it makes different effect

Example of a well design table

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}


tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}
tr:hover{background-color:gray;}
<style>

Add a container element (like

) with overflow-x:auto around the element to make it responsive:

Example

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

CSS Display - CSS Layout should pay attention to Display, Position, overflow

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

Hide an Element - display:none or visibility:hidden?

Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:

Example

h1.hidden {
    display: none;
}

visibility:hidden; also hides an element.

However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:

Example

h1.hidden {
    visibility: hidden;
}

CSS Position

1. position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

2. position: relative;

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

3. position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

4. position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: A “positioned” element is one whose position is anything except static.

put a text over a photo

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
}

img {
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Center text in image:</p>

<div class="container">
  <img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>

CSS MyLayerout

1. using float, center div has to use margin-left to avoid overlaping with left div.
2. when using margin:auto; to center a div, be careful about width. cause by default width:100%, then element inside will not look like centered.
3. flaoting div should write before center div, or it will show in next area. In plain, write left_floating_div and left_floating_div first, and the center_div.

exercise

<!DOCTYPE html>
<html>
<head>
<style>
.floating-box{
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}
.after-box {
    clear: left;
clear:right;
    border: 3px solid red;
}
.rightBar{
float:right;
}
.leftBar{
float:left;
}
.centerBar{
    width:50%;
    margin: auto;
    border: 1px solid red;

}
</style>
</head>
<body>
<div class="container">
<h2>The Old Way - using float</h2>

<div class="leftBar">
<div class="floating-box">Floating box left1</div>
<div class="floating-box">Floating box left2</div>
</div>

<div class="rightBar">
<div class="floating-box">Floating box right1</div>
<div class="floating-box">Floating box right2</div>
<div class="floating-box">Floating box right3</div>
</div>

<div class="centerBar">
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
</div>

<div class="after-box">Another box, after the floating boxes...</div>
</div>
</body>
</html>

Center an Image

To center an image, use margin: auto; and make it into a block element:

img {
    display: block;
    margin: auto;
    width: 40%;
}

MyFeeling

position:relative; //this is relative to the original position.
position:absolute; //this ia relative to the parent container, so called absolute.

Left and Right Align - Using position

One method for aligning elements is to use position: absolute;:

Example

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Tip: When aligning elements with position, always define margin and padding for the element. This is to avoid visual differences in different browsers.

There is also a problem with IE8 and earlier, when using position. If a container element (in our case

) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. So, always set the !DOCTYPE declaration when using position:

myfeeling: so two methods to create leftBar and rightBar, firstly position:absolute, secondly float:left; or float:right;

CSS Combinators

There are four different combinators in CSS3:

1. descendant selector (space)
2. child selector (>)
3. adjacent sibling selector (+)
4. general sibling selector (~)

now you understand the difference between a.calss and a .class. fronter means , later means any element with

Anchor Pseudo-classes

Links can be displayed in different ways:

Example

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.
you can follow this sequence, link,visited,hober,active;

Simple Tooltip Hover(little trick with CSS)

Hover over a

element to show a

element (like a tooltip):

p {
    display: none;
    background-color: yellow;
    padding: 20px;
}

div:hover p {
    display: block;
}

CSS - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

Match the first

element

In the following example, the selector matches any

element that is the first child of any element:

Example

p:first-child {
    color: blue;
}

might used for first

• of any

• ul li:first-child{
  color: red;
  }

  CSS - The :lang Pseudo-class

  The :lang pseudo-class allows you to define special rules for different languages.

  In the example below, :lang defines the quotation marks for elements with lang=”no”:

  Example

  <html>
  <head>
  <style>
  q:lang(no) {
      quotes: "~" "~";
  }
  </style>
  </head>
  
  <body>
  <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
  </body>
  </html>

  CSS Pseudo Elements

  whole new world

  Transparent Hover Effect

  The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

  img {
      opacity: 1;
      filter: alpha(opacity=50); /* For IE8 and earlier */
  }
  
  img:hover {
      opacity: 0.5;
      filter: alpha(opacity=100); /* For IE8 and earlier */
  }

  I like this effect

  Transparency using RGBA

  If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

  Example

  div {
      background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
  }

  Text in Transparent Box

  Example

  <html>
  <head>
  <style>
  div.background {
      background: url(klematis.jpg) repeat;
      border: 2px solid black;
  }
  
  div.transbox {
      margin: 30px;
      background-color: #ffffff;
      border: 1px solid black;
      opacity: 0.6;
      filter: alpha(opacity=60); /* For IE8 and earlier */
  }
  
  div.transbox p {
      margin: 5%;
      font-weight: bold;
      color: #000000;
  }
  </style>
  </head>
  <body>
  
  <div class="background">
    <div class="transbox">
      <p>This is some text that is placed in the transparent box.</p>
    </div>
  </div>
  
  </body>
  </html>

  Vertical NavBar

  <!DOCTYPE html>
  <html>
  <head>
  <style>
  body {
      margin: 0;
  padding:0;
  }
  
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 25%;
      background-color: #f1f1f1;
      position: fixed;
      height: 100%;
      overflow: auto;
  }
  
  li a {
      display: block;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
  }
  
  li a.active {
      background-color: #4CAF50;
      color: white;
  }
  
  li a:hover:not(.active) {
      background-color: #555;
      color: white;
  }
  </style>
  </head>
  <body>
  
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
  
  <div style="margin-left:25%;padding:1px 16px;height:1000px;">
    <h2>Fixed Full-height Side Nav</h2>
    <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
    <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
    <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
  </div>
  
  </body>
  </html>
  
  

  I like this NavBar

  Horizontal Nabigation Bar

  <!DOCTYPE html>
  <html>
  <head>
  <style>
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden; //without this, <li> element will overflow outside <ul> element
      background-color: #333;
      position:fixed;
      top:0;
      width:100%;
  }
  
  li {
      float: left;
  }
  
  li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  li a:hover:not(.active) {
      background-color: #111;
  }
  
  .active {
      background-color: #4CAF50;
  }
  </style>
  </head>
  <body>
  
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li style="float:right"><a class="active" href="#about">About</a></li>
  </ul>
  
  </body>
  </html>

  good design

  <style>
  <!-- this block of code could make page layout responsive -->
  @media screen and (max-width: 600px){
      ul.topnav li.right,
      ul.topnav li {float: none;}
  }
  </style>

  dropdown effect using CSS

  <!DOCTYPE html>
  <html>
  <head>
  <style>
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
  }
  
  li {
      float: left;
  }
  
  li a, .dropbtn {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  li a:hover, .dropdown:hover .dropbtn {
      background-color: red;
  }
  
  li.dropdown {
      display: inline-block;
  }
  
  //first set display as none
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);//box-shadow, get it
  }
  
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  //then set display as block
  .dropdown:hover .dropdown-content {
      display: block;
  }
  </style>
  </head>
  <body>
  
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="#" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
  </ul>
  
  <h3>Dropdown Menu inside a Navigation Bar</h3>
  <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
  
  </body>
  </html>

  Basic Tooltip

  Create a tooltip that appears when the user moves the mouse over an element:

  Example

  <!DOCTYPE html>
  <html>
  <style>
  .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px; //good design
      padding: 5px 0;
  
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
      visibility: visible;
  }
  </style>
  <body style="text-align:center;">
  
  <p>Move the mouse over the text below:</p>
  
  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>
  
  <p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in an desirable way.</p>
  
  </body>
  </html>

  using border to create Tooltip Arrows, amazing!

  .tooltip .tooltiptext::after {
      content: " ";
      position: absolute;
      top: 100%; /* At the bottom of the tooltip */
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: black transparent transparent transparent;
  }

  Fade In Tooltips(Animation)

  .tooltip .tooltiptext {
      opacity: 0;
      transition: opacity 1s;
  }
  
  .tooltip:hover .tooltiptext {
      opacity: 1;
  }

  Image Sprite - Simple Example

  Example

  <!DOCTYPE html>
  <html>
  <head>
  <style>
  #home {
      width: 46px;
      height: 44px;
      background: url(img_navsprites.gif) 0 0;
  }
  
  #next {
      width: 43px;
      height: 44px;
      background: url(img_navsprites.gif) -91px 0;
  }
  </style>
  </head>
  <body>
  
  <img id="home" src="img_trans.gif"><br><br>
  <img id="next" src="img_trans.gif">
  
  </body>
  </html>
  
  

  Example explained:

  1. - Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS
  2. width: 46px; height: 44px; - Defines the portion of the image we want to use
  3. background: url(img_navsprites.gif) 0 0; - Defines the background image and its position (left 0px, top 0px)

  This is the easiest way to use image sprites, now we want to expand it by using links and hover effects.

  Image Sprite

  #home a:hover {
      background: url('img_navsprites_hover.gif') 0 -45px;
  }
  
  #prev a:hover {
      background: url('img_navsprites_hover.gif') -47px -45px;
  }
  
  #next a:hover {
      background: url('img_navsprites_hover.gif') -91px -45px;
  }

  Tip: The :hover selector can be used on all elements, not only on links.

  CSS　Ａｔｔｒｉｂｕｔｅ　Ｓｅｌｅｃｔｏｒｓ

  Example
  input[type="text"] {
      width: 150px;
      display: block;
      margin-bottom: 10px;
      background-color: yellow;
  }
  
  input[type="button"] {
      width: 120px;
      margin-left: 35px;
      display: block;
  }

  CSS Forms

  * very happy to see beautiful forms*

  CSS3 Border Images

  * do not fully understand how it works, review when you need to use it *

  Full Size Background Image

  Now we want to have a background image on a website that covers the entire browser window at all times.

  The requirements are as follows:

  • Fill the entire page with the image (no white space)
  • Scale image as needed
  • Center image on page
  • Do not cause scrollbars
    The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

  Example

  html {
      background: url(img_flower.jpg) no-repeat center fixed; 
      background-size: cover;
  }

  * truely offer a lot of APIs to adjust photo *

  CSS3 Gradient

  Using Angles

  The angle is specified as an angle between a horizontal line and the gradient line.
  * gradient line means line between two colors. 0deg mean “to top” *

  to see how it was coded, give a ugly example:

  #grad {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
  }

  * which means designer has to take care of compatibility *

  CSS3 Text shadow effect!

  The following example shows a white text with black, blue, and darkblue shadow:

  Example

  h1 {
      color: white;
      text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
      /*position-x position-y blur color*/
  }

  CSS3 box-shadow

  using ::before and ::after pseudo-classes to create a photo area

  <!DOCTYPE html>
  <html>
  <head>
  <style>
  #boxshadow {
      position: relative;
      -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
      -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
      box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
      padding: 10px;
      background: white;
  }
  
  /* Make the image fit the box */
  #boxshadow img {
      width: 100%;
      border: 1px solid #8a4419;
      border-style: inset;
  }
  
  #boxshadow::after {
      content: '';
      position: absolute;
      z-index: -1; /* hide shadow behind image */
      -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      width: 70%;
      left: 15%; /* one half of the remaining 30% */
      height: 100px;
      bottom: 0;
  }
  </style>
  </head>
  <body>
  
  <div id="boxshadow">
    <img src="rock600x400.jpg" alt="Norway" width="600" height="400">
  </div>
  
  </body>
  </html>

  Text Card

  <!DOCTYPE html>
  <html>
  <head>
  <style>
  div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /* position-x position-y blur spread color; but strangly rgb(0,0,0) is white, and rgba(0,0,0,1) is black; */
    text-align: center;
  }
  
  div.header {
      background-color: #4CAF50;
      color: white;
      padding: 10px;
      font-size: 40px;
  }
  
  div.container {
      padding: 10px;
  }
  </style>
  </head>
  <body>
  
  <h2>Cards</h2>
  
  <p>The box-shadow property can be used to create paper-like cards:</p>
  
  <div class="card">
    <div class="header">
      <h1>1</h1>
    </div>
  
    <div class="container">
      <p>January 1, 2016</p>
    </div>
  </div>
  
  </body>
  </html>

  CSS3 Web Fonts - The @font-face Rule

  * With CSS3, web designers are no longer forced to use only web-safe fonts, which is very convenient. *

  Web fonts allow Web designers to use fonts that are not installed on the user’s computer.

  When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

  Your “own” fonts are defined within the CSS3 @font-face rule.

  Using The Font You Want

  In the CSS3 @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.

  * Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE. *

  To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

  Example

  @font-face {
      font-family: myFirstFont;
      src: url(sansation_light.woff);
  }
  
  div {
      font-family: myFirstFont;
  }

  CSS3 2D Tranfforms

  * it seems you can not use transform:value_function(); twice to hope combine them. In this case, you can use transform:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()); which is atrange matrix*

  CSS3 transition

  div {
      width: 100px;
      height: 100px;
      background: red;
      -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
      transition: width 2s;
  }
  
  div:hover {
      width: 100%;
  }

  * very useful effect, I can design it beautifully *

  myTest: to create a linked transition, you can:

  1. create a
     container, and then

  div:hover element(
      //transition_end_statement
  )

  1. using conbinators

  div:hover ~ div{
      //transition_end_statement
  }

  There are four different combinators in CSS3:
  - descendant selector (space)
  - child selector (>)
  - adjacent sibling selector (+)
  - general sibling selector (~)
  * test ~ on chrome, this only selecte following siblings, but not siblings ahead it. *

  CSS3 Transition plus transform

  div {
      width: 100px;
      height: 100px;
      background: red;
      -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
      transition: width 2s, height 2s, transform 2s;
  }
  
  div:hover {
      width: 300px;
      height: 300px;
      -webkit-transform: rotate(180deg); /* Safari */
      transform: rotate(180deg);
  }
  

  * it is beautiful *

  CSS3 Animation

  div {
      animation-name: example;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-delay: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
  }
  @keyframes example(
      0%   {background-color: red; left:0px; top:0px;}
      25%  {background-color: yellow; left:200px; top:0px;}
      50%  {background-color: blue; left:200px; top:200px;}
      75%  {background-color: green; left:0px; top:200px;}
      100% {background-color: red; left:0px; top:0px;}
  )

  CSS3 Images

  Image Modal(advanced)

  * remarkable movement *

  CSS3 Buttons

  Tip: Use the transition-duration property to determine the speed of the “hover” effect:
  * good tips *

  Example

  .button {
      -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s;
  }
  
  .button:hover {
      background-color: #4CAF50; /* Green */
      color: white;
  }

  * when you use bos-shadow, use it lightly *

  Disabled Buttons

  Use the opacity property to add transparency to a button (creates a “disabled” look, but can not prevent linking with css style ).

  Tip: You can also add the cursor property with a value of “not-allowed”, which will display a “no parking sign” when you mouse over the button:

  Example

  .disabled {
      opacity: 0.6;
      cursor: not-allowed;
  }

  some Animation Buttons using css

  * worth reference *

  CSS Box Sizing

  Since the result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way.

  *{box-sizing: border-box;}

  CSS3 Flexbox

  “display:flex;” render as a block, but not equal to “display:block;”
  “display:inline-flex” render as inline, but not equal to “display:inline”
  * i believe flex attribution should be used with width:50%; *

  CSS3 MediaQueries

  * great help for flex layout on different screen *

  @media sreen and (min-width： 480px){
      body{
          background-color:lightgreen;
      }
  }

  Always Design for Mobile First

  Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).

  This means that we must make some changes in our CSS.

  Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First:

  /* For mobile phones: */
  [class*="col-"] {
      width: 100%;
  }
  @media only screen and (min-width: 768px) {
      /* For desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
  }

  RWD Viewport

  Setting The Viewport

  HTML5 introduced a method to let web designers take control over the viewport, through the tag.

  You should include the following viewport element in all your web pages:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  simple example, you can see basic work of RED layout

  <!DOCTYPE html>
  <html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  * {
      box-sizing: border-box;
  }
  img {
      width: 100%;
      height: auto;
  }
  .row:after {
      content: "";
      clear: both;
      display: block;
  }
  *[class*="col-"] {
      float: left;
      padding: 15px;
      width: 100%;
  }
  @media only screen and (min-width: 600px) {
      .col-s-1 {width: 8.33%;}
      .col-s-2 {width: 16.66%;}
      .col-s-3 {width: 25%;}
      .col-s-4 {width: 33.33%;}
      .col-s-5 {width: 41.66%;}
      .col-s-6 {width: 50%;}
      .col-s-7 {width: 58.33%;}
      .col-s-8 {width: 66.66%;}
      .col-s-9 {width: 75%;}
      .col-s-10 {width: 83.33%;}
      .col-s-11 {width: 91.66%;}
      .col-s-12 {width: 100%;}
  }
  @media only screen and (min-width: 768px) {
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
  }
  html {
      font-family: "Lucida Sans", sans-serif;
  }
  .header {
      background-color: #9933cc;
      color: #ffffff;
      padding: 15px;
  }
  .menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  .menu li {
      padding: 8px;
      margin-bottom: 7px;
      background-color :#33b5e5;
      color: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }
  .menu li:hover {
      background-color: #0099cc;
  }
  .aside {
      background-color: #33b5e5;
      padding: 15px;
      color: #ffffff;
      text-align: center;
      font-size: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }
  .footer {
      background-color: #0099cc;
      color: #ffffff;
      text-align: center;
      font-size: 12px;
      padding: 15px;
  }
  </style>
  </head>
  <body>
  
  <div class="header">
  <h1>Chania</h1>
  </div>
  
  <div class="row">
  <div class="col-3 col-s-3 menu">
  <ul>
  <li>The Flight</li>
  <li>The City</li>
  <li>The Island</li>
  <li>The Food</li>
  </ul>
  </div>
  
  <div class="col-6 col-s-9">
  <h1>The City</h1>
  <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  <img src="img_chania.jpg" width="460" height="345">
  </div>
  
  <div class="col-3 col-s-12">
  <div class="aside">
  <h2>What?</h2>
  <p>Chania is a city on the island of Crete.</p>
  <h2>Where?</h2>
  <p>Crete is a Greek island in the Mediterranean Sea.</p>
  <h2>How?</h2>
  <p>You can reach Chania airport from all over Europe.</p>
  </div>
  </div>
  
  </div>
  
  <div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
  </div>
  
  </body>
  </html>

  * the key of Grid View is Changing several colums in a row into several rows, when screen become narrow, using

  (n+m=12) trick;*

  end of note;