jQuery tubular
Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your body tag, specify a YouTube video ID and tell it the ID of your content wrapper, and you're on your way.
$('body').tubular('_VKW_M_uVjw','wrapper');
Read More
CSS3 comment
<![CDATA[
.entry .info .coms{
float:right;
font:bold 14px tahoma ;
position:relative;
left:-40px;
}
.coms a{
background:red;
text-align:center;
position:relative;
width:17px !important;
height:17px !important;
padding:5px 5px;
border-radius:100%;
display:block;
background: -webkit-radial-gradient(circle, #480000, #2F2727);
background: -moz-radial-gradient(circle,#FF0000,#980000);
border: solid 1px #fff;
box-shadow:0 0 5px #000;
left:35px;
top:0px;
-moz-transition:top .5s, visibility .3s;
-webkit-transition:top .5s, visibility .3s;
visibility:hidden;
}
.coms a:hover{
top:-31px;
z-index:99;
visibility:visible;
}
.coms a:hover span:last-of-type{
top:13px;
}
.coms a span:last-of-type{
color:#fff;
text-shadow:1px 1px 1px #000;
background:#999;
background-image: -moz-linear-gradient(bottom, rgb(74,74,74) 32%, rgb(105,105,105) 66%, rgb(110,110,110) 83%);
background-image: -webkit-linear-gradient(bottom, rgb(74,74,74) 32%, rgb(105,105,105) 66%, rgb(110,110,110) 83%);
padding:5px 10px;
border-radius:5px;
box-shadow:inset 0 0 0 1px #eee, 0 0 1px #333;
position:relative;
top:-18px;
left:-65px;
-moz-transition:top .5s;
-webkit-transition:top .5s;
visibility:visible;
}
]]>
CSS3 Media Queries
<![CDATA[
/* Smartphones (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* PCs y portátiles ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Pantallas grandes ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos */
}
]]>
CSS - shorthand properties
<![CDATA[
body { background: url("test.gif"); background-color: #fff; background-repeat: repeat-x; }
body {background: url("test.gif") #fff repeat-x}
{==transition==}
opacity: 0;
-moz-transition: opacity .25s linear, visibility .1s linear .5s;
-webkit-transition: opacity .25s linear, visibility .1s linear .5s;
-o-transition: opacity .25s linear, visibility .1s linear .5s;
transition: opacity .25s linear, visibility .1s linear .5s;
visibility: hidden;
]]>
Font
<![CDATA[
Use:
font: 1em/1.5em bold italic serif
...instead of
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif
]]>
Background
<![CDATA[
Use:
background: #fff url(image.gif) no-repeat top left
...instead of
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
]]>
Lists
<![CDATA[
Use:
list-style: disc outside url(image.gif)
...instead of
list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)
]]>
Lists
<![CDATA[
Use:
list-style: disc outside url(image.gif)
...instead of
list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)
]]>
Margin & padding
<![CDATA[
Four different values
Use:
margin: 4px 1px 3px 4px (top, right, bottom, left)
...instead of
margin-top: 4px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px
Three different values
Use:
margin: 5em 1em 3em (top, right and left, bottom)
...instead of
margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em
Two different values
Use:
margin: 5% 1% (top and bottom, right and left)
...instead of
margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%
One different value
Use:
margin: 1 (top, bottom, right and left)
...instead of
margin-top: 1;
margin-right: 1;
margin-bottom: 1;
margin-left: 1
]]>
Border
<![CDATA[
Use:
border: 1px black solid
...instead of
border-width: 1px;
border-color: black;
border-style: solid
Use:
border-right: 1px black solid
...instead of
border-right-width: 1px;
border-right-color: black;
border-right-style: solid;
These borders can be achieved with the following CSS command:
border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf
You can achieve exactly the same effect by using:
border: 8px solid #336;
border-width: 10px 8px 8px 10px
border-color: #ccf #336 #336 #ccf
]]>
บ้านนายลิงแว่น