Esto último tiene una aparente utilidad para los obsesos anti-copia, pero digo aparente porque SIEMPRE hay alguna manera de copiar cualquier cosa y lo único que se puede conseguir es demorarlo unos segundos.
Para lo de cambiar el color usaremos el pseudo-elemento ::selection que hace lo que aparenta su nombre y que no podía ser otra cosa que permitirnos aplicar propiedades a lo que seleccione el usuario.
En un primer caso, si no va asociado a ninguna clase, este código provocará que toda la página se vea afectada. Nótese que he utilizado los dos puntos repetidos, ya que en mis pruebas, con sólo un juego el navegador no lo interpretaba:
::-moz-selection {background: red;}
::selection {background: red;}
::selection {background: red;}
Ya estáis tardando en probar cómo ocurre lo prometido cuando seleccionáis cualquier texto de esta página.
Bueno, en todas todas no. Evidentemente, si creamos una clase con este selector y luego lo aplicamos a una parte en concreto, el cambio de color sólo afectará a esa parte:
.verde::-moz-selection {background: green;}
.verde::selection {background: green;}
.amarillo::-moz-selection {background: yellow;}
.amarillo::selection {background: yellow;}
.azul::-moz-selection {background: blue;}
.azul::selection {background: blue;}
.verde::selection {background: green;}
.amarillo::-moz-selection {background: yellow;}
.amarillo::selection {background: yellow;}
.azul::-moz-selection {background: blue;}
.azul::selection {background: blue;}
<div class="verde">La selección de este texto es verde</div>
<div class="amarillo">La selección de este texto es amarillo</div>
<div class="azul">La selección de este texto es azul</div>
<div class="amarillo">La selección de este texto es amarillo</div>
<div class="azul">La selección de este texto es azul</div>
La selección de este texto es verde
La selección de este texto es amarillo
La selección de este texto es azul
¿Y qué ocurre cuándo escogemos el mismo color de texto que de fondo? Pues eso, que el texto no es visible. En este caso nos reservamos ese efecto para cuando el texto es seleccionado:
.esconder::selection {color: white;background: white;}
<div class="esconder">La selección de este texto lo hace desaparecer</div>
La selección de este texto lo hace desaparecer
Para terminar esta parte, en el enlace encontraréis una tontería en la que se aplica de forma creativa esta propiedad; no os la perdáis.
Si queréis hacer lo mismo con una imagen propia, sólo tenéis que acudir a esta herramienta online.
Para terminar, una forma de deshabilitar la selección de texto, pero como decía al principio, sólo con el afán de molestar un poco a los plagiadores profesionales. Nada más.
Esto se hace con user-select:
.nomarcar {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
<div class="nomarcar">Texto anti-copia... pero poco</div>
Selecciona este texto anti-copia
Sigue, sigue, que por las buenas no vas a poder ;)
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
genial... muy útil.. y enhoramala a los que tratan de impedir el copy-paste...
ResponderEliminarhola llevo tiempo siguiendo tu blog, me gustaria que cuando tengas tiempo te pases por el mio y me des tu opinion http://hoywtf.blogspot.com
ResponderEliminarNo suelo opinar mas que cuando se me pregunta por una cuestión técnica. Los gustos estéticos de cada cual son variopintos y mi propio blog es un ejemplo de que no tengo demasiado buen gusto ;)
EliminarHola una consulta, antes de todo soy nuevo en este mundo de los Blog pero me gusta y también el Blog está interesante y sirve de mucha ayuda para nosotros, yo tengo un problema h1, h2, bueno todos los h que existen, quisiera que me ayudes a ordenar esto en mi Blog, hice la grande cambiando en artilugios, los h3 por h1 y ahora no se como devolverlos, quisiera que me ayudes mi Blog es www.entodokikerom.com
ResponderEliminarContestado hace tres días en otro comentario igual que dejaste en otra entrada. Exactamente aquí.
EliminarHola @oloblogger, disculpa que use una entrada que no va con el tema, pero tengo varias preguntas qué hacerte y por más que he buscado en el blog aún no encuentro las respuestas:
ResponderEliminar1- Cómo puedo eliminar de mi blog el texto "Mostrando las entradas con la etiqueta" y ponerlo así como lo tiene tu blog? Tienes el tutorial aquí?
2-¿Dónde puedo conseguir un tutorial con los mismos botones para compartir en Pinterest, Twitter, Facebook, ect. Que usas actualmente al final de cada entrada?
3-¿Cómo puedo Mostrar arriba en cada post las veces que el mismo ha sido visto o leído? como en Wordpres "116 lecturas". He buscado en Google cómo hacer esto, pero los tutoriales que encuentro hasta ahora son muy antiguos y ya no funcionan.
Gracias anticipadas por tus respuestas.
Hola. Voy por puntos.
Eliminar1. Aquí está cómo hacer eso, aunque el estilo es cosa tuya: Cabecera para páginas de etiquetas. Secciones del blog
2. En esta entrada encontrarás cómo instalar tres de ellos. Los de otras redes se añaden repitiendo la estructura de estos y añadiendo el código propio de cada servicio: Botones sociales. Twitter, Facebook y Bitácoras
3. No sé cómo hacer un contador de ese tipo. Creo que sería necesario tener una base de datos para poder almacenar las lecturas y Blogger no la tiene... al menos accesible para nosotros. Se podría poner un contador externo tipo Statcounter, pero sería mucho trabajo dar de alta todas las direcciones posible una por una.
Hola, yo tengo muchas veces el texto o una parte del texto marcado en blanco! Sin embargo no lo modifiqué! Como puede ocurrir esto? Y ahora descubro aqui que lo puedo cambiar hasta mas colores! Gracias Sophie
ResponderEliminarPues sinceramente, no tengo ni idea :)
EliminarHola OLOMAN, disculpa, quiero hacerte una pregunta fuera de tema: Quiero sacar el borde de las imagenes de mi blog, nose si me puedes ayudar (me parece que mi blog utilizo el diseñador de plantillas, por que cambie la tipografia de el blog desde ahí). Mi blog es este: http://facucity.blogspot.com.
ResponderEliminarGracias.
No tienes ninguna imagen publicada donde pueda ver eso, pero es que en tu código tampoco observo que exista ningún borde. Sólo hay una sombra que se añade desde el CSS.
EliminarHola, una pregunta ¿para cambiar el color de selección, cuál de los dos códigos debo pegar en mi web, y dónde? soy nuevo en Blogger y entiendo muy poco respecto a lo que es hacer un blog, y editarlo. Gracias de antemano.
ResponderEliminarEn un principio es el primer trozo de código el que tienes que poner en tu web, cambiando el color por el que desees. El sitio dónde ponerlo es en la parte CSS. Podría ser entre las etiquetas SKIN de tu plantilla o en el apartado Avanzado del diseñador de plantillas.
EliminarEstupendo recurso, Olo.
ResponderEliminarResulta una muy buena solución, pero no sé si existirá algún remedio para evitar que el color de selección de elementos como los saltos de línea quede sin modificar.
¡Gracias!
No que yo conozca.
EliminarA tí te podría venir bien el anti-copia que comento aplicándolo al selector .post-body, pero ya digo que al final es algo inútil si el copiador se empeña.
Hola a todos, alguien me puede decir como hago para que en una lista de formulario cuando se seleccione cada opcion, salga de un color diferente? ya logré que al abrir la lista cada linea tenga su color, pero necesito que ese color se mantenga cuando la opcion esté activa...
ResponderEliminargracias
Supongo que te refieres a un SELECT, pero no lo he hecho nunca. Si me pasas la dirección dónde lo tienes quizás pueda indicarte algo.
Eliminar