Los efectos de desplazamiento de CSS son bastante simples de crear, y los efectos de desplazamiento básicos se pueden implementar y modificar rápida y fácilmente con otras opciones. Las hojas de estilo en cascada (CSS) es un lenguaje que se usa para crear el estilo y el diseño de un documento creado en un lenguaje de marcado, y se puede usar para crear fácilmente efectos de desplazamiento. Los efectos de desplazamiento son cambios que se producen con texto, imágenes u otros objetos de un documento cuando el puntero controlado por el ratón se desplaza sobre el objeto. Los efectos de desplazamiento de CSS se crean normalmente dentro del código CSS y se pueden implementar de forma rápida y eficaz.
Uno de los tipos de efectos de desplazamiento CSS más fáciles de crear es un efecto que provoca un cambio en un enlace en un sitio web cuando se desplaza sobre él. Por ejemplo, alguien puede querer crear un vínculo textual que se parezca al texto estándar, o que sea de un color diferente al del resto de la página, pero cuando se «coloca el mouse sobre» o «se coloca el cursor sobre», aparece subrayado o envalentonado. Cómo se hace esto, precisamente, dependerá típicamente de la codificación exacta utilizada en la página, pero en un caso simple, el efecto de desplazamiento CSS se puede agregar dentro de las reglas CSS dentro de la sección de «estilo».
Se crea una nueva regla para el efecto de desplazamiento CSS usando la etiqueta apropiada para el objeto al que se agrega el efecto. Por ejemplo, el texto que se elige puede ser parte de una lista o seleccionarse dentro del cuerpo de una página web. Este texto debe tener una etiqueta específica asociada en la codificación del cuerpo. Con esta etiqueta anotada, la regla se puede crear para establecer un efecto de desplazamiento CSS para cualquier objeto con esa etiqueta dada.
Usando texto, por ejemplo, si desea que un enlace se subraye cuando un usuario pasa el mouse sobre él, puede comenzar por etiquetar ese enlace dentro del código del cuerpo y crear una regla especial para esa etiqueta. Dentro de esta regla, puede indicar de qué color debe ser el texto, para que se destaque fácilmente del texto circundante e indica visualmente que el usuario puede querer desplazarse sobre él, lo que activará el efecto de desplazamiento CSS. Este efecto se agrega creando una «pseudo-clase de desplazamiento» a la etiqueta de la línea de texto.
Si la etiqueta para el texto, por ejemplo, fuera «a», entonces usaría la pseudo-clase que se veía como «a: hover {…}» con el efecto de desplazamiento CSS deseado indicado dentro del corchete. Utilizando el ejemplo anterior, si el efecto deseado fuera subrayar el texto cuando se coloca el cursor sobre él, se leería «decoración de texto: subrayado;» dentro del soporte. Hay varios efectos de desplazamiento diferentes que se pueden crear para diferentes objetos, y cada uno tiene un comando específico para crear el efecto, pero el proceso es similar en la mayoría de los casos.