Ir al contenido principal

Maquetar: Redondear DIV con CSS

Muchas veces recurrí cuando tenia que presentar aplicaciones para Internet en el Tecnológico a bajar diseños prefabricados para poder hacer mi web "bonita", que si bien son muy buenos y ayudan para salir del apuro rápido te dejan ese saborsito de no saber como hacen cierta cosa.

Actualmente estoy programando web la mayor parte del tiempo y me tope con la inquietud de ya no depender de esas plantillas que hay por la web y decidí hacerme mis propios diseños, aclarando que no soy diseñador web pero me interesa la idea de poder hacer mis propios diseños desde 0.

A continuación muestro un ejemplo de como redondear con CSS los bordes de una etiqueta div que contiene todos mis demas divisiones, por cuestiones de espacio solo colocare el código importante que hace esa función que estaba buscando.

Para redondear el contorno de un div se utiliza la siguiente sintaxis en un archivo css:

#div {
border-radius:30px;
-moz-border-radius:30px 30px 0px 0px;
-webkit-border-radius:30px 30px 0px 0px; border:1px solid #707070;
}



La instrucción webkit.-border-radius sirve para redondear solo las esquinas que quieras redondear con la siguiente forma de hacerlo.
webkit-border-radius: esquina-superior-izquierda esquina-superior-derecha esquina-inferior-derecha esquina-inferior-izquierda;

Es muy fácil su uso, un demo de como se ve acá, la cual contiene un contenedor principal dentro del 3 divisiones cabecera,cuerpo y pie, lo único que hice fue colocarle ese estilo a la cabecera y al pie para dar  esa vista de redondeado de esquinas.

Saludos.

Comentarios

  1. oooralee,,,, me parecio muy bueno esto que pusiste,, ya intentare acer eos en proximos diseños, la neta se ve muy chidoooo,,, sigue publicando cosas de este tipo y si veran tu blog jajaja

    ResponderEliminar
  2. Buenas, creo que para que fuese totalmente correcto debería ser así:

    border-radius:30px 30px 0px 0px;

    Ya que si no, en IE no se ve de la misma forma.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario seguro ayudara a varios usuarios. Saludos

      Eliminar

Publicar un comentario

Entradas populares de este blog

Python: Insertar campos desde Mysql

Antes ya he hecho una entrada sobre Conexion entre Mysql-Python pues bien ahora veremos como insertar campos a una tabla desde consola, básicamente se crea el arhivo de la misma forma que en el ejemplo anterior, aquí anexo el código:

import MySQLdb
code =raw_input("Id:")
name=raw_input("Nombre:")
db=MySQLdb.connect(host='localhost',user='root',passwd='root',db='usuariospy')
cursor=db.cursor()
sql='INSERT INTO usuarios VALUES("%s","%s")'%(code,name)
cursor.execute(sql)

En el anterior código se ve claramente como primero importamos la librería Mysql que nos ayuda con la conexion a la base de datos, seguido de esto pedimos dos datos y los almacenamos en variables para después abrir la conexion con la base e insertar los datos ingresados por el usuario; como pueden ver algo muy sencillo pero útil.
Espero les sirva puede ver como configurar y ejecutar su primer conexion entre python y msql en mi entrada de acá.


Puedes ve…

Como proteger mi blackberry

Blackberry Protect Sin más introducción a mi ya me han asaltado dos veces, y uno ya no está seguro en ningún lado, las veces anteriores como hubiera deseado haberle quitado la tarjeta de memoria a mi celular para que no vieran mis fotos y demás información, en fin. Ahora con los smart phone uno guarda cada vez más información y más importante. Pues la solución para este tipo de problemas es Blackberry Protect, el cual puedes descargar desde el siguiente link. http://us.blackberry.com/apps-software/protect/
Con blackberry protect podrás:
* Hacer respaldos. * Subir el volume de tu blackberry cuando este perdido, aunque lo tengas en silencio. * Bloquearlo. * Saber su ubicación en caso de robo. * Entre otras aplicaciones y todo esto remotamente. * Por cierto se me olvidaba, podrás borrar toda la información remotamente si asi lo deseas. * No es que yo tenga ya delirio de persecución, pero con BB Protect, me siento más seguro en las calles. * Aunque comprarle un seguro a tu smart phone no está de má…

Python: Ejemplo como conectarse a mysql y realizar una consulta.

Ayer platicaba con Luis sobre lenguajes de programación y el me comentaba que estaba desarrollando una aplicación en python para un trabajo de su residencia (practicas) y me pareció interesante ver que era eso, que es python según wikipedia es: Python es un lenguaje de programación de alto nivel cuya filosofía hace hincapié en una sintaxis muy limpia y que favorezca un código legible...(mas).  Pues bien decidí ver como era la sintaxis de python al conectarse con mysql, primero mostrare que se necesita para programar en consola desde Linux Debian Squeeze, después crearemos una base de datos con una tabla de ejemplo que nos ayudara con el objetivo, seguido de la sintaxis del pequeño programa de conexion que realiza la consulta para después terminar con la compilacion y ejecución del mismo.
1.- Desde consola con permisos de super-usuario tecleamos lo siguiente: # apt-get install mysql-pythonLa cadena anterior es para instalarla libreria que nos ayuda a hacer el "puente" entre mysql…