Slider RWD pantalla completa paso automático. Puro Css 14.8.15
Un slider en puro Css ocupando toda la pantalla y RWD. Se adapta sin deformar las imágenes a cualquier viewport ocupándolo por completo. Si añades contenidos se produce el efecto parallax
Slider RWD pantalla completa paso automático. Puro Css
Lo siguiente es una demo de las posibilidades de css utilizando viejas técnicas y nuevos valores o propiedades para lograr un slider que se muestra cubriendo toda la ventana (con independencia del tamaño y su relación x/y). Puede alojar cualquier tipo de contenido.
La idea y el esquema de bloques es sencillo. Todo se reduce a una caja general (header) que ocupará toda la ventana y dentro el slider con sus diapositivas individuales. El tamaño de todo lo marcará el tamaño de la ventana o viewport.
Esto facilita y simplifica incluir más o menos diapositivas y los cálculos necesarios para que todo funcione correctamente, pues sólo es necesario ajustar un par de valores para cubrir cualquier situación (tamaños y número de sliders).
Pero antes de entrar a ver en detalle y explicados paso a paso los códigos implicados aquí tienes un par de enlaces y la demo en funcionamiento
El marcado Html
El etiquetado no es crítico, puedes adaptarlo sin mayor problema a cualquier situación. Yo parto del siguiente para la demo:
<header class="cont-slider">
<section class="slider">
<article class="slide uno"><span>Por Sendas </span></article><!--
--><article class="slide dos"><span>Veredas y</span></article><!--
--><article class="slide tres"><span>Carriles del</span></article><!--
--><article class="slide cuatro"><span>Bosque Css</span></article><!--
--><article class="slide cinco"><span>con Kseso</span></article>
</section>
</header>
Los comentarios vacíos <!-- -->
Si al ver los comentarios vacíos <!-- --> intercalados entre cada article y repartidos entre las dos líneas te has imaginado que los slides van a ir declarados como elementos inline-block y que no quiero espacios de separación entre ellos ¡acertaste!. Si desconoces y te suena a nuevo este aspecto, pasa por el artículo explicativo: Display: inline-block y su empeño en dejar espacios en blanco de separación. 8 soluciones.
El objetivo de este html y todas las reglas Css previas a la animación es crear una estructura como el siguiente esquema de bloques:
Declarando estilos o la magia del Css
Vamos con las cajas de afuera hacia dentro para lograr nuestro propósito.
Paso 1: el contenedor general.
El header que hace las veces de contenedor general en los dos significados de "contenedor": que aloja a los otros y a la vez que los mantiene dentro sin permitir que sobresalgan y se muestren:
.cont-slider {
position: relative;
height: 100vh;
max-height: 100vh;
width: auto;
min-width: 100vw;
margin: 0 auto;
overflow: hidden;
}
Opto por declarar las medidas en vw y vh para asegurarme que el slide va a ocupar toda la ventana del navegador o viewport del aparato, con independencia de su tamaño y relación de la ventana y que el slider sea hijo directo o no del body. Más info en este artículo.
En la anchura y si es hijo directo del body la unidad vw puede cambiarse por %. Son equivalentes. Pero en la altura el % ya toma como base de cálculo a su padre, que nunca será el viewport sino el body. Y sólo en ocasiones puntuales coincidirán.
Como es lógico, para una realización "industrial" deberás sopesar si mantener estas unidades o cambiar por otras mejor soportadas.
Es en esta caja en la que hay que adaptar y declarar las medidas que queramos que tenga nuestro slider. Si quieres que no ocupe toda la pantalla y sólo una porción de ella, aquí debes actuar.
Paso 2: El slider o caja deslizante
Con el paso 1 hemos construido un visor para el deslizante. Gracias a la declaración overflow: hidden nos aseguramos que no se mostrará más porción de su contenido que la que deseemos y ni aparecerán scrolls ni movimientos al desplazar los sliders.
Así que en este paso lo que hacemos es crear una caja contenedora de todas las diapositivas o slides posicionada de forma absoluta en la esquina superior izquierda de su padre:
.slider {
position: absolute;
left: 0;
top: 0;
width: 500%;
height: 100%;
}
En esta regla, la única declaración que hay que modificar si decidimos variar el tamaño o número de imágenes a mostrar es la anchura. La altura se adapta al valor de su caja padre. Y la anchura como ves son tantos 100% como deslizantes mostremos. En la demo son 5, así que width: 500%.
Paso 3: los slides o pasos individuales
El css asociado a estas cajas es el siguiente:
.slide {
position: relative;
display: inline-block;
width: 20%;
height: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
Como queremos que se coloquen adyacentes y en la misma línea (eje x) están como relative e inline-block. Y su altura al ser del 100% computará sobre la de su ancestro, que vuelve a ser el valor declarado en el header.cont-slider
El valor de la anchura es el que hay que modificar en función del número de slides que compongan el slider. Como en la demo son 5 = 1/5 ó 20%. Si fuesen 2 sería el 50% y si 10 el 10%. Así que una pequeña sugerencia para que no haya pequeños errores de redondeo. Evita el 3 y sus múltiplos (33´33...%) o aquellos que no sean divisores perfectos de 100.
Con las declaraciones de grupo background y los valores elegidos nos aseguramos que:
- background-size: cover;
- La imagen cubrirá toda la caja sin deformarse. Se escala sin deformarse y el sobrante (en función de la relación ancho/alto de la imagen y su caja) no se muestra. Queda fuera de la vista.
- background-position: center center;
- El lugar referente para ubicar la imagen de fondo. A voluntad de cada uno en cada situación.
- background-attachment: fixed;
- ¿Cómo deseamos que se comporte la imagen al desplazarse la caja que la contiene? Elijo el valor fixed porque para la demo quiero lograr un efecto de que la imagen a mostrar "llega y se sobrepone" a la que se está viendo, sin desplazarla.
Este valor también hace el efecto parallax si tenemos más elementos que el slider y hay scroll vertical para mostrarlos.
Puedes ampliar este aspecto en el artículo Novedades Css3 en la propiedad background Así podrás crear otros efectos según tus gustos o necesidades.
Paso 4: asignado las imágenes individuales
Si vuelves al marcado html verás que cada diapositiva o article tiene asignada dos clases. Una común a todos (.slide) y otra única y diferente para cada cual (.uno, .dos...) Son estas las utilizadas para incluir una imagen diferente en cada uno vía fondo:
.uno {
background-image: url(ruta/pic1.jpg);}
.dos {
background-image: url(ruta/pic2.jpg);}
.tres {
background-image: url(ruta/pic3.jpg);}
.cuatro {
background-image: url(ruta/pic4.jpg);}
.cinco {
background-image: url(ruta/pic5.jpg);}
Esto no tiene "más allá"
Paso 5: la leyenda
En la demo sólo hay una leyenda o título en cada diapositiva, colocada en el lateral izquierdo y centrada en la vertical. Para ello y para que su tamaño se ajuste en función del tamaño del viewport, como el resto de elementos, vuelvo a utilizar las mismas unidades en el tamaño de la fuente, la altura de línea y top: vh. Vuelvo a repetir: en producción sopesa el uso de esta unidad.
.slide span {
background: rgba(0, 0, 0, 0.3);
border-radius: 0 5vh 5vh 0;
color: #FFF;
position: absolute;
left: 0;
top: 40vh;
font-size: 20vh;
line-height: 20vh;
border: 1px solid rgba(255,255,255,.45);
border-left: 0 none;
}
Si tienes alguna duda sobre los valores para el centrado consulta el artículo Centrando al centro con Css. 20+2 maneras de lograrlo.
Con todo lo anterior ya tenemos todo listo y en su lugar, pero estático, esperando la chispa que lo anime. EL esquema de bloques de lo logrado sería el de la imagen (de nuevo):
La animación del slide
A estas alturas sólo nos queda dar movimiento a la realización. Para hacerlo sencillo y fácil de adaptar a cualquier situación actuamos no sobre cada slider individual sino sobre la caja que los contiene o <section class="slider">. El conseguir el esquema de bloques y sus relaciones era para este paso.
Paso 1: animation
Así que lo primero es añadir la declaración animation a ese elemento:
.slider {
animation: deslizante 25s ease-out 0s backwards infinite;
}
deslizante es el nombre de la animación que construiremos a continuación en la @keyframes deslizante {}. 25s es el tiempo que se tomará cada ciclo completo de la animación. ease-out es la forma o comportamiento de cada diapositiva al pasar de no visible a visible. 0s es el delay o retardo al iniciarse la animación. backwards es el valor para cómo se debe comportar la animación completa al completar un ciclo para regresar al inicio del siguiente. infinite es el número de ciclos que se repite la animación.
Para una mejor comprensión de la propiedad animation y todas las que engloba y sus valores posibles tienes el artículo @keyframes Animaciones con Css3. Guía de inicio
Paso 2: @keyframes
Todo listo para establecer cada uno de los pasos o fotogramas que componen la animación del slide. Para ello actuamos cambiando el valor de la propiedad left de la caja "slide" contenedora de cada diapositiva. Primero todo junto:
@keyframes deslizante {
0% {left: 0%; } /*Se muestra la 1ª*/
15% {left: 0%; } /*Tiempo de transición entre 1 y 2*/
20% {left: -100%; } /*Se muestra la 2ª*/
35% {left: -100%; } /*Tiempo de transición entre 2 y 3*/
40% {left: -200%; } /*Se muestra la 3ª*/
55% {left: -200%; } /*Tiempo de transición entre 3 y 4*/
60% {left: -300%; } /*Se muestra la 4ª*/
75% {left: -300%; } /*Tiempo de transición entre 4 y 5*/
80% {left: -400%; } /*Se muestra la 5ª*/
94% {left: -400%; } /*Tiempo de transición entre 5 y 1*/
100% {left: 0; } /*Vuelta al inicio*/
}
Como ves por los comentarios, hay tantos puntos de variación en el valor de 'left' como imágenes pasantes: 5. Y el valor del % de cada uno está relacionado con el número de ellos: 100/5= 20. Esto porque queremos un tiempo de visualización igual para todas. Si queremos alterar este aspecto y mostrar unas imágenes más tiempo que otras sólo es cuestión de alterar estos valores.
Los keyframes intermedios en los 15%-35%-45%... con el comentario "tiempo de transición:
El comportamiento es mostrar estática cada imagen durante un tiempo y a continuación un movimiento para ver la segunda. Y esto realizarlo con cada una.
Para ello introducimos esos valores. Así desde 0% a 15% la 1ª imagen se ve fija en su posición y la transición se realiza entre el 15% y 20%. Con las demás hacemos igual.
De la proximidad o no de estos valores de transición al de muestra (del 15% al 20%) dependerá la velocidad con la que cada imagen se desplaza desde la derecha hasta quedar fija en la izquierda.
Artículo publicado originalmente el 15 de Mayo de 2013. Actualizado el 13 de Agosto de 2015.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Hola. Me vino muy bien este artículo ya que utilice parte del código para un slider de entradas populares para una plantilla de Blogger en la que estoy trabajando. Gracias Kseso por el aporte, realmente me sirvió
ResponderEliminarEn verdad muy bueno lo que haces sigue así.
ResponderEliminarmuy bueno, lo unico es que no funciona con el navegador de google chrome
ResponderEliminarmuy bueno, lo unico es que no funciona con el navegador de google chrome
ResponderEliminarDesconozco qué versión de Chrome tiene y en qué sistema operativo no le funciona.
EliminarPero ya le aseguro que en el momento de su realización y ahora era y sigue siendo plénamente funcional en Chrome en windows (Vista).
Si eres tan amable de indicarme esos detalles lo estaría mirando.
Un saludo
de antemano muchas gracias por la contestación.
ResponderEliminarmira en cualquier cualquier sistema operativo ocurre la falencia, con el navegador.
curiosamente en el demo en su pagina funciona bien con el navegador chrome
pero al bajar el codigo y lo renombro como por ejemplo slider.html, y abro el archivo con la ultima version de internet explorer y firefox funciona correctamente, pero con el navegador chrome queda estatico en la primera imagen.
¿Has añadido los correspondientes prefijos privativos que se necesiten o en su defecto alguna herramienta para ello tipo prefixfree?
EliminarDisculpa Kseso pero yo le agrego los prefijos y aun así no me aparecen las imágenes que crees que pueda ser gracias de antemano por tu colaboración.
EliminarCreo que te debiste perder este artículo:
EliminarConsultas, acertijos y bolas de adivino
Es de todo punto imposible saber porqué no te funciona en base a tu consulta ya que está totalmente vacía de información útil.
Lo siento si ves esta respuesta como excesivamente franca y directa, pero es así al no tener yo dotes adivinatorias.
Un saludo
No te preocupes no me molesta es que estoy como en el limbo pero voy a comenzar desde cero nuevamente y te cuento como me va en todo caso gracias y super tu Blog que bueno que compartas tus conocimientos.
Eliminarno la verdad no se como hacerlo, diculpas por la ignorancia, si me puedes colaborar te agradezco
ResponderEliminarok si tenias razon muchas gracias
ResponderEliminarSaludos amigo Etelberto me podrías decir como solucionaste el problema gracias de antemano por tu colaboración.
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHay que reconocer que cada día son más ingeniosos para hacer espam.
EliminarNo miré el código de Pedro Morales, porque no le pienso regalar un click a su sitio, pero es verdad que la gente de Chrome cada día está peor. Quitó el prefijo de '-webkit-keyframes' pero aún no de los '-webkit-animation'; y no tiene retrocompatibilidad, por eso los códigos "viejos" no andan.
O peor, en algunos casos cuelgan el navegador.
Para sitios con un escript de compatibilidad, que ahorra todos los prefijos en el código fuente, es una patada en la ingle. Yo estoy "corrigiendo" todos mis ejemplos en Codepen porque ya no funcionaban.
A ver, Pedro Morales
Eliminar¿Serías tan amable de explicarnos la finalidad y razón de ser de tu comentario?
Y ya puestos, expláyate sobre "aquí está el código correcto y completo para que funcione en chrome también"
¿Significan tus palabras que al original le falta algo y que además falla en Chrome?
Entenderás que, si no nos das más información al respecto y aclaras tu comentario, piense que es un desatino sólo para hacer spam y que por lo tanto actúe en consecuencia.
Gracias.
Publicamos casi juntos, Kseso. Al final yo me adelanté y describí la situación que debió explicar primero Pedro Morales, antes de su enlace a la "versión corregida". Que también hay que probar si pasa en todos los sistemas operativos.
EliminarPor supuesto que el apuro por comentar fue para refregarle que todos nos dimos cuenta de que estaba haciendo espam, porque sabés que no me aguanto, es más fuerte que yo; pero insisto y me adhiero a tus palabras : lo importante era explicar si algo andaba mal y por qué. Después se ve la solución.
¿Vale la pena hacer una entrada del blog por esto? En dos o tres versiones más seguro que Chrome lo ajusta, como hizo con los otros bugs. Pero sí me parece importante recomendar que estos experimentos los hagan en Canary y no en los Chromes para usuarios finales.
Si, publicamos en el mismo minuto, Furoya.
EliminarCon tanta referencia a Chrome esto es lo que yo observo:
Chrome Versión 33.0.1750.149 m recién actualizado y en la versión anterior la demo funciona correctamente.
Chrome Versión 35.0.1887.0 canary recién actualizado y en la versión anterior la demo funciona correctamente.
Ambos en Windows Vista.
Aparte de eso, soy de los que piensa que en las demos y artículos "temáticos" un dato muy significativo a tener presente a la hora de evaluarlos o reportar posibles errores o fallos de funcionamiento es la fecha de publicación. Por eso yo la incluyo por partida doble: al inicio y al final de cada artículo.
Punto aparte es que en este blog no se realizan artículos de "paso a paso" o demos de busca esta línea, copia y pega.... No es esa mi intención ni mi motivación.
Todo lo anterior a la espera de que Pedro Morales cumplimente con la información concreta y precisa.
Un saludo
a mi me pasaba igual no me andaba en Chorome.... lo arregle agregando estas dos lineas
ResponderEliminar.slider {
animation: deslizante 25s ease-out 0s backwards infinite;
-webkit-animation: deslizante 25s ease-out 0s backwards infinite;
position: absolute;
left: 0;
top: 0;
width: 500%;
height: 100%;
y
@-webkit-keyframes deslizante {
0% {left: 0%; }
15% {left: 0%; }
20% {left: -100%; }
35% {left: -100%; }
40% {left: -200%; }
55% {left: -200%; }
60% {left: -300%; }
75% {left: -300%; }
80% {left: -400%; }
95% {left: -400%; }
100% {left: 0; }
Bueno, por lo menos no pusiste spam...
EliminarY no "arreglaste" nada. Simplemente pusiste los prefijos que ya se dijo siempre por aquí que Chrome aún los necesita.
Si sos un archinovato, supongo que para vos puede ser una novedad, pero el mensaje que se comentaba más arriba "sugería" que estaba escrito por un ingeniero (¿?) con conocimientos de tecnología web. Y nadie que sepa un mínimo de CSS ignora que en los Webkit todavía se trata a 'animation' (a 'keyframes' ya no) como declaración propietaria, y es necesario meterle prefijos. Lo que no está mal, porque todavía no está aprobado definitivamente. Así que venir con esa "solución" era poco menos que una burla.
¡Si éste fuese un blog para cutanpasters, todavía...!
(Bah! Otra vez me apuré. Ahora viene el patrón y capaz que borra mi comentario también, porque soy un amargo intolerante.
:-P )
¡ala! Sebastian Juri
Eliminar¿Quién habría podido imaginar que serían necesarios los prefijos privativos en según qué propiedades y/o valores de según qué navegadores en según qué versiones en según qué sistema operativo?
Ummmhhh!
¡Ahí va! A mi mismo en este mismo artículo un poco más arriba de tu comentario en respuesta a la primera vez que se plantearon malfuncionamientos.
Un saludo y gracias por el aporte.
Hola, muchas gracias por el aporte de la solución del problema en Chrome, el problema tambien se me presento en Safari y Opera para MacOX. Como sugerencia, si ya se detecto y soluciono el problema por que no se modifica de una vez el codigo fuente original para evitar frustaciones en futuros usuarios novatos como un servidos. Saludos
ResponderEliminarDesde el 11 de Septiembre de 2013 hay una respuesta mía en comentarios que dice:
Eliminar¿Has añadido los correspondientes prefijos privativos que se necesiten o en su defecto alguna herramienta para ello tipo prefixfree?
El código fuente no necesita modificación ninguna. La demo es plenamente funcional entre otras razones porque para suplir la necesidad de prefijos privativos en según que propiedades/valores en según qué navegadores/versiones/SO´s hace uso de algo tan común y conocido como -prefix-free.
Así que no me corresponde a mi suplir las carencias de herramientas de quien desea usar la demo (esta o cualquier otra del blog). En ti está saber qué usas y qué no. Y a partir de ahí suplirlo.
Aunque también pudiera ser que yo esté equivocado y aún sea necesario en 2015 añadir una leyenda en todos los artículos recordando el hecho de que quizás haya, o no, propiedades y/o valores que necesitan, o no, del uso de prefijos privativos.
Un saludo
Regularmente no comento pero creo que las respuestas de los administradores están como preconcebidas a que uno es bruto y lento......La verdad por cuestiones de una correcta visualización uno debe pensar en todos los detalles. Es cierto que no "vas a poner un leyenda" en cada articulo aclarando mmmmm pero hey ¿porque no? acaso solo "master en front-end entran aquí? si acaso entran (creo que sí) ellos sabrán como aplicar, pero la verdad y creo que muchos son los que o recién empiezan o tienen conocimientos muy básicos y por eso hay que quitarle su valor?.......Esto me recuerda las instituciones gubernamentales y su trato para los demás, que como ellos no tienen que rendir una "correcta atención al cliente" entonces tratan a las pedradas a los humildes usuarios que pagan sus salarios...............seguro ustedes no dependen de nosotros y su sitio es más un hobbie, excelente pero entonces así como ustedes dicen las cosas tan "sacarsticamente" entonces lean esto también.........Si tengo un sitio y veo que hay diferentes tipos de usuarios con diferentes niveles ¿No sería mejor ajustar los elementos para tener algo nutrido para ambos? y no decir "archinovato" y otras palabras que no son éticamente correctas para personas que brindan sus conocimientos.............
ResponderEliminarAparte si hablamos de el fin de esto es el conocimiento pero creo que no es algo secreto que muchos que realizan páginas web o en el momento quieren aplicar esos principios (siendo novatos) van a aplicarlo para todos los navegadores.......Creo que no es malo ser "archinovato" ni desconocer que google te puede dar todo, pero si siento que no es la manera correcta y fallan en esa parte.
Tomenlo como quieran y si quieren eliminen el mensaje o suéltense en sarcasmos pero creo que soy un usuario web común que veo una falencia y ojalá lo vean para mejorar y no para cerrarse más en sus pensamientos porque a pesar de todo mi decepción este sitio ha sido muy bueno y es muy bueno en conocimientos y recursos.
Saludos.
Hola Josue Baloy.
EliminarQue yo sepa, administrador de este blog hay uno sólo. Los demás opinamos porque nos dan un lugar para hacerlo. En mi caso particular, tengo un estilo "sarcástico"; nada contra nadie, mi personaje es así. Y agradezco que aún no me hayan echado de aquí también.
Te diría que si te ofende, lo hables con tu analista, porque no hay motivo que no se justifique con algún complejo de inferioridad. Pero por el bien de la convivencia, no te lo digo.
Ahora debería esperar un comentario —justamente— del administrador, pero tengo unos minutos libres, y no me aguanto la respuesta.
Y es porque planteaste tu punto muy bien. Se entiende y evidentemente lo elaboraste (algo no muy común en la mayoría de estas comunidades). El problema es tu perspectiva.
Desde la mía, éste es un blog de CSS avanzado. No hay ningún problema en cruzarse con principiantes, pero no pueden reclamar nada. Antes tienen que estudiar CSS, que se hace con manuales, cursos y tutoriales que abundan por toda la web. De otra forma es un desperdicio, porque efectos complejos como éste solamente les sirven para copiar y pegar. Como opinión personal, yo desprecio mucho a esa gente.
¿Para qué querés otro blog mediocre, que nivele para abajo, cuando podés tomar de ejemplo uno más elaborado? Estos sitios no son para enseñar CSS : son para enseñar. Acá vas a aprender a pensar lo que de otra manera no se te va a ocurrir, vas a aprender a leer y comprender, vas a aprender a escribir, a organizar información y cómo presentarla.
Antes de que alguno me venga a chicanear, te cuento que estoy colaborando con algunos artículos ... sobre javascript.
Si los mirás, vas a notar que no tienen nada que ver con la parte de CSS. Son muy básicos, elementales, pensados justamente para que un desarrollador o diseñador en CSS le pierda el miedo y deje de usar libraries enormes para efectos que se pueden hacer con unas pocas líneas, entendiendo lo que escriben. Mis colaboraciones exasperan a programadores de verdad, son una vergüenza; pero como te explico, su fin es otro. En el caso de CSS, no hay dudas : es avanzado. Y aún así, se entiende perfectamente. Si alguien viene a reclamar "que no le anda", es un cutanpaster, alguien que debería leer un tutorial antes de meterse a cambiar nada. El mayor problema de este artículo es que viene gente que quiere "pegar" el código y nada más. Pero si les repetís media docena de veces que pongan los prefijos, y siguen insistiendo, ¿vos los llamarías "archinovatos"? Yo no, te aseguro que usaría una palabra que no es "eticamente correcta"; porque no cabe otra. Nos están faltando el respeto a todos.
Hola Josue
EliminarGracias por tu punto de vista y forma en que lo has expuesto.
Permíteme que, por respeto, no entre a "rebatir o replicar" tus opiniones. No ha lugar.
Sólo te expondré el otro punto de vista: el del administrador de este blog.
KsesoCss es un blog unipersonal. Tras él no hay "empresa" ninguna que "venda" nada, o que use este blog como "escaparate o promoción" de nada.
Es más, hasta hace escasas fecha ni publicidad había (y de momento la que hay es un experimento).
Así que lo que aquí se ofrece es totalmente gratis. Tanto que hasta para evitar "costes" a para quienes acceden con dispositivos móviles no se sirven según qué contenidos secundarios.
Dicho lo anterior, siempre he estado dispuesto a aclarar dudas y resolver problemas de los usuarios del blog. "By de face". Lo único que pido es que se planteen con un mínimo de rigor: Consultas, acertijos y bolas de adivino.
¿Que alguien no quiere tomarse un mínimo de trabajo a la hora de exponer su duda o problema? Pues la respuesta será acorde a ello.
Que va y deja un lacónico "a mi no me funciona". Posíblemente la respuesta será un "pues a mi sí".
Que se pregunta algo que ya está respondido en el post o algún comentario. Dudo que sea mi deber repetirlo "ad infinitum" una y otra vez porque quien pregunta ni se molestó.
Y sin olvidar que muchas veces quien así se comporta es un profesional. O al menos así se quieren hacer llamar. Profesional que cobrará por sus trabajos y/o ayudas a terceros.
En este artículo (tiene más de 2 años) todas los problemas al final resultaron producto de no usar prefijos privativos (y uno quizás de rutas de las imágenes). Conclusión: se copiaba el código Css tal cual estaba introducido en el pen pero ni se molestaban en ver en sus navegadores el procesado.
¿Que soy un borde? Posíblemente.
¿Que no uso el blog para hacer amigos? Seguro.
Pero a estas alturas de existencia de internet no quiero que me pase como a aquel cardiólogo que recibió un sucinto mensaje de quien ni se identificaba:
- "No me siento bien" decía.
Tras mil y una gestiones se descubrió que el remitente, vete tú a saber por qué recurrió al doctor, necesitaba un ebanista o tapicero.
El problema estaba en el asiento de la silla.
Un saludo.
Hola, por favor me gustaría saber como agregar un botón de "Ingresar al sitio". Gracias
ResponderEliminarHola, por favor me gustaría saber como agregar un botón de "Ingresar al sitio". Gracias
ResponderEliminarHola Katy
EliminarPodrías, por favor, leer el siguiente artículo que te enlazo y actuar en consecuencia? Gracias.
"Consultas, acertijos y bolas de adivino"
Bueno, sólo si realmente lo que buscas es ayuda para aprender y hacerlo por ti misma.
Si el objetivo fuese un código a medida ya te adelanto que no suelo hacerlo a través del blog. Y mucho menos desconociendo absolutamente todos los detalles de tu realización.
Un saludo
(Después de todos los comentarios anteriores, creo que lo de Katy es una humorada. Al menos a mí me hizo gracia. )
EliminarXD