کد کادر متن به زبان css

کدی که در این بخش به شما معرفی میکنیم کدی است ک شما میتوانید با قرار دادن ان در وبلاگ یا وبسایت خود کادری برای متن های خود ایجاد کنید و همچنین نیز میتوانید تغیرات دلخواه خود را به سادگی روی این کد اعمال کنید و در قسمت رنگ کادر رنگ مورد نظر خود را برای این کادر بگذارید.

نمونه:

من نمونه هستم به کادر دور من توجه کنید!!!!!

<div id="unanswered-forum-topic-wrapper" style="box-sizing: border-box; margin-bottom: 10px; padding: 10px 10px 16px; border-radius: 7px; border: 1px solid rgb(255, 222, 87);"><div id="unanswered-forum-topic-title" style="box-sizing: border-box; margin-bottom: 7px;">من نمونه هستم به کادر دور من توجه کنید!!!!!</div></div>

کد ابزار اخبار برای وبلاگ و وبسایت

این کد ابزار اخبار از سایت شهر خبر است که شما کاربران میتوانید این کد را در قست ابزارک های وبلاگ یا وبسایت خود قرار دهید

<script language="javascript" src="https://www.shahrekhabar.com/javascript.jsp?type=science&num=10&bullet=true&source=true" ></script>

کد متن روی عکس با استفاده از تگ(table)

برای اینکه بتوانیم پس زمینه برای متنی که مینویسیم انتخاب کنیم  از کد <table> که برای ساختن جداول در صفحات وب مورد استفاده قرار میگیرد استفاده میکنیم.

<table cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td background="عکس پس زمینه خود را در این مکان قرار دهید" style="background-size: 300px 120px; margin-right: 2px; float: right; background-position: right 1px top 20px; background-repeat: no-repeat;"><p style="box-sizing: border-box; height: 300px; width: 560px;"><font size="3px" color="green"> محل قرار گیری مطالب و عکس ها و موزیک ها و غیره.... </font></p></td> </tr> </tbody></table>

 نکته:»»شما میتوانید در کد جدولی که به شما معرفی میکنیم متن و عکس هر چیزی ک میخواهید قرار دهید. 

کد تغیر ابعاد تصاویر برای وبلاگ ها و سایت ها(قسمت دوم)

برای تغیر ابعاد تصاویر در زبان css و html از ویژگی های width و ویژگی height استفاده میشود که با تعین مقدار -طول و عرض عکسی ک میخواهیم نمایش دهیم را تغیر میدهیم.

<img src="عکس را در اینجا قرار دهید" style="box-sizing: border-box; border: 0px; vertical-align: middle; max-width: 100%; height: 160px; width: 580px; margin-left: 6px;" />

کد باکس متن برای وبلاگ و وبسایت ها(قسمت دووم)

برای ایجاد باکس متن میتوانید کد زیر را قرار دهید :

<pre class=" language-css" style="box-sizing: inherit; overflow: auto; text-shadow: rgba(0, 0, 0, 0.3) 0px 1px; text-align: left; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; position: relative; direction: ltr; padding: 1em; display: block; margin: 0px auto; background-color: rgb(0, 0, 0);"><font color="#404040"><code class=" language-css" style="color: rgb(248, 248, 242); font-family: iran-bold, Tahoma, sans-serif; font-size: 1em; box-sizing: inherit;"><span class="token property" style="box-sizing: inherit; color: rgb(249, 38, 114);">float</span><span class="token punctuation" style="box-sizing: inherit;">:</span> right<span class="token punctuation" style="box-sizing: inherit;">;</span> <span class="token property" style="box-sizing: inherit; color: rgb(249, 38, 114);">float</span><span class="token punctuation" style="box-sizing: inherit;">:</span> left<span class="token punctuation" style="box-sizing: inherit;">;</span> <span class="token property" style="box-sizing: inherit; color: rgb(249, 38, 114);">float</span><span class="token punctuation" style="box-sizing: inherit;">:</span> none<span class="token punctuation" style="box-sizing: inherit;">;</span> <span class="token comment" spellcheck="true" style="box-sizing: inherit; padding: 1em; font-size: 0.871em; border-radius: 2px; color: rgb(112, 128, 144);">/* مقدار پیشفرض */</span> <span class="token property" style="box-sizing: inherit; color: rgb(249, 38, 114);">float</span><span class="token punctuation" style="box-sizing: inherit;">:</span> inherit</code><font color="#404040" face="yekan, tahoma"><span style="white-space: normal;"> </span></font></font></pre> پیش نمایش کد::

float: right;
float: left;
float: none; /* مقدار پیشفرض */
float: inherit

کد تغیر رنگ و gradient شفاف روی یک تصویر

Gradient ها با دستور background-imageاعمال می شوند و می توانند بخشی از  کد های css در تگ image باشند و شما می توانید یک gradient شفاف را روی یک تصویر دیگر بیندازید.

کد های html

<div class="tinted-image"></div>

کد های css

.tinted-image { width: 300px; height: 200px; background: /* top, transparent red */ linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), /* bottom, image */ url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg); }