Estupendo tus tutos sobre sass, de lo mejor y esto se agradece... Pero me pregunto si existe la posibilidad de hacer un tuto con sprite, he estado viendo la documentación en: http://compass-style.org/help/tutorials/spriting/ pero no me entero, para ser mas concreto me interesa saber como esta hecho este menú con las imágenes https://myspace.com/discover/videos
En cada enlace del menú hay dos imágenes es esto lo que me gustaría aprender, gracias de nuevo...
Ese es el último en el cuál estaba trabajando, pero surgieron algunos problemas. No me cargan los sprites, la verdad no se bien porque. Pero bueno acá te dejo un tutorial en inglés http://youtu.be/Tl6bceyTjFw .
Espero que te funcione, quizás pronto pueda solucionar el problema y haga el próximo video.
Para hacer aparecer los iconos he añadido estas dos clases, en el scss:
.nombredelprimericono{ background-position: left top; background-repeat: no-repeat; @include iconos-sprite(nombredelprimericono); }
.nombredelprimericono:hover{ background-position: left top; background-repeat: no-repeat; @include iconos-sprite(nombredelprimericono_w); }
Bueno es lo que he podido aberiguar, y se que hay mas formas de añadirlos spriter, asi que sigo a la espera de otro de tus tutos, haber si termino de verlos, y pronto te planteo mas dudas, gracias de nuevo...
Genial los videos.
ResponderEliminarGracias
Estupendo tus tutos sobre sass, de lo mejor y esto se agradece...
ResponderEliminarPero me pregunto si existe la posibilidad de hacer un tuto con sprite, he estado viendo la documentación en: http://compass-style.org/help/tutorials/spriting/ pero no me entero, para ser mas concreto me interesa saber como esta hecho este menú con las imágenes https://myspace.com/discover/videos
En cada enlace del menú hay dos imágenes es esto lo que me gustaría aprender, gracias de nuevo...
Salu2
Ese es el último en el cuál estaba trabajando, pero surgieron algunos problemas. No me cargan los sprites, la verdad no se bien porque. Pero bueno acá te dejo un tutorial en inglés http://youtu.be/Tl6bceyTjFw .
ResponderEliminarEspero que te funcione, quizás pronto pueda solucionar el problema y haga el próximo video.
Saludos
Ok te comento como voy...
ResponderEliminarEn la carpeta "img", he creado otra carpeta y la he llamado "iconos", aquí he colocado las imágenes con la extensión png, para generar el sprite...
Después en el scss he añadido el import de esta manera:
@import "../img/iconos/*.png";
Ok después de guardar el archivo, me voy a la carpeta "img" y hay me aparece el sprite...
en el css me encuentro con esto:
.iconos-sprite, .nombredelprimericono, .nombredelprimericono:hover {
background: url('/img/../img/iconos-sb4e94f0062.png') no-repeat;
}
He observado que en la url para hacer aparecer a las imágenes se repite el "img", por lo que e optado por borrar el "/img/", quedándome con esto:
.iconos-sprite, .nombredelprimericono, .nombredelprimericono:hover {
background: url('../img/iconos-sb4e94f0062.png') no-repeat;
}
Para hacer aparecer los iconos he añadido estas dos clases, en el scss:
.nombredelprimericono{
background-position: left top;
background-repeat: no-repeat;
@include iconos-sprite(nombredelprimericono);
}
.nombredelprimericono:hover{
background-position: left top;
background-repeat: no-repeat;
@include iconos-sprite(nombredelprimericono_w);
}
Bueno es lo que he podido aberiguar, y se que hay mas formas de añadirlos spriter, asi que sigo a la espera de otro de tus tutos, haber si termino de verlos, y pronto te planteo mas dudas, gracias de nuevo...
Salu2
Hola,
ResponderEliminarno hay que especificar la carpeta img. Porque ésta ya esta especificada en el archivo config.rb.
No puedo estar muy ágil con los tutoriales últimamente porque estoy estudiando en la universidad y me come bastante tiempo.
Saludos y gracias por ver los videos, también me alegra de que estén sirviendo :)