إذا كنت تبحث عن أكواد html جاهزة لتصميم المواقع او html اكواد جاهزة او اكواد اتش تي ام ال جاهزة فأنت في المكان الصحيح.
كيف تضع نصوصك فوق الصور كمحترفين: أكواد لغة html جاهزة
لنبدأ رحلة ممتعة في عالم تصميم الويب حيث أكواد html جاهزة لتصميم المواقع و سنتعلم كيف نضع النص فوق الصورة بطريقة بسيطة! 🌟 أكواد html جاهزة مع الشرح. و يمكنك تجربة الأكواد في محرر اتش تي ام ال
الخطوة الأولى: إضافة اكواد جاهزة html
أولاً، نحتاج إلى إعداد المسرح لعرضنا! فكر في الـHTML كمسرحنا حيث سنضع صورة ونختار مكان النص عليها.
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-o2oJJnV86GVQsmN6C8I2jokwIDy-OAZFIg&usqp=CAU" alt="Snow" style="width:100%;">
<div class="bottom-left">أسفل اليسار</div>
<div class="top-left">أعلى اليسار</div>
<div class="top-right">أعلى اليمين</div>
<div class="bottom-right">أسفل اليمين</div>
<div class="centered">في المنتصف</div>
</div>
تخيل أن هذا الترتيب يشبه توزيع الفنانين على المسرح، حيث كل `div` يمثل فنانًا في مكان معين!
الخطوة الثانية: إضافة الـCSS
الآن، بعد أن وضعنا الفنانين (النصوص) على المسرح (الصورة)، حان الوقت لإضاءتهم بشكل صحيح ليظهروا للجمهور (جعل النصوص مرئية وجميلة فوق الصورة).
/* الحاوية التي تحتوي على الصورة والنص */
.container {
position: relative;
text-align: center;
color: white;
}
/* نص أسفل اليسار */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* نص أعلى اليسار */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* نص أعلى اليمين */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* نص أسفل اليمين */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* نص في المنتصف */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
تخيل الـCSS كمدير المسرح الذي يوجه الفنانين (النصوص) للوقوف في الأماكن المثالية على المسرح (الصورة)، مع التأكد من أن الجميع يمكن أن يراهم بوضوح.
وهكذا، بخطوتين بسيطتين، أصبح لديك نص جميل يتألق فوق صورة، مثل نجوم في سماء الويب الفسيحة! 🌌✨
10 تأثيرات ساحرة للصور تحول موقعك إلى معرض فني رقمي
لنقم برحلة ممتعة في عالم الفن التشكيلي، ولكن على نحو معاصر باستخدام HTML وCSS! 🎨 سنتعلم كيف نضيف تأثيرات ساحرة على صورة باستخدام اكواد html جاهزة مع الشرح، تمامًا كما لو كنا نرسم لوحة فنية بألوان مختلفة وأساليب متنوعة. الأدوات التي سنستخدمها لرسم لوحتنا الإلكترونية هي الدوال التالية: `blur()`, `brightness()`, `contrast()`, `drop-shadow()`, `grayscale()`, `hue-rotate()`, `invert()`, `opacity()`, `saturate()`, و`sepia()`.
لنبدأ العمل على لوحتنا باستخدام صورة مناسبة لاستخدام اكواد اتش تي ام ال جاهزة وجدتها على الإنترنت. سنضيف تأثيرات مختلفة عليها لنرى كيف يمكن لكل تأثير أن يغير من مظهر الصورة.
الخطوة 1: إعداد الصورة
أولاً، دعونا نضع الصورة في صفحتنا الفنية:
<!DOCTYPE html>
<html>
<head>
<style>
.image-effect {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-o2oJJnV86GVQsmN6C8I2jokwIDy-OAZFIg&usqp=CAU" alt="Nature" class="image-effect">
</body>
</html>
الخطوة 2: إضافة التأثيرات
لنضف بعض السحر! بتأثيرات مختلفة على صورتنا عبر اكواد css. لكن لنجعلها تجربة تفاعلية، سأوضح كيفية إضافة تأثير واحد كمثال، ثم يمكنك تجربة الآخرين بنفسك.
مثال: تأثير الضبابية (Blur)
لنجعل صورتنا تبدو وكأنها حلم ضبابي:
.image-effect {
filter: blur(5px);
}
جرب بنفسك!
الآن، بعد أن عرفت كيف تضيف تأثيرًا، لم لا تجرب الآخرين؟ إليك كيفية كتابة أكواد برمجية جاهزة html لكل تأثير. فقط استبدل `blur(5px)` بأي من هذه التأثيرات:
- `brightness(50%)`: يجعل الصورة أكثر إشراقًا أو أغمق.
- `contrast(200%)`: يزيد من تباين الألوان في الصورة.
- `drop-shadow(16px 16px 20px red)`: يضيف ظلًا بلون معين وبأبعاد محددة.
- `grayscale(100%)`: يحول الصورة إلى الأبيض والأسود.
- `hue-rotate(90deg)`: يغير من لون الصورة بدرجة معينة.
- `invert(100%)`: يعكس ألوان الصورة.
- `opacity(50%)`: يجعل الصورة شفافة.
- `saturate(200%)`: يزيد من حدة الألوان.
- `sepia(100%)`: يعطي الصورة تأثير الصور القديمة باللون البني.
استبدل القيم وجرب تأثيرات مختلفة لترى كيف تتغير لوحتك الفنية! ✨
تذكر قم بتغيير اللون الأحمر بما يناسبك
ليست هناك تعليقات:
شارك مع اصدقائك: