কোনও চিত্র ব্যবহারের চেয়ে চেনাশোনা ডিভ তৈরির সহজ উপায়?

Question

আমি ভাবছি যে এখন আমি যা করছি তার চেয়ে বেশি বিজ্ঞপ্তি ডিভস তৈরি করার সহজ উপায় আছে কিনা।

বর্তমানে, আমি প্রতিটি পৃথক আকারের জন্য কেবল একটি চিত্র তৈরি করছি, তবে এটি করা বিরক্তিকর।

বিজ্ঞপ্তিযুক্ত এবং আমি ব্যাসার্ধটি নির্দিষ্ট করতে পারি এমন ডিভগুলি তৈরি করার জন্য কি কি CSS ব্যবহার করছে?

Comments

এটি কোন ব্রাউজারগুলিতে সমর্থন করা উচিত?

— ত্রিশডট

: একটি এই সংশ্লিষ্ট প্রশ্ন, বিশেষ করে গণদেবতা আমার উত্তর এ চেহারা আছে stackoverflow.com/questions/4451350/...

— Orbling

আপনি একটি বৃত্ত তৈরি করতে এসভিজি (ভিএমএল) ব্যবহার করতে পারেন।

— jasssonpet

আপনি কেন বিভিন্ন আকারের পরিবর্তে আপনার চিত্রের প্রস্থ এবং উচ্চতাটির আকার পরিবর্তন করতে পারবেন না? এই চিত্রগুলি কত বড়?

— মোটি 14

Answer 1

এখানে একটি ডেমো: http://jsfiddle.net/thirtydot/JJytE/1170/

সিএসএস:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

এইচটিএমএল:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

আইই 8 এবং এর চেয়েও পুরানো এ কাজটি করতে আপনার অবশ্যই ডাউনলোড করতে হবে এবং CSS3 পিআইই ব্যবহার করতে হবে । উপরের আমার ডেমোটি আইই 8 তে কাজ করবে না, তবে এটি কেবল কারণ জেএসফিডাল হোস্ট করে নাPIE.htc ।

আমার ডেমোটি দেখতে এমন দেখাচ্ছে:

Comments

আমি করতে পারবেন না chrome.It মধ্যে div বিজ্ঞপ্তি মোজিলা though..My URL কাজ করে chokate.maninactionscript.com/chokates মরুভূমি চিত্র বা এক এটি আগের এ ক্লিক করুন DIV আছে ইমেজ জুম দেখানো circular..which নয় মজিলায় আছে

— techie_28

@ techie_28: divআপনার পেজে হয় বৃত্তাকার, যা আপনি যদি উদাহরণস্বরূপ যোগ দেখতে পারেন border: 5px solid redএটি। সমস্যাটি হ'ল চিত্রটির যে অংশগুলি "বৃত্তটিকে ওভারহ্যাং করে" লুকানো হচ্ছে না। সাধারণ কাজের যে কোনও একটিই এখানে প্রয়োগ করা খুব সহজ নয় I আমি -webkit-mask-imageওয়েবকিট ব্রাউজারগুলি ঠিক করার জন্য সম্পত্তিটি ব্যবহার করার পরামর্শ দিই (এবং border-radiusঅন্যান্য ব্রাউজারগুলির জন্য রাখি )। এখানে আরও তথ্য: webkit.org/blog/181/css-masks । আপনি স্ট্যাক ওভারফ্লোতে এখানে একটি প্রশ্ন জিজ্ঞাসা করতেও বিবেচনা করতে পারেন, অন্য কারও কোনও ধারণা আছে কিনা তা দেখতে।

— ত্রিশদট

আপনি 999px এর পরিবর্তে 100 %ও করতে পারেন।

— টনি উইকহাম

.htc আর সমর্থিত নয়।

— অলিভার ডিকসন 21

আমি অবাক হয়ে দেখি কীভাবে একটি বৃত্তাকার ডিভের মধ্যে অবজেক্টগুলি (বোতামগুলির মতো) সারিবদ্ধ করা যায়! : ডি

— জিব্রি

Answer 2

কোনও উপাদানের প্রতিটি পাশের সীমানা ব্যাসার্ধটি 50% এ সেট করা কোনও আকারে বৃত্ত প্রদর্শন তৈরি করবে:

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  /* width and height can be anything, as long as they're equal */
}

Comments

এটি সম্ভবত এমন পদ্ধতি যা এখন ব্যবহার করা উচিত (2017 এ)।

— স্ক্রিবলমাচার

Answer 3

এটা চেষ্টা কর

.iphonebadge {
  border-radius:99px;
 -moz-border-radius:99px;
 -webkit-border-radius:99px;
  background:red;
  color:#fff;
  border:3px #fff solid;
  background-color: #e7676d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
  background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
  background-image: linear-gradient(top, #e7676d, #b7070a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a'); 
 -webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
 -moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
  box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
  display:inline-block;
  padding:2px 2px 2px 2px ;
  margin:3px;
  font-family:arial;
  font-weight:bold;
   }

Answer 4

এটা আসলে সম্ভব।

দেখুন: সিএসএস টিপ: ছবি ছাড়াই চেনাশোনাগুলি কীভাবে তৈরি করবেন । ডেমো দেখুন ।

তবে সতর্কতা অবলম্বন করুন, মূলত সামঞ্জস্যের ক্ষেত্রে এটির গুরুতর অসুবিধা রয়েছে, আপনি একটি বিড়ালের ছাল তৈরি করছেন।

এটি এখানে কাজ দেখুন

আপনি দেখতে পাবেন যে আপনি ঠিক heightএবং widthঅর্ধেক সেট আপ করতে হবেborder-radius

শুভকামনা!

Comments

হাই, আপনার jsfiddleলিঙ্কের জন্য ধন্যবাদ ! এই লিঙ্কটি আপাতত আপনার উত্তর থেকে কাজ করছে। ;)

— টুরোসান

Answer 5

একটি বৃত্ত তৈরি করতে বেশ কয়েকটি (20+) অনুভূমিক বা উল্লম্ব 1px ডিভ ব্যবহার করে [খারাপ ধারণা] রয়েছে idea এই jQuery প্লাগইনটি বিভিন্ন আকার তৈরি করতে এই পদ্ধতিটি ব্যবহার করে।

Answer 6

আকারের উপর নির্ভর করে প্রস্থ এবং উচ্চতা দিন তবে দুটি সমান রাখুন

.circle {
  background-color: gray;
  height: 400px;
  width: 400px;
  border-radius: 100%;
}

<div class="circle">
</div>

Comments

border-radius: 50%;যথেষ্ট।

— ম্যাটএলেগ্রো

Answer 7

.fa-circle{
  color: tomato;
}

div{
  font-size: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>

কেবলমাত্র অন্য একটি সমাধান উল্লেখ করতে চেয়েছিলেন যা "একটি চিত্র ব্যবহারের চেয়ে চেনাশোনা ডিভ তৈরির সহজ উপায়?" এর প্রশ্নের উত্তর দেয়? যা হ'ল ফন্টআউভেজ ব্যবহার করা।

আপনি ফন্টউইভ সিএসএস ফাইল বা সিডিএন থেকে এখানে আমদানি করুন

এবং তারপরে আপনি কেবল:

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

এবং আপনি এটিকে যে কোনও রঙ দিতে পারেন যে কোনও ফন্টের আকার আপনি চান।

Answer 8

আপনি radial-gradientসিএসএস ফাংশন চেষ্টা করতে পারেন :

.circle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

এটি একটি divস্তর প্রয়োগ করুন :

<div class="circle"></div>

Answer 9

আসুন বলি আপনার এই চিত্রটি রয়েছে:

এটি থেকে একটি বৃত্ত তৈরি করতে আপনাকে কেবল যুক্ত করতে হবে

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
}

সুতরাং আপনার যদি ডিভ থাকে তবে আপনি একই জিনিসটি করতে পারেন।

নীচের উদাহরণটি দেখুন:

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
  animation: stackoverflow-example infinite 20s linear;
  pointer-events: none;
}

@keyframes stackoverflow-example {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div>
  <img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>

Answer 10

আপনি ব্যাসার্ধ ব্যবহার করতে পারেন কিন্তু এটি ইন্টারনেট কাজ করবে না: border-radius: 5px 5px;।

Answer 11

.circle {
	height: 20rem;
	width: 20rem;
	border-radius: 50%;
	background-color: #EF6A6A;
}

<div class="circle"></div>

Answer 12

মূলত প্রদত্ত স্থানাঙ্কগুলিতে একটি অক্ষর স্থাপনের জন্য এটি ডিভের অবস্থান নিখুঁত ব্যবহার করে। সুতরাং একটি বৃত্তের জন্য প্যারামেট্রিক সমীকরণটি ব্যবহার করে আপনি একটি বৃত্ত আঁকতে পারেন। আপনি যদি ডিভের অবস্থানকে আপেক্ষিকভাবে পরিবর্তন করতে চান তবে এর ফলে একটি সাইন ওয়েভ হবে ...

সংক্ষেপে আমরা অবস্থানের সম্পত্তিটি ব্যবহার করে সমীকরণগুলি গ্রাফিক করছি। আমি সিএসএসে ভাল পারদর্শী নই, তাই কেউ অবশ্যই এটিকে আরও মার্জিত করতে পারে। ভোগ করেন।

এটি সমস্ত ব্রাউজার এবং মোবাইল ডিভাইসে (যা আমি সচেতন) কাজ করে। আমি টেক্সটের সাইন ওয়েভগুলি আঁকার জন্য এটি আমার নিজের ওয়েবসাইটে ব্যবহার করি (www.cpixel.com)। এই কোডের মূল উত্সটি এখানে পাওয়া যায়: www.mathopenref.com/coordcirclealgorithm.html

    <html>
    <head></head>
    <body>
    <script language="Javascript">

    var x_center = 50; //0 in both x_center and y_center will place the center
    var y_center = 50; // at the top left of the browser
    var resolution_step = 360; //how many times to stop along the circle to plot your character.
    var radius = 50; //how big ya want your circle?
    var plot_character = "·"; //could use any character here, try letters/words for cool effects
    var div_top_offset=10;
    var div_left_offset=10;
    var x,y;

    for ( var angle_theta = 0;  angle_theta < 2 * Math.PI;  angle_theta += 2 * Math.PI/resolution_step ){
        x = x_center + radius * Math.cos(angle_theta);
        y = y_center - radius * Math.sin(angle_theta);
        document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
    }

    </script>
    </body>
    </html>

Comments

আমি যা চাই তা এই, তবে এখানে প্ল্যানক্রাক.কম

— জিন্না বালু

Answer 13

এর cssসম্পত্তি যুক্ত করা:

border-radius: 50%;

যে কোনও ডিভ এটি বৃত্তাকার করে তোলে।

Answer 14

বৃত্তের জন্য, একটি ডিভ উপাদান তৈরি করুন এবং তারপরে সীমানা ব্যাসার্ধের প্রস্থ = 2 বার = 2 বার প্যাডিং লিখুন। লাইন-উচ্চতা = 0 উদাহরণস্বরূপ, বৃত্তের রেডিয়াই হিসাবে 50px সহ, নীচের কোডটি ভালভাবে কাজ করে:

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;