من المحتمل أنك على دراية باستخدام النص لإخفاء صورة في Photoshop ؛ إنها أفضل طريقة معروفة لإضافة بعض الملمس ، أو حتى خلفية الصورة ، إلى النص الخاص بك. يمكنك بعد ذلك استخدام هذا النص كصورة على موقع الويب الخاص بك ؛ ومع ذلك ، أليس من الرائع أن تتمكن من تطبيق نفس التأثير باستخدام HTML و CSS فقط؟ والخبر السار هو ، يمكنك!

قدمت CSS خصائص مثل مقطع الخلفية وقناع الصورة التي يمكنك استخدامها لإنشاء تأثيرات مشابهة لتلك التي تقوم بإنشائها في Photoshop. علاوة على ذلك ، يمكنك أيضًا استخدام SVG لتقطيع صورة بنص.

اليوم ، سنلقي نظرة على الخيارات ، وحتى نلقي بعض الرسوم المتحركة البسيطة. إذا كنت ترغب في المتابعة مع الشفرة ، فيمكنك ذلك قم بتنزيل الملفات هنا.

دعم المتصفح

من المتوقع ، أن بعض الخصائص التي سنستخدمها غير مدعومة عالميًا ، مما يعني أنها ستفشل في المتصفحات مثل IE و Firefox. والخبر السار هو أن هذه الخصائص ستفشل في صمت ، وهذا يعني أن هذه التقنيات هي تعزيز تقدمي ، وجيدة للاستخدام في المواقع.

قص النص باستخدام مقطع الخلفية

الخيار الأول الذي سنلقي نظرة عليه هو خاصية مشبك الخلفية . ستحدد هذه الخاصية ما إذا كانت الخلفية ستمتد إلى الحدود أم لا. إنه يسمح بنص عنصر محدد لقص الصورة.

HTML

ترميزنا هو ببساطة h1 مع الطبقة bgClip:

Clip Text

الآن ، دعنا نضيف السحر باستخدام CSS ...

المغلق

سنقوم بإضافة نسيج إلى نصنا مع صورة سماء الليل. سوف نتأكد أيضًا من أن النص يتم تقديمه بسلاسة باستخدام تجانس الخط. لاحظ أنه لكي يعمل هذا اللون ، يجب أن يكون لون النص شفافًا ، لذلك سنستخدم أيضًا لون ملء النص: شفاف.

.bgClip {background:url('../images/clouds.jpg');background-repeat:repeat-x;background-position:0 0;font-size:200px;text-transform:uppercase;text-align:center;font-family:'Luckiest Guy';color:transparent;-webkit-font-smoothing:antialiased;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;

الآن نريد فقط إضافة القليل من الرسوم المتحركة لجعل الخلفية أكثر إغراء:

    -webkit-animation:BackgroundAnimated 15s linear infinite;-moz-animation:BackgroundAnimated 15s linear infinite;-ms-animation:BackgroundAnimated 15s linear infinite;-o-animation:BackgroundAnimated 15s linear infinite;animation:BackgroundAnimated 15s linear infinite;}@keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-webkit-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-ms-keyframes BackgroundAnimated {<     from {background-position:0 0}to {background-position:100% 0}}@-moz-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}

وهنا النتيجة:

نص اخفاء باستخدام قناع الصورة

التقنية الأخيرة التي سنناقشها هي نص texturizing مع صورة قناع. الوظيفة الأساسية لهذه الخاصية هي أنها ستقوم بتقطيع مساحة النص المرئية على أساس العتامة.

HTML

كل ما نحتاجه هو عنصر h1 ملفوف في div:

Mask Text

المغلق

لإخفاء الصورة بالنص ، سنستخدم -webkit-mask-image لتحديد الصورة وسنضيف أيضًا ظلًا نصيًا جيدًا لقياس جيد. وأخيرًا ، أريد أن أجرب بعض تأثيرات التحليسة السلسة للكشف عن النص بأكمله على الماوس (فقط لأننا نستطيع):

#maskText h1 {font-size: 200px;font-family: 'Lilita One', sans-serif;color: #ffe400;text-shadow: 7px 7px 0px #34495e;text-transform: uppercase;text-align: center;margin: 0;display: block;-webkit-mask-image: url('../images/texture.png');-webkit-transition:all 2s ease;-moz-transition:all 2s ease;-o-transition:all 2s ease;transition:all 2s ease;}#maskText h1:hover{-webkit-mask-image: url('../images/texture-hover.png');cursor: pointer;color: #ffe400;}

وهنا النتيجة: