« طراحی سایت و گرافیک »

✅ آموزش ساخت Toast Message با جاوااسکریپت:

<!-- https://yangx.top/Web_Designer98 -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title> @Web_Designer98</title>
<style type="text/css">
body {
    font-family: Arial, sans-serif;
}

.toast {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

.toast.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
    from { bottom: 0; opacity: 0; }
    to { bottom: 30px; opacity: 1; }
}

@keyframes fadeout {
    from { bottom: 30px; opacity: 1; }
    to { bottom: 0; opacity: 0; }
}
</style>
<!-- https://yangx.top/Web_Designer98 -->
</head>
<body>
<!-- https://yangx.top/Web_Designer98 -->
    <button onclick="showToast()">نمایش پیام</button>
    <div id="toast" class="toast">پیام شما با موفقیت ارسال شد!</div>

<!-- https://yangx.top/Web_Designer98 -->

<!-- https://yangx.top/Web_Designer98 -->
<script type="text/Javascript">
function showToast() {
    const toast = document.getElementById("toast");
    toast.classList.add("show");

    setTimeout(() => {
        toast.classList.remove("show");
    }, 3000); 
}

</script>
<!-- https://yangx.top/Web_Designer98 -->
</body>
</html>

🌀 توضیحات:
➕ با کلیک بر روی دکمه "نمایش پیام"، تابع showToast فراخوانی می‌شود که پیام توست را نمایش می‌دهد، پیام به مدت 3 ثانیه در صفحه باقی می‌ماند و سپس محو می‌شود.
#css #html #js

🌈 Web_Designer98.t.me

👍2

366 views10:56

« طراحی سایت و گرافیک »

✅ آموزش ساخت کپچا کد با PHP

🔸در مثال مثال از ایجاد کپچا با استفاده از PHP و GD Library ارائه می‌دهم.

1⃣ ایجاد تصویر کپچا با php

🔸ابتدا یک فایل به نام captcha.php ایجاد کنید:

<?php
session_start();

#https://yangx.top/Web_Designer98
function generateRandomString($length = 6) {
    return substr(str_shuffle(str_repeat("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ", $length)), 0, $length);
}

#https://yangx.top/Web_Designer98
$captcha_code = generateRandomString();
$_SESSION['captcha'] = $captcha_code;

#https://yangx.top/Web_Designer98
header('Content-Type: image/png');
$width = 200;
$height = 70;
$image = imagecreatetruecolor($width, $height);

#https://yangx.top/Web_Designer98
$background_color = imagecolorallocate($image, 255, 255, 255);
$text_color = imagecolorallocate($image, 0, 0, 0);
$line_color = imagecolorallocate($image, 64, 64, 64);
$arc_color = imagecolorallocate($image, 255, 0, 0);

#https://yangx.top/Web_Designer98
imagefilledrectangle($image, 0, 0, $width, $height, $background_color);

#https://yangx.top/Web_Designer98
for ($i = 0; $i < 5; $i++) {
    imageline($image, rand(0, $width), rand(0, $height), rand(0, $width), rand(0, $height), $line_color);
}
#https://yangx.top/Web_Designer98
for ($i = 0; $i < 3; $i++) {
    imagearc($image, rand(0, $width), rand(0, $height), rand(50, 100), rand(20, 80), rand(0, 360), rand(0, 360), $arc_color);
}

#https://yangx.top/Web_Designer98
imagettftext($image, 30, 0, 40, 50, $text_color, 'Arial.ttf', $captcha_code); 

# https://yangx.top/Web_Designer98
imagepng($image);
imagedestroy($image);
?>

2⃣ یک فرم HTML ایجاد کنید. نام این فایل را form.php بگذارید:

<!DOCTYPE html>
<!-- https://yangx.top/Web_Designer98 -->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web_Designer98</title>
</head>
<body>
<!-- https://yangx.top/Web_Designer98 -->
    <form action="process.php" method="post">
        <label for="captcha">کپچا: </label>
        <img src="captcha.php" alt="کپچا" /><br />
        <input type="text" name="captcha_input" required />
        <input type="submit" value="ارسال" />
    </form>
<!-- https://yangx.top/Web_Designer98 -->
</body>
</html>

3⃣ یک فایل دیگر به نام process.php ایجاد کنید

<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
#https://yangx.top/Web_Designer98
    $captcha_input = $_POST['captcha_input'];
    
    if ($_SESSION['captcha'] === $captcha_input) {
        echo "کپچا صحیح است!🤩";
    } else {
        echo "کپچا اشتباه است!😟";
    }
} else {
    echo "لطفا از طریق فرم ارسال کنید.";
}
# https://yangx.top/Web_Designer98
?>

💢 توضیحات:
1⃣ مطمئن شوید که GD Library روی سرور شما فعال است.

2⃣ برای فونت Arial.ttf، مطمئن شوید که فایل فونت در مسیر صحیح قرار دارد.

#css #html #js #php

🌈 Web_Designer98.t.me

👍2👏1

299 viewsedited 09:36

« طراحی سایت و گرافیک »

🔹تفاوت بین HTML و HTM در چیست؟!

🔸در عمل، هیچ تفاوتی بین HTML و HTM وجود ندارد. هر دو پسوند فایل برای اسناد HTML (HyperText Markup Language) هستند. مرورگرهای وب هر دو را به یک شکل تفسیر می‌کنند.

🔹چرا دو پسوند وجود دارد؟
محدودیت‌های قدیمی سیستم‌عامل: در گذشته، سیستم‌عامل‌های قدیمی مانند DOS و نسخه‌های اولیه ویندوز، فقط از پسوندهای فایل با حداکثر سه کاراکتر پشتیبانی می‌کردند. به همین دلیل، برای سازگاری با این سیستم‌ها، از HTM به جای HTML استفاده می‌شد.

🔸عادت و سازگاری: با اینکه محدودیت سه کاراکتری دیگر وجود ندارد، برخی افراد و سیستم‌ها به استفاده از HTM ادامه دادند.

🔸کدام یک را استفاده کنیم؟
امروزه، توصیه می‌شود از پسوند HTML استفاده کنید. این پسوند استاندارد و رایج‌تر است و توسط اکثر ابزارها و سیستم‌های مدرن پشتیبانی می‌شود. استفاده از HTML سازگاری و قابلیت فهم کد شما را برای دیگران افزایش می‌دهد.

🔹از نظر فنی، هیچ تفاوتی در نحوه تفسیر فایل توسط مرورگر وجود ندارد.

🔸بنابراین، اگر در حال ایجاد یک پروژه جدید هستید، حتماً از پسوند HTML استفاده کنید.
#وب #طراحی_وب #html #htm
🌈 Web_Designer98.t.me

👍1

355 views09:22

« طراحی سایت و گرافیک »

🔸کد آماده سازنده متن دست نویس

🔹ما کد ایجاد یک تولید کننده متن را می گذاریم که در آن می توانید یک فونت را انتخاب کنید و سپس این متن را به صورت تصویر دانلود کنید.

💻 کد را دریافت کنید

#html #css #js #web #php
🌈 Web_Designer98.t.me

❤‍🔥1

359 views14:20

« طراحی سایت و گرافیک »

0:37

This media is not supported in your browser

VIEW IN TELEGRAM

🔸️ابزار خوبی که به شما امکان می دهد ترتیب اجرای کدهای JS را به وضوح مشاهده کنید

🔹️می توانید نمونه های آماده را انتخاب کنید یا کد خود را وارد کنید؛ نتیجه را مشاهده کنید؛ برای درک کلی جاوا اسکریپت بسیار مفید است

🌐 https://www.jsv9000.app/
🌐 https://github.com/Hopding/js-visualizer-9000-client

#is #web #html #css

🌈 Web_Designer98.t.me

👍2

386 views13:28

« طراحی سایت و گرافیک »

This media is not supported in your browser

VIEW IN TELEGRAM

🚀 آموزش سریع برنامه‌نویسی با OverAPI! 🌐

آیا به دنبال یک مرجع سریع برای سینتکس‌ها و مثال‌ها در زبان‌ها و فناوری‌های مختلف هستید؟ OverAPI برای توسعه‌دهندگان front-end، مخصوصاً کسانی که با HTML، CSS، جاوا اسکریپت و موارد دیگر کار می‌کنند، بسیار مفید است! 🖥️💡

📌 لینک مستقیم: overapi.com

#OverAPI #FrontendDev #WebDevelopment #HTML #CSS #JavaScript #CodingTips #DeveloperTools

🌈 Web_Designer98.t.me

👍1

416 views13:50

« طراحی سایت و گرافیک »

0:11

This media is not supported in your browser

VIEW IN TELEGRAM

✨ افکت جدید اپل: "شیشه مایع"! ✨

برای کسانی که این افکت رو از دست دادن، اپل با طراحی جدیدش درخشش خاصی به دنیای وب اضافه کرده. 💻💫

علاقه‌مندان با استفاده از فیلترهای HTML، CSS و SVG موفق به بازسازی این جلوه زیرلایه شدن. البته این افکت در مرورگر کروم به زیبایی کار می‌کنه، اما متاسفانه در سافاری مشکلاتی داره! 😅

👉 برای دیدن این اثر خلاقانه، لینک زیر رو بررسی کنید:
🔗 مشاهده افکت در CodePen

#اپل #شیشه_مایع #HTML #CSS #SVG #طراحی #وب #کروم #سافاری #نوآوری

🆔 @Web_Designer98

💯1

646 views15:03

« طراحی سایت و گرافیک »

0:11

This media is not supported in your browser

VIEW IN TELEGRAM

📢 خبر داغ برای توسعه‌دهندگان و علاقه‌مندان وب! 💻✨

افکت جدید اپل با استفاده از فیلترهای HTML، CSS و SVG به زیبایی در وب بازسازی شد! 🔥

اگر طراحی جدید "شیشه مایع" اپل را از دست داده‌اید، حالا می‌توانید با کلیک روی لینک زیر این جلوه منحصربه‌فرد را ببینید: 🌈👇

🔗 مشاهده افکت شیشه مایع

نکته جالب: این افکت در مرورگر کروم به خوبی کار می‌کند، اما متاسفانه در سافاری قابل مشاهده نیست! 😕💔

#اپل #شیشه_مایع #HTML #CSS #SVG #توسعه_وب #طراحی_جذاب #کروم #سافاری #برنامه‌نویسی

🆔 @Web_Designer98

661 views04:26

« طراحی سایت و گرافیک »

0:37

This media is not supported in your browser

VIEW IN TELEGRAM

🌟 آیا به دنبال راهی سریع برای بررسی ویژگی‌های HTML/CSS در خبرنامه‌های ایمیلی هستید؟ 📧

جواب‌ها رو در caniemail.com پیدا کنید! این وبسایت شبیه به «آیا می‌توانم استفاده کنم» است، اما برای کلاینت‌های ایمیل. 🙌

به راحتی می‌توانید پشتیبانی از ویژگی‌های مورد نیاز خود را در Gmail، Outlook، iOS و دیگر برنامه‌های ایمیل بررسی کنید. ✅

#HTML #CSS #EmailMarketing #caniemail #WebDevelopment #Newsletter

🆔 @Web_Designer98

510 views07:31

« طراحی سایت و گرافیک »

0:37

This media is not supported in your browser

VIEW IN TELEGRAM

🌟 آیا می‌خواهید بدانید کدام ویژگی‌های HTML/CSS در ایمیل‌ها کار می‌کنند؟ 📧

به کمک caniemail.com می‌توانید به سرعت بررسی کنید! 🔍 این سایت مشابه «Can I use» است، اما مختص کلاینت‌های ایمیل.

✅ پشتیبانی ویژگی‌ها در Gmail، Outlook، iOS و سایر کلاینت‌های ایمیل را به راحتی کشف کنید! 🌐

🔗 caniemail.com

#HTML #CSS #EmailDesign #WebDevelopment #TechTools #EmailClient

🆔 @Web_Designer98

262 views12:26

« طراحی سایت و گرافیک »

🚀 50 پروژه فرانت‌اند برای یادگیری و تمرین!

💻 در این مخزن، 50 پروژه فرانت‌اند از صفر برای کمک به توسعه‌دهندگان عزیز قرار داده شده است.

📚هر پروژه شامل پوشه مخصوص خود و فایل‌های لازم: HTML، CSS، JavaScript، React، Bootstrap و Tailwind CSS است. این فرصتی عالی برای یادگیری و بهبود مهارت‌های وب‌دولوپمنت شماست!

🌐 لینک پروژه‌ها رو اینجا ببینید: کلیک کنید!

#فرانت_اند #برنامه_نویسی #وب_دولوپمنت #پروژه_فرانت_اند #یادگیری #توسعه_دهنده #HTML #CSS #JavaScript #React #Bootstrap #TailwindCSS

🆔 @Web_Designer98

228 views14:29

About

Blog

Apps

Platform