How to Change Text Selection Styling with CSS скачать в хорошем качестве

How to Change Text Selection Styling with CSS

Learn how to change the default selection styling using the CSS ::selection pseudo-element, which allows us to target and change styling for the portion of the document that is selected by the user. By default, most of the browsers highlight the selected text in blue background. However, using the ::selection pseudo-element we can override this setting, in order for example to match the overall theme of our website. Of course, changing the default selection styling is not by any means necessary, it is just one of those simple touches that can make a website feel more refined and vibrant! Currently, browsers only support a small subset of CSS properties for the ::selection pseudo-element, the most commonly used being: background-color, color and text-shadow. When changing the default selection styling, accessibility concerns might arise, so it is important to ensure that selected text is still readable (e.g. maintaining high enough contrast between background and font color). In this video, we first go through a few websites, coding blog sites to be exact, in order to see if and how they are using this feature and we then proceed to implementing our own styling for the ::selection pseudo-element. 00:00 - Introduction 00:36 - Examples from Websites 07:16 - Styling the ::selection pseudo-element Enjoy 😊 Don’t forget to like, share, subscribe and I would love to hear your thoughts in the comments section below! Code for this Project: https://codepen.io/Coding_Journey/pen... Support the Channel 💙☕🙏 PayPal: https://paypal.me/CodingJourney Suggested Videos: CSS box-shadow Editor:    • CSS box-shadow Editor   Zebra-Striped List (HTML & CSS):    • Zebra-Striped List (HTML & CSS)   Share Selected Text with JavaScript:    • Share Selected Text with JavaScript   Colorful Background with linear-gradient:    • Colorful Background with linear-gradient   Coding Memes:    • Coding Memes   Codepen: https://codepen.io/Coding_Journey/ Twitter:   / codingjrney   Email: codingjourney123@gmail.com Subscribe 💖    / @codingjourney