Wednesday 28 September 2011

:last-child

:last-child { declaration aria }

:nth-last-of-type

:nth-last-of-type( { number of expression | odd | even } )
{ declaration aria }

:nth-of-type

:nth-of-type( { expression | odd | even } )
{ declaration aria }

Tuesday 27 September 2011

:nth-last-child(N)

:nth-last-child( { number expression | odd | even } )
{ declaration aria }

:nth-child

:nth-child ( { expression | odd | even } )
{ declaration aria }

CSS3 - Pseudo Classes

CSS objective "style of separation of content" depends largely on its ability to penetrate first the content. Well, in CSS3, that mission is enhanced by the addition of the Structural Funds of pseudo-classes. These selectors allow you to select children of a parent based on a set of common criteria, such as the third son, the children even / odd, the n-th child within each group of children of a certain type in the matrix, and more drugoe.Nemnogo overwhelming, yes, but better safe than disappointment.

CSS3 pseudo-classes are supported in IE8+ , Firefox 3.1+, and Safari 3.1+

Friday 23 September 2011

Text Stroke

.classname { -webkit-text-stroke: 3px black; color: white; }

Text Outline

body { background-color: white; } .classname { text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black; color: white; }

Thursday 22 September 2011

Multiple Background

.bg { background: url(image/flower.jpg) 0 0 no-repeat, url(image2/tree.jpg) 100% 0 no-repeat; }

Sunday 18 September 2011

CSS3 Solutions for Microsoft Internet Explorer

CSS3 probably the latest trend in web design at this time, allowing developers to implement a series of solutions for their projects with a simple CSS to avoid having to semantic no marks, JavaScript complex and additional images,. Unfortunately, it is not surprising that Microsoft Internet Explorer, even in its most recent version is not yet compatible with most of the properties and features introduced in CSS3.


Transparency and Opacity


#idname {
opacity: .4; /* IE9+ and other browsers */
filter: alpha(opacity=40); /* IE6+ */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* works in IE8 only */ }


Rounded Corners or border-radius


.class-name {
border-radius: 15px;
behavior: url(border-radius.htc);
}


Box-shadow


.class-name
{
-moz-box-shadow: 2px 2px 3px #969696; /* Firefox 3.5+ */
-webkit-box-shadow: 2px 2px 3px #969696; /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); /* ie */
}


Gradients


.class-name
{ background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Chrome and Safari */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 and IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}


Conditional comments



<link rel="stylesheet" type="text/css" href="style.css" />
 
<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="allversion-ie.css" />
<![endif]-->

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

<!--[if lt IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

Thursday 15 September 2011

CSS3 - Columns

#columns {

  -webkit-column-count: 3;
  -webkit-column-rule: 1px solid #bbb;
  -webkit-column-gap: 2em;

  -moz-column-count: 3;
  -moz-column-rule: 1px solid #bbb;
  -moz-column-gap: 2em;

  column-count: 3;
  column-rule: 1px solid #bbb;
  column-gap: 2em;

  display: block;
}

CSS3 - Layering multiple shadowbox

#Example_layer {
-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
}

CSS - Shadow with the ‘inset’

#Example_inset {
-moz-box-shadow: inset -5px -5px 0 5px #888;
-webkit-box-shadow: inset -5px -5px 0 5px#888;
box-shadow: inset -5px -5px 0 5px #888;
}

CSS3 - Background Size

#bg1 {
background-size: auto;
}
#bg2 {
background-size: 275px 125px;
}

CSS - Border-Radius

#my_CSS3_id {
    text-align:center;
    margin:0 auto;
    height:50px;
    width:580px;
  border: 5px solid #c4c8cc;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
}

#my_CSS3_id2 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
border: 5px solid #c4c8cc;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 15px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 15px;
  
  
   -khtml-border-radius-topleft:15px;
   -khtml-border-radius--topright:15px;
   -khtml-border-radius-bottomright: 0px;
   -khtml-border-radius-bottomleft: 0px;
      
    border-radius-topright-topleft:15px;
    border-radius-topright-topright:15px;
    border-radius-topright-bottomright: 0px;
    border-radius-topright-bottomleft: 0px;
}

CSS3 - Transform

#my_CSS3_id {
    text-align:center;
    margin:0 auto;
    height:50px;
    width:580px;
    font-size:20px;
    color:#FFF;
     background-color:#999;
-moz-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
}

#my_CSS3_id2 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
    font-size:20px;
    color:#FFF;
     background-color:#F00;
-moz-transform: skew(-25deg);
  -webkit-transform: skew(-25deg);
}

Wednesday 14 September 2011

CSS3 - Opacity

#L1 { background:#036; opacity:0.2; height:20px; width:500px; margin:20px auto; text-align:center; }
#L2 { background:#036; opacity:0.4; height:20px; width:500px;  margin:20px auto; text-align:center;}
#L3 {  background:#036; opacity:0.6; height:20px; width:500px;  margin:20px auto; text-align:center;}
#L4 {  background:#036; opacity:0.8; height:20px; width:500px; margin:20px auto; text-align:center; }
#L5 { background:#036; opacity:1.0; height:20px; width:500px; margin:20px auto; text-align:center; }


#L7 { height:20px; width:500px; margin:20px auto; text-align:center;  }
#L8 { opacity:0.25; width:150px; height:50px; margin:20px auto; text-align:center; }
#L9 {opacity:0.50; width:150px; height:50px; margin:20px auto; text-align:center; }
#L10 {  opacity:0.75; width:150px; height:50px; margin:20px auto; text-align:center; }
#L11 {  opacity:1.0; width:150px; height:50px; margin:20px auto; text-align:center; }

CSS3 - Text Shadow

#my_CSS3_id {
    text-align:center;
    margin:0 auto;
    height:50px;
    width:580px;
text-shadow: 2px 2px 7px #111;
  font-size: 3.2em;
  color: #f5f5f5;
}

#my_CSS3_id2 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
 text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
  font-size: 3.2em;
  color: #fff;
  text-align: center;
  padding: 10px 0px 5px 0px;
  background: #151515;
}

CSS3 - rgb-rgba-Color-Opacity

#L1 { background:rgb(60, 80, 100); height:20px; width:500px; margin:20px auto; text-align:center; }
#L2 { background:rgb(60, 100, 100); height:20px; width:500px;  margin:20px auto; text-align:center;}
#L3 { background:rgb(60, 120, 100); height:20px; width:500px;  margin:20px auto; text-align:center;}

#L4 { background:rgb(25, 50, 100); height:20px; width:500px; margin:20px auto; text-align:center; }
#L5 { background:rgb(25, 50, 150); height:20px; width:500px; margin:20px auto; text-align:center; }
#L6 { background:rgb(25, 50, 200); height:20px; width:500px; margin:20px auto; text-align:center; }

#L7 { background:rgba(153, 134, 117, 0.2); height:20px; width:500px; margin:20px auto; text-align:center;  }
#L8 { background:rgba(153, 134, 117, 0.4); height:20px; width:500px; margin:20px auto; text-align:center; }
#L9 { background:rgba(153, 134, 117, 0.6); height:20px; width:500px; margin:20px auto; text-align:center; }
#L10 { background:rgba(153, 134, 117, 0.8); height:20px; width:500px; margin:20px auto; text-align:center; }
#L11 { background:rgba(153, 134, 117, 1.0); height:20px; width:500px; margin:20px auto; text-align:center; }

CSS3 - Multiple Columns

#my_CSS3_id {
    margin:0 auto;
    height:50px;
    width:500px;
text-align: justify;
-moz-column-width: 15em;
-moz-column-gap: 2em;
-webkit-column-width: 15em;
-webkit-column-gap: 2em;
}

#my_CSS3_id2 {

    margin:20px auto;
    height:50px;
    width:500px;
  text-align: justify;
-moz-column-count: 4;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}

CSS3 - hsla-Color-Opacity

#L1 { background:hsl(320, 100%, 25%); height:20px; width:500px; margin:20px auto; text-align:center; }
#L2 { background:hsl(320, 100%, 50%); height:20px; width:500px;  margin:20px auto; text-align:center;}
#L3 { background:hsl(320, 100%, 75%); height:20px; width:500px;  margin:20px auto; text-align:center;}

#L4 { background:hsl(202, 100%, 50%); height:20px; width:500px; margin:20px auto; text-align:center; }
#L5 { background:hsl(202, 50%, 50%); height:20px; width:500px; margin:20px auto; text-align:center; }
#L6 { background:hsl(202, 25%, 50%); height:20px; width:500px; margin:20px auto; text-align:center; }

#L7 { background:hsla(165, 35%, 50%, 0.2); height:20px; width:500px; margin:20px auto; text-align:center;  }
#L8 { background:hsla(165, 35%, 50%, 0.4); height:20px; width:500px; margin:20px auto; text-align:center; }
#L9 { background:hsla(165, 35%, 50%, 0.6); height:20px; width:500px; margin:20px auto; text-align:center; }
#L10 { background:hsla(165, 35%, 50%, 0.8); height:20px; width:500px; margin:20px auto; text-align:center; }
#L11 { background:hsla(165, 35%, 50%, 1.0); height:20px; width:500px; margin:20px auto; text-align:center; }

CSS3 - Gradients

#my_CSS3_id {
    text-align:center;
    margin:0 auto;
    height:50px;
    width:580px;
  background: -moz-linear-gradient(top, #35425d 0%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#35425d), to(#fff));
}

#my_CSS3_id2 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
  background: -moz-linear-gradient(left, #35425d 25%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#35425d), to(#fff));
}

#my_CSS3_id3 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
  background: -moz-radial-gradient(50% 50%, farthest-side, #487a77, #fff);
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#487a77), to(#fff));
}

CSS3 - Box Shadows

#my_CSS3_id {
    text-align:center;
    margin:0 auto;
    height:50px;
    width:580px;
   border: 5px solid #c4c8cc;
  -moz-box-shadow: 5px 5px 7px #888;
  -moz-border-radius-bottomright: 15px;
  -webkit-box-shadow: 5px 5px 7px #888;
  -webkit-border-bottom-right-radius: 15px;
}

#my_CSS3_id2 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
   border: 5px solid #c4c8cc;
  -moz-box-shadow: -10px 5px 10px #900    ;
  -moz-border-radius-bottomright: 15px;
  -webkit-box-shadow: -10px 5px 10px #900;
  -webkit-border-bottom-right-radius: 15px;
}

CSS3 - Embedded Font Face

@font-face {
  font-family: SedonaScriptFLF;
  src: url(‘SedonaScriptFLF.ttf’);
}


#my_CSS3_id {
    text-align:center;
    margin:0 auto;
    height:50px;
    width:580px;
  font-family: SedonaScriptFLF;
  font-size: 4em;
  text-shadow: 3px 3px 7px #111;
  color:#F00;
}

#my_CSS3_id2 {
    text-align:center;
    margin:50px auto;
    height:50px;
    width:580px;
  font-family: SedonaScriptFLF;
  font-size: 3.2em;
  text-shadow: 3px 3px 7px #111;
}

CSS3 - Border Color

#my_CSS3_id {
    text-align:center;
    margin:0 auto;
    height:50px;
    width:580px;
  border: 10px solid #c4c8cc;
  -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
  -moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
  -moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
  -moz-border-right-colors: #300 #600 #700 #800 #900 #A00;
}

#my_CSS3_id2 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
  border: 10px solid #c4c8cc;
  -moz-border-radius: 25px 0px;
  -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;
  -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A;
  -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A;
  -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;
}

CSS3 - Image border

#my_CSS3_id {
    text-align:center;
    margin:0 auto;
      height:50px;
  border-width:15px;

  -moz-border-image:url(borderi.png) 30 30 round;
  -webkit-border-image:url(borderi.png) 30 30 round;
  width:580px; padding:15px 25px; height:inherit;
}

#my_CSS3_id2 {
    margin:30px auto;
  border-width:15px;
    height:50px;
  -moz-border-image:url(borderi2.png) 30 30 stretch ;
  -webkit-border-image:url(borderi2.png) 30 30 stretch;
  width:580px; padding:15px 25px; height:inherit;
}

html5

HTML5 is the newest version of the HyperText Markup Language that was developed in the late 80's in order to describe documents that linked to each other. The language is a Markup Language...a way to enhance a text file with bits of code (markup) that describes the structure of the document. Think of it as what your teachers did to your english schoolpapers.Today the language has grown substantially and it's gained two allies that are closely associated with it. CSS (Cascading Style Sheets) is supposed to help HTML look great by describing the way that the document is supposed to look. JavaScript is supposed to build interactivity.

HTML5 tags


<!--...--> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation
<acronym>  Not supported in HTML 5.
<address> Defines an address element
<applet> Not supported in HTML 5.
<area>  Defines an area inside an image map
<article> New Defines an article
<aside>  New Defines content aside from the page content
<audio>  New Defines sound content
<b>   Defines bold text
<base>  Defines a base URL for all the links in a page
<basefont> Not supported in HTML 5.
<bdo>  Defines the direction of text display
<big>  Not supported in HTML 5.
<blockquote>Defines a long quotation
<body>  Defines the body element
<br>  Inserts a single line break
<button> Defines a push button
<canvas> New Defines graphics
<caption> Defines a table caption
<center> Not supported in HTML 5.
<cite>  Defines a citation
<code>  Defines computer code text
<col>  Defines attributes for table columns
<colgroup> Defines groups of table columns
<command> New Defines a command button
<datalist> New Defines a dropdown list
<dd>  Defines a definition description
<del>  Defines deleted text
<details> New Defines details of an element
<dialog> New Defines a dialog
<dfn>  Defines a definition term
<dir>  Not supported in HTML 5.
<div>  Defines a section in a document
<dl>  Defines a definition list
<dt>  Defines a definition term
<em>  Defines emphasized text
<embed>New Defines external interactive content or plugin
<fieldset> Defines a fieldset
<figure> New Defines a group of media content, and their caption
<font>  Not supported in HTML 5.
<footer> New Defines a footer for a section or page
<form>  Defines a form
<frame>  Not supported in HTML 5.
<frameset> Not supported in HTML 5.
<h1> to <h6>Defines header 1 to header 6
<head>  Defines information about the document
<header> New Defines a header for a section or page
<hgroup> New Defines information about a section in a document
<hr>  Defines a horizontal rule
<html>  Defines an html document
<i>   Defines italic text
<iframe> Defines an inline sub window
<img>  Defines an image
<input>  Defines an input field
<ins>  Defines inserted text
<keygen> New Defines a generated key in a form
<kbd>  Defines keyboard text
<label>  Defines a label for a form control
<legend> Defines a title in a fieldset
<li>  Defines a list item
<link>  Defines a resource reference
<map>  Defines an image map
<mark>New Defines marked text
<menu>  Defines a menu list
<meta>  Defines meta information
<meter>New Defines measurement within a predefined range
<nav>New Defines navigation links
<noframes> Not supported in HTML 5.
<noscript> Defines a noscript section
<object> Defines an embedded object
<ol>  Defines an ordered list
<optgroup> Defines an option group
<option> Defines an option in a drop-down list
<output> New Defines some types of output
<p>   Defines a paragraph
<param>  Defines a parameter for an object
<pre>  Defines preformatted text
<progress> New Defines progress of a task of any kind
<q>   Defines a short quotation
<rp>  New Used in ruby annotations to define what
   to show browsers that to not support the ruby element.
<rt>  New Defines explanation to ruby annotations.
<ruby>  New Defines ruby annotations.
<s>   Not supported in HTML 5.
<samp>  Defines sample computer code
<script> Defines a script
<section> New Defines a section
<select> Defines a selectable list
<small>  Defines small text
<source> New Defines media resources
<span>  Defines a section in a document
<strike> Not supported in HTML 5.
<strong> Defines strong text
<style>  Defines a style definition
<sub>  Defines subscripted text
<sup>  Defines superscripted text
<table>  Defines a table
<tbody>  Defines a table body
<td>  Defines a table cell
<textarea> Defines a text area
<tfoot>  Defines a table footer
<th>  Defines a table header
<thead>  Defines a table header
<time>  New Defines a date/time
<title>  Defines the document title
<tr>  Defines a table row
<tt>  Not supported in HTML 5.
<u>   Not supported in HTML 5.
<ul>  Defines an unordered list
<var>  Defines a variable
<video>  New Defines a video
<xmp>  Not supported in HTML 5.