الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Centered Image with animated borders</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html { height: 100%; } body { min-height: 100%; display: flex; justify-content: center; align-items: center; background-color: #000; } .box { position: relative; width: 300px; height: 360px; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 20px; } .box img { z-index: 1; width: 180px; } </style> </head> <body> <div class="box"> <img src="/posts/142/f0e1fa11-67f6-4fc5-b6de-0559f1863c7e_harmash-logo.png" > </div> </body> </html>
الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكودالصفحة الرئيسيةتحميل الكودتغيير الألوانتغيير العرضتغيير حجم العرضتشغيل الكود