Tag: CSS

Cómo generar código CSS online

lipman/ / Programación Web (es)

CSS3 es una tecnología que permite a los diseñadores de sitios web modificar rápidamente varios aspectos del diseño de un sitio, pues se mantienen intactos los archivos fuente HTML y solo se modifica el estilo en un archivo aparte, algo verdaderamente versátil. Al principio había que editar estos archivos manualmente, y como la sintaxis varía con respecto al HTML estándar esta tarea podía llevar mucho tiempo. Los niños de hoy en día lo tienen más fácil porque ahora cuentan con los generadores de CSS.

Hay una gran variedad de herramientas destinadas para este fin: CSS3, Please!, CSS 3.0 Maker, Grad Color, ProCSSor o CSS3Menu son algunos ejemplos. CSS3.me es uno de los más completos y sencillos de usar.

Podemos seleccionar efectos, bordes, colores y tamaños para los elementos que queremos mostrar, y ver como se modifica el resultado a medida que los vamos cambiando uno a uno. Una vez que lleguemos al resultado deseado, podrás generar un archivo CSS listo para copiar y usar en nuestro sitio haciendo clic en el gran botón azul que dice «GET THE CODE».

Enlace | CSS3.me
Vía| Visual Beta

Bordes redondos en CSS

lipman/ / Programación Web (es)

Este post simplemente lo escribo para aquellos que alguna vez piensan en usar bordes redondos. Es mucho más fácil de lo que parece. Además, también incluyo para hacer sombras y voltear o deformar. Lo malo de los siguientes códigos, es que solo funcionan para Firefox.

Para una breve explicación de cada código, pasar el ratón por encima de su código.


Ejemplo

-moz-border-radius: 10px;A mayor número, más redondeado

Ejemplo


-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 35px;
-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 45px;Redondeando cada borde

Ejemplo

-moz-border-radius-topright: 180px 40px;
-moz-border-radius-bottomright: 180px 40px;El primer parámetro de ambas
hace referencia a la parte redonda
más cercana al centro.
El segundo parámetro hace referencia
a la parte redonda del extremo.
Cuantos más píxeles, más redondeo.

Ejemplo

-moz-border-radius: 20px 40px;Redondeando esquinas dos a dos
El primero son los bordes
izquierda-superior y derecha-inferior
y el segundo son los bordes
derecha-superior e izquierda-inferior

Ejemplo

-moz-border-radius: 100px / 50px;Elíptico

Ejemplo

-moz-transform: rotate(-25deg);Rotación por grados. Se pueden
poner valores negativos.

Ejemplo

-moz-transform: skew(40deg,15deg);Desviación y deformación.

Ejemplo

-moz-box-shadow: -20px 20px 10px rgba(
255, 0, 0, 0.5);Sombra
Los dos primeros parámetros, son la
distancia izq-dcha y sup-inf
respectivamente. Se pueden poner
valores negativos.El siguiente
parámetro, es la transparencia.
El siguiente hace referencia al
color (cantidad de rojo,
verde, azul y negro respectivamente)