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;
}

Selector de clases, para dar estilos a las que contengan, comiencen o terminen por una cadena (Comodines CSS)

En CSS podemos seleccionar todas las clases que comiencen, terminen, o contengan una cadena en concreto para ello:

CSS - Efecto marca de agua

Buenas amigos, hoy os traigo algo que seguramente os resulte muy útil.
Mediante unos estilos CSS vamos a conseguir un efecto de marca de agua, esto no es seguro, pero si muy disuasorio, ya que si alguien quiere robarnos la imagen, va a ver nuestro logo, o la imagen que definamos sobre la imagen en cuestión y en mas del 90% de los casos no intentara cogerla.

Os explico, para conseguirlo necesitamos un Div que lo contenga todo y 2 imagenes, una que se va a utilizar como marca de agua y la otra que es la que mostraremos, algo similar a esto

<div class="marca-de-agua">
<img alt="" src="URL-IMAGEN" /></div>

 y los siguientes estilos CSS:

Drupal - Plantillas hijas

Hoy os escribía como crear plantillas hijas en WordPress, la buena noticia es que esto lo podemos hacer también en Drupal.
Al igual que en WordPress es muy sencillo, tan solo deberemos seguir unos pequeños pasos:

1. En la carpeta Themes de nuestra instalación de Drupal (normalmente Drupal\sites\all\themes) crearemos una nueva carpeta, o directorio con el nombre que prefiramos (p.e: mi_tema)
2. Dentro de este directorio crearemos un archivo con el mismo nombre del directorio, pero con la terminación .info (p.e: mi_tema.info)
3. Dentro de este archivo, copiaremos la siguiente estructura:

WordPress - Plantillas hijas

Hace unos días os explicaba como añadir una nueva hoja de estilos a la template que ya tenéis montada en vuestro WordPress, en resumen venia siendo algo asi como añadir una etiqueta a la template con el método de WP bloginfo().

Bien hoy os cuento (pensaba que esto ya lo había escrito) que ese modo es 100% funcional, aunque no es el mas apropiado, ya que si salen actualizaciones de nuestro tema, y por supuesto actualizamos (algo que deberíamos hacer siempre, para solucionar posibles bug, y agujeros de seguridad), bien como os contaba tenemos el problema al actualizar ya que todas las modificaciones que llevemos a cabo se perderán, si solo hemos incluido un enlace de una hoja de estilos tenemos fácil localizar el cambio y volver a hacerlo, aunque es una tarea pesada si la plantilla esta viva y se actualiza a menudo.
Si queremos evitarnos esto el mejor modo es crear una plantilla hija, para ello  deberemos:

Añadir una nueva hoja de estilos a WordPress

Casi siempre que montamos un nuevo sitio con WP, o editamos uno que ya este publicado, nos toca editar los estilos, suele cometerse el error de editar los estilos que nos proporciona la plantilla, esto nos lleva al inconveniente de que cada vez que actualizemos la plantilla deberemos volver a hacer los cambios ya que es mas que probable que nos los pisen, para ello la mejor opcion es incluir una nueva hoja de estilos con todos nuestros cambios, la cual deberemos agregarla justo al final de los estilos que trae nuestra plantilla, para agregar una nueva hoja de estilos solo necesitaremos la siguiente linea, en la cual hemos almacenado nuestra hoja de estilos en una carpeta llamada css, la cual esta en la raiz del directorio de nuestra template, y hemos llamado a nuestra hoja custom.css

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/custom.css" />

Un saludo y como siempre espero que os sirva de ayuda

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

NetBeans 7.4

Hace unos días salio la ultima versión (hasta la fecha 21-10-13) del famoso IDE NetBeans ahora mismo es la 7.4 https://netbeans.org/downloads/start.html?platform=windows&lang=en&option=all
Después de probarla os puedo decir que merece la pena actualizarlo, hasta el momento no he encontrado ningún Bug, va mas rápido que su anterior versión 7.3.1

También comentaros que una de las mejoras mas notorias que trae, es la implementación de pre-procesadores css en especial SASS y LESS, tan solo hay que lincarlo con la librería en cuestión y cuando creemos un archivo LESS o SASS nos preguntara si queremos compilarlo a CSS al compilar o no, y en caso afirmativo donde lo queremos guardar, por lo que no nos sera necesario CodeKit, ni PrePros si estamos en Windows, ni ningún otro compilador

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;}

Cambiar el color al placeHolder de un input, mediante css

Hoy me he encontrado con el problema a la hora de cambiar el color a un placeholder en concreto, aquí os dejo la solución ;)

Tan solo es dar el Id del elemento al que deseamos cambiarle, y agregarle la coletilla para todos los motores de los navegadores

#edit-search-block-form--2::-webkit-input-placeholder{
    color: black !important;
}
#edit-search-block-form--2::-moz-placeholder{
    color: black !important;
}
#edit-search-block-form--2:-moz-placeholder{
    color: black !important;
}
#edit-search-block-form--2:-ms-input-placeholder{
    color: black !important;
}

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 ;)