CATEGORÍA : Consejos CSS

Personaliza select con CSS3

Hasta hace poco tiempo personalizar un select era bastante rollazo, y muchas veces imposible sin usar javascript, hoy en día han surgido alternativas a través de CSS3 que nos permiten dar la apariencia que queramos antes de clicar en la lista seleccionable desactivando las propiedades comunes de select (appearance) y añadiendo las nuestras tales como una imagen de fondo, en el caso más fácil, o a través de CSS3 darle apariencia nueva con background, shadow o transform , os pongo un ejemplo sencillo:

select {
-webkit-appearance: none;
-moz-appearance:none;
appearance:none;
background: #d9d9d9 url(images/bg-select.jpg) no-repeat right;
border: none;
padding: 10px;
margin: 0;
width: 100%;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius: 0;
}

Podéis encontrar más info sobre la personalización de selects aquí:
bavotasan leaverou

Cómo hacer responsive tu badge de google plus con CSS

El badge de google plus lo podemos sacar fácilmente desde esta página. Definimos los parámetros, si lo queremos vertical u horizontal, con más o menos información y el ancho… Y aquí viene el problema del responsive.

Cuando maquetamos como responsive ese bagde que normalmente suele ir en el lateral lo acoplamos a la medida del sidebar, pero cuando lo vemos en tablet o móvil, seguramente ese sidebar haya cambiado de ancho y por tanto sobresalga o se quede corto. Para ello podemos crear 3 divs cuyo contenido sea exactamente igual pero en el que sólo cambie el ancho, algo así:

<div class="google-desktop">

<div data-href="https://plus.google.com/ID" data-width="180" data-rel="author" data-layout="portrait" ></div>
</div>

<div class="google-tablet">
<div data-href="https://plus.google.com/ID" data-width="430" data-rel="author" data-layout="portrait" ></div>
</div>

<div class="google-movil">
<div data-href="https://plus.google.com/ID" data-width="270" data-rel="author" data-layout="portrait" ></div>
</div>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Y en el CSS, mediante media queries, ocultar o no los divs que nos interesen con la propiedad display:

.google-desktop {display:block;}
.google-movil, .google-tablet {display:none;}

@media only screen and (max-width: 479px) {

.google-tablet {display:block;}
.google-desktop, .google-movil {display:none;}

}

@media only screen and (max-width: 320px) {

.google-movil {display:block;}
.google-desktop, .google-tablet {display:none;}

}

El problema de esta solución es que sólo funciona si las medidas que hemos aplicado en nuestro css a los cambios por responsive son fijas, es decir, en píxels.

¿A alguien se le ocurre cómo hacerlo con medidas relativas?

Personaliza una web en función del dispositivo con media queries (breakpoints)

Os dejo un listado de los comúnmente llamados breakpoints en media queries para darle distintas propiedades al CSS según la resolución de pantalla. No son otra cosa que reglas que afectan a la visualización de la página según la resolución y se pueden combinar como queramos, siempre teniendo en cuenta que al ser en cascada los de abajo sustituirán los estilos de arriba.

Los ejemplos siguientes hacen referencia al ancho del navegador pero también se puede utilizar la propiedad min-device-height o max-device-height. Las medidas en píxeles se corresponden con las más utilizadas pero pueden modificarse según nos interese e incluso usar porcentajes o em. Haced más pequeña la ventana de vuestro navegador mientras consultáis esta web para comprobar el efecto.

/* Smartphones (vertical y horizontal) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}

/* Smartphones (horizontal) ----------- */
@media only screen
and (min-width : 321px) {
}

/* Smartphones (vertical) ----------- */
@media only screen
and (max-width : 320px) {
}

/* iPad2 (vertical y horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}

/* iPad2 (horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}

/* iPad2 (vertical) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}

/* Ipad3 (horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
}

/* Ipad3 (vertical) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
}

/* Grandes resoluciones ----------- */
@media only screen
and (min-width : 1824px) {
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

/* iPhone 5 ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
}

La información está extraída de:

ResponsiveDesign.is CSS Tricks

Podéis encontrar más información sobre media queries en:

W3.org

Efecto de movimiento un poco más complejo con CSS3: La propiedad animation

Si hace poco vimos cómo animar mediante transition ahora os pongo un ejemplo con animation, para animar elementos sin necesidad de javascript. Una de las particularidades de la propiedad de CSS3 es que todavía no es estándar, lo que nos obliga a definirla prácticamente para todos los motores de renderizado en navegadores. Por ejemplo:

#santa{
position:relative;
left:110%;
-moz-animation:volar 20s infinite;
-webkit-animation: volar 20s infinite;
-o-animation:volar 20s infinite;
-ms-animation:volar 20s infinite;
-khtml-animation:volar 20s infinite;
animation:volar 20s infinite;
}

Donde aparte de los motores definimos el nombre de la animación, volar, el tiempo, 20s, y si añadimos infinite se reproducirá indefinidamente en el tiempo.

Podemos determinar los keyframes donde la animación cambia de posición, tamaño, color, etc. Es decir, en qué momento de la animación se produce un cambio… donde en definitiva establecemos qué propiedad de CSS va a actuar en cada momento. Al carecer de estandarización hay que definirlo también para cada navegador. Por supuesto el nombre de la animación debe coincidir con el nombre anterior, os pongo un ejemplo:

@-moz-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-webkit-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-o-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-ms-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-khtml-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

Por último sólo quedará darle la clase o ID al elemento que queremos animar:


<img id="santa" alt="" src="img/santa-volador2.png" />

Pongo como ejemplo el Papá Noel volador que sale en esta página. Las propiedades left y position de #santa son para que funcione el efecto de la animación correctamente.

Efecto de movimiento sencillo con CSS3: La propiedad transition

Con la adopción de la mayoría de navegadores de los atributos propios de CSS3 se abren puertas para hacer más rápido los efectos :hover. Si hasta no hace mucho lo normal era utilizar sprites para simular cambios de color o movimiento ahora es más rápido (y más ligero) hacerlo mediante transition.

Si quiero que un efecto :hover haga una transición suave marco primero las propiedades que van a cambiar al pasar el ratón por encima (con margin, padding, etc.) o cambio de color (con background-color, por ejemplo) o por qué no, ambas.

a:hover {margin-top:3px; background-color:red;}

Luego añado la propiedad transition para todos los navegadores disponibles:

a:hover {
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
  • Donde all marca todo el elemento pero podría cambiar modificando sólo el ancho (width), el alto (height), el color (color), etc.
  • 300ms es la duración en milisegundos, podríamos utilizar 1s para un segundo, 2s, etc.
  • ease-in-out es el efecto easing y podría sustituirse ease-in o cualquier otro elemento de esta propiedad.

Podéis pegarle un vistazo a todas los efectos disponibles con una demo y su explicación en easings.net y obtener un listado de todas sus propiedades y compatibilidad en el enlace de la w3schools.

Easings.net Transitions en CSS3

 

Cómo hacer un condicional CSS para Retina Display

A veces, por comodidad, usamos imágenes de fondo con la propiedad background en CSS pero un día entras a una web hecha por ti desde un iphone, ipad o trasto que con pantalla retina display y te encuentras con una imagen absurdamente pequeña o distorsionada…

La manera de arreglarlo es con la propiedad background-size de CSS3 y un par de condicionales que afecten sólo a los dispositivos con retina:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.menu { background-size: 127px 55px; background: url(images/menu@2x.jpg) no-repeat center center;}
}

Normalmente se crea una imagen al doble de tamaño de la original (menu@2x.jpg) y se establece en la propiedad background-size el tamaño exacto de esa imagen (ancho alto).

Más info al respecto:

Background Size CSS3