CSS « Xyberneticos

CSS

Simple slide panel - Practica forma para añadir información adicional

1 Comentario Scripts, CSS, Diseño Web

Simple slide panel, es otra practica forma para añadir contenido o información adicional sobre nuestra empresa, nosotros o sobre los perfiles en los cuales participamos en Internet. Posee un efecto simple pero muy atractivo, y lo mejor es que siempre llama la atención de alguna forma. Seguramente habrán visto varios slide de este tipo, donde la idea es hacer clic sobre un vinculo (boton) que accionara nuestro slide, mostrando todo el contenido en el, con un efecto de desplazamiento (arriba / abajo) similar al de una persiana de oficina.

Ver Demo - Descarga ejemplo - Referencia webdesignerwall
Instalación:
Descargamos jquery y realizamos como de costumbre la llamada a nuestra librería de nuestro encabezado (Head)

JavaScript:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>

Añadimos un poco de estilo (style.css)

CSS:

/**********************************************
* Estilos para nuestro panel superior *
***********************************************/
#panel {
background: #754c24 url(images/panel.jpg) repeat;
height: 250px;
display: none;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: url(images/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
/**********************************************
* Estilos para nuestra foto *
***********************************************/
#profileImage { float:left; width:105px; margin: 30px 15px 15px 15px;}
#profileImage img { border: 2px solid #422410; }
div#profileText { float:right; width:350px; color:#fff;}
div#profileText a { color:#F68A1A;}
/**********************************************
* Estilos para nuestros Iconos de perfiles *
***********************************************/
.blog {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/blog.gif) bottom left no-repeat;
List-style:none;
}
..... etc

Contenido

HTML:

<div id="panel">
<div id="profileImage">
<img src="images/nikko.jpg" alt="">
</div>
<div id="profileText">
<h2>About</h2>
Hola mi nombre es Nikko, xyberneticos es mi blog personal. Vivo en argentina, actualmente desarrollador Freelance.
<img src="images/perfiles.gif" alt="">
<ul>
<li class="wordpress">Powered by <a href="http://www.wordpress.org">Wordpress</a></li>
<li class="clickideas">Design by <a href="http://www.clickideas.net">Clickideas</a></li>
<li class="pownce">My <a href="http://www.pownce.com/nikko">Pownce</a></li>
<li class="flickr">My Photos <a href="http://www.flickr.com/photos/xyberneticos/">Flickr</a></li>
<li class="blog">My <a href="http://www.xyberneticos.com/">blog</a></li>
<li class="mail">My <a href="http://www.xyberneticos.com/index.php/contacto/">E-mail</a></li>
</ul>
</div>

CSS Tagcloud - Simulando Tags con CSS

1 Comentario CSS

CSS-Tagcloud Una simple técnica para simular mediante CSS, los tradicionales estilos que solemos ver con nuestros Tags. Algo que será útil, para resaltar ciertos enlaces o categorías por nuestra cuenta, o para aquellos que no necesariamente se encuentren utilizando Wordpress y desean dar algún estilo similar en sus web.

Ver Demo - Descarga de ejemplos - Idea Original web-spirit

Estilo 1

CSS:

#tagcloud{ background: #303030; font-family:Tahoma,Verdana,sans-serif; padding:10px 5px 10px 5px;}
.tag1{ font-size:1em; color:#555555; line-height:1em; }
.tag2{ font-size:1.2em; color:#606060; line-height:1em; }
.tag3{ font-size:1.4em; color:#808080; line-height:1em; }
#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }

Estructura

HTML:

<div id="tagcloud">
<a href="#" class="tag1">Almacenamiento</a>
<a href="#" class="tag3">Capturas Web</a>
<a href="#" class="tag2">Color</a>
<a href="#" class="tag1">CSS</a>
<a href="#" class="tag2">diseno</a>
<a href="#" class="tag3">diseno Web</a>
.....etc etc etc
</div>

Estilo 2

CSS:

#tagcloud2{ background:#000000; font-family:arial,Verdana,sans-serif; width:200px; text-align:center; }
#tagcloud2 .tag1{ font-size:0.6em; color:#505050; }
#tagcloud2 .tag2{ font-size:0.9em; color:#808080; }
#tagcloud2 .tag3{ font-size:1.5em; color:#E0E0E0; }
#tagcloud2 a{ text-decoration:none; }
#tagcloud2 a:hover{ text-decoration:none; background-color:#ffffff; color:#000000; }

Estructura

HTML:

<div id="tagcloud2">
<a href="#" class="tag1">Almacenamiento</a>
<a href="#" class="tag3">Capturas Web</a>
<a href="#" class="tag2">Color</a>
<a href="#" class="tag1">CSS</a>
<a href="#" class="tag2">diseno</a>
<a href="#" class="tag3">diseno Web</a>
.....etc etc etc
</div>

Estilo 3

CSS:

#tagcloud3{ width:180px; font-family:arial,Verdana,sans-serif; padding:10px; background:#303030; }
#tagcloud3 .tag1{ font-size:0.6em; background-color:#705662; color:#fff; }
#tagcloud3 .tag2{ font-size:0.9em; background-color:#AB5471; color:#fff; }
#tagcloud3 .tag3{ font-size:1.2em; background-color:#f20161; color:#fff; }
#tagcloud3 a{ text-decoration:none; margin:2px; padding:2px 2px 2px 5px; display:block; }
#tagcloud3 a:hover{ text-decoration:none; background-color:#fff; color:#000; }

Estructura

HTML:

<div id="tagcloud3">
<a href="#" class="tag1">Almacenamiento</a>
<a href="#" class="tag3">Capturas Web</a>
<a href="#" class="tag2">Color</a>
<a href="#" class="tag1">CSS</a>
<a href="#" class="tag2">diseno</a>
<a href="#" class="tag3">diseno Web</a>
.....etc etc etc
</div>

Definir listas para crear una secuencia de preguntas y respuestas

2 comentarios CSS

En cssnewbie encuentro un tips muy simple para definir listas que podremos utilizar al crear una secuencia de preguntas y respuestas. Aunque no necesariamente deben ser solo utilizadas para este fin, ya que es muy simple adaptarlos a otro tipo de ideas, pero si será muy útil para comenzar con una base bien ordenada que nos lleve a conseguir otro tipo de resultados para un proyecto determinado.

Ver Demo - Descarga ejemplos - Info cssnewbie - Via css-tricks
Como dar estilo

CSS:

#preguntas {
width: 450px;
margin: 15px auto;
}
dl {
margin: 20px;
border-left: 1px solid #999;
padding-left: 10px;
}
dt {
font-size: 2.0em;
margin-bottom: 10px;
}
dt span {
font-style: italic;
font-size: 1.3em;
}
dd {
font-size: 1.4em;
margin-left: 20px;
margin-bottom: 10px;
}

Estructura

HTML:

<div id="preguntas">
<dl>
<dt><span>Pregunta 2:</span>Por que las personas aprietan el control remoto con mas fuerza, cuando se esta quedando sin pilas? </dt>
<dd>Esta es unan pregunta un poco comica, pero admitan que todos terminamos haceindo lo mismo.</dd>
</dl>
</div>

Paginar artículos recientes en Wordpress

1 Comentario CSS, WordPress, Tutoriales

Para aquellos que siempre están pensando en agregar cositas nuevas a sus themes wordpress, acabo de ver este agradable tip para generar paginación con nuestros articulos recientes.

Ver demo en raproject - Mas info weblogtoolscollection

Uso:

Agregamos a nuestro sidebar el siguiente codigo

JavaScript:

<div id="recientespag">
<h3>Articulos Recientes</h3>
<ul>
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('showposts=5'.'&paged='.$paged);
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<div class="navigation">
<div class="alignleft"><?php previous_posts_link('« Otros') ?></div>
<div class="alignright"><?php next_posts_link('Leer Mas »') ?></div>
</div>
<?php $wp_query = null; $wp_query = $temp;?>
</div>

un poco de estilo (Básicamente el estilo que muestro en la foto del post)

CSS:

#recientespag {
width:300px;
background: #1B1B19;
border: 1px solid #2A2A2A;
float:right;
padding:13px 15px 8px 15px;
}
#recientespag h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2.2em;
color: #C7C54F;
}
#recientespag ul {
margin-top:-5px;
}
#recientespag li {
border-bottom:1px solid #2A2A2A;
list-style:none;
padding:7px 0 7px 0px;
}
#recientespag a, #recent a:visited {
color:#999831;
font-size:0.9em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Image Cross Fade Transition

4 comentarios Scripts, CSS, Diseño Web

En jqueryfordesigners podremos ver diversas técnicas para lograr fundidos mientras vamos generando transiciones entre una y otra imagen. Es un efecto sencillo pero que puede dar un estilo agradable a nuestros proyectos. Se puede lograr de una forma muy simple con CSS o mediante JavaScript, con una imagen que al posar el ratón sobre ella genere la transición y luego de haber dejado nuestro ratón vuelva lentamente a la imagen original con un desvanecimiento muy suave.

Ver Demo - Descarga Ejemplo - Mas info jqueryfordesigners - Mas demos 1, 2, 3

Tecnica con jQuery
En nuestro encabezado

JavaScript:

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function () {
// find the div.fade elements and hook the hover event
$('div.fade').hover(function() {
// on hovering over find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to fadeOut)...
if (fade.is(':animated')) {
// ...stop the current animation, and fade it to 1 from current position
fade.stop().fadeTo(250, 1);
} else {
fade.fadeIn(250);
}
}, function () {
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
fade.fadeOut(3000);
}
});
});
//-->
</script>

Un poco de CSS

CSS:

.fade {
position: absolute;
top: 100px
left: 100px
}
.fade div {
position: absolute;
top: 0;
left: 0;
display: none;
}

Nuestra estructura

HTML:

<h2> Tecnica jQuery</h2>
<div class="fade">
<a href="http://xyberneticos.com/"><img src="1.jpg" /></a>
<div>
<a href="http://xyberneticos.com/"><img src="2.jpg" /></a>
</div>
</div>

TECNICA con CSS

CSS:

img.fade {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
img.fade:hover {
opacity: 0;
}

HTML:

<h2> Tecnica CSS</h2>
<span style="position: relative;">
<img src="2.jpg" />
<img
style="position: absolute; left: 0px;"
src="1.jpg" class="fade" />
</span>