📌 تیکه کد گرادینت خطی از بالا به پایین :
🔹 توی گرادینت لازم که ۲ تا رنگ طیف رو مشخص کنید؛ از رنگ مثلا x به رنگ y میره. مثال :
<!DOCTYPE html>
<html>
<head>
<style>
#grade1 {
height: 200px;
background: #FF0000;
background: -webkit-linear-gradient(red, yellow);
background: -o-linear-gradient(red, yellow);
background: -moz-linear-gradient(red, yellow);
background: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<div id="grade1"></div>
</body>
</html>
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
🔹 توی گرادینت لازم که ۲ تا رنگ طیف رو مشخص کنید؛ از رنگ مثلا x به رنگ y میره. مثال :
<!DOCTYPE html>
<html>
<head>
<style>
#grade1 {
height: 200px;
background: #FF0000;
background: -webkit-linear-gradient(red, yellow);
background: -o-linear-gradient(red, yellow);
background: -moz-linear-gradient(red, yellow);
background: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<div id="grade1"></div>
</body>
</html>
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
📌 سورس کد لوگوی گوگل کروم
🔹 زبان کدنویسی : HTML و CSS
سورس کد لوگوی کروم را در این سورس کد از سری سورس کدهای طراحی سایت برای شما آماده کرده‌ایم که می‌توانید به صورت کاملا رایگان این سورس کد را دانلود کنید و در پروژه‌های طراحی سایت و طراحی قالب وردپرس خود استفاده کنید.
🔺 زبان برنامه نویسی این سورس کد
سورس کد لوگوی کروم به زبان HTML & CSS طراحی و ساخته شده است و در ساخت آن از هیچگونه تصویری استفاده نشده و تنها با دستورات CSS این لوگوی زیبا طراحی شده است.
🔺 هدف آموزشی سورس کد لوگوی کروم
با استفاده از این سورس کد یاد خواهید گرفت که چگونه با استفاده از زبان های برنامه نویسی HTML & CSS شکل های مختلف و رنگارنگی در سایت هایی که طراحی می کنید ایجاد کنید و لوگو های ساده شرکت ها که از طراحی ساده‌ای برخودار هستند را با همان کدنویسی بسازید و از تصاویر برای لوگوهای ساده استفاده نکنید تا سایتی که طراحی می کنید منحصر به فرد و جذاب باشد.
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
🔹 زبان کدنویسی : HTML و CSS
سورس کد لوگوی کروم را در این سورس کد از سری سورس کدهای طراحی سایت برای شما آماده کرده‌ایم که می‌توانید به صورت کاملا رایگان این سورس کد را دانلود کنید و در پروژه‌های طراحی سایت و طراحی قالب وردپرس خود استفاده کنید.
🔺 زبان برنامه نویسی این سورس کد
سورس کد لوگوی کروم به زبان HTML & CSS طراحی و ساخته شده است و در ساخت آن از هیچگونه تصویری استفاده نشده و تنها با دستورات CSS این لوگوی زیبا طراحی شده است.
🔺 هدف آموزشی سورس کد لوگوی کروم
با استفاده از این سورس کد یاد خواهید گرفت که چگونه با استفاده از زبان های برنامه نویسی HTML & CSS شکل های مختلف و رنگارنگی در سایت هایی که طراحی می کنید ایجاد کنید و لوگو های ساده شرکت ها که از طراحی ساده‌ای برخودار هستند را با همان کدنویسی بسازید و از تصاویر برای لوگوهای ساده استفاده نکنید تا سایتی که طراحی می کنید منحصر به فرد و جذاب باشد.
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
📌 گرادینت شعاعی :
🔹 در این نوع گرادینت باید نوع شکل و رنگ‌ها مشخص گردد. بصورت پیشفرض نوع گرادینت بیضی شکل است. مثال:
<!DOCTYPE html>
<html>
<head>
<style>
#grade1{
background: red;
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green); /* Standard syntax */
}
</style>
</head>
<body>
<div id="grade1"></div>
</body>
</html>
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
🔹 در این نوع گرادینت باید نوع شکل و رنگ‌ها مشخص گردد. بصورت پیشفرض نوع گرادینت بیضی شکل است. مثال:
<!DOCTYPE html>
<html>
<head>
<style>
#grade1{
background: red;
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green); /* Standard syntax */
}
</style>
</head>
<body>
<div id="grade1"></div>
</body>
</html>
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
📌 آموزش ایجاد افکت چرخش تصویر هنگام رفتن ماوس روی آن
🔹 زبان کدنویسی : HTML و CSS
ساختار HTML ای که در اینجا مورد استفاده قرار داده ایم، بسیار ساده است. توضیحات تکمیلی کلاس و ایدی در کانال آموزش طراحی وب هست؛ مطالعه کنید.
<p class="rotate-360">
<img border="0" src="image.png" />
</p>
تیکه کد CSS :
1) .rotate-360 img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
2) .rotate-360 img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
🔹 زبان کدنویسی : HTML و CSS
ساختار HTML ای که در اینجا مورد استفاده قرار داده ایم، بسیار ساده است. توضیحات تکمیلی کلاس و ایدی در کانال آموزش طراحی وب هست؛ مطالعه کنید.
<p class="rotate-360">
<img border="0" src="image.png" />
</p>
تیکه کد CSS :
1) .rotate-360 img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
2) .rotate-360 img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
سورس مگ
📌 آموزش ایجاد افکت چرخش تصویر هنگام رفتن ماوس روی آن 🔹 زبان کدنویسی : HTML و CSS ساختار HTML ای که در اینجا مورد استفاده قرار داده ایم، بسیار ساده است. توضیحات تکمیلی کلاس و ایدی در کانال آموزش طراحی وب هست؛ مطالعه کنید. <p class="rotate-360"> …
🔺 توضیحات تکمیلی :
🔹 توی قسمت HTML یه تگ p داریم که کلاس 360-rotate براش تعریف کردیم، در کانال آموزش طراحی وب مبحث آیدی و کلاس کامل توضیح داده شده. میتونی توی اینجا بجای تگ p، از div یا هر تگ دیگه‌ای که موردنظرته استفاده کنی.
توی این دستور، نیاز نیس حتما از تگ p باشه. با توضیحاتی که گفتیم، میتونی کد بالا رو به دلخواه خودت تغییر بدی. تنها قسمتی که مهمه، تصویر موردنظرت داخل یه در بر گیرنده با کلاس rotate-360 قرار داره تا CSS ای که در ادامه میدیم به درستی کار کنه، پس اگه نام کلاس توی تگ تغییر دادی، باید توی CSS هم تغییر بدی.
توضیح تیکه کد شماره 1 توی CSS : میگه هر کدومش با سرعت 0.8 ثانیه 360 درجه بچرخه توی مروگرها مختلف و باز به جا اولیش برگرده.
توضیح تیکه کد شماره 2 توی CSS : تیکه کد دومی وقتی که موس رو عکس بره توی مروگرها مختلف 360 درجه میچرخه و وقتی موس از رو عکس میره کنار دوباره به جا خودش برمیگرده.
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
🔹 توی قسمت HTML یه تگ p داریم که کلاس 360-rotate براش تعریف کردیم، در کانال آموزش طراحی وب مبحث آیدی و کلاس کامل توضیح داده شده. میتونی توی اینجا بجای تگ p، از div یا هر تگ دیگه‌ای که موردنظرته استفاده کنی.
توی این دستور، نیاز نیس حتما از تگ p باشه. با توضیحاتی که گفتیم، میتونی کد بالا رو به دلخواه خودت تغییر بدی. تنها قسمتی که مهمه، تصویر موردنظرت داخل یه در بر گیرنده با کلاس rotate-360 قرار داره تا CSS ای که در ادامه میدیم به درستی کار کنه، پس اگه نام کلاس توی تگ تغییر دادی، باید توی CSS هم تغییر بدی.
توضیح تیکه کد شماره 1 توی CSS : میگه هر کدومش با سرعت 0.8 ثانیه 360 درجه بچرخه توی مروگرها مختلف و باز به جا اولیش برگرده.
توضیح تیکه کد شماره 2 توی CSS : تیکه کد دومی وقتی که موس رو عکس بره توی مروگرها مختلف 360 درجه میچرخه و وقتی موس از رو عکس میره کنار دوباره به جا خودش برمیگرده.
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
📌 سورس کد صفحه کلید
🔹 زبان کدنویسی : HTML و CSS
🔺 در این مطلب با یکی دیگر از سورس‌های برنامه نویسی با سورس کد صفحه کلید با HTML و CSS از بخش سورس html در خدمت شما دوستان عزیز هستیم.
این صفحه کلید زیبا با استفاده از HTML و CSS طراحی شده است.
همچنین در این سورس کد برای فونت‌ها از API گوگل فونت خانواده CSS Nunito نیز استفاده شده است.
نکته: برای ویرایش کدها نیازی به استفاده از برنامه حجیم نیست، با +Notepad می‌توانید کدها را ویرایش و شخصی سازی کنید.
+ منبع : سورس سافت
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
🔹 زبان کدنویسی : HTML و CSS
🔺 در این مطلب با یکی دیگر از سورس‌های برنامه نویسی با سورس کد صفحه کلید با HTML و CSS از بخش سورس html در خدمت شما دوستان عزیز هستیم.
این صفحه کلید زیبا با استفاده از HTML و CSS طراحی شده است.
همچنین در این سورس کد برای فونت‌ها از API گوگل فونت خانواده CSS Nunito نیز استفاده شده است.
نکته: برای ویرایش کدها نیازی به استفاده از برنامه حجیم نیست، با +Notepad می‌توانید کدها را ویرایش و شخصی سازی کنید.
+ منبع : سورس سافت
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
📌 ساخت کد امنیتی Captcha
🔹 زبان کدنویسی : PHP
🔺 وارد کردن کد امنیتی (کپچا) در وبسایت‌ها، گاها برای کاربران واقعی، کاری بسیار دشوار و آزار دهنده است. jReply یک اسکریپت برای نمایش کد امنیتی در وبسایت دسخط برای کاربران هست، که در عین راحتی در نوشتن برای کاربران واقعی، از ورود ربات‌ها هم جلوگیری می‌کند.
کد نوشته شده نیز به منظور راحتی در تطبیق و تغییر آن ساده و قابل درک نوشته شده است.
کد زیر همان کد استفاده شده در اسکریپت تصویر امنیتی ساده (کپچا) است. توجه کنید که کد زیر به تنهایی کار نمیک‌ند و نیازمند فونت و لیست لغات است که به صورت کامل ضمیمه شده.
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯
🔹 زبان کدنویسی : PHP
🔺 وارد کردن کد امنیتی (کپچا) در وبسایت‌ها، گاها برای کاربران واقعی، کاری بسیار دشوار و آزار دهنده است. jReply یک اسکریپت برای نمایش کد امنیتی در وبسایت دسخط برای کاربران هست، که در عین راحتی در نوشتن برای کاربران واقعی، از ورود ربات‌ها هم جلوگیری می‌کند.
کد نوشته شده نیز به منظور راحتی در تطبیق و تغییر آن ساده و قابل درک نوشته شده است.
کد زیر همان کد استفاده شده در اسکریپت تصویر امنیتی ساده (کپچا) است. توجه کنید که کد زیر به تنهایی کار نمیک‌ند و نیازمند فونت و لیست لغات است که به صورت کامل ضمیمه شده.
╭─┅─═ঊঈঊঈ═─┅─╮
♨️ @sourcemags
╰─┅─═ঊঈঊঈ═─┅─╯