13 agosto 2014

Algunhas trucas para as follas de estilo

  1. Si eres dos que gosta empregar unidades relativas de medida para o tamaño das fontes, este é un atallo que permite establecer unha relación de conversión na que 1em=10px. Deste xeito calquera cantidade em multiplicada por 10 hános dar o equivalente en px que estamos a empregar. p.ex.: 1.2em = 12px. Ou viceversa: unha cantidade en px dividida por 10 daranos o seu valor contextual en em.
    p.ex.: 24px = 2.4em
    
    body { font-size: 62.5%; /* font-size 1em = 10px */}
    p { font-size: 1.2em; /* 1.2em = 12px */}
  2. Cando seleccionamos un elemento input algúns navegadores - Safari, Chrome- engaden un borde resaltado. O seguinte codigo eliminao:
    
    input[type="text"]:focus {
      outline: none;
    }
    
  3. Para iso está CSS3. Usar sen complexo ;)
     mom!
    a {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -o-transform: scale(1.1);
    }
    
    Isto escalara ate un 110% o tamaño dun boton cando sen ter que usar o
  4. Por si inda o necesitas
    
    div {
      background-color: #999; /* tódolos navegadores */
      *background-color: #ccc; /* engadir un * antes da propiedade - IE7 ou menos */
      _background-color: #000; /* engadir un _ antes da propiedade - IE6 ou menos */
    }
    
saber máis: http://sixrevisions.com/css/10-random-css-tricks-you-might-want-to-know-about/

abreviar procesos repetitivos con Emmet

Usando abreviaturas e comandos con Emmet podemos acortar o tempo de desenvolvemento:
Ex.:
En HTML
#menu$*6>ul>li*0>a{Link Here}          + [Crtl]+E
article#front.main                                    + [Crtl]+E
article>p{Text here...}+bq>{Text here...}^p{Text here...}*3        + [Ctrl]+E
form                + [Ctrl]+E
form:get           + [Ctrl]+E
form:post         + [Ctrl]+E
input:t              + [Ctrl]+E
input:time         + [Ctrl]+E
input:time#dateTime      + [Ctrl]+E
table+            + [Ctrl]+E
tr+                 + [Ctrl]+E
colg+             + [Ctrl]+E

 *******************************************

En CSS
pos    + [Ctrl]+E     position: relative;
pos:s  + [Ctrl]+E    position: static;
t:a      + [Ctrl]+E    top: auto;
z        + [Ctrl]+E    z-index;
va:t    + [Ctrl]+E    vertical-align: top;
tsh:ra + [Ctrl]+E    text-shadow: h v blur rgba(0, 0, 0, .5);
bdtli:c + [Ctrl]+E  border-top-left-image: continue;
d        + [Ctrl]+E display: block;

...
Para saber máis
http://docs.emmet.io/cheat-sheet/