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

2:07

☑️ آموزش کتابخانه animate.css و wow.js

📌 جلسه: 1

#css_animate

🆔 @Web_Developer_98 ☜

👍3

906 views14:41

5:20

☑️ آموزش کتابخانه animate.css و wow.js

📌 جلسه: 2

#css_animate

🆔 @Web_Developer_98 ☜

👍2

850 views14:55

30:48

☑️ آموزش کتابخانه animate.css و wow.js

📌 جلسه: 3

#css_animate

🆔 @Web_Developer_98 ☜

👍2

910 views11:30

10:55

☑️ آموزش کتابخانه animate.css و wow.js

📌 جلسه: 4 - قسمت آخر

#css_animate

🆔 @Web_Developer_98 ☜

👍2

927 views11:41

✅ بهترین فریمورک‌های 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

423 views18:05

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

<!-- 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

597 views11:27

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

✅ آموزش مینفی کردن کدها در ویندوز با استفاده از Git، می‌توانید از ابزارهایی مانند Terser (برای جاوا اسکریپت) یا cssnano (برای CSS) استفاده کنید. فرض می‌کنیم که شما Node.js و npm را نصب کرده‌اید. مراحل زیر را دنبال کنید:

1⃣ ابتدا از ترمینال یا CMD دستور زیر را برای نصب Terser و cssnano اجرا کنید:

npm install terser cssnano --save-dev

2⃣ نوشتن اسکریپت در فایل package.json خود، یک اسکریپت برای مینفی کردن فایل‌ها اضافه کنید. مانند زیر:

{
  "scripts": {
    "minify-js": "terser src/**/*.js -o dist/app.min.js",
    "minify-css": "cssnano src/**/*.css dist/styles.min.css"
  }
}

3⃣ حالا با استفاده از دستور زیر می‌توانید کدهای خود را مینفی کنید:

npm run minify-js
npm run minify-css

3⃣ اگر می‌خواهید این پروسه را قبل از کامیت کردن (commit) خودکار انجام دهید، می‌توانید از git hooks استفاده کنید. شما می‌توانید pre-commit hook را ایجاد کنید که مینفی کردن را انجام دهد.

4⃣ برای این کار می‌توانید از husky استفاده کنید:

npx husky-init && npm install

5⃣ سپس فرمان زیر را برای فعال‌سازی pre-commit hook اضافه کنید:

npx husky add .husky/pre-commit "npm run minify-js && npm run minify-css"

🔘 حالا هر بار که شما یک commit انجام می‌دهید، کدهای شما به طور خودکار مینفی خواهد شد.

#وب #گیت #css #js
🌈 Web_Designer98.t.me

👍2

390 views17:41

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

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

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

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

❤‍🔥1

359 views14:20

0:37

🔸️ابزار خوبی که به شما امکان می دهد ترتیب اجرای کدهای 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

🚀 آموزش سریع برنامه‌نویسی با 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

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

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

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

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

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

🆔 @Web_Designer98

💯1

645 views15:03

0:11

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

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

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

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

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

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

🆔 @Web_Designer98

661 views04:26

0:08

🚀✨ افکت تایپ جالب برای وب‌سایت شما!

🔥 آیا به دنبال یک افکت جذاب برای متن‌های وب‌سایتتان هستید؟ با افکت تایپ می‌توانید به راحتی عرض متن را به صورت افزایشی و جذاب تغییر دهید! فقط کافیه چند خط CSS بنویسید. 🔤💻

🔹 کد CSS:

.typing-effect {
  width: 10ch; /* حداکثر عرض */
  overflow: hidden; /* پنهان کردن Overflow */
  animation: typing 1s steps(10) infinite alternate-reverse; /* انیمیشن افکت تایپ */
}

@keyframes typing {
  from { width: 0ch; } /* شروع از عرض صفر */
}

✨ نکته: این افکت فقط با فونت‌های تک فاصله‌ای کار می‌کند. استفاده از این تکنیک به متن‌های شما روح و زندگی می‌بخشد! 😍🎉

برای دیدن این افکت در عمل، کد را در پروژه‌تون امتحان کنید و نظرات‌تون رو به ما بگید! 💬👇

#CSS #WebDesign #Animation #TypingEffect

🆔 @Web_Designer98

508 views07:46

0:37

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

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

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

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

🆔 @Web_Designer98

510 views07:31

0:37

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

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

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

🔗 caniemail.com

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

🆔 @Web_Designer98

260 views12:26