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

☑️ طراحی های خلاقانه با HTML + CSS

#⃣ هشتگ ها:
#css #html

🆔 @Web_Developer_98

1.2K views16:08

8:14

Media is too big

VIEW IN TELEGRAM

☑️ طراحی های خلاقانه با HTML + CSS

#⃣ هشتگ ها:
#css #html

🆔 @Web_Developer_98

1.0K views18:24

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

28:01

Media is too big

VIEW IN TELEGRAM

☑️ طراحی گام به گام یک وب سایت ریسپانسیو با HTML+CSS

#⃣ هشتگ ها:
#HTML #CSS

🆔 @Web_Developer_98 ☜

1.1K views10:10

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

23:00

Media is too big

VIEW IN TELEGRAM

☑️ آموزش ساخت اسلایدر محصولات با HTML + CSS + JS

#⃣ هشتگ ها:
#HTML #CSS
🆔 @Web_Developer_98 ☜

1.2K views16:28

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

Responsive Web design with HTML5 and CSS @far_amooz.pdf

10.3 MB

☑️ کتاب طراحی وب. انتشار 2020 ( انگلیسی )

آیا شما یک توسعه دهنده full-stack هستید که نیاز دارید تا مهارت‌های front-end خود را ارتقا بخشید؟ شاید هم شما روی front-end کار می‌کنید و به یک مرور کلی از هر آنچه که HTML و CSS مدرن ارائه می‌دهند احتیاج دارید؟ یا احتمالا تا به حال فقط وبسایت کوچکی را ساخته اید و به درک عمیقی از طراحی وب واکنش گرا و چگونگی دستیابی به آن نیاز دارید؟ اگر این گونه هست، این کتاب برای شماست!

📂 دسته بندی:
#کتاب
#html #css

🆔 @Web_Developer_98 ☜

1.2K viewsedited 11:38

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

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

371 views18:05

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

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

<!-- https://t.me/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://t.me/Web_Designer98 */
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }
        #captcha {
            font-size: 24px;
            margin: 10px;
        }
     /*  https://t.me/Web_Designer98 */
    </style>
</head>
<body>
<!-- https://t.me/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://t.me/Web_Designer98 -->
<script>
    //https://t.me/Web_Designer98
    function generateCaptcha() {
        const captchaLength = 5;
        let captcha = '';
        for (let i = 0; i < captchaLength; i++) {
            captcha += Math.floor(Math.random() * 10); // تولید اعداد ۰ تا ۹
        }

      //https://t.me/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://t.me/Web_Designer98 -->
</body>
</html>

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

🌈 Web_Designer98.t.me

494 views11:27

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

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

<!-- https://t.me/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://t.me/Web_Designer98 -->
</head>
<body>
<!-- https://t.me/Web_Designer98 -->
    <button onclick="showToast()">نمایش پیام</button>
    <div id="toast" class="toast">پیام شما با موفقیت ارسال شد!</div>

<!-- https://t.me/Web_Designer98 -->

<!-- https://t.me/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://t.me/Web_Designer98 -->
</body>
</html>

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

🌈 Web_Designer98.t.me

329 views10:56

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

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

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

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

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

<?php
session_start();

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

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

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

#https://t.me/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://t.me/Web_Designer98
imagefilledrectangle($image, 0, 0, $width, $height, $background_color);

#https://t.me/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://t.me/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://t.me/Web_Designer98
imagettftext($image, 30, 0, 40, 50, $text_color, 'Arial.ttf', $captcha_code); 

# https://t.me/Web_Designer98
imagepng($image);
imagedestroy($image);
?>

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

<!DOCTYPE html>
<!-- https://t.me/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://t.me/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://t.me/Web_Designer98 -->
</body>
</html>

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

<?php
session_start();

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

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

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

#css #html #js #php

🌈 Web_Designer98.t.me

278 viewsedited 09:36

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

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

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

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

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

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

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

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

323 views09:22

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

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

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

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

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

322 views14:20

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

0:38

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

335 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

293 views13:50

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

0:12

This media is not supported in your browser

VIEW IN TELEGRAM

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

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

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

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

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

🆔 @Web_Designer98

145 views15:03

About

Blog

Apps

Platform