Si ayer os mostramos un tema para wordpress sencillo hoy vamos a ver una plantilla CSS/XHtml con un aspecto más profesional. Se trata de RIGHTdirection de chocotemplates que se puede utilizar para desarrollar una página de empresa, portfolio de trabajos o para mostrar un producto en internet.
El diseño de esta plantilla se puede implementar en CMS como WordPress, Joomla, Drupal. Se proporcionan archivos necesarios en PSD, XHtml y CSS para hacerlo.
Dispone de un área para productos destacada desarrollada en Javascript con un diseño en PSD como de vaquero. Por lo demás se trata de un sencillo diseño pero que causará un buen impacto visual a tus visitantes.
RIGHTdirection tiene una licencia especial por la que puedes utilizar esta plantilla de forma gratuita si enlazas con chocotemplates. También tiene otra versión extendida que incluye el archivo PSD del Layout para poder editar cada elemento además de que podrás quitar el enlace al ...
Como podéis ver últimamente se proporcionan multitud de herramientas online a base de proyectos, que te ayudan a diseñar o construir un sitio web. En este caso pongamos el caso de querer construir una hoja de estilos propia, para una intranet, para una página de empresa o sitio en internet.
Para ello cuentas con Instant CSS Code, una fantástica aplicación web que te permitirá hacerlo. Además tendrá el formato valid HTML/xHTML y podrás generarlo según tus preferencias en pocos pasos.
Los pasos a seguir según su desarrollador son los siguientes:
Introduce el nombre de tu proyecto.
Selecciona las opciones.
Introduce etiquetas de Identificadores.
Enviar.
…. Instant CSS Code hace el resto.
Parece fácil y realmente lo es. Personalmente me guardo el enlace. Muchas veces no se trata de saber realizar una tarea sino de automatizar el proceso. Para ello Instant CSS Code es perfecto.
Puedes acceder a la página del proyecto Instant CSS ...
CSS3 Menu es una aplicación online gratuita para crear tu propia barra de menús dinámica completamente en CSS3 y además sin utilizar para ello nada de Javascript.
Puedes elegir desde la página de este proyecto el diseño que quieres, dispone de estilo Android, Mac y Apple, con variaciones en colores y estilos. Luego puedes visualizar el resultado y descargar el código para tu página, así de sencillo. Además está disponible para Windows y para Mac.
Los menús se generan con una estructura de listas en Html y se pueden implementar en horizontal o vertical, con submenús múltiples.
Como decimos puedes previsualizar el menú generado, depués de que elijas tu estilo propio y luego descargar el código, listo para usar en tu página web.
Puedes ver este ejemplo con estilo Mac o acceder directamente a la página de CSS3 Menu para elegir tu propio diseño.
Página web CSS3 ...
La plantilla web que os queremos mostrar hoy, SugarCoated, de chocotemplates, con un diseño web al estilo de los blogs más actuales tiene un diseño final bastante bueno, además se puede orientar para ofrecer servicios web, como porfolios de diseñadores pero también como página de servicios profesionales.
Además la puedes implementar fácilmente a otras plataformas como WordPress, Joomla, Drupal… Se administra un archivo PSD con el que poder trabajar, como cada tema de chocotemplates.
Hemos elegido esta plantilla porque nos ha parecido de un diseño final bastante bueno, aunque puedes acceder a múltiples plantillas, también gratuitas sobre las que podrás trabajar.
SugarCoated además cuenta con múltiples diseños de plantillas diferentes, para distintos tipos o esquemas de página, Home, Blog, página de contacto, portfolio, productos, que puedes adaptar según las necesidades de tu proyecto.
Demo SugarCoated
Descargar SugarCoated
Galería plantillas ...
Toucan Css Reset es un framework en CSS que te permitirá minimizar las diferencias de renderizado de objetos entre los diferentes navegadores web y realizará un reset en código Css para mostrar esta compatibilidad.
Además recompondrá con las nuevas reglas genéricas para tipografía, cabeceras, listas, formularios, tablas… para que sean compatibles con cualquier navegador y tu página se visualice de igual forma en los distintos navegadores.
Toucan Css Reset se trata de un ligero framework, tan solo pesa 2,5 kb comprimido y realmente es fácil de enteder lo que hace. Lo puedes utilizar y aplicar a tus propios trabajos y beneficiarte de la compatibilidad que te proporcionará en todas tus páginas web.
Dispones de una Demo, para probar el código con cada elemento en diferentes navegadores y comprobar tu mismo la compatibilidad que ofrece. Perfecto para el diseño ya creado en tus páginas web.
Demo Toucan Css Reset
Código Toucan Css Reset
Introducción y forma de ...
HTML5Rocks es un recurso online de Google que comparte regularmente varios proyectos en Html5 y en Css3. Además añade tutoriales detallados con video en html5 o utilizando @web-fonts.
A través de una interfaz realizada en Javascript y con propiedades en CSS3 y Html5 te trae código para que lo visualices de inmediato.
También con HTML5Studio con lo que te trae los últimos proyectos como flip de imágenes, video player, carrusel de imágenes, geolocalización y otros proyectos de tipo open source. Además de servirte de inspiración puedes atreverte a implementar estos códigos en tu web.
Puedes acceder a todos estos recursos a través de la página del proyecto de HTML5Rocks desde la que puedes navegar y visualizar el contenido con el código implementado en ellas.
Página proyecto ...
Que significa o mejor dicho Qué es Css para tí, recojemos el Meme que propone Pedro CM con la siguiente frase:
CSS es el alma inspiradora y creativa del lugar, que nos ayuda a mostrar mejor nuestro contenido.
Un sitio sin CSS es como las patatas fritas sin sal, están sosas.
para Fernando Tellado CSS es:
CSS es la poesía que el no-programador SI es capaz de apreciar
algo de mi cosecha propia:
CSS es el color sobre códigos grises
Animaos a seguir el Meme para compartir ideas originales. Paso el Meme a Toni Arco, Freddie, Miguel Ford, Federico Javier Elgarte.
Esperamos vuestros comentarios sobre lo que es CSS para ...
Siguiendo con las nuevas propiedades que nos aporta CSS3 hemos visto en css3.info una nueva funcionalidad que aporta mucho dinamismo a las cajas de texto o textareas, usadas a día de hoy para Formularios, Comentarios en WordPress, páginas de contacto y para páginas de empresa.
Hablamos de la propiedad resize de CSS3, con la que vas a poder redimensionar una caja de texto dinámicamente (por parte del usuario). Esta funcionalidad antes implementada en Javascript dispone de su homólogo en CSS3 y como decimos es muy dinámico, ideal para una plantilla de comentarios en el que el usuario puede agrandar la caja a su antojo.
El codigo en CSS para esta propiedad:
[php]div.resize { width: 100px; height: 100px; border: 1px solid; resize: both; overflow: auto; }[/php]
El Ejemplo de Resize en CSS3:
Gracias a ...
Una de las nuevas funciones disponibles con CSS3 es box-shadow por la que puedes añadir sobre a las cajas de texto o contenedores con CSS. Esta función ya está añadida en Safari 3 y Firefox 3.1 por lo que la puedes incluir en tus diseños sin problema.
Esta propiedad toma 2 valores de largo y un color. box-shadow toma 3 propiedades:
offset horizontal: el valor positivo significará que la sombra se situará a la derecha del elemento y una valor negativo a la izquierda del mismo.
offset vertical: que tomará un valor negativo para colocar la sombra por encima del elemento y un calor positivo por debajo del mimo.
blur radios: este parámetro con valor 0 cojerá la máxima definición para la sobra y conforme subamos en número ofrecerá un aspecto más difuminado.
Ahora vamos a ver un ejemplo de uso: (tras el salto)
[html]
Esto es un ejemplo de box-shadow…
[/html]
Fuente ...
PIE, Progressive Internet Explorer es un archivo .htc que le dará la opción a versiones de Internet Explorer 6-8 de reconocer y visualizar un buen número de propiedades en CSS3.
A la hora de estilar no requiere que realices cambios drásticos en el Codigo CSS. Además no requiere de menciones a vendedores del estilo: border-radius -moz-border-radius, (como es el caso de navegadores Firefox)
Simplemente tendrás que enlazar con un adjunto en el Código CSS de la siguiente manera:
[html]behavior: url(PIE.htc);[/html]
y habilitará parcialmente todas las propiedades CSS3 como:
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
Fuente ...
Mozilla ha puesto hace una horas a disposición de sus usuarios la beta 4 de Firefox. Para Windows tiene mejora en la interfaz aunque para usuarios de Mac no difiere mucho de la versión anterior. Ya puedes probar la nueva beta 4 a través de la página de Mozilla.
Como principales novedades ahora incluye una interfaz para organizar las extensiones mucho más comoda que la actual y de mejor apariencia y organización. Soporta WebM video en alta resolución. Mejora la compatibilidad con Html5 y CSS.
Con la tecnología Sync de Mozilla ahora se te permite sincronizar favoritos, contraseñas entre varios equipos. Como decimos el diseño de su interfaz ha cambiado para Windows y ahora luce con pestañas en la parte superior.
Firefox 4 beta está disponible desde la web de ...
Si eres usuario de Apple agradecerás la velocidad de navegación en Safari. Hace pocos días se actualizó a su versión 5 ofreciendo compatibilidad con extensiones. Esto como de costumbre era demandado de hacía tiempo por sus usuarios, en los que me incluyo y por cierto agradezco esta posibilidad ya que añade mucha funcionalidad al navegador de Apple, así como lo hace Firefox en Windows.
A través de appstorm que hacen recopilaciones de aplicaciones estupendas hemos visto 30 extensiones para Safari que le dan mucha versatilidad a Safari en Apple.
Para instalar extensiones debes activar el menú de Desarrollo en Safari, después desde el menu desarrollo > activar extensiones y ahora te aparecerá una nueva opción en preferencias de Safari por la que sólo tendrás que arrastrar la extensión a la ventana.
ZooTool Lasso
Añade esta extensión para recopilar imágenes, vídeos y documentos en internet de forma rápida a través de un simple botón en ...
Un thumbnail en Html es una imagen que se muestra miniaturizada para que se carga en la página web sea más rápida. También se puede utilizar para mostrar galerías de fotos con lo que no mostramos el tamaño real de la imagen y así podemos mostrar un mayor número en menos dimensiones.
Para crear un thumbnail lo podemos hacer mediante código Css y también con el propio Html.
Codigo Html
Es la forma más sencilla de realizar ya que se puede hacer con una sola línea de código.
[html]
[/html]
Codigo Css
En Css también es sencillo de utilizar
[html]
.thumbnail ...