Cómo se hace...
Tablero de Ajedrez
Con movimiento de piezas, enroque y coronación
Editor de Texto en Html5
Botones de Negrita, Itálica y Subrayado
Calendario Anual
Se ejemplifica con el calendario de la Iglesia Católica
Buscador en Javascript
No requiere PHP: del lado del cliente
Notas Rápidas en Javascript
El formato clásico de Notas Rápidas de Windows
Slide Texto-Imagen
Slides de imágenes con texto para realzar un espacio
Panel de Navegación
Resaltar títulos de Panel al hacer Scroll

CSS


    #table_chess {
        width: 100%;
        max-width: 400px;
        border: 2px solid #9A9A4E; 
        border-collapse: collapse;
    }
    #table_chess td {
        width: 12.5%; 
        height: 46px; 
        text-align: center; 
        font-size: 28px;
        text-shadow: 1px 1px 1px #999;
        cursor: default;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .table_letters {
        border: 2px solid transparent; 
        border-collapse: collapse;
    }
    .table_letters td {
        width: 46px;
        text-align: center; 
        font-size: 16px;
    }
    .table_numbers {
        border: 2px solid transparent; 
        border-collapse: collapse;
        margin-right: 6px;
    }
    .table_numbers td {
        height: 46px;
        font-size: 16px;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    .selected {
        box-shadow: 0px 0px 6px rgb(170,210,183) inset;
        background-color: #EEFDE3;
    }
    .b1 {
        background-color:#ffffff;
    }
    .n1 {
        background-color: rgba(192, 192, 192, 0.5);
    }
    .coronacion {
        width: 100%;
        text-align: center; 
        font-size: 24px;
        text-shadow: 1px 1px 1px #999;
        cursor: default;
        user-select: none;
    }
    .coronacion td {
        cursor: pointer;
    }
    .jugadas {
        text-align: center; 
        margin: 4px; 
        border-bottom: 1px solid #ccc; 
        color: #757575; 
        font-weight: bold;
    }
    #movimientos {
        height: 75px;
        font-family: 'Times New Roman', Times, serif; 
        font-size: 14px; 
        color: #616161;
        overflow-y: auto; 
        background-color: #fafafa; 
        padding: 4px;
        column-count: 2;
    }

HTML

El tablero de Ajedrez es una tabla


    

JAVASCRIPT




CSS


    #div_editor {
    padding: 5px;
    border: 1px solid #999;
    width: 300px;
    height: 200px;
    overflow-y: auto;
    }

HTML



    

JAVASCRIPT


    

(este código es usado aquí)

HTML


    

JAVASCRIPT


    

HTML


    

JAVASCRIPT


    

CSS


    .nr_btn_add{
        float: left; 
        font-weight: bold; 
        color: #000; 
        cursor: pointer; 
        font-size: 18px; 
        padding-left: 5px;
    }
    .nr_btn_add:hover{
        text-shadow: 1px 1px 2px #999;
    }
    .nr_btn_close{
        float: right; 
        font-weight: bold; 
        color: #000; 
        cursor: pointer; 
        font-size: 18px; 
        padding-right: 5px;
    }
    .nr_btn_close:hover{
        text-shadow: 1px 1px 2px #999;
    }
    .textarea_nr{
        width: 150px; 
        min-width: 150px; 
        max-width: 380px; 
        height: 150px;  
        min-height: 150px; 
        max-height: 400px; 
        border: none; 
        padding: 3px; 
        margin: 0px; 
        background-color: #FFFFCC;
    }

JAVASCRIPT


    

CSS


    .slides {
        font-family: Helvetica, sans-serif;
        display: none;
        vertical-align: middle;
    }

    .dots {
        cursor: pointer;
        height: 13px;
        width: 13px;
        margin-top: 5px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .active, .dots:hover {
        background-color: #717171;
    }
    
    .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
    }

    @keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
    }

HTML


    

JAVASCRIPT


    

CSS


    .nav_panel {
        vertical-align: top;
        padding-top: 40px;
        padding-left: 15px;
    }
    .nav_panel div {
        padding: 6px 0 6px 6px;
        
    }
    #div_nav_panel {
        border-left: 5px solid #ccc;
        position: fixed;
        cursor: pointer;
    }
    #div_nav_panel div:hover {
        color: blue;
    }
    .active {
        font-weight: bold;
        color: #123456;
    }

HTML


    

JAVASCRIPT