کد کادر دور متن به کمک css
کد کادر دور متن به کمک css که کادر دور متن ساده و انعطاف پذیر را ایجاد میکند. این کد را میتوانید در صفحات جداگانه و نوشته های خود هم استفاده نمایید.قسمت اول کد باید در هد قالب سایت یا در فایل استایل قرار دهید و قسمت دوم کد را در جای دلخواه سایت یا وبلاگ خود قرار دهید.
[button link=”http://www.dl.codebazan.ir/uploads/1537262340.html” target=”_blank” icon=”momizat-icon-eye”]دمو کد[/button]
توجه نمایید هر دو قسمت کد در باز زیر قرار دارند بعد از کپی کردن جدا سازی نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!--این قسمت را در هد سایت خود قرار دهید--> <div style="position:absolute;top:-200%;"><a href="https://codebazan.ir/">کد کادر دور متن به کمک css</a></div><style>#curve{background-color: #ccff99; border: 5px solid #00009C; width: 350px; height: 100px; border-radius:5px;}</style> <!--کد زیر را در قسمت دلخواه قرار دهید--> <center> <div id="curve"> <center> کادر دور متن زیبا </div> |
برای استفاده از کد فقط در قسمت دلخواه مثلا در قسمتی از قالب میتوانید از استایل درون خطی و کد بصورت یکجا استفاده نمایید که در زیر نمونه ان را قرار خواهم داد.
[button link=”https://codebazan.ir/Tools/editor-v2#$1$%3Cdiv%20%20style%3D%22background-color%3A%20%23cc6699%3B%20border%3A%205px%20solid%20%2300009C%3B%20width%3A%20350px%3B%20height%3A%20100px%3B%20border-radius%3A10px%3B%22%3E%20%3Cbr%3E%3Cp%3E%3Ccenter%3E%0A%u06A9%u0627%u062F%u0631%20%u062F%u0648%u0631%20%u0645%u062A%u0646%20%u0632%u06CC%u0628%u0627%0A%3C/div%3E$1$$” target=”_blank”]پیش نمایش کد زیر[/button]
|
1 2 3 |
<div style="background-color: #cc6699; border: 5px solid #00009C; width: 350px; height: 100px; border-radius:10px;"> <br><p><center> کادر دور متن زیبا </div> |