سوال: Borderهای این سایت چطور ایجاد شده؟ [بایگانی]

bftarane

سه شنبه 31 اردیبهشت 1392, 13:30 عصر

سلام.
لطفاً این سایت رو ببینید
http://css-tricks.com/forums/discussion/17818/html5-section-tag/p1
سوال من اینه که این بردرهای سمت راست و پایین که در شکل زیر با فلش مشخص کردم چطور ایجاد شدن؟
من با فایرباگ و Inspector کروم نتونستم سر در بیارم.
104466
ممنون.

r4hgozar

سه شنبه 31 اردیبهشت 1392, 13:42 عصر

سلام .
فکر کنم این یه پترنه که پشت صفحه داده شده. بعد روش صفحه اومده. 2 تا عکس. دقت کنین.
حاشیه نیست چند تا تصویر روی هم اومده.
پشت پترنه

Ali0Boy

سه شنبه 31 اردیبهشت 1392, 13:55 عصر

سلام، دوست عزیز این تصویر نیست، بوسیله Css 3 طراحی شده است.
شما می توانید کد زیر رو اجرا کنید، یک نمونه مثال برای همین هست. من بررسی کردم اینطوری بود (البته به نظر من)
به روش css3 خیلی از کارها رو می شه به راحتی انجام داد بدون اینکه پترن یا تصویر های متعدد بارگزاری کنیم.

<html>
<body>
<div style="width:400px; height:400px; background-color:#000; box-shadow: 10px 10px 0px #888888;">
<div style="width:400px; height:400px; background-color:orange; box-shadow: 5px 5px 0px #aaa;">
</div>
</div>
</body>
</html>

کامروا

سه شنبه 31 اردیبهشت 1392, 13:55 عصر

سلام.
لطفاً این سایت رو ببینید
http://css-tricks.com/forums/discussion/17818/html5-section-tag/p1
سوال من اینه که این بردرهای سمت راست و پایین که در شکل زیر با فلش مشخص کردم چطور ایجاد شدن؟
من با فایرباگ و Inspector کروم نتونستم سر در بیارم.
104466
ممنون.
این سایت واسه من باز نمیشه !
اگر منظورتون رو درست متوجه شده باشم به این شکل :
border: 10px groove #ccc;

Mohsen.

سه شنبه 31 اردیبهشت 1392, 18:09 عصر

بله. با box-shadow است. بفرمایید

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Box-shadow</title>
<style type="text/css">
.box{
width: 500px;
height: 300px;
margin: 0 auto;
background: #FDE5C5;
box-shadow: 5px 5px 0px 2px #ccc,
10px 10px 0px 2px #777;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

2undercover

چهارشنبه 01 خرداد 1392, 11:01 صبح

با box-shadow میشه اما این سایت از after و before برای اینکار استفاده کرده!

Mohsen.

چهارشنبه 01 خرداد 1392, 11:42 صبح

با box-shadow میشه اما این سایت از after و before برای اینکار استفاده کرده!

بله درسته. با after و before هم میشه اینکارو کرد. راهکار زیاده. فقط باید استفاده کرد.