Tag: css

CSS3 Transitions

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.

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

Change Several Property Values

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

Specify the Speed Curve of the Transition

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Delay the Transition Effect

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}

Transition + Transformation

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

References
http://www.w3schools.com/css/css3_transitions.asp

CSS3 2D Transforms

translate()
The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

rotate()
The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

scale()
The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}

skewX()
The skewX() method skews an element along the X-axis by the given angle.

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

skewY()
skew()
matrix()
The matrix() method combines all the 2D transform methods into one.

References
http://www.w3schools.com/css/css3_2dtransforms.asp

CSS media Query

if screen width is less than 768px use this custom style:

#loginBody {
  width: 600px;
  height: 400px;
  margin-top: 100px;
  border-radius: 25px;
  background: rgb(238, 238, 238);
  background: -moz-linear-gradient(left, rgba(238, 238, 238, 1) 0%, #f8f8f8 100%);
  background: -webkit-linear-gradient(left, rgba(238, 238, 238, 1) 0%, #f8f8f8 100%);
  background: linear-gradient(to right, rgba(238, 238, 238, 1) 0%, #f8f8f8 100%);

  @media screen and (max-width: 768px) {
    width: 300px;
    height: 300px;
  }
}

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
http://www.w3schools.com/css/css3_mediaqueries_ex.asp
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

How to overlay one div over another div in HTML

use position: relative on the parent and child element with position: absolute.

<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
  </div>
</div
#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

References
http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div

Setting Weights And Styles With The @font-face Declaration

 

@font-face {
   font-family: 'UbuntuItalic';
      src: url('Ubuntu-RI-webfont.eot');
      src: url('Ubuntu-RI-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-RI-webfont.woff') format('woff'),
           url('Ubuntu-RI-webfont.ttf') format('truetype'),
           url('Ubuntu-RI-webfont.svg#UbuntuItalic') format('svg');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'UbuntuBold';
      src: url('Ubuntu-B-webfont.eot');
      src: url('Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-B-webfont.woff') format('woff'),
           url('Ubuntu-B-webfont.ttf') format('truetype'),
           url('Ubuntu-B-webfont.svg#UbuntuBold') format('svg');
   font-weight: normal;
   font-style: normal;
}
.u400 {
   font-family: 'UbuntuRegular', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

.u400i {
   font-family: 'UbuntuRegularItalic', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

.u700 {
   font-family: 'UbuntuBold', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

.u700i {
   font-family: 'UbuntuBoldItalic', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

References
https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/

Sample layout for a website

layout

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <style type="text/css">
        body {
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
        }

        #Container {
            width: 800px;
            height: auto;
            margin-left: auto;
            margin-right: auto;
            margin-top: 11px;
            margin-bottom: 21px;
        }

        #Header {
            height: 150px;
            background-color: blue;

        }

        #Menu {
            height: 60px;
            background-color: darkcyan;
        }

        #Sidebar {
            width: 150px;
            height: 400px;
            background-color: chartreuse;
            float: left;
        }

        #MainBody {
            width: 650px;
            height: 400px;
            background-color: coral;
            float: right;
        }

        #Footer {
            height: 100px;
            clear: both;
            background-color: cornflowerblue;
        }

    </style>
</head>
<body>
<div id="Container">
    <div id="Header"></div>
    <div id="Menu"></div>
    <div id="Sidebar"></div>
    <div id="MainBody"></div>
    <div id="Footer"></div>
</div>
</body>
</html>