Tutoriales curso de CSS3

Tutoriales curso de CSS3

En esta entrada voy a hacer un resumen con todos los tutoriales de CSS3 que llevo subidos al blog hasta ahora. Espero que esta recopilación os sirva de ayuda.

Curso tutorial CSS3

Todas estas entradas con ejemplos CSS3 van acompañadas del código, se pueden descargar los archivos para que aprendas fácilmente modificando valores.

Tutorial de CSS3

Está claro que algunas de estas reglas css3 no se utilizan diariamente, es más, es posible que algunas no se llegen casi a utilizar, pero bueno, nunca sobra conocerlas.
A mi desde luego me vienen de maravilla tenerlas a mano. Muchas veces tengo que trabajar con algo específico de CSS3, vengo a la entrada, veo su funcionamiento con el ejemplo y a trabajar.

Si estás viendo este curso y se te ocurre otro capítulo de CSS3 para que prepare, sólo tienes que indicármelo en un comentario, cuando saque un rato lo prepararé. Si en cambio tú tienes conocimientos de CSS3 y quieres que añada otra nueva lección con tu ejemplo, no dudes en contactar conmigo y preparamos como subirla.

@eneakao

Media Queries con CSS3

Media Queries con CSS3

Los Media Queries vienen a ser condicionales dentro de nuestra hoja de estilos CSS, en cualquier lenguaje de programación lo representaríamos con un IF.

Media Queries con CSS3

Algo parecido a esto

if (miPantalla == 'Iphone'){
   Adapto mi CSS a las dimensiones de un Iphone 
   o directamente cargo la hoja de estilo 
   que tengo preparada para Iphone.
}

He utilizado @Media Screen para adaptar de una forma sencilla el CSS de mi ejemplo a la resolución y a la orientación de la pantalla del dispositivo.

Existen otros tipos:

– All: para todos los dispositivos.
– Braille: para dispositivos lectores de braille.
– Embossed: para dispositivos que imprimen braille.
– Handheld: para terminales con pantalla pequeña.
– Print: para impresiones de página.
– Projection: para proyectores.
– Screen: para pantallas de ordenador.
– Speech: para sintetizadores.
– Tty: para dispositivos para discapacitados, teletipos y terminales.
– Tv: para dispositivos de televisión.

Voy a detectar los dispositivos Iphone 3GS y Ipad 1, veré cómo están orientados y en función a esto mostraré en pantalla un texto indicando que modelo de dispositivo es y en que posición está.

– La resolución de la pantalla del Iphone 3GS es de 320px por 480px.
– La resolución de la pantalla del Ipad 1 es de 768px por 1024px.

Si detectara una pantalla con resolución superior al Ipad, como puede ser la de muchos monitores, también avisará diciendo que lo estamos viendo desde un monitor.

Código HTML de nuestro archivo

<body>
    <div id="contenedor">
      <div id="dispositivo"></div>
    </div>  
< /body>

Código CSS para todos los dispositivos

body{
        background:#222;
        color:#111;
}
#contenedor{
         padding:20px;
         font-size:100px;
         text-shadow:-1px 1px 5px #333;
}

Detectamos si es un Iphone y tiene posición vertical o portrait.

Si cumple las condiciones modificaré el elemento con id=»dispositivo» añadiéndole texto al final (de ahí que utilice :after).

@media screen and (max-device-width: 320px) 
              and (orientation:portrait){

      #dispositivo:after{ 
          content: 'Tu Iphone está situado de forma vertical o Portrait'; 
      }
}

Detectamos si es un Iphone y tiene posición horizontal o landscape.

Si cumple las condiciones modificaré el elemento con id=»dispositivo» añadiéndole texto al final (de ahí que utilice :after).

@media screen and (max-device-width: 320px) 
              and (orientation:landscape){
      
      #dispositivo:after{ 
          content: 'Tu Iphone está situado de forma horizontal o Landscape'; 
      }
}

Detectamos si es un Ipad y tiene posición vertical o portrait.

Si cumple las condiciones modificaré el elemento con id=»dispositivo» añadiéndole texto al final (de ahí que utilice :after).

@media screen and (min-device-width: 768px) 
              and (max-device-width: 1024px) 
              and (orientation:portrait){

      #dispositivo:after{ 
          content: 'Tu Ipad está situado de forma vertical o Portrait'; 
      }
}

Detectamos si es un Ipad y tiene posición horizontal o landscape.

Si cumple las condiciones modificaré el elemento con id=»dispositivo» añadiéndole texto al final (de ahí que utilice :after).

@media screen and (min-device-width: 768px) 
              and (max-device-width: 1024px) 
              and (orientation:landscape){

      #dispositivo:after{ 
          content: 'Tu Ipad está situado de forma horizontal o Landscape'; 
      }
}

Detectamos si la resolución de pantalla es superior a 1024.

Si cumple las condiciones modificaré el elemento con id=»dispositivo» añadiéndole texto al final (de ahí que utilice :after).

@media screen and (min-device-width: 1024px) {
      #dispositivo:after{ 
        content: 'Tienes resolución mayor o igual a 1024'; 
      } 
}

Desde aquí puedes ver el ejemplo, depende de tu dispositivo vas a ver un texto u otro.

espero que os sirva de ayuda.

@eneakao