Xyberneticos » CSS http://xyberneticos.com Desarrollo Web, Diseño, Recursos, Wordpress, Themes Fri, 04 Nov 2011 14:10:38 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Elastic Thumbnail Menu http://xyberneticos.com/index.php/2011/01/20/elastic-thumbnail-menu/ http://xyberneticos.com/index.php/2011/01/20/elastic-thumbnail-menu/#comments Thu, 20 Jan 2011 03:45:27 +0000 Nikko http://xyberneticos.com/?p=3112

Sproing! – Make An Elastic Thumbnail Menu; Si buscabas métodos alternativos para construir los menús de las web que desarrollas, el menú de miniaturas elásticas pueda ayudarte un poco a salir de lo habitual. ¿Qué hace exactamente?, Aumenta los elementos del menú cuando se posa sobre él. Y donde los elementos del menú se amplían hacia arriba.

Ver Demo

PLAIN TEXT
HTML:
<div id="menuwrapper">
<div id="menu"><a class="menuitem" href="#"><img src="image.jpg" alt="" /></a><!--Template for each menu item--></div>
</div>

PLAIN TEXT
CSS:
/* The container which the menu is "locked" to the bottom of */
#menuwrapper{ position:relative; height:210px; }

/* Fixes the whole menu to the bottom of the parent div */
#menu{position:absolute; bottom:0;}

/* Each individual menu item fixed to the bottom with display:inline-block to create elasticity */
.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

PLAIN TEXT
JavaScript:
$(document).ready(function(){
$('.menuitem img').animate({width: 100}, 0); //Set all menu items to smaller size

$('.menuitem').mouseover(function(){ //When mouse over menu item

gridimage = $(this).find('img'); //Define target as a variable
gridimage.stop().animate({width: 200}, 150); //Animate image expanding to original size

}).mouseout(function(){ //When mouse no longer over menu item

gridimage.stop().animate({width: 100}, 150); //Animate image back to smaller size

});
});

Internet Explorer no realizara un buen trabajo a menos que agreguen la siguiente línea CSS:

PLAIN TEXT
CSS:
img {ms-interpolación de modo: bicúbico;}

Mas Info Sproing! – Make An Elastic Thumbnail Menu

]]> http://xyberneticos.com/index.php/2011/01/20/elastic-thumbnail-menu/feed/ 1 Social Media Sharing Menu (CSS & jQuery) http://xyberneticos.com/index.php/2011/01/13/social-media-sharing-menu-css-jquery/ http://xyberneticos.com/index.php/2011/01/13/social-media-sharing-menu-css-jquery/#comments Thu, 13 Jan 2011 19:14:03 +0000 Nikko http://xyberneticos.com/?p=3081

Create a Social Media Sharing Menu, es un tutorial donde se les mostrara como crear un menú de medios sociales que comparta tus noticias. Usa exclusivamente CSS y jQuery . Como CSS básico utiliza la propiedad CSS background-position y un poco de jQuery para hacer las animaciones en los enlaces. Útil y bastante simple de adaptar a nuestros post wordpress (single.php).

Resultado Final: Demo - Descraga Archivos  social-share-css-jquery (ZIP, 0.017 MB)

Info Create a Social Media Sharing Menu Using CSS and jQuery by sixrevisions

PLAIN TEXT
HTML:
<div id="social_nav_horizontal">
<h3>Bookmark or Share This Post</h3>
<ul>
    <li><a class="delicious" title="Bookmark on del.icio.us" href="http://del.icio.us/post?url=Your website title">Delicious</a></li>
    <li><a class="facebook" title="Share this on Facebook" href="http://www.facebook.com/sharer.php?u=http://yourwebsite.com">Facebook</a></li>
    <li><a class="stumbleupon" title="Stumble This Page" href="http://www.stumbleupon.com/submit? url=http://www.yoursite.com/"> Stumble</a></li>
    <li><a class="twitter" title="Tweet This Page" href="http://twitter.com/home?status=Your Website Title- http://yourwebsite.com@TwitterUserName">Twitter</a></li>
</ul>
</div>

PLAIN TEXT
CSS:
#social_nav_horizontal {
margin-left: 100px;
font-family: Futura, Verdana, Sans-Serif;
font-size: 18px;
color: #8e9090;
}
#social_nav_horizontal h3 {
display:inline;
padding: 0px 10px;
border-bottom:dashed 1px #ccc;
}
#social_nav_horizontal ul {
margin: 0;
padding: 0;
margin-top:20px;
}
#social_nav_horizontal ul li {
float: left;
padding: 5px 0 0 5px;
margin-left: 5px;
list-style-type: none;
}
#social_nav_horizontal ul li a {
padding: 4px 0 0 28px;
height: 32px;
color: #999;
text-decoration: none;
line-height: 1.45em;
}
.delicious {
background:url(images/delicious.png) no-repeat;
background-position:0px -1px;
}
.facebook {
background:url(images/facebook.png) no-repeat;
background-position:0px -1px;
}
.stumbleupon {
background:url(images/stumbleupon.png) no-repeat;
background-position:0px -1px;
}
.twitter {
background:url(images/twitter.png) no-repeat;
background-position:0px -1px;
}

PLAIN TEXT
JavaScript:
$(document).ready(function() {
$('#social_nav_vertical li a').hover(
// on mouse over move to left
function() {
$(this).stop().animate({ marginLeft: '20px' },300);
},
// on mouse out, move back to original position
function() {
$(this).stop().animate({ marginLeft: '0px' }, 300);
});
});

]]> http://xyberneticos.com/index.php/2011/01/13/social-media-sharing-menu-css-jquery/feed/ 0 CSS 3 Mega Dropdown by snoupix.com http://xyberneticos.com/index.php/2011/01/07/css-3-mega-dropdown-by-snoupix-com/ http://xyberneticos.com/index.php/2011/01/07/css-3-mega-dropdown-by-snoupix-com/#comments Sat, 08 Jan 2011 01:25:14 +0000 Nikko http://xyberneticos.com/?p=2568
CSS 3 Mega Dropdown Menu Tutorial, es un bonito tutorial para aquellos que venían pensando mejorar el menú de sus clientes. El objetivo de este tutorial, es poder crear un menú atractivo y más funcional, usando nuevos atributos de CSS3 para reducir aún más el uso de las imágenes.

Demo - Descarga - Info y Tutorial  CSS 3 Mega Dropdown


1 - HTML

PLAIN TEXT
HTML:
<div id="nav_wrapper">
    <span id="menu_start"><a href="#" class="home">Home</a></span>
    <ul id="topnav">           
        <li class="liSub">
            <a href="#">
                <span class="dd_wrapper">
                    Tutorials
                    <span class="dd_action"><img src="arrow.png" /></span>
                </span>
            </a>
            <div style="opacity: 0; display: none; width: 300px;" class="sub">
                <ul>                   
                    <li><a href="#">Painting</a></li>
                    <li><a href="#">Photo Effects</a></li>
                    <li><a href="#">Text Effects</a></li>
                    <li><a href="#">Drawing</a></li>
                    <li><a href="#">Illustration</a></li>                       
                </ul>
                <ul>                   
                    <li><a href="#">Interface</a></li>
                    <li><a href="#">Designing</a></li>
                    <li><a href="#">HTML & CSS</a></li>
                    <li><a href="#">JavaScript & AJAX</a></li>
                    <li><a href="#">PHP</a></li>                       
                </ul>                               
            </div>
        </li>
        <li class="liSub">
            <a href="#">
                <span class="dd_wrapper">
                    Resources
                    <span class="dd_action"><img src="arrow.png" /></span>
                </span>
            </a>
            <div style="opacity: 0; display: none; width: 450px;" class="sub">
                <div class="row">
                    <ul style="width: 225px;">
                        <li><h2><a href="#">Deal of the Week</a></h2></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                    </ul>
                    <ul style="width: 225px;">
                        <li><h2><a href="#">Clearance Items</a></h2></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                    </ul>
                </div>
                <div style="margin: 0pt;" class="row">
                    <ul>
                        <li><h2><a href="#">Deal of the Week</a></h2></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                    </ul>
                    <ul>
                        <li><h2><a href="#">Clearance Items</a></h2></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                    </ul>
                    <ul>
                        <li><h2><a href="#">Open Box Items</a></h2></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li>
            <a href="#">
                <span class="single_wrapper">WordPress</span>
            </a>
        </li>
        <li>
            <a href="#">           
                <span class="single_wrapper">Community news</span>
            </a>
        </li>
        <li>
            <a href="#">           
                <span class="single_wrapper">About</span>
            </a>
        </li>
        <li>
            <a href="#">           
                <span class="single_wrapper">Archives</span>
            </a>
        </li>
        <li id="last-li">           
            <a href="#">           
                <span class="single_wrapper">Contact</span>
            </a>
        </li>
    </ul>
    <span id="menu_end"><img src="last_li.png" width="5" height="46" /></span>
</div>

]]> http://xyberneticos.com/index.php/2011/01/07/css-3-mega-dropdown-by-snoupix-com/feed/ 5 Tablas con CSS3 http://xyberneticos.com/index.php/2010/09/10/tablas-con-css3/ http://xyberneticos.com/index.php/2010/09/10/tablas-con-css3/#comments Fri, 10 Sep 2010 13:07:02 +0000 Nikko http://xyberneticos.com/?p=2535 css3tablas
Pimp Your Tables with CSS3, algunos ejemplos de cómo utilizar algunas propiedades CSS3 para embellecer las tablas. Nuevos selectores que podemos usar en partes específicas de la tabla y las filas a fin de crear un estilo único, sin añadir otras clases.

Se webkit y moz, gradientes para crear un mejor aspecto sin utilizar imágenes, además se muestra como insertar contenido en elementos con una clase específica.

Ver Demo - Descargar Demo
Ampliar Informacion  Pimp Your Tables with CSS3

PLAIN TEXT
CSS:
/* Table 1 Style */
table.table1{
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4em;
    font-style: normal;
    border-collapse:separate;
}
.table1 thead th{
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    border:1px solid #93CE37;
    border-bottom:3px solid #9ED929;
    background-color:#9DD929;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(123,192,67)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(158,217,41))
        );
    background: -moz-linear-gradient(
        center bottom,
        rgb(123,192,67) 2%,
        rgb(139,198,66) 51%,
        rgb(158,217,41) 87%
        );
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius:5px 5px 0px 0px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.table1 thead th:empty{
    background:transparent;
    border:none;
}
.table1 tbody th{
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    background-color:#9DD929;
    border:1px solid #93CE37;
    border-right:3px solid #9ED929;
    padding:0px 10px;
    background:-webkit-gradient(
        linear,
        left bottom,
        right top,
        color-stop(0.02, rgb(158,217,41)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(123,192,67))
        );
    background: -moz-linear-gradient(
        left bottom,
        rgb(158,217,41) 2%,
        rgb(139,198,66) 51%,
        rgb(123,192,67) 87%
        );
    -moz-border-radius:5px 0px 0px 5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
.table1 tfoot td{
    color: #9CD009;
    font-size:32px;
    text-align:center;
    padding:10px 0px;
    text-shadow:1px 1px 1px #444;
}
.table1 tfoot th{
    color:#666;
}
.table1 tbody td{
    padding:10px;
    text-align:center;
    background-color:#DEF3CA;
    border: 2px solid #E7EFE0;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}
.table1 tbody span.check::before{
    content : url(../images/check0.png)
}
/* Table 2 Style */
table.table2{
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: -1px;
    line-height: 1.2em;
    border-collapse:collapse;
    text-align:center;
}
.table2 thead th, .table2 tfoot td{
    padding:20px 10px 40px 10px;
    color:#fff;
    font-size: 26px;
    background-color:#222;
    font-weight:normal;
    border-right:1px dotted #666;
    border-top:3px solid #666;
    -moz-box-shadow:0px -1px 4px #000;
    -webkit-box-shadow:0px -1px 4px #000;
    box-shadow:0px -1px 4px #000;
    text-shadow:1px 1px 1px #000;
}
.table2 tfoot th{
    padding:10px;
    font-size:18px;
    text-transform:uppercase;
    color:#888;
}
.table2 tfoot td{
    font-size:36px;
    color:#EF870E;
    border-top:none;
    border-bottom:3px solid #666;
    -moz-box-shadow:0px 1px 4px #000;
    -webkit-box-shadow:0px 1px 4px #000;
    box-shadow:0px 1px 4px #000;
}
.table2 thead th:empty{
    background:transparent;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}
.table2 thead :nth-last-child(1){
    border-right:none;
}
.table2 thead :first-child,
.table2 tbody :nth-last-child(1){
    border:none;
}
.table2 tbody th{
    text-align:right;
    padding:10px;
    color:#333;
    text-shadow:1px 1px 1px #ccc;
    background-color:#f9f9f9;
}
.table2 tbody td{
    padding:10px;
    background-color:#f0f0f0;
    border-right:1px dotted #999;
    text-shadow:-1px 1px 1px #fff;
    text-transform:uppercase;
    color:#333;
}
.table2 tbody span.check::before{
    content : url(../images/check1.png)
}

/* Table 3 Style */
table.table3{
    font-family:Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.7em;
    text-align:center;
    border-collapse:collapse;
}
.table3 thead th{
    padding:6px 10px;
    text-transform:uppercase;
    color:#444;
    font-weight:bold;
    text-shadow:1px 1px 1px #fff;
    border-bottom:5px solid #444;
}
.table3 thead th:empty{
    background:transparent;
    border:none;
}
.table3 thead :nth-child(2),
.table3 tfoot :nth-child(2){
    background-color: #7FD2FF;
}
.table3 tfoot :nth-child(2){
    -moz-border-radius:0px 0px 0px 5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
}
.table3 thead :nth-child(2){
    -moz-border-radius:5px 0px 0px 0px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
}
.table3 thead :nth-child(3),
.table3 tfoot :nth-child(3){
    background-color: #45A8DF;
}
.table3 thead :nth-child(4),
.table3 tfoot :nth-child(4){
    background-color: #2388BF;
}
.table3 thead :nth-child(5),
.table3 tfoot :nth-child(5){
    background-color: #096A9F;
}
.table3 thead :nth-child(5){
    -moz-border-radius:0px 5px 0px 0px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
}
.table3 tfoot :nth-child(5){
    -moz-border-radius:0px 0px 5px 0px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
}
.table3 tfoot td{
    font-size:38px;
    font-weight:bold;
    padding:15px 0px;
    text-shadow:1px 1px 1px #fff;
}
.table3 tbody td{
    padding:10px;
}
.table3 tbody tr:nth-child(4) td{
    font-size:26px;
    font-weight:bold;
}
.table3 tbody td:nth-child(even){
    background-color:#444;
    color:#444;
    border-bottom:1px solid #444;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.39, rgb(189,189,189)),
        color-stop(0.7, rgb(224,224,224))
        );
    background:-moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 39%,
        rgb(224,224,224) 70%
        );
    text-shadow:1px 1px 1px #fff;
}
.table3 tbody td:nth-child(odd){
    background-color:#555;
    color:#f0f0f0;
    border-bottom:1px solid #444;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.39, rgb(85,85,85)),
        color-stop(0.7, rgb(105,105,105))
        );
    background:-moz-linear-gradient(
        center bottom,
        rgb(85,85,85) 39%,
        rgb(105,105,105) 70%
        );
    text-shadow:1px 1px 1px #000;
}
.table3 tbody td:nth-last-child(1){
    border-right:1px solid #222;
}
.table3 tbody th{
    color:#696969;
    text-align:right;
    padding:0px 10px;
    border-right:1px solid #aaa;
}
.table3 tbody span.check::before{
    content : url(../images/check2.png)
}

]]> http://xyberneticos.com/index.php/2010/09/10/tablas-con-css3/feed/ 2 Fancy menú CSS3 http://xyberneticos.com/index.php/2010/06/05/fancy-menu-css3/ http://xyberneticos.com/index.php/2010/06/05/fancy-menu-css3/#comments Sat, 05 Jun 2010 13:49:52 +0000 Nikko http://xyberneticos.com/?p=2491 fancy

Fancy menú se hizo popular en devthought , basado en la biblioteca Mootools. Mas tarde conocimos una versión utilizando jQuery, llamado lavalamp, el cual tambien se hizo popular por Ganesh . Esta vez, veremos cómo obtener el mismo efecto utilizando las nuevas características de CSS3.

Nota: Se ve mejor en un navegador WebKit (Safari y Chrome). Este ejemplo es sólo para demostrar las capacidades de las características nuevas CSS3

Enlace Fancy menú - Ver Demo - Descarga

]]> http://xyberneticos.com/index.php/2010/06/05/fancy-menu-css3/feed/ 8 CSS Hover Effect http://xyberneticos.com/index.php/2009/07/23/css-hover-effect/ http://xyberneticos.com/index.php/2009/07/23/css-hover-effect/#comments Thu, 23 Jul 2009 04:25:13 +0000 Nikko http://xyberneticos.com/index.php/2009/07/23/css-hover-effect/ csshover.jpg

CSS Hover Effect, una muy atractiva practica para añadir a las fotos de tus productos información adicional que se mostrara en forma mucho más elegante (descripción del producto cuando el ratón pasa sobre él). La primera pieza contiene un proyecto en miniatura que se muestra por defecto (en estado normal). La segunda contiene el texto y descripción de esta pieza y la descripción del proyecto debe sustituir a la miniatura cuando está en estado hover.

Ver Demo - Descarga - Mas Info CSS Hover Effect

]]> http://xyberneticos.com/index.php/2009/07/23/css-hover-effect/feed/ 3 8 Javascript para solucionar los problemas más comunes de CSS http://xyberneticos.com/index.php/2009/04/27/8-javascript-para-solucionar-los-problemas-mas-comunes-de-css/ http://xyberneticos.com/index.php/2009/04/27/8-javascript-para-solucionar-los-problemas-mas-comunes-de-css/#comments Mon, 27 Apr 2009 03:33:01 +0000 Nikko http://xyberneticos.com/index.php/2009/04/27/8-javascript-para-solucionar-los-problemas-mas-comunes-de-css/ 8csssoluciones.jpg

El CSS es definitivamente una gran técnica para los diseñadores y desarrolladores web. Sin embargo, entre los problemas del navegador y la falta de apoyo CSS3 en los navegadores modernos, suelen transformarse en un verdadero problema. En catswhocode han recopilado 8 Javascript que les permitirá solucionar los problemas más comunes. Por ejemplos Transparencias, incluir clases diferentes para los diferentes navegadores, solucionar los problemas de alturas de las columnas, Solucionar la vista de las esquinas redondeadas, Fixing IE overflow problema, Los alineamientos verticales, las precargas de imágenes, Matar IE6 (colgará automáticamente una vez que la página se carga)

Enlace  8 Javascript solutions to common CSS problems

]]> http://xyberneticos.com/index.php/2009/04/27/8-javascript-para-solucionar-los-problemas-mas-comunes-de-css/feed/ 4 CSS Chart Generator – Graficos de Barras en segundos http://xyberneticos.com/index.php/2009/02/28/css-chart-generator-graficos-de-barras-en-segundos/ http://xyberneticos.com/index.php/2009/02/28/css-chart-generator-graficos-de-barras-en-segundos/#comments Sat, 28 Feb 2009 21:05:35 +0000 Nikko http://xyberneticos.com/index.php/2009/02/28/css-chart-generator-graficos-de-barras-en-segundos/ csschat.jpg

CSS Chart Generator, un práctico generador de gráficos de Barras en CSS. Con esta interfaz es realmente simple crear diseños gráficos en cuestión de segundos. Simplemente debemos configurar algunos parámetros como el color de las barras, tamaño, los títulos de los ejes X e Y, color de fuente, fondos y muchas características más. Una vez que hemos realizado la configuración deseada, es fácil de implementarlo a nuestro blog; Solo deberemos copiar el codigo que se nos genera y pegarlo en las secciones que deseamos mostrar nuestra grafica. Muy facil.

uso:

PLAIN TEXT
PHP:
<?php
$chartData = file_get_contents("     ///AQUI PEGAMOS EL COGIGO Q SE NOS GENERA /////     ");
echo $chartData;
?>

Ejemplo:

PLAIN TEXT
PHP:
<?php
$chartData = file_get_contents("http://www.artviper.net/css-chart-generator/chartdraw.php?&w=350&h=250&fontsize=10&ytitle=Welcome&xtitle=CSS Chart Generator&vals=100,120,170,210,222&colors=900,e60,333,3a8ef6,cf0&bw=35&barspc=15&showvals=1&bgchart=555&fontcol=000&spenable=1&spdist=25&spcol=222");
echo $chartData;
?>

]]> http://xyberneticos.com/index.php/2009/02/28/css-chart-generator-graficos-de-barras-en-segundos/feed/ 1 CSS 3 – Ocultar mensajes dentro de un texto http://xyberneticos.com/index.php/2009/02/16/css-3-ocultar-mensajes-dentro-de-un-texto/ http://xyberneticos.com/index.php/2009/02/16/css-3-ocultar-mensajes-dentro-de-un-texto/#comments Mon, 16 Feb 2009 22:28:53 +0000 Nikko http://xyberneticos.com/index.php/2009/02/16/css-3-ocultar-mensajes-dentro-de-un-texto/ CSS 3 posee propiedades muy interesantes, y algunas con las cuales podremos divertirnos un poquito. Hoy acabo de leer aquí, un pequeño truquito para ocultar mensajes dentro de un texto, utilizando la declaración ::selection. La idea es muy simple, al seleccionar todo el texto de un párrafo, algunas letras quedaran fuera de toda esa selección, formando en conjunto nuevos mensajes. Claro que podrán verlo, siempre y cuando no utilicen Internet Explorer.

Ver Demo - Mas Info Hidden Messages

PLAIN TEXT
CSS:
p::selection { background:#000;color:#000; }
p::-moz-selection { background:#000;color:#000; }
p span::selection { background:#fff;color:#000; }
p span::-moz-selection { background:#fff;color:#000; }

PLAIN TEXT
HTML:
<p> 
Estas son las palabras que quiero ocultar.
<span> 
Y estas son las palabras que quiero mostrar</span></p>

]]> http://xyberneticos.com/index.php/2009/02/16/css-3-ocultar-mensajes-dentro-de-un-texto/feed/ 2 Crear un Menu de navegación al estilo de Vimeo.com http://xyberneticos.com/index.php/2009/01/29/crear-un-menu-de-navegacion-al-estilo-de-vimeocom/ http://xyberneticos.com/index.php/2009/01/29/crear-un-menu-de-navegacion-al-estilo-de-vimeocom/#comments Thu, 29 Jan 2009 21:37:15 +0000 Nikko http://xyberneticos.com/index.php/2009/01/29/crear-un-menu-de-navegacion-al-estilo-de-vimeocom/ vimeo.jpg

Si siempre te agrado el menú de navegación utilizado en Vimeo.com, hoy aprenderás a crearlos para tus proyectos personales. Posee un estilo muy llamativo y le efecto justo y necesario. Lo mas atractivo del menú, es el cuadro que despliega al situarnos en el cuadro de búsqueda, brindándonos más opciones que podremos elegir antes de realizarla las búsquedas por todo nuestro sitio.

Ver Demo - Descarga de Codigo - Articulo Original  jankoatwarpspeed

]]> http://xyberneticos.com/index.php/2009/01/29/crear-un-menu-de-navegacion-al-estilo-de-vimeocom/feed/ 1