مشكلة في الظلال في CSS

تقصد أن الظل أسفل الـ navbar غير سليم؟ أما تقصد أنك تحاول إضافة ظل لعنصر absolute؟ من الأسهل إضافة الظل مباشرًة للـ navbar.

عامًة في Tailwind CSS، تستطيع  استخدام خاصية shadow، وتحتوي خاصية shadow على الأنماط المختلفة للظل، بما في ذلك shadow-sm و shadow-md و shadow-lg وغيرها، ومن الأفضل استخدام shadow-md هنا لأنه يقدم ظل معتدل.

<nav class="bg-white p-4 shadow-md">
  <!-- محتوى النافبار هنا -->
</nav>

أما عن طريق CSS فسنقوم بالتالي:

.navbar {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* يمكنك ضبط هذه القيم حسب احتياجاتك */
}

• 0px: إزاحة الظل أفقياً، هنا ليس هناك إزاحة (الظل مباشرة تحت العنصر).
• 4px: إزاحة الظل عمودياً، أي أن الظل سيكون 4 بكسل أسفل العنصر.
• 6px: تمويه (blur) الظل. هذا يضيف ضبابية للظل ليبدو أكثر طبيعية.
• rgba(0, 0, 0, 0.1): اللون والشفافية (opacity) للظل، واستخدمت اللون الأسود (RGB 0, 0, 0) والشفافية 0.1، وبإمكانك تغيير القيم للوصول إلى الظل المطلوب.

ظل navbar سليم ولكن عندما يصبح فوق absoult (شفاف) تظهر هذه المشكلة خاصتا عندما احدد الماوس فوق العناصر تبع navbar

2023-07-21 13-17-39.mkv

عليك بتفقد ما هو التنسيق الذي يتم تنفيذه عند عمل hover على عناصر قائمة التنقل، ومن الأفضل إرفاق مجلد المشروع لمعاينة المشكلة.

بتاريخ 44 دقائق مضت قال Mustafa Suleiman:

عليك بتفقد ما هو التنسيق الذي يتم تنفيذه عند عمل hover على عناصر قائمة التنقل، ومن الأفضل إرفاق مجلد المشروع لمعاينة المشكلة.

import React from "react";
import Image from "next/image";
import Video from "@/components/Video";
import Tag from "./Tag";
import gg from "public/Person.jpg"

export default function InformationProject() {
  return (
{/*  الصورة مع الخلفية */}
    <div className="backdrop-blur-2xl bg-center bg-inherit bg-origin-border" style={{
      backgroundImage: `url("https://m.media-amazon.com/images/M/MV5BNjRlZmM0ODktY2RjNS00ZDdjLWJhZGYtNDljNWZkMGM5MTg0XkEyXkFqcGdeQXVyNjAwMjI5MDk@._V1_.jpg")`
    }}>
      {/* Blur to Background */}
      <div className="absolute bg-blue-950 bg-opacity-75 backdrop-blur-lg w-screen h-full -z-50 bottom-0 left-0"></div>
    </div>
  );
}

و ال navbar

import NavbarItem from "./NavbarItem";

export default async function Navbar() {
// Comande Create In Navbar
  const arrayitems:[String,String][]=[
    ["Home", "/"],
    ["Projects","/Projects"],
    ["Gallery", "/Gallery"],
    ["News", "/News"],
    ["About", "/About"],
  ];

  
// Comande Create In Navbar //

  return (
    <nav className="bg-gray-100 py-6 font-bold fixed z-50 glass bg-opacity-30 w-full top-0">
      <NavbarItem arrayitem={arrayitems}/>
    </nav>
  );
}

و عناصر navbar:-

"use client";
import { Router } from "next/router";
import React, { ReactElement } from "react";
import { usePathname } from "next/navigation";
import Link from "next/link";

type arrayItemProps = [String, String][];

export default function NavbarItem({ arrayitem }: arrayItemProps) {

// Script Create Button in Navbar //
  const navitem: ReactElement[] = arrayitem.map(([title, url]:String, index) => {
    const router: String = usePathname();
    return (
      <Link
        href={url}
        className={`px-2 font-bold hover:text-gold uppercase text-xl tracking-wider border-b-4 border-transparent border-solid hover:border-b-4 hover:border-gold ${
          router === url ? "text-gold" : ""
        }`}
        key={index}
      >
        {title}
      </Link>
    );
  });
// //Script Create Button in Navbar// //
  return (
    <div className="flex flex-row justify-center">
      <div className="mr-5">{navitem[0]}</div>
      {navitem.slice(1)}
    </div>
  );
}

لقد جربت ازالة الظل من navbar وعلمت ولكن اريد مع الظل او اذا في المشتقبل حدثت نفس المشكلة اعرف الحل

 أنا بحاجة لتفقد وإختبار الموقع من خلال أدوات المطور أو يمكنك القيام أنت بذلك، قم بتحديد حالة hover من خلال أدوات المطور لعناصر القائمة ثم تفقد الجزء الذي يظهر أسفل الـ navbar من أين يأتي.

وأيضًا لاحظت أنه عند التمرير للأسفل يتم تغطية الـ navbar بخلفية زرقاء، هل تقصد ذلك؟ من الأفضل إعطائه قيمة z-index أعلى لتجنب ذلك.

اسف عل التأخر بالرد هي المشكلة في الفيديو:-
https://youtu.be/W0Qj63mvGe0

وعندي سؤال ثاني اين يتم حفظ الصور يعني انا بدي اعرض الصور في الموقع اين اخزنها هل استخدم FTP او ماذا