css tag সিএসএস ব্যবহার করে বৃত্তাকার কোণ তৈরি




কিভাবে html তৈরি করা যায় (17)

আমি স্ট্যাক ওভারফ্লো তৈরিতে এটির দিকে তাকিয়ে দেখেছি যে বৃত্তাকার কোণগুলি তৈরির কোনও পদ্ধতি খুঁজে পাচ্ছি না যা আমাকে অনুভব করে না যে আমি কেবল একটি সওয়ারের মধ্য দিয়ে গিয়েছিলাম।

CSS3 অবশেষে সংজ্ঞায়িত করে

border-radius:

আপনি এটি কাজ করতে চান ঠিক কিভাবে। যদিও এটি সাফারি এবং ফায়ারফক্সের সর্বশেষ সংস্করণে ঠিক আছে তবে আই 7 তে (এবং আমি IE8 তে মনে করি না) বা অপেরা তেমন কিছুই করি না।

ইতিমধ্যে, এটি সব উপায় হ্যাক নিচে। আমার মনে হয় অন্য লোকেরা কী ভাবছে তা শুনে আমি আগ্রহী। এই মুহূর্তে এটি IE7, FF2 / 3, Safari3 এবং Opera 9.5 এ এটি করার সবচেয়ে পরিষ্কার উপায়।

আমি কিভাবে সিএসএস ব্যবহার করে গোলাকার কোণ তৈরি করতে পারি?



ব্রজেশ্বর বলেনঃ border-radius সিএসই 3 নির্বাচক নির্বাচন। এখন পর্যন্ত, আপনি মজিলা এবং ওয়েবকিট ভিত্তিক ব্রাউজারগুলির জন্য যথাক্রমে -moz-border-radius এবং -moz-border-radius প্রয়োগ করতে পারেন।

সুতরাং, ইন্টারনেট এক্সপ্লোরার কি হবে? মাইক্রোসফ্টের ইন্টারনেট এক্সপ্লোরারকে কিছু অতিরিক্ত বৈশিষ্ট্য এবং আরও দক্ষতা পেতে অনেকগুলি ব্যবহার করা হয়েছে।

এখানে: একটি। .htc আচরণ ফাইল আপনার সিএসএস border-radius মান থেকে round-corners পেতে। উদাহরণ স্বরূপ.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

অবশ্যই, আচরণ নির্বাচক একটি বৈধ নির্বাচক না, কিন্তু আপনি শর্তাধীন মন্তব্য (শুধুমাত্র IE এর জন্য) সঙ্গে একটি ভিন্ন CSS ফাইল এ রাখতে পারেন।

আচরণ এইচটিসি ফাইল


রুজি সীমানাগুলি একমাত্র জাভাস্ক্রিপ্ট-ভিত্তিক বিরোধী-আলাইজড বৃত্তাকার কোণার সমাধান যা আমি খুঁজে পেয়েছি যে সমস্ত প্রধান ব্রাউজারগুলিতে কাজ করে (ফায়ারফক্স 2/3, ক্রোম, সাফারি 3, আই 6/7/8 ), এবং এটি কেবলমাত্র যখন কাজ করে উভয় বৃত্তাকার উপাদান এবং অভিভাবক উপাদান একটি ব্যাকগ্রাউন্ড ইমেজ রয়েছে। এটি সীমানা, ছায়া, এবং জ্বলজ্বলে করে।

নতুন ruzee.com/blog/shadedborder অন্য একটি বিকল্প, তবে এতে সিএসএস থেকে স্টাইল তথ্য পাওয়ার জন্য সমর্থন নেই।


সিএসএস ব্যবহার করবেন না, jQuery অনেক বার উল্লেখ করা হয়েছে। আপনার পটভূমি এবং আপনার উপাদানগুলির সীমানা সম্পূর্ণ নিয়ন্ত্রণ প্রয়োজন হলে jQuery পটভূমি ক্যানভাস প্লাগিনটি চেষ্টা করুন। এটি পটভূমিতে একটি HTML5 ক্যানভাস উপাদান রাখে এবং আপনি যা চান তার প্রতিটি পটভূমি বা সীমানা আঁকতে দেয়। গোলাকার কোণ, গ্রেডেন্টস এবং তাই।


jQuery আমি ব্যক্তিগতভাবে এই মোকাবেলা করতে হবে উপায়। CSS সমর্থনটি কম, ছবিগুলি খুব অদ্ভুত, আপনি যে রাউন্ড কোণগুলিতে চান তা নির্বাচন করতে সক্ষম হবার জন্য, আমার কাছে নিখুঁত ধারণা তৈরি করে যদিও কিছু সন্দেহ নেই অন্যথায় তর্ক করবে। একটি প্লাগইন থ্রেড আমি সম্প্রতি এখানে একটি প্রকল্পের জন্য ব্যবহৃত প্রকল্প: http://plugins.jquery.com/project/jquery-roundcorners-canvas


সাফারি, ক্রোম, ফায়ারফক্স> 2, IE> 8 এবং কনকার্জারে (এবং সম্ভবত অন্যরা) border-radius সম্পত্তি ব্যবহার করে আপনি CSS এ এটি করতে পারেন। এটি এখনও আনুষ্ঠানিকভাবে স্পিকার অংশ না হিসাবে, দয়া করে একটি বিক্রেতা নির্দিষ্ট উপসর্গ ব্যবহার করুন ...

উদাহরণ

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

জাভাস্ক্রিপ্ট সমাধানগুলি সাধারণভাবে এটি ছোট আকারের একটি হিপ যুক্ত করে, যাতে এটি বৃত্তাকার হয়ে যায়, বা তারা 1 পিএক্সএক্স খাঁটি কোণ তৈরি করতে সীমানা এবং নেতিবাচক মার্জিন ব্যবহার করে। কিছু IE মধ্যে SVG ব্যবহার করতে পারে।

আইএমও, সিএসএস পদ্ধতিটি আরও ভাল, এটি সহজ, এবং এটি সমর্থন করে না এমন ব্রাউজারগুলিতে দুর্দান্তভাবে হ্রাস পাবে। এটি অবশ্যই, শুধুমাত্র সেই ক্ষেত্রে যেখানে ক্লায়েন্ট তাদের IE <9 নয় এমন সমর্থিত ব্রাউজারগুলিতে প্রয়োগ করে না।


এখানে একটি এইচটিএমএল / জেএস / CSS সমাধান যা আমি সম্প্রতি করেছি। IE তে পরম পজিশনিং সহ 1 পিপিএক্স গোলাকার ত্রুটি রয়েছে যাতে আপনি কন্টেইনারটি এমনকি পিক্সেলের এমনকি একটি সংখ্যা হতে চান তবে এটি বেশ পরিষ্কার।

এইচটিএমএল:

<div class="s">Content</div>

JQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

সিএসএস:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

চিত্র মাত্র 18px প্রশস্ত এবং একসঙ্গে বস্তাবন্দী সব 4 কোণ আছে। একটি বৃত্ত মত মনে হচ্ছে।

দ্রষ্টব্য: আপনার দ্বিতীয় অভ্যন্তরীণ মোড়কের প্রয়োজন নেই, তবে অভ্যন্তরীণ মোড়কে মার্জিন ব্যবহার করতে চাই যাতে অনুচ্ছেদের এবং শিরোনামগুলিতে মার্জিনগুলি এখনও মার্জিন পতন বজায় রাখে। আপনি jquery এড়িয়ে যেতে পারেন এবং কেবল অভ্যন্তরীণ মোড়কে HTML এ রাখতে পারেন।


কোন "সেরা" উপায় নেই; এমন উপায় রয়েছে যা আপনার জন্য এবং উপায়গুলির জন্য কাজ করে না। বলেছে, আমি CSS + ইমেজ ভিত্তিক, তরল গোলাকার কোণার কৌশল এখানে তৈরি করার বিষয়ে একটি নিবন্ধ পোস্ট করেছি:

সিএসএস এবং ইমেজ ব্যবহার করে গোলাকার কোণার বাক্স - অংশ 2

এই কৌতুকের একটি সংক্ষিপ্ত বিবরণ হল যে নেস্টেড DIV এবং পটভূমি চিত্র পুনরাবৃত্তি এবং অবস্থান ব্যবহার করে। নির্দিষ্ট প্রস্থ লেআউট (নির্দিষ্ট প্রস্থ প্রসারিতযোগ্য উচ্চতা) জন্য, আপনাকে তিনটি ডিভি এবং তিনটি চিত্রের প্রয়োজন হবে। একটি তরল প্রস্থ লেআউট (প্রসারিত প্রস্থ এবং উচ্চতা) জন্য আপনাকে 9 টি ডিভি এবং নয়টি ইমেজ লাগবে। কিছু এটি খুব জটিল মনে হতে পারে কিন্তু IMHO তার সবচেয়ে নিখুঁত সমাধান কখনও। কোন হ্যাক, কোন জাভাস্ক্রিপ্ট।


সর্বদা জাভাস্ক্রিপ্ট উপায় (অন্যান্য উত্তর দেখুন) কিন্তু এটি সম্পূর্ণরূপে স্টাইলিংয়ের পরে, আমি এটি অর্জনের জন্য ক্লায়েন্ট স্ক্রিপ্টগুলি ব্যবহার করার পক্ষে ধরনের।

আমি যেভাবে পছন্দ করি (যদিও এটির সীমা আছে), 4 টি গোলাকার কোণার চিত্র ব্যবহার করা যা আপনি CSS ব্যবহার করে আপনার বাক্সের 4 কোণে অবস্থান করবেন:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>
/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

যেমন উল্লেখ করা হয়েছে, এটির সীমা রয়েছে (বৃত্তাকার বাক্সের পিছনে পটভূমিটি সরল হওয়া উচিত নয়হলে কোণগুলি ব্যাকগ্রাউন্ডের সাথে মিলবে না), তবে এটি অন্য কিছুতে ভালভাবে কাজ করে।

আপডেট করা হয়েছে: একটি স্প্রিট শীট ব্যবহার করে implentation উন্নত।


আমি সাধারণত CSS সহ বৃত্তাকার কোণগুলি পাই, যদি ব্রাউজার সমর্থন করে না তবে তারা সমতল কোণগুলির সাথে সামগ্রীটি দেখতে পাবে। বৃত্তাকার কোণ আপনার সাইটের জন্য এত জটিল না হলে আপনি নীচের এই লাইন ব্যবহার করতে পারেন।

যদি আপনি একই ব্যাসার্ধের সাথে সমস্ত কোণ ব্যবহার করতে চান তবে এটি সহজ উপায়:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

কিন্তু যদি আপনি প্রতিটি কোণে নিয়ন্ত্রণ করতে চান তবে এটি ভাল:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

আপনি প্রতিটি সেটে দেখেন আপনার ব্রাউজারের নির্দিষ্ট শৈলী এবং চতুর্থ সারিতে আমরা স্ট্যান্ডার্ড পদ্ধতিতে ঘোষণা করে থাকি, আমরা ভবিষ্যতে অন্যদের (আশা করি IE খুব) তাদের স্টাইলটি তাদের জন্য প্রস্তুত হওয়ার জন্য বৈশিষ্ট্য বাস্তবায়ন করার সিদ্ধান্ত নিয়েছি।

অন্য উত্তরগুলিতে বলা হয়েছে, এটি ফায়ারফক্স, সাফারি, ক্যামিনো, ক্রোমে সুন্দরভাবে কাজ করে।


আমি কিছু সময়ের আগে একটি ব্লগ নিবন্ধ লিখেছি, তাই আরো তথ্যের জন্য এখানে দেখুন

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

এটা বেশ ভাল কাজ করে। কোন জাভাস্ক্রিপ্ট প্রয়োজন, শুধু সিএসএস এবং এইচটিএমএল। কম HTML সঙ্গে অন্যান্য স্টাফ সঙ্গে হস্তক্ষেপ। এটি মোনো পোস্টের মতোই অনুরূপ, তবে এতে কোনও IE 6 নির্দিষ্ট হ্যাক নেই এবং চেক করার পরেও এটি কোনও কাজ বলে মনে হচ্ছে না। এছাড়াও, অন্য কৌণিকটি প্রতিটি কোণার চিত্রের অভ্যন্তরীণ অংশটি স্বচ্ছ করতে তাই এটি কোণার কাছে থাকা পাঠ্যটিকে ব্লক করে না। বাহ্যিক অংশটি স্বচ্ছ হতে হবে না যাতে এটি অ-বৃত্তাকার DIV এর সীমানাকে আবৃত করতে পারে।

এছাড়াও, একবার সিএসএস সীমানা-ব্যাসার্ধের সাথে ব্যাপকভাবে সমর্থিত হয়, এটি গোলাকার কোণগুলি তৈরি করার সরকারী সেরা উপায়।



নিশ্চিত, এটি একটি নির্দিষ্ট প্রস্থ থাকলে, এটি CSS ব্যবহার করে খুব সহজ, এবং সমস্ত আপত্তিকর বা শ্রমসাধ্য নয়। এটি যখন আপনি উভয় দিক স্কেল করতে প্রয়োজন যে জিনিস চটচটে পেতে। কিছু সমাধান এটি ঘটতে একে অপরের উপরে স্ট্যাক একটি বিরাট পরিমাণ divs আছে।

আমার সমাধানটি ডিজাইনারকে নির্দেশ করা যে যদি তারা বৃত্তাকার কোণগুলি (সময়ের জন্য) ব্যবহার করতে চান তবে এটি একটি নির্দিষ্ট প্রস্থ হতে হবে। ডিজাইনার বৃত্তাকার কোণে (তাই আমি) প্রেম, তাই আমি এই যুক্তিসঙ্গত আপোস হতে খুঁজে।


ফায়ারফক্স, সাফারি এবং ক্রোমের নতুন সংস্করণগুলিতে CSS3 ব্যবহারের জন্য সমর্থন সহ, এটি "বর্ডার রেডিওস" দেখতে সহায়ক হবে।

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

অন্য যে কোনও সিএসএস শর্ট্যান্ডের মতো, উপরে উল্লিখিত বিন্যাসেও লেখা যেতে পারে এবং এইভাবে বর্ধিত, শীর্ষস্থানীয় ইত্যাদির জন্য বিভিন্ন বর্ডার রেডিয়াস অর্জন করতে পারে।

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;


যদি সীমানা-ব্যাসার্ধ সমাধান দিয়ে যেতে হয় তবে এই দুর্দান্ত ওয়েবসাইটটি CSS তৈরি করতে পারে যা এটি Safari / Chrome / FF এর জন্য কাজ করবে।

যাইহোক, আমি মনে করি আপনার নকশা বৃত্তাকার কোণার উপর নির্ভর করে না এবং যদি আপনি টুইটার দেখেন তবে তারা কেবল IE এবং অপেরা ব্যবহারকারীদের F **** বলে। গোলাকার কোণগুলি সুন্দর, এবং আমি ব্যক্তিগতভাবে এটি ঠিক রাখি যারা শীতল ব্যবহারকারীদের জন্য যারা IE ব্যবহার করে না :)

এখন অবশ্যই এটি গ্রাহকদের মতামত নয়। এখানে লিঙ্কটি রয়েছে: border-radius.com





css3