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

✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: سیزدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me

356 views18:05

This media is not supported in your browser

VIEW IN TELEGRAM

326 views18:00

✅ بهترین فریمورک‌های CSS

1⃣ Bootstrap:
یکی از پرطرفدارترین فریمورک‌ها که امکانات زیادی برای طراحی ریسپانسیو ارائه می‌دهد.

2⃣ Tailwind CSS:
یک فریمورکUtility-First که به شما امکان می‌دهد طراحی‌های بسیار سفارشی بسازید.

3⃣ Foundation:
فریمورکی قوی که برای طراحی وب‌سایت‌های ریسپانسیو و کاربردی مناسب است.

4⃣ Bulma:
فریمورکی مدرن و مبتنی بر Flexbox که استفاده از آن بسیار آسان است.

5⃣ Semantic UI:
فریمورکی با تمرکز بر روی معنایی بودن کد و طراحی زیبا.

6⃣ Materialize CSS:
فریمورکی بر اساس اصول Material Design که طراحی زیبا و کاربرپسند را به همراه دارد.

7⃣ Skeleton:
فریمورکی سبک و ساده برای طرح‌های اولیه و پروژه‌های کوچک.

8⃣ Pure css:
فریمورکی مینیمالیستی که برای سرعت و کارایی بالا ساخته شده است.

#وب #فریمورک #css #html

🌈 Web_Designer98.t.me

424 views18:05

This media is not supported in your browser

5:16

✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: چهاردهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me

410 views18:26

8:51

✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: پانزدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me

500 views18:28

This media is not supported in your browser

VIEW IN TELEGRAM

472 views11:17

✅ آموزش ساخت کپچا ساده با استفاده از جاوااسکریپت 👇👇

<!-- 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">
    <title>@Web_Designer98</title>
    <style>
      /* https://yangx.top/Web_Designer98 */
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }
        #captcha {
            font-size: 24px;
            margin: 10px;
        }
     /*  https://yangx.top/Web_Designer98 */
    </style>
</head>
<body>
<!-- https://yangx.top/Web_Designer98 -->
<h2>تأیید کپچا @Web_Designer98</h2>
<div id="captcha"></div>
<input type="text" id="captchaInput" placeholder="کد را وارد کنید">
<button onclick="validateCaptcha()">تأیید</button>
<p id="result"></p>
<!-- https://yangx.top/Web_Designer98 -->
<script>
    //https://yangx.top/Web_Designer98
    function generateCaptcha() {
        const captchaLength = 5;
        let captcha = '';
        for (let i = 0; i < captchaLength; i++) {
            captcha += Math.floor(Math.random() * 10); // تولید اعداد ۰ تا ۹
        }

      //https://yangx.top/Web_Designer98 
 document.getElementById('captcha').textContent = captcha;
        return captcha;
    }

    let generatedCaptcha = generateCaptcha();

    function validateCaptcha() {
        const userInput = document.getElementById('captchaInput').value;
        const result = document.getElementById('result');
        if (userInput === generatedCaptcha) {
            result.textContent = 'کپچا موفقیت آمیز بود! ✅';
        } else {
            result.textContent = 'کپچا ناموفق بود. لطفاً دوباره امتحان کنید. ❌';
            generatedCaptcha = generateCaptcha(); // تولید دوباره کپچا
            document.getElementById('captchaInput').value = ''; // پاک کردن فیلد ورودی
        }
    }
</script>
<!-- https://yangx.top/Web_Designer98 -->
</body>
</html>

💢 توضیحات:
1⃣ این کد یک کپچا عددی تصادفی ایجاد می‌کند.
2⃣ کاربر باید عدد تولید شده را در فیلد ورودی وارد کند.
3⃣ وقتی کاربر روی دکمه "تأیید" کلیک می‌کند، کپچا بررسی می‌شود و نتیجه نمایش داده می‌شود.
4⃣ اگر کاربر پاسخ نادرستی وارد کند، کپچا به‌طور تصادفی دوباره تولید می‌شود.
#css #html #js

🌈 Web_Designer98.t.me

👍5

599 views11:27

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

🎁 لیست دوره‌ های آموزشی کانال

547 views15:03

📣 لیست پکیج ها 📣

This media is not supported in your browser

VIEW IN TELEGRAM

543 views15:04

11:35

✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: شانزدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me

555 views15:05

10:51

✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: هفدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me

418 views16:07

21:16

✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: هجدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me

371 views17:07

This media is not supported in your browser

VIEW IN TELEGRAM

310 views10:46

✅ آموزش ساخت 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

367 views10:56

This media is not supported in your browser

VIEW IN TELEGRAM

297 views17:13

23:31