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…

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…

Google Docs: Activar poder ver el salto de páginas de un documento.

Ya tengo mucho tiempo usando Google Docs, de hecho puedo decir que mis documentos ya no los hago mas en ninguna suite ofimática instalada en mi computadora, la verdad es que Google Docs es un magnifico servicio, no hablare de sus pros y contras lo que les quiero comentar es que POR FIN GoogleDocs tiene la vista de el salto de página algo que yo estaba esperando hace mucho, me desesperaba mucho que al escribir no veía cuando empezaba o terminaba una página. El modo de activarlo es el siguiente lo mostrare en imagenes con un documento mio para que se vea mejor en donde se debe de hacer click.
Como se muestra en la imagen para activar el poder ver el salto de página se debe de elegir "Paginated", al hacer click se vera el salto de pagina automáticamente en el documento abierto en ese momento, si no te gusta ver este salto de pagina basta con dar click de nuevo en "Compact" para eliminar estos saltos, que seguirán ahí pero ya no de forma visible. De nuevo cualquier comen…