سی ایس ایس چیکر بورڈ کا پس منظر… لیکن گول کونوں اور ہوور اسٹائلز کے ساتھ

ایک طرف، سی ایس ایس کے ساتھ سادہ چیکر پس منظر بنانا آسان ہے۔ دوسری طرف، اگرچہ، جب تک کہ ہم CSS-gradient-ninjas میں سے ایک نہ ہوں، ہم بنیادی نمونوں کے ساتھ ایک طرح سے پھنس گئے ہیں۔

کم از کم میں نے یہی سوچا تھا جب میں نے اپنی اسکرین پر چیکر پس منظر کو گھورتے ہوئے اور چوکوں کے ان کونوں کو تھوڑا سا گول کرنے کی کوشش کرتے ہوئے سوچا تھا… جب تک کہ مجھے اپنا پسندیدہ بلٹ پوائنٹ گلیف یاد نہ آ جائے۔ ✦ — اور سوچا کہ اگر صرف میں اسے پیٹرن کے ہر چوراہے پر رکھ سکتا ہوں، تو مجھے یقینی طور پر وہ ڈیزائن ملے گا جو میں چاہتا ہوں۔

پتہ چلتا ہے کہ یہ ممکن ہے! یہ رہا ثبوت۔

آئیے بنیادی پیٹرن کے ساتھ شروع کریں:

<div></div>

div {
 background: 
  repeating-linear-gradient(
    to right, transparent, 
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  repeating-linear-gradient(
    to bottom, transparent,  
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  linear-gradient(45deg, pink, skyblue);
  /* more styles */
}

اس سے جو چیز ہمیں ملتی ہے وہ مربعوں کا ایک دہرایا جانے والا پس منظر ہے جو گلابی سے نیلے رنگ میں جاتا ہے۔ 5px ان کے درمیان سفید فاصلہ. ہر مربع پچاس پکسلز چوڑا اور شفاف ہے۔ یہ استعمال کرتے ہوئے بنایا گیا ہے۔ repeating-linear-gradient، جو ایک لکیری گریڈینٹ امیج بناتا ہے جہاں گراڈینٹ پورے کنٹیننگ ایریا میں دہرایا جاتا ہے۔

دوسرے الفاظ میں، اس ترتیب میں پہلا میلان سفید افقی دھاریاں بناتا ہے اور دوسرا میلان سفید عمودی دھاریاں بناتا ہے۔ ایک ساتھ پرتوں میں، وہ چیکرڈ پیٹرن بناتے ہیں، اور تیسرا میلان باقی جگہ پر بھر جاتا ہے۔

اب ہم بیک گراؤنڈ پیٹرن کے اوپری حصے میں ستارہ گلائف شامل کرتے ہیں جس کا میں نے پہلے ذکر کیا تھا۔ ہم اسے اسی میں شامل کرکے کر سکتے ہیں۔ background شکل کے لیے ایک انکوڈ شدہ SVG استعمال کرتے ہوئے گریڈینٹ کے طور پر پراپرٹی:

div {
  background: 
    repeat left -17px top -22px/55px 55px
    url("data:image/svg+xml,
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
      <foreignObject width='35px' height='35px'>
        <div xmlns='http://www.w3.org/1999/xhtml' style='color: white; font-size: 35px'>✦</div>
      </foreignObject>
    </svg>"
    ), 
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    linear-gradient(45deg, pink, skyblue);
  /* more style */
}

آئیے اسے توڑ دیں۔ پہلا مطلوبہ لفظ، repeat، ظاہر کرتا ہے کہ یہ ایک دہرائی جانے والی پس منظر کی تصویر ہے۔ اس کے بعد بالترتیب ہر دہرائی جانے والی اکائی کی پوزیشن اور سائز ہے (left -17px top -22px/55px 55px)۔ یہ آفسیٹ پوزیشن گلیف اور پیٹرن کے سائز پر مبنی ہے۔ آپ ذیل میں دیکھیں گے کہ گلیف کا سائز کیسے دیا جاتا ہے۔ آفسیٹ کو چیکرڈ پیٹرن میں ہر ایک چوراہے پر دہرائے جانے والے گلیف کو دوبارہ پوزیشن میں رکھنے کے لیے شامل کیا جاتا ہے۔

SVG کے پاس HTML ہے۔ <div> گلیف لے کر. نوٹ کریں کہ میں نے اعلان کیا a font-size اس پر. یہ بالآخر بساط کے پیٹرن میں چوکوں کے سرحدی رداس کا تعین کرتا ہے — گلیف جتنا بڑا ہوگا، مربع اتنے ہی گول ہوں گے۔ ڈیٹا یو آر ایل سے غیر رول شدہ SVG اس طرح نظر آتا ہے:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
  <foreignObject width='35px' height='35px'>
    <div xmlns='http://www.w3.org/1999/xhtml' style='color:white;font-size:35px'>✦</div>
  </foreignObject>
</svg>

اب جب کہ ایک سی ایس ایس پیٹرن قائم ہو گیا ہے، آئیے ایک شامل کرتے ہیں۔ :hover اثر جہاں گلیف کو ہٹا دیا جاتا ہے اور سفید لائنوں کو استعمال کرکے تھوڑا سا پارباسی بنایا جاتا ہے۔ rgb() الفا شفافیت کے ساتھ رنگ کی قدریں۔

div:hover {
  background:
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
  linear-gradient(45deg, pink, skyblue);
  box-shadow: 10px 10px 20px pink;
}

وہاں ہم جاتے ہیں! اب، نہ صرف ہمارے پاس ہمارے گول کونے ہیں، بلکہ ہمارے پاس اس طرح کے اثرات کے پیٹرن پر زیادہ کنٹرول بھی ہے:

ایک بار پھر، یہ پوری مشق ایک بساط کے پیٹرن میں چوکوں کا ایک گرڈ حاصل کرنے کی کوشش تھی جو گول کونوں کو سپورٹ کرتا ہے، ایک پس منظر کا میلان جو پورے پیٹرن پر ایک اوورلے کا کام کرتا ہے، اور انٹرایکٹو اسٹائلز۔ مجھے لگتا ہے کہ یہ کام کو اچھی طرح سے پورا کرتا ہے، لیکن میں اس میں بھی دلچسپی رکھتا ہوں کہ آپ نے اس سے کیسے رابطہ کیا ہو گا۔ مجھے تبصرے میں بتائیں!