Quitar Bisel de un elemto html5 (button o submit) cuando aplicamos css

Si alguna vez te ha pasado que aplicas estilos css3 a un elemnto botton o submit de html5 y nos damos cuenta de que tiene un feo bisel y acaba con todo lo hermoso que puede hacer el CSS , bueno pues es muy sencillo de quitarlo.

Simplemente a tu css aplicas la siguiente línea de código:

border:0;

y listo.

o también puedes arreglar tu propio border, por ejemplo
1 pixel sólido y algun color en rgb

ej.
1px solid rgb(70,133,0);

y se verá aun mas hermoso..

;)

Responsive Design

En los últimos años el desarrollo web ha creado un gran apogeo, crear para la web ya no solo implica hacer páginas informativas y estáticas que ocupen un espacio dentro de la web, sino que ahora implica el uso de diferentes tecnologías, las cuales trabajan en un ambiente cliente-servidor utilizando bases de datos lo cual genera una mayor interactividad con los usuarios.

Otra cosa que cabe mencionar, es que en los últimos años se ha generado una tendencia hacia el uso a de diferentes dispositivos móviles, es decir, anteriormente la mayoría de usuarios navegaban por internet visitando páginas web a través de computadoras de escritorio, pero esto ya no es así, actualmente más de la mitad de los usuarios que navegan en la web lo hacen utilizando un dispositivo portátil.

Esto ha obligado a los desarrolladores a crear nuevas herramientas las cuales faciliten el desarrollo de sitios atractivos y funcionales, pensando siempre en brindar un ambiente agradable y funcional al usuario, logrando hacer que este pueda sentirse atraído hacia un sitio web y al mismo tiempo este pueda recomendarlo a otros usuarios. Lo anterior puede usarse como estrategia para atraer más usuarios hacia ese sitio.

Entre las herramientas creadas para combatir directamente el problema anterior se encuentra una que más ha impactado tanto a  desarrolladores web como a los usuarios y es que a través de sus características ha logrado no solo ahorrar tiempo, sino también capital por parte de las personas que lo utilizan.

Esta herramienta lleva el nombre de Responsive Web Design o Diseño Web Responsivo, una tecnología web que hace que los sitios puedan ser fluidos, esto es, páginas que puedan adaptables al dispositivo a través del cual se esté accediendo. 

La idea de utilizas la tecnología Responsive design fueron discutidos y descritos por la W3C en mediados del años 2008 en su recomendación “Mobile Web Best Practices” bajo el subtítulo "One Web".

Este principio aunque era específica para móviles puntualiza que está hecha bajo el concepto “One Web” y que por lo tanto engloba no solo la experiencia de navegación en dispositivos móviles sino también en dispositivos de mayor resolución de pantalla como dispositivos de sobremesa.

El concepto de "One Web" hace referencia a la idea de construir una Web para todos y que sea accesible desde cualquier tipo de dispositivo.

Anteriormente, con las páginas normales, era muy incómodo navegar en ellas a través de un dispositivo portátil, esto porque que las resoluciones son variantes, lo cual hacía difícil ver contenido completo y la experiencia para el usuario era desagradable.

Responsive Design utiliza estructuras e imágenes fluidas así como usa los media-queries empleando hojas de estilo en cascada (CSS) consiguiendo adaptar los sitios el entorno del usuario.

Implementar Responsive Design es muy sencillo, basta con ordenar los elementos de la página a través de las hojas de estilo en cascada de estas, así cuando se esté accediendo desde cualquier dispositivo, ésta pueda ajustarse a las dimensiones del mismo, logrando que el contenido pueda mostrarse y verse con facilidad.

A continuación se detalla cómo se hace el Responsive Design utilizando los media-queries.

Para ello es necesario crear primero una nueva hoja de estilo .css, en ella se colocarán los estilos que definirás como se ordenaran los objetos en pantalla al detectar cierta resolución de un dispositivo.

La siguiente línea de código muestra cómo se crea un media-querie:

@media only screen and (max-device-width: 480px) and (orientation : landscape) {
/* estilos */

}

Para importarla a nuestra página html basta con colocar el siguiente código:

<link href="css/phone.css" rel="stylesheet" type="text/css"

Con lo anterior no se necesita más que conocimientos medios en CSS para  implementar Responsive Design, de lo demás dependerá de la creatividad del desarrollador.