Tutoriales de css

« 1/2 2 »

En este articulo veremos como por medio de CSS y JavaScript podemos darle algo mas de interactividad a nuestros formularios cambiando el color del borde sobre el campo (input) que tiene el foco, ósea sobre el campo que se escribe.

Como ven al situar el foco sobre un campo este cambia su color de borde haciendo mas visible el campo sobre el cual vamos a escribir, el escenario ideal para aplicar este efecto son aquellos formularios grandes donde el usuario debe ingresar gran cantidad de datos y puede que entre tantos inputs pierda la vista de donde esta escribiendo, al resaltar el borde con este efecto estamos ayudando a que eso no suceda.

Empecemos armando el formulario...

<form name="form1" method="post" action="">
Nombre <input type="text" name="nombre" onFocus="foco(this);" onBlur="no_foco(this);"
style
="border:1px solid #CCCCCC">
<br>
Apellido <input type="text" name="apellido" onFocus="foco(this);" onBlur="no_foco(this);"
style
="border:1px solid #CCCCCC"><br><br>
<input type="submit" name="Submit" value="Enviar">
</form>

Como vemos es un formulario normal, solo hay que destacar unos parámetros adicionales en las etiquetas inputs...

<input type="text" name="nombre" onFocus="foco(this);" onBlur="no_foco(this);" 
style
="border:1px solid #CCCCCC">

Los primeros dos parámetros adicionales son onFocus y OnBlur estos parámetros son eventos que se producirán cuando el input tenga el foco (onFocus) y cuando lo pierda (onBlur) al producirse esos efectos se llama a la función JavaScript asociada...

onFocus="foco(this);"

En el caso de onFocus llamamos a la función "foco" y le pasamos como parámetro el input, esto lo hacemos utilizando la palabra clave "this". En el caso de onBlur llamamos a la función"no_foco" y también le pasamos "this" como parámetro.

Ahora tenemos que crear la funciones JavaScript que nombramos anteriormente y que son las encargadas de generar el efecto que queremos lograr, para ello pongamos el siguiente código entre las etiquetas <head> </head> de nuestro documento...

<script>
function foco(elemento) {
elemento.style.border = "1px solid #000000";
}

function no_foco(elemento) {
elemento.style.border = "1px solid #CCCCCC";
}
</script>

En este código podemos ver las funciones antes nombradas ("foco" y "no_foco") que lo que hacen es cambiarle el estilo del borde al elemento input pasado como parámetro (this)...

elemento.style.border = "1px solid #000000";

Solo cabe aclarar que podemos modificar los colores a nuestro antojo.
Eso es todo amigos.

Autor: Mauro Rondinelli

Código que nos ayuda a crear un menú con Css similar a los de Javascript.

El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado de reposo (out) con un color y su estado sobre (over) con otro.

<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

#menu div.barraMenu {
text-align: left;
}

#menu div.barraMenu a.botonMenu {
background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #637D4D;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #637D4D;
color: black;
}
</style>

<div id="menu"><div class="barraMenu">
<a class="botonMenu" href="">Opción 1</a>
<a class="botonMenu" href="">Opción 2</a>
<a class="botonMenu" href="">Opción 3</a>
<a class="botonMenu" href="">Opción 4</a>
</div></div>


background-color de a.botonMenu : color de estado reposo (out).
background-color de a.botonMenu:hover : color de estado sobre (over).
background-color de a.botonMenu:active : color de estado seleccionado.

 

Autor: Federico Elgarte

Para definir el estilo de una página de un web desde un archivo externo, debe crearse un archivo de texto, conteniendo las definiciones, y guardarlo con la extensión *.css.

Una vez creado, basta incluir un link a ese archivo .css en cada página que queramos aplicar estos estilos.

De esta forma, una misma hoja de estilos puede aplicarse a cualquier número de paginas web, simplemente incluyendo en todas ellas el link correspondiente.

Como cualquier link, la localización del archivo CSS puede ser absoluta o relativa, dependiendo de su ubicación dentro del propio sitio web, o en otra dirección.

El link siempre debe insertarse dentro de las etiquetas HEAD del encabezamiento de la página Web:

<HEAD>
....

<LINK REL="STYLESHEET" href="estilos.css" TYPE="text/css">
</HEAD>

Donde estilos.css, es el archivo que contiene las definiciones de estilo. En este caso se trata de un link relativo, ya que se supone que estilos.css está ubicado en el mismo sitio y directorio que las páginas a las que afecta.

También son posibles los links absolutos 

<HEAD>
....

<LINK REL="STYLESHEET" href="http://www.pro-gramas.com/esp/estilos.css" TYPE="text/css">
</HEAD>

El atributo REL se usa para definir la relación entre el archivo enlazado y el documento HTML.

REL="StyleSheet" especifÍca el estilo preferido mientras que REL="Alternate StyleSheet" define un estilo alternativo. El estilo preferido se cargará y se aplicará siempre.

Un estilo alterno se indica por REL="Alternate StyleSheet". Los navegadores actuales generalmente carecen de la capacidad de elegir estilos alternos.

El atributo opcional TYPE se usa para especificar el tipo de archivo:

  • "text/css" para una hoja de estilo en cascada normal.

  • "text/javascript" si es un script, etc. Con ello permitimos a los navegadores omitir los tipos de archivo que no soportan.

El link puede tener otro atributo opcional: MEDIA, que especifica el medio o medios al que se aplica la hoja de estilo. Los valores posibles mas importantes son "screen" (pantalla, valor por defecto), y "print", para salida a una impresora.

Dentro de nuestro archivo css NO deben incluirse las llaves <> de las etiquetas HTML. Los comentarios encerrados entre los caracteres /* ... */ si son admisibles.

Autor: Entraenlared

Leo (con retraso) a Andrés Nieto que habla sobre @font-face , una propiedad de CSS que justo ahora WebKit ha empezado a soportar.

Esto permite especificar una fuente personalizada que se descarga desde nuestra web:

@font-face { font-family: "Kimberley"; src: url(http://www.princexml.com/fonts/larabie/ » kimberle.ttf) format("truetype"); } h1 { font-family: "Kimberley", sans-serif; }

La idea no es nueva y ya recuerdo hace tiempo un intento parecido por parte de Internet Explorer 5.5/6 que no llego a buen puerto, además en anteriores versiones de CSS se incorporó y posteriormente eliminó (por problemas) la propiedad @font-face.

También existen asuntos legales ya que muchas fuentes no son libres y su uso en sitios web puede dar dolores de cabeza por cuestiones de copyright…

El hecho de que sea vía CSS sin duda ayudará a que aumente la uniformidad entre plataformas y poder ver diseños más vistosos… aunque es posible que en un par de años veamos entradas de “recomendaciones” tipo: “no abuses de @font-face” o “no pongas fuentes de más de 20KB” al igual que ya pasó con (el abuso de) AJAX.

De momento la propiedad no está soportada por la mayoría de navegadores, incluyendo Mozilla Firefox ni Internet Explorer así que toca esperar (y rezar)…

PD: mi bola de cristal también dice que sacarán entradas de trucos para eliminar de $tu-navegador-favorito el soporte de @font-face para evitar atentados al buen gusto ( ¿alguien dijo Comic Sans powered edition? ).

Autor: sigt.net

Que tal amigos de pro-gramas en esta ocasión realizaremos distintos tipos de menús  horizontal con listas, le daremos el estilo con css. Son bastante simples los ejemplos.

En el primer caso, primero creamos un div y dentro de el colocamos la lista con los ítems que quieras, después creamos nuestra hoja de estilo, en ella le damos los colores, cuando este seleccionada, cuando el Mouse este encima y el que esta activo. Para que el menú este en forma horizontal es necesario que los ítems los flotemos a la izquierda.

El segundo es aun más simple ya que solo colocamos el menú en forma horizontal y le asignamos los colores que queramos.

El tercer menú es casi igual que el segundo solo que en el lado izquierdo de cada item tiene un borde que indica que esta seleccionado.

El HTML del ejemplo:

<!-- inicio menu No 1 -->
<div id="menu">
    <ul id="menuList">
        <li id="active"> <a href="www.pro-gramas.com"> pro-Gramas.cOm </a> </li>
        <li><a href="www.flex2mx.com">flex2mx.com</a></li>
        <li><a href="www.xenciclopedia.com">xenciclopedia.com</a></li>
    </ul>
</div>
<!-- fin menu No 1 -->
<p>&nbsp;</p>
<!-- inicio menu No 2 -->
<ul id="uno">
    <li><a href="www.pro-gramas.com">pro-Gramas.cOm</a></li>
    <li><a href="www.flex2mx.com">flex2mx.com</a></li>
    <li><a href="www.xenciclopedia.com">xenciclopedia.com</a></li>
</ul>
<!-- fin menu No 2 -->
<p>&nbsp;</p>
<!-- inicio menu No 3 -->
<ul id="dos">
    <li class="activ"> <a href="www.pro-gramas.com"> pro-Gramas.cOm </a> </li>
    <li><a href="www.flex2mx.com">flex2mx.com</a></li>
    <li><a href="www.xenciclopedia.com">xenciclopedia.com</a></li>
</ul>
<!-- fin menu No 3 -->

La hoja de estilo para los menús:
/***** inicio del estilo del menu No 1 *****/
#menu {
    margin:0px 0px 0px 0px;
    padding:0px;
    border-bottom:4px solid #000;
}  
#menuList {
    list-style-type: none;
    padding:0px 0px 30px 30px;
    margin: 0px;
}
#menuList li {
    float: left;
    height: 24px;
    margin: 0px 1px 0 1px;
}
#menuList a {
    float: lef;
    display: block;
    text-decoration: none;
    padding: 5px 15px 5px 15px;
}
#menuList a:link,
#menuList a:visited {
    background-color:#CCC;
    color: #333;
}
#menuList a:hover {
    background: #333; color:#FFF;
}
#menuList li#active a:link,
#menuList li#active a:visited {
    background-color: #000;
    color:#FFF;
}
#menuList li#active a:hover {
    background-color:#A90000;
    color: #FFF;
}
/***** fin del estilo del menu No 1 ******/
/***** inicio del estilo del menu No 2 ******/
ul#uno { 
    list-style:none;
    margin:0;
    padding:0;
}
ul#uno li {
    margin:2px;
    padding:0;
    float:left;
}
ul#uno li a {
    display:block;
    width:100px;
    padding:4px 0;
    text-decoration:none;
    text-align:center;
    font-size:11px;
    color:#FFFFFF;
    background-color:#000000;
}
ul#uno li a:hover {
    color:#99CC00;
    background-color:#003366;
}
/***** fin del estilo del menu No 2 ******/
/***** inicio del estilo del menu No 3 ******/
ul#dos { 
    list-style:none;
    margin:0;
    padding:0;
}
ul#dos li {
    margin:2px;
    padding:0;
    float:left;
}
ul#dos li a {
    display:block;
    width:100px;
    padding:4px 0;
    text-decoration:none;
    text-align:center;
    font-size:11px;
    color:#FFFFFF;
    background-color:#000000;
    border-left:10px solid #666666;
}
ul#dos li a:hover {
    color:#99CC00;
    background-color:#003366;
    border-left-color:#99CC00;
}
ul#dos li.activ a {
    color:#99CC00;
    background-color:#003366;
    border-left-color:#99CC00;
}
/***** fin del estilo del menu No 3 ******/

Descarga el ejemplo funcionando.

Autor:

Introducción

Hola amigos de pro-gramas en esta ocasión vamos a ver como crear un efecto de degradado en css, para esto utilizaremos etiquetas div y una imagen con transparencia alfa. El chiste de este efecto es asignarle un color fijo al div y después sobrescribir la imagen con transparencia para que le de el efecto.

Primero creamos un documento nuevo, en el creamos los div que tendrá el efecto, en la propiedad class le asignamos el nombre del estilo y en la propiedad style le asignamos el color de fondo al que queremos degradar. Si el div es mas grande que el del ejemplo entonces ocupas una imagen al tamaño del div.

Y por ultimo creamos nuestra hoja de estilo, en donde colocaremos dos clases con el mismo nombre, se puede decir que una es para IE y la otra para Mozilla. Como IE tiene conflictos para mostrar las imágenes png se tiene que filtrar para que se vea la transparencia.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Efecto de degradado en css</title>
<style type="text/css">
.degradado {
    float:left;
    width: 60px;
    height: 80px;
    background-position:center;
/* para que funcione en IE tenemos que foltrar la imagen */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='degradado.png');
}
/* Mozilla no ocupa de filtrar nada. si el explorador es IE
ignora el estilo y salta al siguiente */
.degradado[class] {
    background-image:url('degradado.png');
}
</style>
</head>

<body>
    <div class="degradado" style="background-color: #ff0000;"></div>
    <div class="degradado" style="background-color: #00ff00;"></div>
    <div class="degradado" style="background-color: #0000ff;"></div>
    <div class="degradado" style="background-color: #FFFF00;"></div>
    <div class="degradado" style="background-color: #000000"></div>
</body>
</html>

 

Este tutorial se baso en Cristalab, descarga el ejemplo abajo.

 

Autor: hugo
Introducción

Existiendo en internet una infinidad de estos ejemplos, me animé a hacer otro más, ?por qué? pues para explicar un poco que ventajas tienen estos menús con respecto a otros que se hacen con tablas para cada item y javascript para hacer los efectos al pasar el mouse.

En estos ejemplos estoy usando listas desordenadas y CSS básico, para lograr el formato y los efectos al pasar el mouse sobre ellos.

Bueno dejémonos de palabrería y vayamos a la acción, los 2 menús tienen la misma estructura lo único que cambia es el código CSS y el identificador, veamos:

Menu Vertical

<div id="menuv">
<ul>
<li><a href="#menuv">Inicio</a></li>
<li><a href="#menuv">Comentarios</a></li>
<li><a href="#menuv">Noticias</a></li>
<li><a href="#menuv">Contacto</a></li>
<li><a href="#menuv">Acerca de nosotros</a></li>
</ul>
</div>




#menuv {
border: 1px solid #ACCFE8;
border-width: 1px 1px 0 1px;
width: 150px;
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#menuv ul, li {
list-style-type: none;
}

#menuv ul {
margin: 0;
padding: 0;
}

#menuv li {
border-bottom: 1px solid #ACCFE8;
}

#menuv a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 6px;
width: 138px;
}

#menuv a:hover {
background: #DBEBF6;
}


Menu Horizontal

<div id="menuh">
<ul>
<li><a href="#menuh" id="primero">Inicio</a></li>
<li><a href="#menuh">Comentarios</a></li>
<li><a href="#menuh">Noticias</a></li>
<li><a href="#menuh">Contacto</a></li>
<li><a href="#menuh">Acerca de nosotros</a></li>
</ul>
</div>




#menuh {
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 20px;
}

#menuh ul, li {
list-style-type: none;
}

#menuh ul {
margin: 0;
padding: 0;
}

#menuh li {
float: left;
}

#menuh a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 10px;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 1px 1px 1px 0;
}


#menuh a#primero {
border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
background: #DBEBF6;
}


Como vieron es sencillísimo podemos jugar con el CSS para cambiar los colores, o talvez añadir algún efecto más, esto se los dejo a su imaginación.

En los ejemplos verán que el código HTML (Estructura) está separado del código CSS (Presentación o formato); esto nos ayuda a modificar rápidamente el código, ahorrar el ancho de banda, y otras cosas que no me acuerdo.

Autor: Braulio
?Para qué utilizar javascript cuando la solución está en CSS?

El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado de reposo (out) con un color y su estado sobre (over) con otro.



<style type="text/css"> 
#menu div.barraMenu, 
#menu div.barraMenu a.botonMenu { 
font-family: sans-serif, Verdana, Arial; 
font-size: 8pt; 
color: white; 
} 

#menu div.barraMenu { 
text-align: left; 
} 

#menu div.barraMenu a.botonMenu { 
background-color: #556975; 
color: white; 
cursor: pointer; 
padding: 4px 6px 2px 5px; 
text-decoration: none; 
} 

#menu div.barraMenu a.botonMenu:hover { 
background-color: #637D4D; 
} 

#menu div.barraMenu a.botonMenu:active { 
background-color: #637D4D; 
color: black; 
} 
</style> 

<div id="menu"><div class="barraMenu"> 
<a class="botonMenu" href="">Opción 1</a> 
<a class="botonMenu" href="">Opción 2</a> 
<a class="botonMenu" href="">Opción 3</a> 
<a class="botonMenu" href="">Opción 4</a> 
</div></div>


background-color de a.botonMenu : color de estado reposo (out).
background-color de a.botonMenu:hover : color de estado sobre (over).
background-color de a.botonMenu:active : color de estado seleccionado.

Autor: Federico Javier
Introducción

Por lo general los formularios son bastante vulgares y lo peor aun muchas veces no encajan con el diseño que tiene nuestro sitio, entoces para mejorar el aspecto de estos por que no usar hojas de estilo (CSS), en este articulo veremos como hacerlo.

El diseño que el navegador le da a los controles es el mismo que el del sistema operativo, el problema surge cuando tenemos una web con un diseño muy cuidado y nos toca agregar formularios los cuales no concuerdan para nada con el diseño del sitio, para ello lo mejor que podemos hacer es utilizar CSS.



<style type="text/css">
<!--
input { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF; 
background-color: #6699CC; border: #000099; border-style: solid; 
border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; 
border-left-width: 1px}
select { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF; 
background-color: #6699CC; border: #000099; border-style: solid; 
border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; 
border-left-width: 1px}
-->
</style>


Este bloque de codigo va entre las etiquetas <HEAD> Y </HEAD> de la pagina que contrendra el formulario, fijense que "input" viene seguido por todo en codigo encerrado entre llaves, bueno, ese es el codigo es el que le va dando el formato a los cuadros de texto y a los botones, todo el codigo que pertenece a "select" le da el formato a la lista.

Autor: El Guru
Introducción

La regla import es una regla que nos permite importar una hoja de estilos CSS externa en el interior de nuestras etiquetas style, de esta manera podemos aplicar los archivos de esa hoja en la página actual.

La sintaxis correcta de la regla import es la siguiente:



<style>  
@import url("estilos.css");  
</style> 


El nombre entre dobles comillas el archivo que hay que cargar, hay una sintaxis abreviada y también aceptada que suprime la clave url, veamos el mismo ejemplo con esta otra sintaxis:



<style>  
@import "estilos.css";  
</style> 


Con cualquiera de los dos casos, el navegador cargaría la hoja de estilos estilos.css y aplicaría su contenido a la página actual.

Opcionalmente, podemos importar un archivo para un tipo de medio determinado, por ejemplo, si queremos una hoja de estilos para la impresora y otra para la página, podemos hacer:



<style>  
@import url("impresora.css") print;  
@import url("normal.css") screen;  
</style>


Esto nos cargará un estilo diferente para la versión imprimida de la página.

Autor: S/A
« 1/2 2 »