Añadir un Responsive Video, Iframe, Embed, Object y img en tu sitio o blog con HTML5

Lamento mucho la ausencia amigos, aca en mi blog de carluys les explico un poco sobre mi falta. bueno recuperemos el tiempo perdido, hoy vamos a ver como añadir Video, Iframe, Embed, Object y img de forma responsive en nuestro sitio web o blog.


Actualmente el incrustador de videos youtube es el mas utilizado, pero aparte de youtube algunos se plantan directamente en su propio alojamiento o almacenamiento y por lo general para llamar usando la etiqueta <video>.

a continuación es un ejemplo de código de inserción de las más ampliamente utilizado: Crear la respuesta al video en un iframe es fácil ya que el manejo sensible de rejilla o layaout se establece a través de CSS. A continuación se muestra un ejemplo de CSS para hacer que el video en tamaño completo coincida con el tamaño de la anchura del blog elemento div. Pasos para la integración de los vídeos en Vimeo iframe incrustar lo siguiente: para poner en práctica el video iframe para incrustar YOUTUBE es el siguiente: Para Responsive imagen / foto en un img Picture (imagen) si usamos el valor unitario de las em y px ejemplo como width:900px y height:700px no se ejecutará en el Responsive, entonces cambiamos el uso de valor unitario % es decir, como: width:80% y height:80%. pero también no tenemos que utilizar siempre el valor unitario % , pero también podemos utilizar medidas alternativas de auto en su lugar. para superar el tamaño de la imagen que superan el elemento padre podemos utilizar max-width:100% de esta manera se utiliza con el fin de ajustar el tamaño de la imagen en sí proporcionalmente.

Este principio también se aplica a las iframe, objetos y videos, los ejemplos más comunes css ver a continuación: O para mostrar el tamaño de la imagen de acuerdo con el tamaño original puede utilizar css de la siguiente manera: así que el truco anterior es muy fácil y aplicado para cambiar la vista en una sensible y optimizada, así que por favor utiliza este método. espero puede ser útil...

Referencias:

Leer Artículo Completo »

Script para insertar vídeos Youtube en blogger

Tenía el blog un poco olvidado trabajando en nuevas cosas y proyectos para el mismo, pues ahora vengo con más fuerza, aca quiero dejarles un simple script que permitirá insertar vídeos en blogger sin necesidad de añadir el código completo, solamente con tener el id podemos hacer correr el mismo, funciona de esta manera.

Explicación

1. Esto seria el link del vídeo: http://www.youtube.com/watch?v=3zU1JP4_qOE

2. Y esto vendría siendo la ID del vídeo: 3zU1JP4_qOE

Realización del Script

Vamos a crear el script...

1. Copiamos el codigo del reproductor el de YouTube es este: 2. Antes de cada " ponemos un \ , Nos tiene que quedar asi: 3. Ahora pondremos el nombre del reproductor en la ID para que el script lo pueda encontrar, pegamos esto " + IDyoutube + " lo pegamos donde va 3zU1JP4_qOE y nos tiene que quedar asi: 4. Ya que tenemos lo principal listo lo pegamos al resto del script: 5. Nos tiene que quedar algo asi: 6. Y lo pegamos antes de < /head >

Utilizar el Script

Para ejecutar el script solo tienes que añadir este código con el respectivo id del vídeo:

Leer Artículo Completo »

Generar prefijos CSS3 con PHP

Volviendo con más fuerza eh decidido renovar el blog con un nuevo diseño y nuevas ideas, bueno los navegadores actuales soportan las propiedades CSS3 con prefijos específicos para cada tipo de navegador, hasta que la propiedad sea aprobada y finalizada por el W3C. Eso significa mucha repetición a la hora de escribir código. Pongamos como ejemplo la siguiente declaración: Más código significa mayores probabilidades de cometer errores y produce hojas de estilos que son más largas y más difícil de mantener. En lugar de escribir el prefijo específico del tipo de navegador y los valores una y otra vez, podemos utilizar PHP para generarlo por nosotros.

Podemos utilizar una función PHP para producir el código CSS3. La función tendrá que saber dos cosas: el nombre de base de la propiedad (por ejemplo, border-radius) y el valor asociado a ella ("5px"). Por lo tanto, deberíamos escribir: La primera línea es para indicar el tipo de contenido del archivo php. Obviamente a la hora de invocar nuestra hoja de estilos lo haremos llamando el archivo php: En la función css3_write queremos producir la correspondiente declaración de CSS para todos los navegadores. La propiedad base se incluye al final, como fallback. Construiremos la declaración utilizando una serie de concatenaciones y utilizando \n (nueva línea) para hacer que la función escriba un CSS más legible.

Para producir nuestro CSS3 tan sólo tenemos que llamar a la función con la propiedad CSS3 y el valor para dicha propiedad. Por ejemplo: Lo que generará el siguiente código: Este método es una alternativa al uso de compiladores como Less o Sass.

Leer Artículo Completo »

Animando elementos input con transiciones CSS

El siguiente ejemplo muestra cómo crear crear un resplandor que aparece al tener el foco un elemento input. La aparición de este resplandor o "glow" se realiza mediante transiciones CSS y el método box-shadow.

CSS

HTML

Ahora con tan solo esos pequeños códigos generamos algo como lo siguiente:

Nombre:

Leer Artículo Completo »

Efecto redondeado en imágenes de Blogger

Esta vez vamos a reunir el efecto box-shadow y el border-radius para redondear imágenes de blogger de forma sencilla y de manera elegante.

Añadir a blogger

Lo unico que debemos hacer es dirigirnos a la administración de nuestro blog y seleccionamos la pestaña Plantilla y elegimos Edición de HTML, luego seleccionamos la casilla Expandir plantillas de artilugios y antes de la etiqueta </b:skin> añadimos este código: Con eso obtendríamos un resultado como este:


Capacidad en Navegadores

Este truco más o menos funciona en cualquier navegador (por ejemplo, Chrome, Firefox y Safari) que apoya border-radius, box-shadow, :before and :after. Los navegadores no compatibles recurrirá a la imagen sin ningún tipo de estilos.

Creatividad

Como puede ver, se puede crear casi cualquier estilo con la combinación de: :before and :after elemento pseudo. puede compartir con nosotros los estilos mas creativos, por favor, compartir en los comentarios.

Leer Artículo Completo »

 
¡Recomendar este blog!