یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها

استفاده از تخفیف‌ها

ثانیه

دقیقه

ساعت

روز

ورود عضویت

علی سعادت

4 سال پیش توسط علی سعادت مطرح شد

5 پاسخ

لانه زنبوری کردن المنت

سلام دوستان...
من به یه سایتی برخوردم که لینکش رو در ادامه ی مطلب میذارم...
اگه توی سایت رو نگاه کنید میبینید که المنت ها به صورت لونه زنبوری هستن و اگه روی حاشیه ی اونها کلیک بشه عکس مات شده و...
لطفا اگه میتونید کمک کنید...
لینک سایت
https://templatemo.com/live/templatemo_400_polygon

ثبت پرسش جدید

رایموند

تخصص : مختصص وردپرس - برنامه نویس لار...

@Raymond 4 سال پیش مطرح شد

درود...
پیوند زیر:
https://jtauber.github.io/articles/css-hexagon.html

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش آپدیت شد

من یک کد به زبان ساده براتون نوشتم، چیزی که میخواید رو به دو روش پیاده کردم. کد ساده ای هستش و طولانی بودنش تنها به دلیل تکرارها برای هر کدوم از شش ضلعی ها هستش.
برای اینکه طرح به درستی نمایش داده بشه، خودتون عکسی رو در مسیر معادل آن وارد کنید.
روی واکنشگرایی این طرح کار نکردم و به خودتون می سپارم.

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>polygon</title>
    <style>
        .beehive {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .container {
            display: flex;
        }
        .polygon {
            width: 200px;
            height: 200px;
            margin-left: 10px;

            clip-path: polygon(0% 25%, 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%);
            transition: all .6s ease;
        }

        .polygon:hover {
            box-shadow: inset 0 0 0 200px rgba(36,36,36, 0.7);
        }

        .bg {
            background-image: url('img/image1.png');
            background-size: cover;
        }

        .img-res {
            max-width: 100%;
            height: auto;
        }

        .mt-40 {
            margin-top: -40px;
        }
    </style>
</head>
<body>
    <div class="beehive">
        <div class="container">
            <div class="polygon">
                <img class="img-res" src='img/image1.png'>
            </div>
            <div class="polygon">
                <img class="img-res" src='img/image1.png'>
            </div>
            <div class="polygon">
                <img class="img-res" src='img/image1.png'>
            </div>
            <div class="polygon">
                <img class="img-res" src='img/image1.png'>
            </div>
        </div>

        <div class="container mt-40">
            <div class="polygon">
                <img class="img-res" src='img/image1.png'>
            </div>
            <div class="polygon">
                <img class="img-res" src='img/image1.png'>
            </div>
            <div class="polygon">
                <img class="img-res" src='img/image1.png'>
            </div>
        </div>

        <div class="container mt-40">
            <div class="polygon">
                <img class="img-res" src='img/image1.png'>
            </div>
            <div class="polygon">
                <img class="img-res" src='img/image1.png'>
            </div>
            <div class="polygon">
                <img class="img-res" src='img/image1.png'>
            </div>
            <div class="polygon">
                <img class="img-res" src='img/image1.png'>
            </div>
        </div>
    </div>

    <br> <hr> <br>

    <div class="beehive">
        <div class="container">
            <div class="polygon bg"></div>
            <div class="polygon bg"></div>
            <div class="polygon bg"></div>
            <div class="polygon bg"></div>
        </div>

        <div class="container mt-40">
            <div class="polygon bg"></div>
            <div class="polygon bg"></div>
            <div class="polygon bg"></div>
        </div>

        <div class="container mt-40">
            <div class="polygon bg"></div>
            <div class="polygon bg"></div>
            <div class="polygon bg"></div>
            <div class="polygon bg"></div>
        </div>
    </div>

    <script>
    </script>
</body>
</html>

ارسال پاسخ

علی سعادت

تخصص : junior front-end developer

@Saadat 4 سال پیش مطرح شد

از دو دوستی که راهنماییم کردن بسیار ممنونم

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

خواهش میکنم، سرزنده باشید 👍

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

لانه زنبوری کردن المنت

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید