Archivo de la categoria: CSS

En el diseño de una página Web es normal encontrar formularios, ya que son los encargados de dar interactividad a nuestro usuarios, añadiendo o editando datos que posteriormente se verán reflejados en la página Web. Una forma buena para atraer a los usuarios a usar nuestros formularios es con un buen diseño, como por ejemplo personalizándolos acorde al aspecto de nuestra página Web. Añadir iconos dentro de los Input mediante CSS es una técnica bastante fácil de realizar y queda bastante profesional en un formulario.

Existen varias formas de centrar elementos en pantalla mediante CSS. Personalmente creo que la forma más óptima para centrar un elemento es el ejemplo que hoy os enseño. El elemento quedará flotando en el centro de la pantalla, de modo que añadiremos una propiedad top del 50% y una propiedad left del 50%. Una vez añadida estas dos propiedades el elemento quedará posicionado en el centro de la pantalla desde su esquina superior izquierda. Tan sólo quedará restar la mitad de su ancho por el margen derecho y la mitad de su alto por el margen superior. En la imagen de ejemplo que os he añadido se ve más claro.

No es una "carga" real de la imagen mediante CSS, lo que añadiremos será una imagen de fondo de modo que parezca un preloader, así dará la sensación de carga al usuario. La carga de imágenes se puede realizar mediante Javascript y resultaría más óptimo, pero una carga de este tipo es más fácil de implementar y los resultados a la vista son parecidos; repito que es más optimo es realizarlo mediante Javascript, pero una página con pocas imágenes queda bastante bien mientras está el proceso de carga.

En el mundo de la programación se crean infinidad de variables que van cambiando según se interactúa con el programa. En CSS tampoco podría ser menos y la versión 3 de CSS permite realizarlo. El problema radica en que todos los exploradores no soportan esta funcionalidad, ni tampoco podría obtener valores desde MYSQL o PHP. Por ello existe un pequeño truco que he utilizado en uno de mis últimos proyectos.

Como utilizar variables PHP en CSS

Añadimos a nuestra cabecera la hoja de estilo

<link rel='stylesheet' type='text/css' href='estilo.css' />

Todos los que llevamos un tiempo en el mundillo de la programación CSS (Cascading Style Sheets) conocemos algunas técnicas útiles para que se vean nuestros diseños en todos los exploradores de la forma más parecida posible. Además sabemos donde encontrar manuales e información acerca de estas técnicas que pueden quitarte de encima más de un problema. Pues bien, para los que no lo conozcan o los iniciados en CSS os añado tres útiles manuales que me han servido bastante a la hora de desarrollar en CSS.

Manual extenso sobre las capas flotantes

Si quieres saber más acerca de las capas flotantes, tienes este manual que contempla todas las posibles situaciones con las capas flotantes y muestra los problemas más habituales y sus soluciones.