Blog and Web

Inicio Foros del blog Templates Blogger Nosotros Publicidad Contacto
Anuncios Google Imagenes Lesvianas Imagenes Mayas Cajas Carton Imagenes Cocinas Buscar
http://blogandweb.com/css/esquinas-redondeadas-sin-usar-imagenes/
27 Esquinas redondeadas sin usar imagenes
Feb Francisco / 27 de Febrero de 2007 / 7 Comentarios
LEARN CSS Quieres ganar dinero?

All Css Tutorials, All Info On Ask> Results for Construye tu propio negocio online en forma
Learn Css Below! sencilla en pocos días
Css-Tutorials.Ask.com www.negociosporlainternet.com
Aunque resulte díficil de creer, ¡existe una forma de crear esquinas redondeadas en nuestras cajas de
contenido sin usar imagenes! (la forma tradicional de crear esquinas redondeadas con imagenes fue Categorías
detallado aquí) Adsense Blogandweb
La solución se basa en el uso de estilos CSS y javascript, guardando en la medida de lo posible, la Blogger Blogs
compatibilidad con la mayoría de los navegadores y fue desarrollado por Alessandro Fulciniti con el CSS Diseño
nombre Nifty Corners Cube. Dominios Geek
HTML Javascript
La forma de impletación puede parecer un poco complicada, pero una vez entendida las posibilidades
son muy grandes. Muy bien, entremos en materia. México Microblogging
Notas rápidas Photoshop
1. Descarga el script Nifty Corners Cube dando click aquí (o ve a la página oficial: PHP Plantillas Blogger
http://www.html.it/articoli/niftycube/index.html). El .zip contiene varios archivos de ejemplo, pero el script Productos Google Recursos en linea
a usar es “niftycube.js”. SEO Software
Tutoriales Web 2.0
2. Sube el script niftycube.js a tu hospedaje web(Que en el caso de los Blogs que no cuentan con
Widgets para Wordpress
hospedaje propio pueden utilizar hospedajes gratuitos como googlepages o geocities).
Blogger
3. Llama al script desde tu web, esto es, coloca la referencia entre las etiquetas <head></head>:
Comentarios Tags Archivos
<script type="text/javascript" src="niftycube.js"></script>
Efra: quiero poner el link entradas antiguas,
pero mi bl...
4. Configura tu script. ¿Cómo funciona el script? Bien los parámetros que utiliza el script son dos: Neri: Iván, solo comento para felicitarte por el
Una clase. La clase tu la defines, aqui puedes colocar el color del fondo y el borde de la caja de nivel d...
contenido, el tipo de letra, el tamaño de letra, en fin, todas las propiedades que se tienen con el uso de David Torras: Hola, encuentro que estos
CSS. iconos son de gran utili...
Yosmary: Hla Francisco, siempre paso a
Un tipo de redondeo. Los tipos de redondeo están predefinidos en el script y estos son:
leerte y casi no com...
 tr: Redondea unicamente la esquina superior derecha. sergio: hey lo logre.. gracias.....
 tl: Redondea unicamente la esquina superior izquierda.
 br: Redondea unicamente la esquina inferior derecha. Blógstica Blogroll
 bl: Redondea unicamente la esquina inferior izquierda.
Blog and Web
 top: Redondea unicamente las esquinas de arriba
Foros del Blog
 bottom: Redondea unicamente las esquinas de abajo
BTemplates
 left: Redondea unicamente las esquinas de la izquierda
Web a 2.0
 right: Redondea unicamente las esquinas de la derecha
Ser Turista
 all: Redondea todas las esquinas Blog ingeniería
 none: No redondea ninguna Blógstica
5. Comenzar a usarlo. Una vez que tienes la llamada al script y la clase y el tipo de redondeado que
deseas tienes que declararlo entre las etiquetas <head></head> de la siguiente forma: Suscríbete por email
Recibe todas las novedades en tu correo.
Enviar
<script type="text/javascript">
window.onload=function(){ Suscríbete por RSS
Nifty("#miclase","left"); Recibe los últimos posts en tu lector de feeds.
/*Donde #miclase es la clase que escogiste para la caja y left el tipo de
redondeado*/
}
</script>
Una vez definido esto sólo necesitas usar la clase que definiste, por ejemplo:
<div id="miclase">
<h1>Título de la caja redondeada</h1>
<p>Aquí ira cualquier tipo de contenido que desees.</p>
</div>
Usando todos los ejemplos arriba usados, la página para nuestra sencilla caja redondeada queda de la
siguiente forma:
<html>
<head>
<title>Caja redondeada con Javascript y CSS</title>
<style type="text/css">
div#miclase{
width: 18em;
padding: 20px;
margin:0 auto;
background:#E6E6E6;
color:#000}
</style>
<script type="text/javascript" src="niftycube.js"> </script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>
</head>
<body>
<div id="miclase">
<h1>Título de la caja redondeada</h1>
<p>Aquí ira cualquier tipo de contenido que desees.</p>
</div>
</body>
</html>
Con un poco de práctica y creatividad este script podria resultarte de mucha ayuda.
Deja tu opinión. CSS / Javascript
Artículos relacionados Comparte este artículo
Generador de esquinas redondeadas solo con CSS

De los creadores de Spiffy Box sale Spiffy Corner un generador de esquinas redondeadas que solo usa css...
Anuncios Adsense con esquinas redondeadas

Ya no será necesario recurrir a estilos externos para tener bloques de anuncios Adsense con esquinas redondeadas,
algo...
Esquinas redondeadas con jQuery

jQuery Corners es un plugin que te permite crear esquinas redondeadas de una manera muy sencilla, sin imágenes...
Comentarios
asuka / Abril 3, 2007 /

muy muy muy bueno el articulo, muchas gracias, me costo mucho encontrar un tutorail que
explicara esto de manera tan facial como lo hiciste tu, de verdad te felicito y te doy las
gracias por publicar esto ^^, me es mucha ayuda.
Gracias
Francisco / Abril 6, 2007 /

Que bueno que te fue de ayuda! Hay muchos script buenos en la web pero a veces lo diifcil
es conocerlos y saberlos usar.
Saludos!
Juanmanuel Lopez / Junio 11, 2007 /

hola! y no habra uno parecido pero que comienze con la pagina y no al tener la pagina
cargada? creo que con mootools!…
link
yo intente usar ese pero no me funciono! por que no hay un tutorial de como hacer sino entrando a el
codigo de la pagina! que seguramente me perdi algo…
jito / Marzo 6, 2008 /

Exelente!!!! bien explicado!
orlando / Junio 28, 2008 /

No funciona cuando a los div se les coloca colores escritos por su nombre como este
BACKGROUND:red, parece que solo acepta colores de tipo BACKGROUND:#00ffbb.
Compruebenlo y lo veran, yo siempre coloco colores escritos por su nombre, red, black,
white Existe alguna tabla con sus equivalencias… Que hago ??????????????????
Miguel / Julio 16, 2008 /

orlando aqui tienes una tabla con equivalentes
http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
halı yıkama / Julio 19, 2008 /

thanks
Comentarios más recientes »
Responder
¡Gracias por dejar tu opinión! Por favor procura que tus comentarios no estén
fuera tema, no sean promocionales (spam), ilegales u ofensivos, de otro modo,
serán eliminados. Recuerda que puedes usar nuestro foro para otros temas y
preguntas.
Nombre *
Mail *
URL
Enviar comentario
c Suscribirme a este artículo por correo electrónico

d
e
f
g

Blog and Web

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Blog and Web

Transféré par

Droits d'auteur :

Formats disponibles

Inicio Foros del blog Templates Blogger Nosotros Publicidad Contacto

LEARN CSS Quieres ganar dinero?

Deja tu opinión. CSS / Javascript

Artículos relacionados Comparte este artículo

Generador de esquinas redondeadas solo con CSS

Anuncios Adsense con esquinas redondeadas

Esquinas redondeadas con jQuery

asuka / Abril 3, 2007 /

Francisco / Abril 6, 2007 /

Juanmanuel Lopez / Junio 11, 2007 /

jito / Marzo 6, 2008 /

orlando / Junio 28, 2008 /

Miguel / Julio 16, 2008 /

halı yıkama / Julio 19, 2008 /

Comentarios más recientes »

c Suscribirme a este artículo por correo electrónico

Vous aimerez peut-être aussi