CSS3 | RFS Digital - Tecnologia, Aplicaciones web gratuitas e Internet

Mostrando entradas con la etiqueta CSS3. Mostrar todas las entradas

miércoles, abril 30, 2014

3D CSS Text Generator: Generador de texto utilizando CSS 3

3D CSS Text Generator es una sencilla aplicación que nos permite poder editar texto y agregarle propiedades de CSS3 para crear un efecto llamativo sin el uso de imágenes, se trata de puro css3 compatible con los navegadores más utilizados en la actualidad como Chrome, Firefox, IE10, Safari y Opera.

Link: 3D CSS Text Generator

¿Qué les pareció? ¿Conocen alguna utilidad similar para trabajar con propiedades de CSS3 online?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

viernes, abril 04, 2014

MacBook y iMac: Diseño en CSS3

En el siguiente post les mostraremos una animación de la versión de escritorio de Apple, el iMac y su laptop, una MacBook, hecho enteramente en CSS3.

Asimismo, tenemos una galería de animaciones y diseño hechos en CSS3 que pueden revisar.

Pueden darle un vistazo en el siguiente enlace.

Link: Designing MacBook & iMac Using CSS3

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +

miércoles, abril 02, 2014

Modern.IE: Encuentra errores en páginas web

modern.IE es una herramienta práctica de Microsoft que nos permite realizar el escaneo de una página web para detectar errores comunes de codificación. Advierte sobre malas prácticas como la especificación incompleta de las propiedades CSS, doctypes no válidos o incorrectos, y las versiones obsoletas de bibliotecas de JavaScript populares.

El test más práctico se realiza ingresando la URL de nuestro sitio, y esta herramienta nos indica los errores de diseño comunes que han sido detectados.

Como se menciona en la misma página de Microsoft:

¿En qué consiste esta herramienta?

En la actualidad, hacer que tus experiencias web sean geniales (o que, simplemente, funcionen) en diversos navegadores y dispositivos puede llevar mucho tiempo. Esta herramienta detecta los procedimientos de codificación comunes que pueden conllevar problemas de compatibilidad o impedir que los usuarios disfruten de la mejor experiencia posible con la página web. Siempre que resulte posible, recomendamos aplicar correcciones o mejoras de acuerdo con estándares web como HTML5 y CSS3 (o con procedimientos alternativos adecuados). No se trata de una lista de comprobación completa para la codificación de Web actual, sino de un punto de partida que te permite emplear menos tiempo en la realización de pruebas para IE y más tiempo en la creación de lo que de verdad importa en Web.

Este test tiene su versión open source, la cual se puede descargar desde Github.

Link: Modern.IE

¿Qué les pareció? ¿Utilizan algún otro test para sus páginas web?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

viernes, febrero 14, 2014

CanIUse: Tablas comparativas de soporte [HTML5, CSS3]

CanIUse es una interesante aplicación con información actualizada a través de tablas comparativas, las cuales muestran la compatibilidad de una determinada propiedad de una tecnología para la web, como HTML5 o CSS3, con los diferentes navegadores web disponibles, ya sean para móviles o tabletas, como de escritorio o laptop. Un recurso excelente para tomar en cuenta a la hora de diseñar una web y evitar imprevistos en nuestro objetivo.

Las tecnologías soportadas por la aplicación son:

La lista de navegadores disponibles en las tablas es la siguiente:

Internet Explorer
Firefox
Chrome
Safari
Opera
iOS Safari
Opera Mini
Android Browser
Blackberry Browser
Opera Mobile
Chrome para Android
Firefox para Android
IE Mobile

Cuando se revisa la información de una propiedad en particular, por ejemplo @font-face, se puede ver la siguiente información:

Se indica el estado del proceso de desarrollo la propiedad: Proposed Recommendation, Candidate Recommendations, Last Call Working Drafts, Working Drafts o Group Notes.
Estadísticas del uso de la propiedad en la web.
Recursos relacionados en Internet para el uso de la propiedad en cuestión.
Listado de los navegadores mencionados con todas sus versiones, en ellas se indica si la especificación está soportada, no soportada, parcialmente soportada o se desconoce si tiene soporte.

Cabe mencionar que la información mostrada en las tablas está constantemente actualizada, como se puede ver en su feed.

Link: CanIUse

¿Qué les pareció? ¿Conocen alguna otra página similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

miércoles, febrero 12, 2014

Border-Radius: Bordes redondeados [IE, Chrome, Firefox]

Border-Radius es una propiedad que permite agregar bordes redondeados a un elemento de una página web, de acuerdo con al W3C, encargado de producir recomendaciones para la web.

En la actualidad es soportado por casi todos los navegadores web, como podemos apreciar en el siguiente enlace.

Sin embargo, las propiedades cambian de acuerdo al navegador. Por ejemplo si se utiliza webkit, utilizado en Chrome y Safari, se requiere de la siguiente propiedad en CSS:

-webkit-border-radius: 15px;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;

Esto cambia si es que utilizamos Mozilla Firefox:

-moz-border-radius: 15px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 50px;

Internet Explorer reconoce las siguientes líneas

border-radius: 15px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;

Para aplicar estas propiedades con facilidad y probarlas en tiempo real, podemos utilizar Border-Radius, una aplicación web que permite editar las propiedades de borde en cada una de las cuatro esquinas de un elemento web y definir si las queremos para WebKit, Gecko o simple CSS3.

¿Qué les pareció la aplicación? ¿Conocen alguna similar para diseño web?

Link: Border-Radius

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

sábado, junio 01, 2013

iPhone4 hecho en CSS3

En el siguiente post les mostraremos una animación del teléfono de Apple, el iPhone 4 en este caso, hecho enteramente en CSS3. Me llamó la atención por el parecido a la interfaz de iOS.

Entre las características de esta animación se tiene:

Bloquear / Desbloquear y Apagado / Encendido
El sonido de desbloqueo y apagado
Animaciones de los íconos
Una alerta en css3
Cambios de color de la carcasa

Pueden darle un vistazo en el siguiente enlace.

Link: iPhone 4 in pure CSS3

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

jueves, mayo 16, 2013

Dabblet: Prueba código en CSS online

En el siguiente post les hablaremos de Dabblet, una aplicación que permite probar código en CSS directamente desde el navegador, sin necesidad de instalar software como el Adobe Dreamweaver o algún otro editor de páginas web.

Permite realizar pruebas en tiempo real de código en JavaScript, HTML, CSS y ver los resultados a medida que se escribe algo de código.

Es algo parecido al Mozilla Thimble del cual hablamos anteriormente.

Link: Dabblet

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

jueves, marzo 21, 2013

Íconos de Photoshop hechos en CSS3

En el siguiente post les mostraremos una animación de los logos de Adobe, Adobe Photoshop CS3, Adobe Photoshop CS4 y Adobe Photoshop CS5 hecha enteramente en CSS3.

La animacipon está compuesta por los logos del famoso editor fotográfico en sus diferentes versiones hasta la más reciente.

Es un diseño en CSS3 parecido a la animación original.

Link: A tribute to Adobe Photoshop

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

miércoles, marzo 20, 2013

WiniThemes: Encuentra nuevos themes para tu blog

Este sitio web Winithemes.com, es un elegante buscador de themes o temas para los que están por crear su weblog o los que desean modificar la presentación actual de su blog. Son variados los themes que encontraremos en esta interesante web, así como diseños nuevos para todo tipo de plataformas como: WordPress, Joomla, HTML, Magento y OpenCart.

Cada uno de los temas tiene su propio demo para que podamos ver mejor el tipo y forma del theme elegido antes de agregarlo a nuestro sitio web. En este demo podremos modificar colores, aspectos principales del mismo a nuestro gusto para que podamos decidirnos por el mejor.

En la web encontraremos tanto themes gratuitos, como themes en venta; dependiendo de nuestro presupuesto y gustos optaremos por el que mejor se nos adecue. Yo encontré muchos themes gratuitos, muy atractivos, de coste cero. Si deseas cambiar o modificar el theme de tu blog, este sitio web te será de mucha ayuda. Página web recomendada.

Enlace: winithemes.com

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

jueves, marzo 14, 2013

umbrUI: Diseño de inputs en CSS3

En el siguiente post les mostraremos una animación basada en el tratamiento de elementos html input estilizados con CSS3 sin hacer uso de imágenes adicionales o JavaScript.

Cabe mencionar que son visibles en Chrome o Safari, si usan Firefox no se verá correctamente ya que, como el autor indica, está hecho para navegadores que soporten Webkit.

Pueden darle un vistazo en el siguiente enlace.

Link: CSS3 appearance none

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

sábado, marzo 09, 2013

Nyan-Cat hecho en CSS3

En el siguiente post les mostraremos una animación del Nyan - Cat hecha enteramente en CSS3.

La simulación está compuesta por el famoso gato en movimiento y con su música de fondo. Se recomienda ver la animación con los parlantes apagado por obvias razones.

Es un diseño en CSS3 parecido a la animación original.

Link: CSS Nyan Cat

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

miércoles, marzo 06, 2013

íconos de iOS hechas en CSS3

En el siguiente post les mostraremos iconos del sistema operativo de Apple, iOS, hecho enteramente en CSS3. Me llamaron la atención por el gran parecido con los íconos de las aplicaciones de Apple.

Cabe mencionar que son visibles en Chrome, si usan Firefox no se verá correctamente ya que, como el autor indica, está hecho para navegadores que soporten Webkit.

Pueden darle un vistazo en el siguiente enlace.

Link: iOS Icons in pure CSS

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

martes, marzo 05, 2013

Ballena de Twitter en CSS3

En el siguiente post les mostraremos la animación de la famosa ballena de Twitter, hecha enteramente en CSS3. Es una animación creada por Steve Dennis, basada en el diseño original de Yiying Lu.

La simulación está compuesta por la conocida ballena que aparece cuando Twitter está caído y el conjunto de palomas que intentan levantarla.

Es un diseño en CSS3 parecido a la animación original.

Link: Pure CSS Twitter Fail Whale

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

lunes, marzo 04, 2013

Adobe Photoshop en HTML5 y CSS3

En el siguiente post les mostraremos una simulación de la interfaz de Photoshop hecha enteramente en CSS3.

La simulación está compuesta por la interfaz que sale al iniciar el programa, la interfaz principal del programa y una ventana emergente.

Es un desarrollo en CSS3 visualmente atractivo que vale la pena ver.

Link: Adobe Photoshop Simulator

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

miércoles, agosto 29, 2012

Pineapple.io: Directorio de recursos para webmasters

Si te gusta diseñar, editar fotografías, crear o eres un webmaster que te gusta transformar los themes (temas, modelos, formatos) de tus blogs, etc; el directorio Pineapple.io sera de tu agrado ya que encontraras muchos recursos útiles para diseñadores y desarrolladores web en un solo lugar.

En Pineapple, podemos encontrar de todo sobre: javascript, css, ruby, python, css3, scripts, web development, jquery, vim, html, linux, Emacs, Photoshop; herramientas, tutoriales, assets, etc. También podremos marcarlos como favoritos, para localizarlos más tarde en nuestro perfil (tendremos que registrarnos para esto) y desglosarlo por temática.

Usar la pagina es superfácil, ya que debajo de su buscador principal encontraremos todos los temas descritos, divididos en tres categorías principales como: Tutoriales, Herramientas y Assets o recursos como códigos (scripts, marcos) o archivos como imágenes (texturas, fondos, fuentes, iconos), etc.

Todas estas herramientas del directorio son gratuitos (en su gran mayoría). Y siempre encontraremos nuevos recursos ya que es una web donde los diseñadores y desarrolladores comparten estos trabajos con sus colegas. Tu también puedes compartir tus webs o recursos favoritos en el directorio. :D

Enlace a: pineapple.io

Ver la página web en español: pineapple.io

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

domingo, agosto 26, 2012

Los mejores posts de RFS Digital - Julio de 2012

Zopler: Crear contenido de forma colaborativa: En el siguiente post les hablaremos de Zopler, una sencilla herramienta que funciona como una red social, la cual permite la creación de contenidos de forma colaborativa para que profesores, estudiantes, o cualquier persona interesada pueda escribir y compartir una historia. Es posible contar con otras personas que puedan ayudar al desarrollo de textos, artículos, cuentos, entre otros.

Fotos gratis para todo y todos [5 webs]: Bueno tal vez suene un poco exagerado decir fotos para todo pero gracias a las licencias Creative Commons esto se hace realidad, así que daremos cinco de las mejores páginas web para encontrar las fotos que necesitemos para nuestro propio uso (blog); sean comercial o no y/o también podamos modificar, etc.

Presentista: Crea presentaciones fácilmente: En el siguiente post les hablaremos de Prersentista, una aplicación que permite crear animaciones, basado en transiciones utilizando flash, Permite la edición simple de textos e imágenes en el misma aplicación de forma online y su uso es intuitivo.

Google: Lista de Servicios (Parte I): Este post estará dedicado a hablar sobre los servicios adicionales que ofrece el buscador más utilizado en el mundo. Ya pasaron varios años desde que la compañía de Palo Alto, California dejó de ser una empresa dedicada exclusivamente a ser un motor de búsqueda.

Hangout: ¿Qué es?, ¿Cómo funciona?: Los Hangouts (en español Quedada o Lugar de reunión), es una videoconferencia con cámara web que incluyen hasta 9 personas conectadas vía Google Plus.

Domo en CSS3 (con código fuente disponible): Seguimos con los ejemplos desarrollados en CSS3. Anteriormente ya hemos hablado del diseño de Homero Simpson en CSS3, también de los teclados en blanco y negro de Apple, pasando por el logo de Internet Explorer y las reproducciones de la interfaz de usuario de Windows 7 y Mac OS X Lion.

Consejos para realizar compras por Internet: Internet se ha vuelto en la plataforma de comercio para un número creciente de empresas quienes se animan a invertir en la web. Del mismo modo vemos un número creciente de persona personas que se animan a realizar compras a través de este medio.

¿Qué les parecieron las aplicaciones mostradas? ¿Conocen algún servicio similar a los presentados? Pueden dejar sus comentarios en este post.

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

miércoles, agosto 22, 2012

Los mejores posts de RFS Digital - Marzo de 2012

helmink, curiosa web con mapas y atlas antiguos: Creo que no es necesario ser un coleccionista de rarezas o antigüedades para admirar objetos antiguos como los mapas, cartas marinas o atlas raros y más aún si estos mapas antiguos son originales. Podemos encontrar esta información en la web helmink.com. La colección de mapas antiguos en esta web son de todas las regiones del mundo.

El corto animado que se llevó un Óscar: "The fantastic flying books of Mr. Morris Lessmore" es el entretenido corto dirigido por Willian Joyce y Brandom Oldenburg de Moonbot Studios, el que se llevo el Oscar 2012 a mejor corto animado. Este cortometraje, de 15 minutos de duración, es una alegoría humorística sobre los poderes curativos de las historias. Asimismo, está inspirado en el mentor y amigo de Joyce, ”un amante de los libros y un gran señor de las publicaciones para niños”, según propias declaraciones.

Ultimate CSS3 Generator: Crea gradientes en CSS3: El día de hoy hablaremos de una aplicación que te permite generar gradientes en CSS3: Ultimate CSS3 Generator. Se trata de una interesante aplicación que te permite generar a través de una interfaz gráfica de usuario el posible resultado del gradiente que desees aplicar para tu aplicación web, diseño de botones en CSS3, entre otros.

¿Qué les parecieron las aplicaciones mostradas? ¿Conocen algún servicio similar a los presentados? Pueden dejar sus comentarios en este post.

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

martes, agosto 21, 2012

Los mejores posts de RFS Digital - Febrero de 2012

Lista de los 10 libros prohibidos por "infames": Esta es la lista de los 10 libros más infames en inglés, y que estuvieron ~~están~~ fuera de la ley (algunos de los cuales leí siendo adolescente y me causaron buena impresión como: Trópico de Cáncer, de Henry Miller (1934), La metamorfosis de Franz Kafka (1915), Lolita de Vladimir Nabokov (1955). Según la lista aun me quedan por leer 7 libros más). Esta lista es una buena excusa para dar un paseo por la biblioteca o bajarlos de books.google.com o de cualquier sitio online, también seria una buena idea comprarlos como regalo para un ser querido, con una tarjeta que especifique que es "un libro prohibido por ser infame o estar fuera de la ley" de seguro serán leído con avidez, como este post. :)

Aprende jQuery en 30 días: jQuery, es una de las bibliotecas más populares y utilizadas en JavaScript, tiene una serie de características que los respalda: es cross browser, liviano, cumple con CSS3, entre otras características.

Windows 7 en CSS3: Anteriormente hablábamos de una Mac OS X Lion hecha en CSS3 y podríamos ver el poder de un nuevo estándar web en acción como lo es CSS3. Hace no mucho me encontré con esta página que emula ahora la interfaz de Windows 7 con las ventanas que se pueden arrastrar y con el botón de inicio.

Herramientas de Testing y Validación: En este post mostraremos algunas útiles herramientas para testing o pruebas y validaciones útiles para desarrolladores.

¿Qué les parecieron las aplicaciones mostradas? ¿Conocen algún servicio similar a los presentados? Pueden dejar sus comentarios en este post.

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

viernes, julio 20, 2012

Domo en CSS3 (con código fuente disponible)

Seguimos con los ejemplos desarrollados en CSS3. Anteriormente ya hemos hablado del diseño de Homero Simpson en CSS3, también de los teclados en blanco y negro de Apple, pasando por el logo de Internet Explorer y las reproducciones de la interfaz de usuario de Windows 7 y Mac OS X Lion.

Para ver la lista completa pueden ver el siguiente enlace con diseños hechos en CSS3.

El ejemplo que a continuación les mostramos, es un Domo, la mascota de la cadena de televisión japonesa NHK, diseñado en CSS3 y que permite ver al divertido personaje moviendo sus brazos y pudiendo cambiar el ángulo de visión con el puntero del mouse o presionando en cualquier sitio de la pantalla, si utilizas iOS.

El proyecto ha sido desarrollado por Rafal Bromirski y presentado en el Mozilla Developer Network, me gustó el detalle de utilizar animaciones en 3D haciendo uso de CSS3.

Como nota final, cabe mencionar que el código del proyecto está disponible en GitHub, en el enlace que se muestra a continuación 3D Domo in CSS3.

Enlace: 3D Domo in CSS3

¿Qué les pareció? ¿Conocen algún otro diseño similar hecho en CSS3?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

viernes, julio 13, 2012

Homero Simpson en CSS3

Otra muestra CSS3 en todo su esplendor. El día anterior les mostramos diseños de teclado estilo Apple en blanco y negro, así como otros diseños en CSS3 publicados en el blog. Miren la imagen arriba y verán que ahora se trata de Homero Simpson, de la famosa serie de dibujos animados amarillos Los Simpsons.

Esta muestra ha sido desarrollada por Bernard de Luna, un desarrollador web brasileño que inclusive ha realizado una animación en los ojos tras un cierto tiempo. Vale la pena darle un vistazo.

Enlace: Pure CSS3 Homer

¿Qué les pareció? ¿Conocen algún otro diseño similar?

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.