Malek CSS Interactive Lab — Learn CSS Visually

Size

Width 300px

Height 200px

Margin

link

Top 24px

Right 24px

Bottom 24px

Left 24px

lightbulb

Margin creates space outside the border. Shorthand order: Top → Right → Bottom → Left (clockwise).

Padding

link

Top 24px

Right 24px

Bottom 24px

Left 24px

lightbulb

Padding creates space inside the border, pushing content inward from the edges.

Font

Family

Size 16px

Weight 400

Line Height 1.6

lightbulb

font-weight ranges from 100 (thin) to 900 (black). 400 = normal, 700 = bold.

Text Alignment

lightbulb

text-align controls horizontal alignment of inline content within a block element.

Border

Width 2px

Style

Color

#6366f1

lightbulb

Border shorthand: border: width style color; — e.g. border: 2px solid #6366f1;

Border Radius

Radius 12px

lightbulb

border-radius rounds corners. At 50% of a square, you get a perfect circle!

Colors

Background

#1e293b

Text Color

#e2e8f0

Box Shadow

Offset X 0px

Offset Y 8px

Blur 24px

Spread 0px

Color

#000000

Opacity 25%

lightbulb

box-shadow: offset-x offset-y blur spread color; — Negative offsets cast shadow in the opposite direction.

Display

sync Show Sibling Boxes (Flow Test)

lightbulb

display controls how the element behaves in the document flow.

Position

Top 0px

Right 0px

Bottom 0px

Left 0px

lightbulb

Position values (top/right/bottom/left) only affect elements that are not static.

Background Image

Image URL

Size

Position

Repeat

Attachment

lightbulb

Try pasting an image URL to see the background properties in action.

widgets Container Properties

flex-direction

lightbulb

Defines the main axis direction. row = horizontal (→), column = vertical (↓). Add -reverse to flip the order.

flex-wrap

lightbulb

nowrap keeps all items on one line. wrap allows items to flow to the next line when needed.

justify-content

lightbulb

Aligns items along the main axis. space-between distributes space between items; space-evenly distributes equal space around all items.

align-items

lightbulb

Aligns items along the cross axis. stretch fills the container height; center centers vertically.

align-content

lightbulb

Controls spacing between rows/columns when items wrap. Only applies when flex-wrap: wrap is set.

gap 8px

view_in_ar Item Properties

lightbulb

Select a child item to modify its individual properties. Click on a child in the preview.

Selected

flex-grow 0

lightbulb

Defines how much an item should grow relative to others. 0 = no growth, 1 = takes available space.

flex-shrink 1

lightbulb

Defines how much an item should shrink when space is limited. 0 = won't shrink.

flex-basis auto

lightbulb

Sets the initial size of an item before growing/shrinking. 0 = auto (content size).

order 0

lightbulb

Changes the visual order without changing the HTML. Lower numbers appear first.

align-self

lightbulb

Overrides align-items for a single item. auto uses the container's value.

add_circle Items Count

Count 6

layers Z-Index Controls

Red Box 1

Blue Box 2

Green Box 3

lightbulb

Z-index only works on positioned elements (relative, absolute, fixed, or sticky). Higher values appear in front of lower values.

gradient Gradient Type

Type

Angle 90deg

Colors

Color 1

#6366f1

Color 2

#a855f7

lightbulb

Gradients are set using the background-image property, not background-color.

360 Transform 2D / 3D

Translate X 0px

Translate Y 0px

Rotate Z 0deg

Scale (X & Y) 1

Skew X 0deg

Skew Y 0deg

3D Transform

Rotate X 0deg

Rotate Y 0deg

Perspective 1000px

lightbulb

Perspective gives depth to 3D elements. It's usually applied to the parent, but here we apply it to the element itself for demonstration.

animation Animation Settings

Name

Duration 1s

Timing Func

Delay 0s

Iteration Count

Direction

Fill Mode

Play State running

lightbulb

Animations require @keyframes to define the intermediate steps of the CSS sequence.

Parent Container (position: relative)

margin

border

padding

content

Card Element

This is sample text content for the CSS Interactive Lab.

هذا نص تجريبي لمختبر CSS التفاعلي.

300px

200px

tune Live Preview (معاينة حية — تحكم بالمؤشرات الجانبية)

Transform transform: none;

swap_horiz Transition (الانتقال)

بدون تأثير الحركة

مرر المؤشر هنا

بإستخدام تأثير الحركة

مرر المؤشر هنا

Transition + Overflow Hidden

مرر المؤشر هنا

speed Timing Functions (دوال التوقيت)

linear (سرعة ثابتة)

ease (بداية بطيئة، سرعة، ثم تباطؤ)

ease-in (بداية بطيئة جداً ثم تسارع)

ease-out (بداية سريعة وتتباطأ عند النهاية)

ease-in-out (بطيئة، سريعة بالمنتصف، بطيئة بالنهاية)

Bounce / Custom (ارتداد مرن)

steps(6) (حركة متقطعة في 6 خطوات)

دليل سريع للفروقات:

linear: تتحرك بنفس السرعة تماماً من البداية إلى النهاية.
ease: القيمة الافتراضية، بداية بطيئة ثم تسارع ثم تباطؤ.
ease-in: بداية ثقيلة ثم تنطلق كالصاروخ.
ease-out: بداية سريعة ثم تتباطأ تدريجياً.
ease-in-out: بطيئة في البداية والنهاية، سريعة بالمنتصف.
cubic-bezier(): تخصيص منحنى الحركة (ارتداد Bounce).
steps(n): حركة متقطعة في n خطوات ثابتة.

360 Transform (التحويل)

scale(2)

مرر المؤشر

rotate(90deg)

مرر المؤشر

skewX(25deg) + skewY(10deg)

مرر المؤشر هنا

tune Live Preview (معاينة حية — تحكم بالمؤشرات الجانبية)

Animation animation: none;

directions اتجاه الحركة (animation-direction)

هذه الصناديق تتحرك بشكل مستمر (infinite). راقب كيف تتصرف عندما تصل إلى النهاية.

1. normal (الطبيعي)

→

2. reverse (المعكوس)

←

3. alternate (ذهاب وإياب)

↔

4. alternate-reverse (إياب ثم ذهاب)

↔

format_paint أوضاع التعبئة (animation-fill-mode)

اللون الأصلي: رمادي | بداية (0%): أصفر | نهاية (100%): أحمر ودائري
* تأخير (Delay) لمدة ثانيتين قبل بدء الحركة.

1. none (الافتراضي)

2. forwards (يحافظ على النهاية)

3. backwards (يستبق البداية)

4. both (يجمع بين الاثنين)

timer خاصية animation-delay

animation-delay: 0s;

animation-delay: 0.5s;

animation-delay: 1s;

شرح قيم `animation-direction` (الاتجاه):

normal: تبدأ من 0% إلى 100%، وعند الانتهاء تعود فجأة لنقطة الصفر.
reverse: تعكس الحركة، تبدأ من 100% وتنتهي عند 0%.
alternate: تذهب بسلاسة من 0% إلى 100%، ثم تعود 100% إلى 0% كالبندول.
alternate-reverse: نفس السابقة ولكن تبدأ بالعكس.

شرح قيم `animation-fill-mode` (وضع التعبئة):

none: يظل العنصر بشكله الأصلي وقت الانتظار، ويرجع فجأة بعد الانتهاء.
forwards: عند الانتهاء يثبت على تنسيقات الإطار الأخير ولا يرجع.
backwards: يأخذ تنسيقات الإطار الأول فوراً خلال فترة الانتظار.
both: الخيار الشامل! يطبق backwards قبل البداية و forwards بعد النهاية.

Learn CSS Visually
تعلّم CSS بصرياً

Interactive Controls

Flexbox Playground

Live CSS Output

حول المطور

Eng Malek A.Almosanif

CSS Interactive Lab

Card Element

tune Live Preview (معاينة حية — تحكم بالمؤشرات الجانبية)

swap_horiz Transition (الانتقال)

مرر المؤشر هنا

speed Timing Functions (دوال التوقيت)

دليل سريع للفروقات:

360 Transform (التحويل)

tune Live Preview (معاينة حية — تحكم بالمؤشرات الجانبية)

directions اتجاه الحركة (animation-direction)

format_paint أوضاع التعبئة (animation-fill-mode)

timer خاصية animation-delay

شرح قيم `animation-direction` (الاتجاه):

شرح قيم `animation-fill-mode` (وضع التعبئة):

Learn CSS Visually تعلّم CSS بصرياً

Interactive Controls

Flexbox Playground

Live CSS Output

حول المطور

Eng Malek A.Almosanif

Card Element

tune Live Preview (معاينة حية — تحكم بالمؤشرات الجانبية)

swap_horiz Transition (الانتقال)

مرر المؤشر هنا

speed Timing Functions (دوال التوقيت)

دليل سريع للفروقات:

360 Transform (التحويل)

tune Live Preview (معاينة حية — تحكم بالمؤشرات الجانبية)

directions اتجاه الحركة (animation-direction)

format_paint أوضاع التعبئة (animation-fill-mode)

timer خاصية animation-delay

شرح قيم animation-direction (الاتجاه):

شرح قيم animation-fill-mode (وضع التعبئة):

Learn CSS Visually
تعلّم CSS بصرياً

شرح قيم `animation-direction` (الاتجاه):

شرح قيم `animation-fill-mode` (وضع التعبئة):