Archive for February 2014

Tutorial Centering a Website

by in , 0

<body>
  <div id="page-wrap">
    <!-- all websites HTML here -->
  </div>
</body>
#page-wrap {
     width: 800px;
     margin: 0 auto;
}

Tutorial Center DIV with Dynamic Height

by in , 0

CSS:

* { margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/

#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/

*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/

html,body{height:100%;}
#page{height:100%;width:465px;}

HTML:

<div id="page">
       <div id="content_container">
               <div id="content">
                     <p>your content</p>
               </div>
       </div>
</div>

Reference URL

Tutorial Browser Specific Hacks

by in , 0

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }
 
/* IE7 */
*:first-child+html #dos { color: red } 
 
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
 
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
 
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
 
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}
 
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}
 
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
 
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
 
/* Everything but IE6-8 */
:root *> #quince { color: red  }
 
/* IE7 */
*+html #dieciocho {  color: red }
 
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
 
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
 
 
 
/***** Attribute Hacks ******/
 
/* IE6 */
#once { _color: blue }
 
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
 
/* Everything but IE6 */
#diecisiete { color/**/: blue }
 
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
 
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
 
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

Check out BrowserHacks.com for more.

Tutorial Bouncy Animated Loading Animation

by in , 0

Just some funzies with CSS3 animations. If you are worried about super deep browser support, use a GIF.

<div class="loader">
    <span></span>
    <span></span>
    <span></span>
</div>
.loader {
    text-align: center;    
}
.loader span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 50px auto;
    background: black;
    border-radius: 50px;
    -webkit-animation: loader 0.9s infinite alternate;
    -moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}
@-webkit-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -webkit-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -webkit-transform: translateY(-21px);
  }
}
@-moz-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -moz-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -moz-transform: translateY(-21px);
  }
}

Reference URL

Tutorial Blurry Text

by in , 0

Make the text color transparent but add a shadow:

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Blurry

More browsers support color than text-shadow though, so you might want to do feature detection. Or, leave the color property and do enough shadowing that it appears blurry anyway (demo).

Tutorial Better Helvetica

by in , 0

body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}

Might as well use the nicest Helvetica you can...

Tutorial Basic Link Rollover as CSS Sprite

by in , 0

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 30px;
       width: 250px;
}

a:hover {
       background-position: 0 -30px;
}

The set height and width ensure only a portion of the sprite.png graphic is shown. The rollover shifts the position of the background image, revealing a different area of the graphic.

Tutorial All Stylesheet Media Types

by in , 0

<link rel="stylesheet" type="text/css" href="print.css" media="print">
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

Tutorial Absolute Center (Vertical & Horizontal) an Image

by in , 0

CSS background-image Technique:

html { 
   width:100%; 
   height:100%; 
   background:url(logo.png) center center no-repeat;
}

CSS + Inline Image Technique:

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

Table technique:

html, body, #wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}
<html>
<body>
   <table id="wrapper">
      <tr>
         <td><img src="logo.png" alt="" /></td>
      </tr>
   </table>
</body>
</html>

Tutorial A Complete Guide to Flexbox

by in , 0

The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommandation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accomodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

Basics

Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as "flex container") whereas the others are meant to be set on the children (said "flex items").

If regular layout is based on both block and inline flow directions, the flex layout is based on "flex-flow directions". Please have a look at this figure from the specification, explaining the main idea behind the flex layout.

Basically, items will be layed out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).

main axis - The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below). main-start | main-end - The flex items are placed within the container starting from main-start and going to main-end. main size - A flex item's width or height, whichever is in the main dimension, is the item's main size. The flex item's main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension. cross axis - The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction. cross-start | cross-end - Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side. cross size - The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

Properties

display: flex | inline-flex; (Applies to: parent flex container element)

This defines a flex container; inline or block depending on the given value. Thus, it enables a flex context for all its direct children.

display: other values | flex | inline-flex;

Please note that:

CSS columns have no effect on a flex container float, clear and vertical-align have no effect on a flex item

flex-direction (Applies to: parent flex container element)

This establishes the main-axis, thus defining the direction flex items are placed in the flex container.

flex-direction: row | row-reverse | column | column-reverse
row (default): left to right in ltr; right to left in rtl row-reverse: right to left in ltr; left to right in rtl column: aligns the flex items top to bottom column-reverse: aligns the flex items bottom to top

flex-wrap (Applies to: parent flex container element)

This defines whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

flex-wrap: nowrap | wrap | wrap-reverse
nowrap (default): single-line / left to right in ltr; right to left in rtl wrap: multi-line / left to right in ltr; right to left in rtl wrap-reverse: multi-line / right to left in ltr; left to right in rtl

flex-flow (Applies to: parent flex container element)

This is a shorthand `flex-direction` and `flex-wrap` properties, which together define the flex container's main and cross axes. Default is `row nowrap`;

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content (Applies to: parent flex container element)

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

justify-content: flex-start | flex-end | center | space-between | space-around
flex-start (default): items are packed toward the start line flex-end: items are packed toward to end line center: items are centered along the line space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line space-around: items are evenly distributed in the line with equal space around them

align-items (Applies to: parent flex container element)

This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

align-items: flex-start | flex-end | center | baseline | stretch
flex-start: cross-start margin edge of the items is placed on the cross-start line flex-end: cross-end margin edge of the items is placed on the cross-end line center: items are centered in the cross-axis baseline: items are aligned such as their baselines align stretch (default): stretch to fill the container (still respect min-width/max-width)

align-content (Applies to: parent flex container element)

This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Note: this property has no effect when the flexbox has only a single line.

align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-start: lines packed to the start of the container flex-end: lines packed to the end of the container center: lines packed to the center of the container space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end space-around: lines evenly distributed with equal space between them stretch (default): lines stretch to take up the remaining space

order (Applies to: child element / flex item)

By default, flex items are layed out in the source order. However, the order property controls the order in which they appear in their container.

order: <integer>

flex-grow (Applies to: child element / flex item)

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.

flex-grow: <number> (default 0)

Negative numbers are invalid.

flex-shrink (Applies to: child element / flex item)

This defines the ability for a flex item to shrink if necessary.

flex-shrink: <number> (default 1)

Negative numbers are invalid.

flex-basis (Applies to: child element / flex item)

This defines the default size of an element before the remaining space is distributed.

flex-basis: <length> | auto (default auto)

flex (Applies to: child element / flex item)

This is the shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters (flex-shrink, flex-basis) are optional. Default is 0 1 auto.

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

align-self (Applies to: child element / flex item)

This allows the default alignment or the one specified by align-items to be overridden for individual flex items.

Please see the align-items explanation to understand the available values.

align-self: auto | flex-start | flex-end | center | baseline | stretch

Examples

Let's start with a very very simple example, solving an almost daily problem: perfect centering. It couldn't be any simpler if you use flexbox.

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

This relies on the fact a margin set to `auto` in a flex container absorb extra space. So setting a vertical margin of auto will make the item perfectly centered in both axis.

Now let's use some more properties. Consider a list of 6 items, all with a fixed dimensions in a matter of aesthetics but they could be auto-sized. We want them to be evenly and nicely distributed on the horizontal axis so that when we resize the browser, everything is fine (without media queries!).

.flex-container {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

Done. Everything else is just some styling concern. Below is a pen featuring this example. Be sure to go to CodePen and try resizing your windows to see what happen.

Check out this Pen!

Let's try something else. Imagine we have a right-aligned navigation on the very top of our website, but we want it to be centered on medium-sized screens and single-columned on small devices. Easy enough.

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}
Check out this Pen!

Let's try something even better by playing with flex items flexibility! What about a mobile-first 3-columns layout with full-width header and footer. And independent from source order.

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. nav
 * 3. main
 * 4. aside
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}
Check out this Pen!

Related Properties

Grid

Other Resources

Flexbox in the CSS specifications Flexbox at MDN Flexbox at Opera Diving into Flexbox by Bocoup Mixing syntaxes for best browser support on CSS-Tricks Flexbox by Raphael Goetter (FR) Flexplorer by Bennett Feely

Browser Support

(modern) means the recent syntax from the specification (e.g. display: flex;) (hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox;) (old) means the old syntax from 2009 (e.g. display: box;) ChromeSafariFirefoxOperaIEAndroidiOS
21+ (modern)
20- (old)
3.1+ (old) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

Blackberry browser 10+ supports the new syntax.

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).

A Sass @mixin to help ease the pain:

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

Tutorial “Stitched” Look

by in , 0

.stitched {
   padding: 20px;
   margin: 10px;
   background: #ff0030;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
}
Check out this Pen!

Reference URL

Tutorial XHTML 1.0 STRICT Page Structure

by in , 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>Page Title</title>
       <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/>
</head>

<body>

</body>

</html>

Tutorial View Source of RSS Feed in Firefox

by in , 0

Firefox likes to assume when you click on a link to an RSS feed that you want to subscribe to it in some fashion. That might be true most of the time, but sometimes you just want to see the source of the RSS.

To view the source of an RSS feed, just append "view-source:" in the address bar before the feed address, like this:

view-source:http://today.wisc.edu/events/tag/humanities.rss

Tutorial Video For Everybody (HTML5 Video with Flash Fallback)

by in , 0

<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
	<!-- MP4 must be first for iPad! -->
	<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
	<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
	<!-- fallback to Flash: -->
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<!-- fallback image. note the title field below, put the title of the video there -->
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p>	<strong>Download Video:</strong>
	Closed Format:	<a href="__VIDEO__.MP4">"MP4"</a>
	Open Format:	<a href="__VIDEO__.OGV">"Ogg"</a>
</p>

A complete explanation at Kroc Camen's site, the originator of this technique.

Tutorial Use Firebug in Any Browser

by in , 0

Just include this script on the site and you'll get a Firebug console that pops up for debugging in any browser. Not quite as full featured but it's still pretty helpful! Remember to remove it when you are done.

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Bookmarklet

Firebug Lite (drag that link to bookmarks bar)

Bookmarklet Code

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

Reference URL

Tutorial Turn Off Autocomplete for Input

by in , 0

Just use the autocomplete attribute:

<input name="q" type="text" autocomplete="off"/>

This would be useful when a text input is one-off and unique. Like a CAPTCHA input, one-time use codes, or for when you have built your own auto-suggest/auto-complete feature and need to turn off the browser default.

Tutorial Top & Bottom Halves Layout

by in , 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>Top and Bottom Halves</title>
	
	<style type="text/css">
	   
	   * { margin: 0; padding: 0; }
	   p { padding: 20px; }
	   #top { background: #eee; }
	   #bottom { background: #ddd; }
	
	</style>
	
	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
        google.load("jquery", "1.3.2");
    </script><script type="text/javascript">
    	$(function(){
    	
    	   var $window = $(window);
    	   winHeight = $window.height();
    	   
    	   $("#top").height(winHeight/2);
    	   $("#bottom").height(winHeight/2);
    	   
    	   $(window).resize(function(){

    		 winHeight = $window.height();
    		 
    		 $("#top").height(winHeight/2);
    	     $("#bottom").height(winHeight/2);
    		 
           });
    	});
    </script>
</head>

<body>

    <div id="top">
        <p>Top Half</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>

    <div id="bottom">
        <p>Bottom Half</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>

</body>

</html>

Reference URL

Tutorial Tooltips for Acronyms

by in , 0

I love CSS

I love <acronym title="Cascading Style Sheets">CSS</acronym>.

Tutorial The Common DOCTYPES

by in , 0

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 5

<!DOCTYPE html>

Tutorial Test Page

by in , 0

A simple XHTML 1.0 Strict page structure that includes:

Basic CSS Reset Loads jQuery from Google Sets up DOM-ready block for jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>Test Page</title>

     <style type="text/css">
        * { margin: 0; padding: 0;}
     </style>

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

     <script type="text/javascript">
        $(function(){
            // Do stuff.
        });
     </script>
</head>

<body>

</body>

</html>

Tutorial Stop IE Page Load Flicker

by in , 0

Otherwise known as Fajax (fake ajax). For example, when submitting a form and the next page is mostly similar to the new page, the entire page isn't whited out and redrawn, it blends smoothly to the next (IE only).

<!--[if IE]>
<meta http-equiv="Page-Enter" content="blendTrans(duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(duration=0)" />
<![endif]-->

Tutorial Standard List Navigation

by in , 0

<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Clients</a></li>
   <li><a href="#">Contact Us</a></li>
</ul>

Tutorial Set iPhone Bookmark Icon

by in , 0

Place this in your <head> section, and set the href attribute to an image to a 57px x 57px PNG file.

<link rel="apple-touch-icon" href="iphone-icon.png"/>

To prevent the iPhone from adding it's own gloss:

<link rel="apple-touch-icon-precomposed" href="icon" />

Tutorial Serving Up Universal IE 6 Stylesheet

by in , 0

All good browsers plus IE 7 and up get REGULAR-STYLESHEET.css, browers IE 6 and below get a special stylesheet with stripped down basic-but-still-nice styling.

<!--[if !IE 6]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->

<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

Reference URL

Tutorial Proper Tags for Displaying Content Edits

by in , 0

The proper way to mark up changes to an HTML document, when you wish to retain the old content while displaying the new.

I <del>hate</del> <ins>LOVE</ins> my new iPod nano.

The browser defaults are usually a strikeout/cross-through of del, and an underline for ins.

Cách tạo sitemap cho blogspot

by in 0

1. Đăng nhập vào Google Webmaster Tools với tài khoản Google của bạn.
2. Tại tab bên trái bảng điều khiển => Tối ưu hóa => Sơ đồ trang web (Xem hình dưới) để cài site map.
3.Bấm nút Thêm/Kiểm tra sơ đồ trang web góc trái
create site map blogspot
4.Một của sổ Popup xuất hiện bạn dán đoạn code lấy theo RSS của Google vào:
atom.xml?redirect=false&start-index=1&max-results=500
Sau đó bấm chọn gửi sơ đồ trang web
create site map blogspot
Như thế là xong gửi sitemap blogspot cho google rồi


Tóm lại địa chỉ sitemap của bạn sẽ là http://youruser.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

Tutorial Post Data to an iframe

by in , 0

Doesn't take any JavaScript or anything. You just have the form's target attribute match the iframe's name attribute.

<form action="iframe.php" target="my-iframe" method="post">
			
  <label for="text">Some text:</label>
  <input type="text" name="text" id="text">
			
  <input type="submit" value="post">
			
</form>
		
<iframe name="my-iframe" src="iframe.php"></iframe>

The outer page doesn't even reload. But it might appear to at first glance since many browsers run the page-loading spinner in the tab when an iframe reloads.

Reference URL

Tutorial Open Link in a New Window

by in , 0

HTML attribute (valid in HTML5 now):

<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>

Inline JavaScript way:

<a href="http://chriscoyier.net"  onkeypress="window.open(this.href); return false;">This link will open in new window/tab</a>

With jQuery:

See here

Tutorial Multiple File Input

by in , 0

File inputs can have an attribute of "multiple" which then allows multiple files to be selected in the file section dialog box. Firefox 3.6+ and WebKit browsers only are supporting it so far. Unfortunately the "multiple files" need to be within the same folder, as there is no interface for selecting one, moving folders, and selecting another.

<form method="post" action="upload.php" enctype="multipart/form-data">
  <input name='uploads[]' type="file" multiple>
  <input type="submit" value="Send">
</form>

Note that the "name" of the file input has brackets at the end of it. This isn't required per the spec but is required to process the multiple files.

In PHP, you can then loop through the data as an array:

foreach ($_FILES['uploads']['name'] as $filename) {
    echo '<li>' . $filename . '</li>';
}

Reference URL

Tutorial Meta Tag to Prevent Search Engine Bots

by in , 0

To prevent all search bots from indexing a page:

<meta name="robots" content="noindex">

To prevent just Google:

<meta name="googlebot" content="noindex">

If you have control over it, you probably want to add nofollow to links that point to that page as well:

<a href="privatepage.html" rel="nofollow">Link to private page</a>

Theoretically that's not needed for Google, which claims to drop all pages with noindex from their directory. But there are more search engines out there and it doesn't hurt.

Reference URL

Tutorial Meta Tag For Forcing IE 8 to Behave Like IE 7

by in , 0

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Source: Microsoft

Some reports that IE 8 in IE 7 mode doesn't quite behave like either one.

Tutorial Meta Refresh

by in , 0

The redirects to the provided URL in 5 seconds. Set to 0 for an immediate redirect.

<meta http-equiv="refresh" content="5;url=http://example.com/" />

Tutorial Make IE 6 Crash

by in , 0

This is absolutely NOT recommended for use in any sort of "real" website scenario. It's just kind of funny and interesting.

<style>*{position:relative}</style><table><input></table>

Tutorial Mailto Links

by in , 0

Basic

Open default mail program, create new message with the TO field already filled out.

<a href="mailto:someone@yoursite.com">Email Us</a>  

Adding a subject

Open default mail program, create new message with the TO and SUBJECT field already filled out. Essentially we are adding the parameter subject to the href value.

Spaces in the subject will probably work OK, but to be super-extra sure, you can replace spaces with "%20".

<a href="mailto:someone@yoursite.com?subject=Mail from Our Site">Email Us</a>  

Adding CC and BCC

Open default mail program, create new message with the TO, SUBJECT, CC, and BCC field already filled out. Essentially we are adding the parameters cc and bcc to the href value.

Also note that you add multiple values to CC and BCC by comma separating them.

<a href="mailto:someone@yoursite.com?cc=someoneelse@theirsite.com, another@thatsite.com, me@mysite.com&bcc=lastperson@theirsite.com&subject=Big%20News">Email Us</a>

Adding Body Text

Just add the body parameter into the ever-growing list of parameters we are using.

<a href="mailto:someone@yoursite.com?cc=someoneelse@theirsite.com, another@thatsite.com, me@mysite.com&bcc=lastperson@theirsite.com&subject=Big%20News&body=Body-goes-here">Email Us</a>

Tutorial Lorem Ipsum Paragraph

by in , 0

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Reference URL

Tutorial Left & Right Halves Layout

by in , 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>Some Example from CSS-Tricks</title>
	
	<style type="text/css">
	   
	   * { margin: 0; padding: 0; }
	   p { padding: 10px; }
	   #left { position: absolute; left: 0; top: 0; width: 50%; }
	   #right { position: absolute; right: 0; top: 0; width: 50%; }
	
	</style>
</head>

<body>

    <div id="left">
        <p>Left Half</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>

    <div id="right">
        <p>Right Half</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>

</body>

</html>

Reference URL

How to Keep Flash Behind Other Elements (flash background)

by in , 0

For example, a dropdown menu going "behind" a flash movie, or staying on top of a lightbox layover.

Try This #1

Add this to the Flash embed code:

<param name="wmode" value="transparent">

Try This #2

Make sure the element that is supposed to be on top has positioning (fixed, relative, or absolute) and a z-index value higher than the Flash object.

Tutorial iPhone Calling and Texting Links

by in , 0

This is the calling one (probably more useful if the clickable text is words, as the iPhone auto-detects phone numbers and does this automatically):

<a href="tel:1-408-555-5555">1-408-555-5555</a>

This is the SMS one, which overrides the default calling behavior:

<a href="sms:1-408-555-1212">New SMS Message</a>

Not sure what other things these links might work on... Might be a little dangerous as having non-standard links that don't work or bring up errors is kinda bad UX. Best for mobile-only sites. If someone know if this works on Android/Blackberry/Other Mobile, comment below.

Reference URL

Tutorial HTML5 Page Structure

by in , 0

<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Your Website</title>
</head>

<body>

	<header>
		<nav>
			<ul>
				<li>Your menu</li>
			</ul>
		</nav>
	</header>
	
	<section>
	
		<article>
			<header>
				<h2>Article title</h2>
				<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
			</header>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		</article>
		
		<article>
			<header>
				<h2>Article title</h2>
				<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
			</header>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		</article>
		
	</section>

	<aside>
		<h2>About section</h2>
		<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</aside>

	<footer>
		<p>Copyright 2009 Your name</p>
	</footer>

</body>

</html>

Tutorial HTML5 Article Structure with hNews

by in , 0

<article class="hentry">
  <header>
    <h1 class="entry-title">But Will It Make You Happy?</h1>
    <time class="updated" datetime="2010-08-07 11:11:03-0400" pubdate>08-07-2010</time>
    <p class="byline author vcard">
        By <span class="fn">Stephanie Rosenbloom</span>
    </p>
  </header>

  <div class="entry-content">
      <p>...article text...</p>
      <p>...article text...</p>
   
      <figure>
        <img src="tammy-strobel.jpg" alt="Portrait of Tammy Strobel" />
        <figcaption>Tammy Strobel in her pared-down, 400sq-ft apt.</figcaption>
      </figure>

      <p>...article text...</p>
      <p>...article text...</p>

      <aside>
        <h2>Share this Article</h2>
        <ul>
          <li>Facebook</li>
          <li>Twitter</li>
          <li>Etc</li>
        </ul>
      </aside>
   
      <div class="entry-content-asset">
        <a href="photo-full.png">
          <img src="photo.png" alt="The objects Tammy removed from her life after moving" />
        </a>
      </div>

      <p>...article text...</p>
      <p>...article text...</p>
   
      <a class="entry-unrelated" href="http://fake.site/">Find Great Vacations</a>
  </div>

  <footer>
    <p>
      A version of this article appeared in print on August 8,
      2010, on page BU1 of the New York edition.
    </p>
    <div class="source-org vcard copyright">
        Copyright 2010 <span class="org fn">The New York Times Company</span>
    </div>
  </footer>
</article>

Reference URL

Tutorial Glyphs

by in , 0

Special Characters

&quot; &#34; " quotation mark u+0022 ISOnum p:before { content:"\0022"; } alert("\42")
&amp; &#38; & ampersand u+0026 ISOnum p:before { content:"\0026"; } alert("\46")
&lt; &#60; < less-than sign u+003C ISOnum p:before { content:"\003c"; } alert("\74");
&gt; &#62; > greater-than sign u+003E ISOnum p:before { content:"\003e"; } alert("\76");

Latin-1 entity set for HTML

Name   Numeric Description Hex ISO in CSS content Octal
&nbsp;   &#160; no-break space %A0 p:before { content:"\00a0"; } alert("\240");
&iexcl; ¡ &#161; inverted exclamation mark %A1 p:before { content:"\00a1"; } alert("\241");
&cent; ¢ &#162; cent sign %A2 p:before { content:"\00a2"; } alert("\242");
&pound; £ &#163; pound sterling sign %A3 p:before { content:"\00a3"; } alert("\243");
&curren; ¤ &#164; general currency sign %A4 p:before { content:"\00a4"; } alert("\244");
&yen; ¥ &#165; yen sign %A5 p:before { content:"\00a5"; } alert("\245");
&brvbar; ¦ &#166; broken (vertical) bar %A6 p:before { content:"\00a6"; } alert("\246");
&sect; § &#167; section sign %A7 p:before { content:"\00a7"; } alert("\247");
&uml; ¨ &#168; umlaut (dieresis) %A8 p:before { content:"\00a8"; } alert("\250");
&copy; © &#169; copyright sign %A9 p:before { content:"\00a9"; } alert("\251");
&ordf; ª &#170; ordinal indicator, feminine %AA p:before { content:"\00aa"; } alert("\252");
&laquo; « &#171; angle quotation mark, left %AB p:before { content:"\00ab"; } alert("\253");
&not; ¬ &#172; not sign %AC p:before { content:"\00ac"; } alert("\254");
&shy; ­ &#173; soft hyphen %AD p:before { content:"\00ad"; } alert("\255");
&reg; ® &#174; registered sign %AE p:before { content:"\00ae"; } alert("\256");
&macr; ¯ &#175; macron %AF p:before { content:"\00af"; } alert("\257");
&deg; ° &#176; degree sign %B0 p:before { content:"\00b0"; } alert("\260");
&plusmn; ± &#177; plus-or-minus sign %B1 p:before { content:"\00b1"; } alert("\261");
&sup2; ² &#178; superscript two %B2 p:before { content:"\00b2"; } alert("\262");
&sup3; ³ &#179; superscript three %B3 p:before { content:"\00b3"; } alert("\263");
&acute; ´ &#180; acute accent %B4 p:before { content:"\00b4"; } alert("\264");
&micro; µ &#181; micro sign %B5 p:before { content:"\00b5"; } alert("\265");
&para; &#182; pilcrow (paragraph sign) %B6 p:before { content:"\00b6"; } alert("\266");
&middot; · &#183; middle dot %B7 p:before { content:"\00b7"; } alert("\267");
&cedil; ¸ &#184; cedilla %B8 p:before { content:"\00b8"; } alert("\270");
&sup1; ¹ &#185; superscript one %B9 p:before { content:"\00b9"; } alert("\271");
&ordm; º &#186; ordinal indicator, masculine %BA p:before { content:"\00ba"; } alert("\272");
&raquo; » &#187; angle quotation mark, right %BB p:before { content:"\00bb"; } alert("\273");
&frac14; ¼ &#188; fraction one-quarter %BC p:before { content:"\00bc"; } alert("\274");
&frac12; ½ &#189; fraction one-half %BD p:before { content:"\00bd"; } alert("\275");
&frac34; ¾ &#190; fraction three-quarters %BE p:before { content:"\00be"; } alert("\276");
&iquest; ¿ &#191; inverted question mark %BF p:before { content:"\00bf"; } alert("\277");
&Agrave; À &#192; capital A, grave accent %C0 p:before { content:"\00c0"; } alert("\300");
&Aacute; Á &#193; capital A, acute accent %C1 p:before { content:"\00c1"; } alert("\301");
&Acirc; Â &#194; capital A, circumflex accent %C2 p:before { content:"\00c2"; } alert("\302");
&Atilde; Ã &#195; capital A, tilde %C3 p:before { content:"\00c3"; } alert("\303");
&Auml; Ä &#196; capital A, dieresis or umlaut mark %C4 p:before { content:"\00c4"; } alert("\304");
&Aring; Å &#197; capital A, ring %C5 p:before { content:"\00c5"; } alert("\305");
&AElig; Æ &#198; capital AE diphthong (ligature) %C6 p:before { content:"\00c6"; } alert("\306");
&Ccedil; Ç &#199; capital C, cedilla %C7 p:before { content:"\00c7"; } alert("\307");
&Egrave; È &#200; capital E, grave accent %C8 p:before { content:"\00c8"; } alert("\310");
&Eacute; É &#201; capital E, acute accent %C9 p:before { content:"\00c9"; } alert("\311");
&Ecirc; Ê &#202; capital E, circumflex accent %CA p:before { content:"\00ca"; } alert("\312");
&Euml; Ë &#203; capital E, dieresis or umlaut mark %CB p:before { content:"\00cb"; } alert("\313");
&Igrave; Ì &#204; capital I, grave accent %CC p:before { content:"\00cc"; } alert("\314");
&Iacute; Í &#205; capital I, acute accent %CD p:before { content:"\00cd"; } alert("\315");
&Icirc; Î &#206; capital I, circumflex accent %CE p:before { content:"\00ce"; } alert("\316");
&Iuml; Ï &#207; capital I, dieresis or umlaut mark %CF p:before { content:"\00cf"; } alert("\317");
&ETH; Ð &#208; capital Eth, Icelandic %D0 p:before { content:"\00d0"; } alert("\320");
&Ntilde; Ñ &#209; capital N, tilde %D1 p:before { content:"\00d1"; } alert("\321");
&Ograve; Ò &#210; capital O, grave accent %D2 p:before { content:"\00d2"; } alert("\322");
&Oacute; Ó &#211; capital O, acute accent %D3 p:before { content:"\00d3"; } alert("\323");
&Ocirc; Ô &#212; capital O, circumflex accent %D4 p:before { content:"\00d4"; } alert("\324");
&Otilde; Õ &#213; capital O, tilde %D5 p:before { content:"\00d5"; } alert("\325");
&Ouml; Ö &#214; capital O, dieresis or umlaut mark %D6 p:before { content:"\00d6"; } alert("\326");
&times; × &#215; multiply sign %D7 p:before { content:"\00d7"; } alert("\327");
&Oslash; Ø &#216;

capital O, slash

%D8 p:before { content:"\00d8"; } alert("\330");
&Ugrave; Ù &#217; capital U, grave accent %D9 p:before { content:"\00d9"; } alert("\331");
&Uacute; Ú &#218; capital U, acute accent %DA p:before { content:"\00da"; } alert("\332");
&Ucirc; Û &#219; capital U, circumflex accent %DB p:before { content:"\00db"; } alert("\333");
&Uuml; Ü &#220; capital U, dieresis or umlaut mark %DC p:before { content:"\00dc"; } alert("\334");
&Yacute; Ý &#221; capital Y, acute accent %DD p:before { content:"\00dd"; } alert("\335");
&THORN; Þ &#222; capital THORN, Icelandic %DE p:before { content:"\00de"; } alert("\336");
&szlig; ß &#223; small sharp s, German (sz ligature) %DF p:before { content:"\00df"; } alert("\337");
&agrave; à &#224; small a, grave accent %E0 p:before { content:"\00e0"; } alert("\340");
&aacute; á &#225; small a, acute accent %E1 p:before { content:"\00e1"; } alert("\341");
&acirc; â &#226; small a, circumflex accent %E2 p:before { content:"\00e2"; } alert("\342");
&atilde; ã &#227; small a, tilde %E3 p:before { content:"\00e3"; } alert("\343");
&auml; ä &#228; small a, dieresis or umlaut mark %E4 p:before { content:"\00e4"; } alert("\344");
&aring; å &#229; small a, ring %E5 p:before { content:"\00e5"; } alert("\345");
&aelig; æ &#230; small ae diphthong (ligature) %E6 p:before { content:"\00e6"; } alert("\346");
&ccedil; ç &#231; small c, cedilla %E7 p:before { content:"\00e7"; } alert("\347");
&egrave; è &#232; small e, grave accent %E8 p:before { content:"\00e8"; } alert("\350");
&eacute; é &#233; small e, acute accent %E9 p:before { content:"\00e9"; } alert("\351");
&ecirc; ê &#234; small e, circumflex accent %EA p:before { content:"\00ea"; } alert("\352");
&euml; ë &#235; small e, dieresis or umlaut mark %EB p:before { content:"\00eb"; } alert("\353");
&igrave; ì &#236; small i, grave accent %EC p:before { content:"\00ec"; } alert("\354");
&iacute; í &#237; small i, acute accent %ED p:before { content:"\00ed"; } alert("\355");
&icirc; î &#238; small i, circumflex accent %EE p:before { content:"\00ee"; } alert("\356");
&iuml; ï &#239; small i, dieresis or umlaut mark %EF p:before { content:"\00ef"; } alert("\357");
&eth; ð &#240; small eth, Icelandic %F0 p:before { content:"\00f0"; } alert("\360");
&ntilde; ñ &#241; small n, tilde %F1 p:before { content:"\00f1"; } alert("\361");
&ograve; ò &#242; small o, grave accent %F2 p:before { content:"\00f2"; } alert("\362");
&oacute; ó &#243; small o, acute accent %F3 p:before { content:"\00f3"; } alert("\363");
&ocirc; ô &#244; small o, circumflex accent %F4 p:before { content:"\00f4"; } alert("\364");
&otilde; õ &#245; small o, tilde %F5 p:before { content:"\00f5"; } alert("\365");
&ouml; ö &#246; small o, dieresis or umlaut mark %F6 p:before { content:"\00f6"; } alert("\366");
&divide; ÷ &#247; divide sign %F7 p:before { content:"\00f7"; } alert("\367");
&oslash; ø &#248; small o, slash %F8 p:before { content:"\00f8"; } alert("\370");
&ugrave; ù &#249; small u, grave accent %F9 p:before { content:"\00f9"; } alert("\371");
&uacute; ú &#250; small u, acute accent %FA p:before { content:"\00fa"; } alert("\372");
&ucirc; û &#251; small u, circumflex accent %FB p:before { content:"\00fb"; } alert("\373");
&uuml; ü &#252; small u, dieresis or umlaut mark %FC p:before { content:"\00fc"; } alert("\374");
&yacute; ý &#253; small y, acute accent %FD p:before { content:"\00fd"; } alert("\375");
&thorn; þ &#254; small thorn, Icelandic %FE p:before { content:"\00fe"; } alert("\376");
&yuml; ÿ &#255; small y, dieresis or umlaut mark %FF p:before { content:"\00ff"; } alert("\377");

Latin Extended-A

&OElig; Π&#338; latin capital ligature oe u+0152 ISOlat2 p:before { content:"\0152"; } alert("\u0152");
&oelig; œ &#339; latin small ligature oe
(ligature is a misnomer, this is a separate character in some languages)
u+0153 ISOlat2 p:before { content:"\0153"; } alert("\u0153");
&Scaron; Š &#352; latin capital letter s with caron u+0160 ISOlat2 p:before { content:"\0160"; } alert("\u0160");
&scaron; š &#353; latin small letter s with caron u+0161 ISOlat2 p:before { content:"\0161"; } alert("\u0161");
&Yuml; Ÿ &#376; latin capital letter y with diaeresis u+0178 ISOlat2 p:before { content:"\0178"; } alert("\u0178");

Latin Extended-B

&fnof; ƒ &#402; latin small f with hook, a.k.a. function, a.k.a. florin u+0192 ISOtech p:before { content:"\0192"; } alert("\u0192");

Spacing Modifier Letters

&circ; ˆ modifier letter circumflex accent u+02C6 ISOpub p:before { content:"\02c6"; } alert("\u02c6");
&tilde; ˜ small tilde u+02DC ISOdia p:before { content:"\02dc"; } alert("\u02dc");
Greek
&Alpha; Α &#913; greek capital letter alpha u+0391 p:before { content:"\0391"; } alert("\u0391");
&Beta; Β &#914; greek capital letter beta u+0392 p:before { content:"\0392"; } alert("\u0392");
&Gamma; Γ &#915; greek capital letter gamma u+0393 ISOgrk3 p:before { content:"\0393"; } alert("\u0395");
&Delta; Δ &#916; greek capital letter delta u+0394 ISOgrk3 p:before { content:"\0394"; } alert("\u0394");
&Epsilon; Ε &#917; greek capital letter epsilon u+0395 p:before { content:"\0395"; } alert("\u0395");
&Zeta; Ζ &#918; greek capital letter zeta u+0396 p:before { content:"\0396"; } alert("\u0396");
&Eta ; Η &#919; greek capital letter eta u+0397 p:before { content:"\0397"; } alert("\u0397");
&Theta; Θ &#920; greek capital letter theta u+0398 ISOgrk3 p:before { content:"\0398"; } alert("\u0398");
&Iota; Ι &#921; greek capital letter iota u+0399 p:before { content:"\0399"; } alert("\u0399");
&Kappa; Κ &#922; greek capital letter kappa u+039A p:before { content:"\039a"; } alert("\u039a");
&Lambda; Λ &#923; greek capital letter lambda u+039B ISOgrk3 p:before { content:"\039b"; } alert("\u039b");
&Mu ; Μ &#924; greek capital letter mu u+039C p:before { content:"\039c"; } alert("\u039c");
&Nu ; Ν &#925; greek capital letter nu u+039D p:before { content:"\039d"; } alert("\u039D");
&Xi ; Ξ &#926; greek capital letter xi u+039E ISOgrk3 p:before { content:"\039e"; } alert("\u039e");
&Omicron; Ο &#927; greek capital letter omicron u+039F p:before { content:"\039f"; } alert("\u039f");
&Pi ; Π &#928; greek capital letter pi u+03A0 ISOgrk3 p:before { content:"\03a0"; } alert("\u03a0");
&Rho ; Ρ &#929; greek capital letter rho u+03A1 p:before { content:"\03a1"; } alert("\u03a1");
there is no Sigmaf, and no u+03A2 character either)
&Sigma; Σ &#931; greek capital letter sigma u+03A3 ISOgrk3 p:before { content:"\03a3"; } alert("\u03A3");
&Tau ; Τ &#932; greek capital letter tau u+03A4 p:before { content:"\03a4"; } alert("\u03A4");
&Upsilon; Υ &#933; greek capital letter upsilon u+03A5 ISOgrk3 p:before { content:"\03a5"; } alert("\u03A5");
&Phi ; Φ &#934; greek capital letter phi u+03A6 ISOgrk3 p:before { content:"\03a6"; } alert("\u03A6");
&Chi ; Χ &#935; greek capital letter chi u+03A7 p:before { content:"\03a7"; } alert("\u03A7");
&Psi ; Ψ &#936; greek capital letter psi u+03A8 ISOgrk3 p:before { content:"\03a8"; } alert("\u03A8");
&Omega; Ω &#937; greek capital letter omega u+03A9 ISOgrk3 p:before { content:"\03a9"; } alert("\u03A9");
&alpha; α &#945; greek small letter alpha u+03B1 ISOgrk3 p:before { content:"\03b1"; } alert("\u03b1");
&beta; β &#946; greek small letter beta u+03B2 ISOgrk3 p:before { content:"\03b2"; } alert("\u03b2");
&gamma; γ &#947; greek small letter gamma u+03B3 ISOgrk3 p:before { content:"\03b3"; } alert("\u03b3");
&delta; δ &#948; greek small letter delta u+03B4 ISOgrk3 p:before { content:"\03b4"; } alert("\u03b4");
&epsilon; ε &#949; greek small letter epsilon u+03B5 ISOgrk3 p:before { content:"\03b5"; } alert("\u03b5");
&zeta; ζ &#950; greek small letter zeta u+03B6 ISOgrk3 p:before { content:"\03b6"; } alert("\u03b6");
&eta ; η &#951; greek small letter eta u+03B7 ISOgrk3 p:before { content:"\03b7"; } alert("\u03b7");
&theta; θ &#952; greek small letter theta u+03B8 ISOgrk3 p:before { content:"\03b8"; } alert("\u03b8");
&iota; ι &#953; greek small letter iota u+03B9 ISOgrk3 p:before { content:"\03b9"; } alert("\u03b9");
&kappa; κ &#954; greek small letter kappa u+03BA ISOgrk3 p:before { content:"\03ba"; } alert("\u03ba");
&lambda; λ &#955; greek small letter lambda u+03BB ISOgrk3 p:before { content:"\03bb"; } alert("\u03bb");
&mu ; μ &#956; greek small letter mu u+03BC ISOgrk3 p:before { content:"\03bc"; } alert("\u03bc");
&nu ; ν &#957; greek small letter nu u+03BD ISOgrk3 p:before { content:"\03bd"; } alert("\u03bd");
&xi ; ξ &#958; greek small letter xi u+03BE ISOgrk3 p:before { content:"\03be"; } alert("\u03be");
&omicron; ο &#959; greek small letter omicron u+03BF NEW p:before { content:"\03bf"; } alert("\u03bf");
&pi ; π &#960; greek small letter pi u+03C0 ISOgrk3 p:before { content:"\03c0"; } alert("\u03c0");
&rho ; ρ &#961; greek small letter rho u+03C1 ISOgrk3 p:before { content:"\03c1"; } alert("\u03c1");
&sigmaf; ς &#962; greek small letter final sigma u+03C2 ISOgrk3 p:before { content:"\03C2"; } alert("\u03c2");
&sigma; σ &#963; greek small letter sigma u+03C3 ISOgrk3 p:before { content:"\03C3"; } alert("\u03c3");
&tau ; τ &#964; greek small letter tau u+03C4 ISOgrk3 p:before { content:"\03C4"; } alert("\u03c4");
&upsilon; υ &#965; greek small letter upsilon u+03C5 ISOgrk3 p:before { content:"\03C5"; } alert("\u03c5");
&phi ; φ &#966; greek small letter phi u+03C6 ISOgrk3 p:before { content:"\03C6"; } alert("\03c6");
&chi ; χ &#967; greek small letter chi u+03C7 ISOgrk3 p:before { content:"\03C7"; } alert("\u03c7");
&psi ; ψ &#968; greek small letter psi u+03C8 ISOgrk3 p:before { content:"\03C8"; } alert("\u03c8");
&omega; ω &#969; greek small letter omega u+03C9 ISOgrk3 p:before { content:"\03C9"; } alert("\u03c9");
&thetasym; ϑ &#977; greek small letter theta symbol u+03D1 NEW p:before { content:"\03D1"; } alert("\u03D1");
&upsih; ϒ &#978; greek upsilon with hook symbol u+03D2 NEW p:before { content:"\03D2"; } alert("\u03D2");
&piv ; ϖ &#982; greek pi symbol u+03D6 ISOgrk3 p:before { content:"\03D6"; } alert("\u03D6");

Punctuation

&ensp; &#8194; en space u+2002 ISOpub p:before { content:"\2002";} alert("\u2002");
&emsp; &#8195; em space u+2003 ISOpub p:before { content:"\2003";} alert("\u2003");
&thinsp; &#8201; thin space u+2009 ISOpub p:before { content:"\2009";} alert("\u2009");
&zwnj; &#8204; zero width non-joiner u+200C NEW RFC 2070 p:before { content:"\200C";} alert("\u200C");
&zwj; &#8205; zero width joiner u+200D NEW RFC 2070 p:before { content:"\200D";} alert("\u200d");
&lrm; &#8206; left-to-right mark u+200E NEW RFC 2070 p:before { content:"\200E";} alert("\u200e");
&rlm; &#8207; right-to-left mark u+200F NEW RFC 2070 p:before { content:"\200F";} alert("\u200f");
&ndash; &#8211; en dash u+2013 ISOpub p:before { content:"\2013";} alert("\u2013");
&mdash; &#8212; em dash u+2014 ISOpub p:before { content:"\2014";} alert("\u2014");
&lsquo; &#8216; left single quotation mark u+2018 ISOnum p:before { content:"\2018";} alert("\u2018");
&rsquo; &#8217; right single quotation mark u+2019 ISOnum p:before { content:"\2019";} alert("\u2019");
&sbquo; &#8218; single low-9 quotation mark u+201A NEW p:before { content:"\201A";} alert("\u201a");
&ldquo; &#8220; left double quotation mark u+201C ISOnum p:before { content:"\201C";} alert("\u201c");
&rdquo; &#8221; right double quotation mark u+201D ISOnum p:before { content:"\201D";} alert("\u201d");
&bdquo; &#8222; double low-9 quotation mark u+201E NEW p:before { content:"\201E";} alert("\u201e");
&dagger; &#8224; dagger u+2020 ISOpub p:before { content:"\2020";} alert("\u2020");
&Dagger; &#8225; double dagger u+2021 ISOpub p:before { content:"\2021";} alert("\u2021");
&permil; &#8240; per mille sign u+2030 ISOtech p:before { content:"\2030";} alert("\u2030");
&lsaquo; &#8249; single left-pointing angle quotation mark
(lsaquo is proposed but not yet ISO standardised)
u+2039 ISO proposed p:before { content:"\2039";} alert("\u2039");
&rsaquo; &#8250; single right-pointing angle quotation mark
rsaquo is proposed but not yet ISO standardised
u+203A ISO proposed p:before { content:"\203A";} alert("\u203a");

General Punctuation

&bull; &#8226; bullet, a.k.a. black small circle
bullet is NOT the same as bullet operator — u+2219
u+2022 ISOpub alert("\u2219");
&hellip; &#8230; horizontal ellipsis, a.k.a. three dot leader u+2026 ISOpub alert("\u2026");
&prime; &#8242; prime, a.k.a. minutes, a.k.a. feet u+2032 ISOtech alert("\u2032");
&Prime; &#8243; double prime, a.k.a. seconds, a.k.a. inches u+2033 ISOtech alert("\u2033");
&oline; &#8254; overline, a.k.a. spacing overscore u+203E NEW alert("\u203e");
&frasl; &#8260; fraction slash u+2044 NEW alert("\u8260");

Letterlike Symbols

&weierp; &#8472; script capital P, a.k.a. power set, a.k.a. Weierstrass p u+2118 ISOamso alert("\u2118");
&image; &#8465; blackletter capital I, a.k.a. imaginary part u+2111 ISOamso alert("\u2111");
&real; &#8476; blackletter capital R, a.k.a. real part symbol u+211C ISOamso alert("\u211c");
&trade; &#8482; trade mark sign u+2122 ISOnum alert("\u2122");
&alefsym; &#8501; alef symbol, a.k.a. first transfinite cardinal
alef symbol is NOT the same as hebrew letter alef — u+05D0 although the same glyph
could be used to depict both characters
u+2135 NEW alert("\u");

Arrows

&larr; &#8592; leftwards arrow u+2190 ISOnum alert("\u2190");
&uarr; &#8593; upwards arrow u+2191 ISOnum alert("\u2191");
&rarr; &#8594; rightwards arrow u+2192 ISOnum alert("\u2192");
&darr; &#8595; downwards arrow u+2193 ISOnum alert("\u2193");
&harr; &#8596; left right arrow u+2194 ISOamsa alert("\u2194");
&crarr; &#8629; downwards arrow with corner leftwards, a.k.a. carriage return u+21B5 NEW alert("\u21b5");
&lArr; &#8656; leftwards double arrow
can be used for ‘is implied by’
u+21D0 ISOtech alert("\u21d0");
&uArr; &#8657; upwards double arrow u+21D1 ISOamsa alert("\u21d1");
&rArr; &#8658; rightwards double arrow u+21D2 ISOtech alert("\u21d2");
&dArr; &#8659; downwards double arrow u+21D3 ISOamsa alert("\ud1d3");
&hArr; &#8660; left right double arrow u+21D4 ISOamsa alert("\u21d4");

Mathematical Operators

&forall; &#8704; for all u+2200 ISOtech alert("\u2200");
&part; &#8706; partial differential u+2202 ISOtech alert("\u2202");
&exist; &#8707; there exists u+2203 ISOtech alert("\u2203");
&empty; &#8709; empty set, a.k.a. null set, a.k.a. diameter u+2205 ISOamso alert("\u2205");
&nabla; &#8711; nabla, a.k.a. backward difference u+2207 ISOtech alert("\u2207");
&isin; &#8712; element of u+2208 ISOtech alert("\u2208");
&notin; &#8713; not an element of u+2209 ISOtech alert("\u2209");
&ni ; &#8715; contains as member u+220B ISOtech alert("\u220b");
&prod; &#8719; n-ary product, a.k.a. product sign
prod is NOT the same character as u+03A0 ‘greek capital letter pi’ though the same
glyph might be used for both
u+220F ISOamsb alert("\u03a0");
&sum ; &#8721; n-ary sumation
sum is NOT the same character as u+03A3 ‘greek capital letter sigma’ though the same
glyph might be used for both
u+2211 ISOamsb alert("\u03a3");
&minus; &#8722; minus sign u+2212 ISOtech alert("\u2212");
&lowast; &#8727; asterisk operator u+2217 ISOtech alert("\u2217");
&radic; &#8730; square root, a.k.a. radical sign u+221A ISOtech alert("\u221a");
&prop; &#8733; proportional to u+221D ISOtech alert("\u221d");
&infin; &#8734; infinity u+221E ISOtech alert("\u221e");
&ang ; &#8736; angle u+2220 ISOamso alert("\u2220");
&and ; &#8869; logical and, a.k.a. wedge u+2227 ISOtech alert("\u2227");
&or ; &#8870; logical or, a.k.a. vee u+2228 ISOtech alert("\u2228");
&cap ; &#8745; intersection, a.k.a. cap u+2229 ISOtech alert("\u2229");
&cup ; &#8746; union, a.k.a. cup u+222A ISOtech alert("\u222a");
&int ; &#8747; integral u+222B ISOtech alert("\u222b");
&there4; &#8756; therefore u+2234 ISOtech alert("\u2234");
&sim ; &#8764; tilde operator, a.k.a. varies with,
similar to tilde operator, but is NOT the same character as the tilde u+007E,
although the same glyph might be used to represent both
u+223C ISOtech alert("\u223c");
&cong; &#8773; approximately equal to u+2245 ISOtech alert("\u2245");
&asymp; &#8776; almost equal to, a.k.a. asymptotic to u+2248 ISOamsr alert("\u2248");
&ne ; &#8800; not equal to u+2260 ISOtech alert("\u2260");
&equiv; &#8801; identical to u+2261 ISOtech alert("\u2261");
&le ; &#8804; less-than or equal to u+2264 ISOtech alert("\u2264");
&ge ; &#8805; greater-than or equal to u+2265 ISOtech alert("\u2265");
&sub ; &#8834; subset of u+2282 ISOtech alert("\u2282");
&sup ; &#8835; superset of
note that nsup, ‘not a superset of u+2283′ is not covered by the Symbol font
encoding and is not included.
u+2283 ISOtech alert("\u2283");
&nsub; &#8836; not a subset of u+2284 ISOamsn alert("\u2284");
&sube; &#8838; subset of or equal to u+2286 ISOtech alert("\u2286");
&supe; &#8839; superset of or equal to u+2287 ISOtech alert("\u2287");
&oplus; &#8853; circled plus, a.k.a. direct sum u+2295 ISOamsb alert("\u2295");
&otimes; &#8855; circled times, a.k.a. vector product u+2297 ISOamsb alert("\u2297");
&perp; &#8869; up tack, a.k.a. orthogonal to, a.k.a. perpendicular u+22A5 ISOtech alert("\u22a5");
&sdot; &#8901; dot operator
dot operator is NOT the same character as u+00B7 middle dot
u+22C5 ISOamsb alert("\u22c5");

Miscellaneous Technical

&lceil; &#8968; left ceiling, a.k.a. apl upstile u+2308, ISOamsc alert("\u2308");
&rceil; &#8969; right ceiling u+2309, ISOamsc alert("\u2309");
&lfloor; &#8970; left floor, a.k.a. apl downstile u+230A, ISOamsc alert("\u230a");
&rfloor; &#8971; right floor u+230B, ISOamsc alert("\u230b");
&lang; &#9001; left-pointing angle bracket, a.k.a. bra
lang is NOT the same character as u+003C ‘less than’
or u+2039 ’single left-pointing angle quotation mark’
u+2329 ISOtech alert("\u2329");
&rang; &#9002; right-pointing angle bracket, a.k.a. ket
rang is NOT the same character as u+003E ‘greater than’
or u+203A ’single right-pointing angle quotation mark’
u+232A ISOtech alert("\u232a");

Geometric Shapes

&loz ; &#9674; lozenge u+25CA ISOpub alert("\u25ca");

Miscellaneous Symbols

&spades; &#9824; black spade suit u+2660 ISOpub alert("\u2660");
&clubs; &#9827; black club suit, a.k.a. shamrock u+2663 ISOpub alert("\u2663");
&hearts; &#9829; black heart suit, a.k.a. valentine u+2665 ISOpub alert("\u2665");
&diams; &#9830; black diamond suit u+2666 ISOpub alert("\u2666");

Reference URL