Recibe los articulos vía:

Ago 04

Esquinas redondeadas solo con CSS y JS

Por Timbis | Sin Comentarios

nifty corners

Estoy con una nuevo diseño para el blog, y como quiero que sea una plataforma totalmente distinta a los blogs convencionales me estoy tomando mi tiempo para probar distintos JavaScripts y etilos CSS.

Como mencione en el titulo estuve buscando la forma más fácil de añadir esquinas redondeadas pero sin utilizar imágenes, solo CSS y JS. El seleccionado fue Nifty Corners Cube de Alessandro Fulciniti, el cual me pareció el más simple a la hora de configurar, aunque sea un poco larga su “instalación”.

Los pasos para utilizarlo y configurarlo son los siguientes:

  1. Descargar Nifty Corners Cube
  2. Subir niftycube.js al servidor (mayormente en la raíz)
  3. Ingresar la llamada al script antes del </head>

    <script type="text/javascript" src="niftycube.js"></script>

    (el <head> está en header.php si usas Wordpress),(en src debe estar la dirección, predeterminadamente lo busca en raíz)

  4. Añadir la configuración antes del </head>

    <script type="text/javascript">
    window.onload=function(){
    Nifty("#nombre de clase","tipo de redondeado");}
    </script>

    (si quieres agregar otra clase: “#clase1,#clase2″)

  5. Crear DIV con la clase elegida

    <div id="nombre de clase">
    Contenido
    </div>

  6. Ingresar y configurar el CSS y modificalo a gusto

    #nombre de clase{
    width: 18em;
    padding: 20px;
    margin:0 auto;
    background:#E6E6E6;
    color:#000}

Los tipos de redondeo son los siguientes:

  • tr: Redondea únicamente la esquina superior derecha.
  • tl: Redondea únicamente la esquina superior izquierda.
  • br: Redondea únicamente la esquina inferior derecha.
  • bl: Redondea únicamente la esquina inferior izquierda.
  • top: Redondea únicamente las esquinas de arriba
  • bottom: Redondea únicamente las esquinas de abajo
  • left: Redondea únicamente las esquinas de la izquierda
  • right: Redondea únicamente las esquinas de la derecha
  • all: Redondea todas las esquinas
  • small: esquinas pequeñas (2px)
  • big: esquinas grandes (10px)

Con estos pasos ya tendrás un cuadro con las esquinas redondeadas como tanto se usan ahora. Si no llega a funcionar fíjate de especificar bien donde se encuentra el script, y su configuración (pregunta aquí si es necesario). Para más información puedes visitar la web de Nifty Corners Cube.

Deja un Comentario