CSS Menu Maker
Este sitio es simplemente genial!
Permite crear menus customizados y super atractivos en cuestión de minutos y con mucha facilidad.
Primero seleccionamos un template.
Luego lo customizamos.
Y por último, bajamos el código (CSS y HTML).
Para agendar:
http://www.cssmenumaker.com/ CSS Colors by Name
A la hora de escribir código CSS es más fácil recordar algunos colores por el nombre y utilizarlos así directamente:
white, black, red, green, blue, yellow, orange, etc.
Así que, ahí va una buena referencia:
http://www.w3schools.com/css/css_colornames.asp Paleta de colores CSS
Alguna quisieron ver colores de referencia para determinar cuál aplicar en alguno de sus diseños web?
Alguna vez quisieron tener a mano el valor en hexa de ese color para poder aplicarlo rápidamente en un estilo css?
Muy bien, esto es como ir a una pinturería para elegir los colores para tu website:
CSS Color Chart
Si primero van a diseñar un boceto en Photoshop o Illustrator probablemente tomarán los valores de los colores directamente del boceto, pero en algunos casos puede ser útil tener a mano una paleta de colores. CSS border generator
Excelente recurso para web developers:
HTML and CSS Table Border Style Wizard
Nos permite crear estilos para tablas en forma sumamente rápida y sencilla; seleccionamos una opción para cada modificador css y a medida que hacemos los seteos vamos viend el preview y se va generando nuestro código css.
Form Styling
Una alternativa de form styling consiste en "ocultar" los textareas y los textfields manteniendo su funcionalidad.
Es más fácil de lo que parece, se logra seteando el border del mismo color que la imagen de background que le asignemos.
Para una img con white background, por ejemplo:
border:solid 0 #fff;
Ver nota completa en Picment. IE CSS Hack: first-child
En mi laburo diario como web developer suelo ver casos en los que un site no se ve de la misma forma en Internet Explorer y en Firefox. Los que más saben dicen que IE no se adapta a los estándares, y esto nos lleva a buscar diversas formas de lograr que un diseño se visualice de la misma forma tanto en un browser como en el otro, y a tener varios dolores de cabeza también.
Cuando el diseño se visualiza correctamente en Firefox pero no en IE, una de las formas tradicionales de resolver sin reescribir todo el código CSS es aplicar condicionales HTML para detectar si el browser es IE y aplicar estilos para el mismo, sobreescribiendo los estilos que se aplican a los demás browsers.
Custom select
Otro componente HTML cuyo styling puede ser complicado es el SELECT, o lista desplegable.
Pero en el artículo que acabo de hallar tenemos una forma de imitar la funcionalidad del select logrando una customización gráfica con todas las posibilidades de aplicación de CSS.
Pueden obtener el código Javascript y CSS completo en los ejemplos que están al final de la nota.
File Field styling
El elusivo styling de los file fields ha encontrado solución en una excelente publicación de QuirksMode, altamente recomendable para resolver este asunto.Una alternativa en IE es simular el click sobre el file field, lo cual no está visto como una buena práctica, o más bien se ve como un defecto en la seguridad del browser, y en Firefox no es posible hacerlo, digamos que es un browser más seguro.
En IE se puede acceder directamente al evento click de un elemento, disparándolo, por ejemplo:
document.forms[0].myFileField.click();
CSS Shorthand Notation
CSS Shorthand Notation, o notación abreviada de CSS, como su nombre lo indica, es una forma de escribir las mismas definiciones de estilo en CSS pero utilizando menos caracteres para lograrlo.En la forma "extendida" podemos definir los cuatro márgenes de un elemento de la siguiente forma:
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
Como en este caso los cuatro márgenes tienen la misma medida, podemos definirlos muy fácilmente y con mucho menos texto utilizando la notación abreviada:
margin: 0px;
Hablando CSS
Mientras buscaba artículos sobre selectores y pseudo-elementos CSS, llegué a un sitio en donde no sólo encontré excelente material de referencia, sino que además encontré un link a un sitio con un Traductor de CSS a idioma inglés!Realmente me pareció excelente, y funciona de maravilla.
Luego de leer todo el artículo me sentí lo suficientemente confiado como para poder hacer mis propias traducciones de CSS a "lenguaje humano", pero igualmente es muy interesante ver como esta aplicación web traduce declaraciones algo complejas como:
div#main > h3.product + p:first-line
Float Drops
Acabo de verme en la situación de estar desarrollando un website el cual voy testeando en Mozilla Firefox, y al probarlo en IE obtuve un caso de Float Drop. Luego de putear un rato me tranquilicé cual monje budista y recurrí a la sabiduría: Google.Así encontré un excelente artículo sobre Float Drops, gracias al cual pude comprender mejor por qué no funcionaba en IE y encontré una solución muy práctica.
Un Float Drop es lo que ocurre cuando tenemos un div flotado al lado de otro, cuyo contenido comienza debajo del primer div.
El problema suele ocurrir a causa de que el contenedor de ambos divs no es lo suficientemente ancho para contenerlos.
Cuando no hemos declarado ningún div que contenga a los otros dos, igual debemos pensar que en toda página siempre a un "contenedor universal", el body.
Bien, mi solución para evitar el Float Drop en IE consistió en agregar un mayor Width al tag body en mi CSS.
Simple magic.
WebDev Methodology
Hace un rato estuve explicándole algo de HTML y CSS a mi amigo Pablo Grava, quien este año comenzó con la carrera de Diseño Gráfico y tiene espectativas de laburar en este mundo que nosotros llamamos Web.
Comenzando juntos el armado de una simple página HTML desde cero y creando luego los estilos para dar vida a la visualización pude ver más claramente los beneficios de esta metodología de desarrollo, y sobre todo, pude ver más claramente en qué consiste la metodología!
WebDev Metodology 0. Idea 1. Diagrama 2. HTML: Estructura 3. Contenido: Volcado en la página 4. CSS: Definición de estilos 5. Browser testing
Cambio automático del logo de A-blog
Hace unos días que tenía ganas de hacer algo para cambiar automáticamente el logo del Blog, y finalmente esta noche encontré el momento apropiado. Continuando con la programación orientada a objetos, generé la Clase FileSelector en PHP. En "leer más" continúo con el hacking a b2 y describo los métodos de la clase. FileSelector se ocupa de leer el directorio en donde tengo varias versiones del logo de A-blog y devolver el nombre de uno de esos archivos según el criterio indicado. Me pareció piola tener métodos para seleccionar el logo del site de la siguiente forma: - Por día de la semana
- Por día del mes
- Por mes
- En forma aleatoria
CSS Zen Garden
Hace unas horas me decidí a realizar una versión de CSS Zen Gargden, el conocido site que muestra al mundo la belleza del diseño por CSS.
Creo que es una buena práctica para aprender un poco más sobre CSS, liberar tensiones y si queda bien para animarse para buscar que lo publiquen en el site, en donde exhiben una excelente colección de diseños CSS.
Search
A-blog
Este es el blog de Alberto Miranda, Analista de Sistemas y Web Developer. Aquí encontrarán enlaces a noticias y sitios que me resultan interesantes, y por qué no alguna que otra publicación sobre programación y tecnología.
Se trata de mi repositorio personal de contenidos, con publicaciones útiles a las que vuelvo cuando es necesario y otras que quiero compartir con amigos y colegas.
Qué es un blog?
Amigos bloggers:
Si el puchi se muere
Minid
Categories
- All
- Anuncios (17)
- Arte (8)
- Ciencia (11)
- Databases (4)
- Design (7)
- Inspiration (0)
- Eventos (2)
- Fotos (1)
- Frases (1)
- Fun (34)
- Hardware (11)
- Internet (69)
- Blogs (2)
- p2p (0)
- Spam (3)
- Videos (12)
- Web Development (46)
- .NET (4)
- Actionscript (2)
- AJAX (1)
- b2 hacking (8)
- CSS (14)*
- Javascript (8)
- PHP (4)
- Juegos (1)
- Lenguajes (4)
- UML (1)
- Movies (4)
- Música (6)
- Networking (16)
- News (6)
- Personalidades (1)
- Programming (9)
- Software (23)
- Browsers (3)
- Firefox (11)
- Internet Explorer (5)
- Desktop (0)
- Development (1)
- Excel (1)
- FileManagers (3)
- Servant Salamander (0)
- Total Commander (1)
- Mail Clients (0)
- The Bat! (1)
- Office (1)
- Office Vista (1)
- OpenOffice (1)
- OS (12)
- p2p (1)
- Browsers (3)
- Tecnología (23)
- TV Series (3)
- Viajes (10)
- Vida Informática (12)
XML Feeds
What is RSS?
powered by
