Rounded corners by mbaroz
הנה דוגמא ליצירת בלוק עם פינות מעוגלות רק על ידי CSS ו HTML .|
יכולת זו מאפשרת שינוי של הרקע, וצבעי הפינות מעוגלות בצורה דינאמית ומהירה .
הקוד CSS:
<style type="text/css">
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#rounded{ margin: 0 10%;background: #666633}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #666633}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
.inside_content {
padding:10px
}
</style>
קוד הבלוק
<div id="rounded" style="width:600px">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="inside_content">
<h2>דוגמא לפינות מעוגלות </h2>
כאן תוכלו לשים טקסט וכיתוב כמה שאתם רוצים כאן תוכלו לשים טקסט וכיתוב כמה שאתם רוציםכאן תוכלו
לשים טקסט וכיתוב כמה שאתם רוציםכאן תוכלו לשים טקסט וכיתוב כמה שאתם רוציםכאן תוכלו לשים טקסט וכיתוב כמה שאתם רוצי<br>
כאן תוכלו לשים טקסט וכיתוב כמה שאתם רוציםכאן
תוכלו לשים טקסט וכיתוב כמה שאתם רוציםכאן תוכלו לשים טקסט וכיתוב כמה שאתם רוציםכאן תוכלו לשים טקסט וכיתוב כמה שאתם רוצים
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
No comments yet.
Leave a comment