الاختيار و CSS

أساسيات

p::selection {
   color: #fff;
   background-color: #000; 
}

الخصائص المدعومة :: الاختيار

تخصيص تأثيرات التحديد الخاصة بك

• تمت إضافة عنصر زائف ، بنفس النص الذي نختاره. ثم يتم تعيين العنصر الزائف إلى خاصية height: 50%ولون خلفية بيضاء.
• يقع العنصر الزائف فوق النص المصدر.

p {
  position: relative;
  color: #fff;
}

p:after {
  content: attr(data-content);
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #fff;
}

p::selection {
  background: rgba(76, 125, 225, 0.18);
}

h1:after {
  content: attr(data-content);
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(#fff, #fff) top/100% 50% no-repeat;
}

التحديد المتحرك

p {
    transition: background 0.3s ease-out;
}

p:hover:after {
  background-size: 100% 80%;
}

نص متعدد الخطوط

let paragraph = document.querySelector(".text");
const words = paragraph.textContent.split(" ");

paragraph.innerHTML = "";

words.forEach(function (word) {
  let wordItem = document.createElement("span");
  wordItem.setAttribute("data-word", word);
  wordItem.innerHTML = word + " ";
  paragraph.appendChild(wordItem);
});

span {
    position: relative;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  span::after {
    content: attr(data-word);
    position: absolute;
    left: 0;
    right: 0;
    top: -0.28em;
    height: 75%;
    padding-top: 0.14em;
    background: #fff;
    pointer-events: none;
  }

  span::selection {
    background: rgba(#4C7DE1, 0.18);
  }

الاستخدام الإبداعي :: التحديد وظل النص

▍ تسليط الضوء على الظلال الطويلة

p::selection {
    color: #444444;
    background: #ffffff;
    text-shadow: 1px 0px 1px #cccccc, 0px 1px 1px #eeeeee, 2px 1px 1px #cccccc, 1px 2px 1px #eeeeee, 3px 2px 1px #cccccc, 2px 3px 1px #eeeeee, 4px 3px 1px #cccccc, 3px 4px 1px #eeeeee, 5px 4px 1px #cccccc, 4px 5px 1px #eeeeee, 6px 5px 1px #cccccc, 5px 6px 1px #eeeeee, 7px 6px 1px #cccccc;
}

effect تأثير النص المخطط التفصيلي

p::selection {
    color: #fff;
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

effect تأثير طمس

p::selection {
  color: transparent;
  text-shadow: 0 0 3px #fff;
}

textsتظليل النصوص والأداء

هل تبرز عناصر النموذج؟

التحقيق في خاصية تحديد المستخدم

حالات الاستخدام التي يحددها المستخدم

ext النص والرمز

<button>Our Services<span aria-hidden="true">▼</span></button>

button span[aria-hidden="true"] {
    user-select: none;
}

▍ أعلام

label {
    user-select: none;
}

▍ قم بتمييز كل النص

.embed-code {
    user-select: all;
}

تطبيقات الويب

▍سود

ot ملاحظة

لا تستخدم تعطيل التحديد العام

.disable-selection {
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

نمط سيء

قم بالتمييز على الأجهزة المحمولة

p {
    -webkit-touch-callout: none;
}

ملخص