Usar variables dentro de calc con SASS

Muchas veces necesitamos usar una variable que tenemos declarada en nuestro SASS dentro de la función calc de CSS, para ello usaremos la siguiente nomenclatura:

CSS - Quitar punto en ol

Para quitar el punto que sigue al número de contador en los <ol></ol> es decir el 1., 2. y dejarlo simplemente como 1, 2

Tan solo necesitamos usar los siguientes estilos:

ol{
     counter-reset: listCounter;
     list-style: none;
}
ol li{
     counter-increment: listCounter;
}

Slider de imagenes CSS sin JS

Hoy os dejo un Slider muy simple que hace que una serie de imagenes giren desde un lado hacia otro, vamos, el típico carrusel de imagenes, pero con la particularidad de que no lleva ni una sola linea de Java Script, esta todo escrito en CSS3.

Os dejo el código SASS, y el CSS

• SASS

#Slideshow{
    overflow: hidden;

Fuentes personalizadas en nuestras webs

Para agregar una fuente personalizada (que no tenga el usuario instalada en su sistema como pueden ser las tipicas como Arial) deberemos declararla en nuestros estilos; para ello:

@font-face {
    font-family: "Nombre de nuestra fuente";
    src: url(Ruta de nuestra fuente/Nombre del archivo.otf) format('opentype');
}

y despues declararla en nuestros estilos como si fuera cualquier otra:

font-family: "Nombre de nuestra fuente";
Los unicos tipos de fuente compatibles con todos los navegadores son: TTF y WOFF
Para usar un TTF tendremos que poner el formato como sigue:
format('TrueType');

Tambien es recomendable no cargar una fuente personalizada, ya sea por url desde Google Fonts u otro site, o desde nuestro propio servidor, si el usuario ya tiene la fuente en cuestion en su dispositivo, para ello deberemos llamarla del sigueinte modo:
src: local("Nombre de la Fuente")

Todo junto seria algo asi:

@font-face {
    font-family: "Nombre de nuestra fuente";
    src: local("Nombre de nuestra fuente"), url(Ruta de nuestra fuente/Nombre del archivo.otf) format('truetype');
}

Aqui os dejo un ejemplo:

body{
    font-family: "FiraOpenType";
}

@font-face {
    font-family: "FiraOpenType";
    src: url(FiraSansOT/FiraSansOT-Regular.otf) format('opentype');
}

Para esto mismo es muy interesante que veais Google Fonts

poner 3 puntitos (...) a los textos que sobresalen de su div

Para recortar el texto y poner ... cuando se salen de nuestro div, tan solo debemos poner la siguiente propiedad en nuestro css:

text-overflow: ellipsis;

Un saludo, y espero os sirva de utilidad

Ruul - una regla en tu ventana

Es la herramienta imprescindible para cualquier maquetador web.
Gracias a esta extensión de chrome podemos colocar una regla en nuestra ventana y ver tanto la medida en Px como en plocs, ademas de hacer todas las funciones de una regla, como comparar si están a la misma altura, este es su enlace:

https://chrome.google.com/webstore/detail/ruul-screen-ruler/mlbnpnlmfngmlcmkhjpbfokdphfehhjj/related?hl=en-US

THE RESPONSINATOR

Uno de los dolores de cabeza que en estos últimos tiempos muchos tenemos, es hacer que nuestro proyecto se vea bien en todos los dispositivos posibles. La mejor manera de probar esto sería disponer de un montón de smartphones, tablets y dispositivos móviles varios. Como en la mayoría de los casos no es posible, esta herramienta puede sernos de gran utilidad. No es 100% exacta pero puede servirnos, al fin y al cabo el objetivo es que se vea bien en todas las resoluciones.

Parece que tiene buena pinta lo pruebo y os comento ;)

Fuente:http://www.adwe.es/diseno-web-2/10-herramientas-online-imprescindibles-para-diseno-y-desarrollo-web

Quitar puntos negros en li

Se puede conseguir simplemente añadiendo el siguiente código:

La única "complejidad" esta en que hay que añadirlo en la lista(ul) y no en cada elemento de la lista (li).

ul{

     list-style:none; 

}

Espero os sirva de ayuda.

En ocasiones puede que queramos colocar un fondo a nuestros listados html <ul> <ol> hasta aquí sin problemas, pero si ademas queremos usar los números que nos proporciona el "ol" es necesario hacer algo al estilo:

ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
ol > li {
    position:relative; /* Create a positioning context */
}
ol > li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.5em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 1.5em;
    padding: 4px;
    border-top: 2px solid #31759f;
    color: #fff;
    background: #31759f;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
    font-weight: bold;
    font-size: 16pt;
    text-align: center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}

Maquetación fija o liquida??

Hoy os planteo esta cuestión y de paso a ver si conseguimos abrir un poco debate para sacar conclusiones y aprender todos de todos.
Yo personalmente uso un mixto; es decir suelo dar un mínimo y un máximo de ancho y alto a mis diseños, pero después todo el contenido lo manejo mediante porcentajes; esta pregunta la abro a raíz de un desacuerdo en mi trabajo, puesto que uno de mis compañeros con el que estoy llevando a cabo un proyecto prefiere utilizar únicamente tamaños fijos en PX, vosotros como lo veis? Cual es vuestra opinión? que y como trabajáis día a día?

Un saludo a tod@s y que empiece la fiesta!!

Dejar una capa siempre visible

En esta ocasión voy a explicar como dejar una capa o un div siempre visible en la web; es decir que al hacer scroll esa capa no se mueva esto puede hacerse para dejar siempre visible nuestro logo, o como en facebook, tuenti y muchas otras paginas, para dejar siempre visible el chat, en fin que los usos son tantos como limites tenga nuestra imaginación.

En la hoja de estilos tan solo deberemos escribir el siguiente código:

    position: fixed;
debiendo tanbién decirle donde queremos que aparezca claro esta, podemos teclear algo como lo siguiente

    left: 0px;
    top:0px;
para que aparezca en la esquina superior izquierda, podemos darle porcentajes, usar PT; al fin y al cabo es solo una etiqueta css mas.

Espero que os sea útil ;)