gol
gol

hardy

خسته شو گر مرهمی می‌بایدت

دم مزن گر همدمی می‌بایدت

تا در اثباتی تو بس نامحرمی

محو شو گر محرمی می‌بایدت
«عطار نیشابوری»

×

توجه : دو ارسال نخستِ کاربرانِ جدید در تالار میدوری , پیش از نمایش , نیاز به تایید مدیریت دارند.

Latest Threads  آخرین ارسال ها :
نمایش آخرین ارسال این موضوع
 
امتیاز موضوع:
  • 5 رأی - میانگین امیتازات : 3.4
  • 1
  • 2
  • 3
  • 4
  • 5
 
  
1 کاربر حاضر در تاپیک: (0 عضو, و 1 مهمان). 1 مهمان
نویسنده:میدوری
آخرین ارسال:میدوری
پاسخ: 1
بازدید: 868
subscription
quickreply advancequickreply report



( ابزار سایت ) دو طرح و شکل زیبا با CSS3
  نویسنده پیام  | تغییر اندازه ی متن:  zoomin zoomout default
admin میدوری profile  
آفلاین
مدیر کل تالار
مدالهای میدوری1000500
1001011720
168241051
دسترسی به میدوری
ارسال یک ایمیل به این کاربر ارسال یک پیام خصوصی به این کاربر مشاهده وب سایت کاربر یافتن تمامی ارسال های این کاربر اعتبار:
اطلاعات میدوری


تاریخ عضویت: 05 November 2011

ارسال ها: 1,732
شماره کاربری: 1
میزان اعتبار:

محل سکونت: تهران
ماه تولد:
جنسيت:
تماس با میدوری
حالت میدوری
صفحه های میدوری
گوگل پلاس فیس بوک توییتر یوتیوب کلوب
اینستاگرام تلگرام
ارسال: #1
Heart دو طرح و شکل زیبا با CSS3

rightarrow
دو طرح و شکل زیبا با CSS3
دو طرح زيبا و باور نکردنی ( پو و عنکبوت ) که فقط و فقط با کد نویسی ایجاد شده اند را برای دوستان قرار میدهم تا به قدرت کد های CSS3 بیشتر آشنا شوند .دو طرح زیر فقط با کدهای CSS3 ایجاد شده اند . کدها را هم در زیر برای دوستان قرار داده ام (جهت بررسی). باشد که دوستان کارشناس هم بخود بیایند و طرح های بهتری را ارایه کنند .


کد PHP:
<style type="text/css">
div.pebble {width:180px; height:200px; background:#d80; margin:100px 150px; position:relative; border:solid #222; 
border-width:1px 3px 8px 3px; float:left;
border-radius: 90px / 150px 150px 50px 50px;
box-shadow: inset -10px -10px 10px rgba(0,0,0,0.2), inset 10px 20px 10px rgba(255,255,255,0.2), 0 0 10px rgba(0,0,0,1);
}
div.pebble::before {display:block; content:""; width:50px; height:30px; border-radius:50%/50%; background:#c00; z-index:100; 
position:absolute; left:80px; top:150px;
box-shadow:10px 10px 10px rgba(0,0,0,0.4);
background-image: -webkit-radial-gradient(25px 15px, circle farthest-corner, rgba(255,255,255,1), rgba(255,255,255,0.5) 10%, 
rgba(204,0,0,0.5) 15%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at 25px 15px, rgba(255,255,255,1), rgba(255,255,255,0.5) 10%, 
rgba(204,0,0,0.5) 15%);
-webkit-transform-origin:right center;
transform-origin:right center;
-webkit-transform:rotate(15deg);
transform:rotate(15deg);
}
div.pebble::after {display:block; content:""; width:35px; height:30px; border-radius:50%/50%; background:#c00; z-index:90; 
position:absolute; left:95px; top:153px;
-webkit-transform-origin:right center;
transform-origin:right center;
-webkit-transform:rotate(35deg);
transform:rotate(35deg);
}
div.pebble  div:nth-of-type(1),
div.pebble  div:nth-of-type(2)
{width:70px; height:90px; background:#fff; position:absolute; top:-32px; border:solid #222; border-width:4px 1px 4px 1px;
background-image: -webkit-radial-gradient(40px 60px, circle farthest-corner, rgba(255,255,255,1), rgba(255,255,255,1) 50%, 
rgba(192,192,192,0.5) 100%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at 40px 60px, rgba(255,255,255,1), rgba(255,255,255,1) 50%,  
rgba(192,192,192,0.5) 100%);
border-radius: 35px / 45px;
box-shadow: 0 0 7px rgba(0,0,0,1);
}
div.pebble div:nth-of-type(1) {left:30px;}
div.pebble div:nth-of-type(2) {left:102px;}
div.pebble div:nth-of-type(1)::before,
div.pebble div:nth-of-type(2)::before {display:block; content:""; width:55px; height:55px; border-radius:55px; background:#000; 
position:absolute; right:1px; bottom:7px;
background-image: -webkit-radial-gradient(20px 20px, circle farthest-corner, rgba(255,255,255,1), rgba(255,255,255,1) 20%, 
rgba(0,0,0,0.5) 30%, rgba(0,0,0,1) 80%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at 20px 20px, rgba(255,255,255,1), rgba(255,255,255,1) 20%, 
rgba(0,0,0,0.5) 30%, rgba(0,0,0,1) 80%);
box-shadow: 0 0 7px rgba(0,0,0,1);
}
div.pebble div:nth-of-type(1)::after,
div.pebble div:nth-of-type(2)::after {display:block; content:""; width:5px; height:5px; border-radius:5px; background:#fff; 
position:absolute; right:15px; bottom:20px;
box-shadow: 0 0 5px rgba(255,255,255,1);
}
div.pebble div:nth-of-type(3) {width:80px; height:90px; background:#600; position:absolute; left:60px; bottom:30px; 
border:solid #222; border-width:1px 2px 4px 2px;
border-radius: 40px / 70px 70px 20px 20px;
box-shadow: inset 10px 10px 10px rgba(0,0,0,0.4), inset -10px -10px 10px rgba(255,255,255,0.2), 0 0 10px rgba(0,0,0,1);
}
.spider {width:0; height:0; position:relative; float:left; margin-top:150px; z-index:10;}
.spider::before {display:block; content:""; width:20px; height:30px; border-radius:50%/50%; border:solid #000; 
border-width:1px 2px 3px 2px; border-color:#fff #333 #000 #333;
position:absolute; left:-11px; bottom:15px;}
.spider::after {display:block; content:""; width:280px; height:170px; border:10px double rgba(255,255,255,0.6); 
position:absolute; left:-140px; top:-70px; border-radius:50%/50%; z-index:100;}
.spider div:nth-of-type(1) {width:50px; height:60px; background:#000; border:2px double #aaa; border-radius:50%/50%; 
position:absolute; top:0; left:-25px; z-index:100;
background-image: -webkit-radial-gradient(20px 20px, circle farthest-corner, rgba(255,255,255,1), rgba(255,255,255,0.7) 10%, 
rgba(0,0,0,1) 15%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at 20px 20px, rgba(255,255,255,1), rgba(255,255,255,0.7) 10%,  
rgba(0,0,0,1) 15%);
box-shadow: 0 0 15px rgba(0,0,0,1);
}
.spider div:nth-of-type(1)::before {display:block; content:""; width:130px; height:170px; border-radius:50%/50%; border:double; 
border-width:5px 3px 1px 3px; border-color:#000 #333 #fff #333;
position:absolute; left:-43px; top:5px; z-index:-1;
box-shadow: 0 -5px 5px rgba(0,0,0,1);
}
.spider div:nth-of-type(1)::after {display:block; content:""; width:250px; height:170px; border-radius:50%/50%; border:double; 
border-width:5px 3px 1px 3px; border-color:#000 #333 #fff #333;
position:absolute; left:-100px; top:5px; z-index:-1;
box-shadow: 0 -5px 5px rgba(0,0,0,1);
}
.spider div:nth-of-type(2) {width:30px; height:40px; background:#000; border:2px double #aaa; border-radius:50%/50%; 
position:absolute; bottom:-10px; left:-15px; z-index:100;
background-image: -webkit-radial-gradient(11px 13px, circle farthest-corner, rgba(255,255,255,1), rgba(255,255,255,0.7) 10%, 
rgba(0,0,0,1) 15%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at 11px 13px, rgba(255,255,255,1), rgba(255,255,255,0.7) 10%,  
rgba(0,0,0,1) 15%);
box-shadow: 0 0 15px rgba(0,0,0,1);
}
.spider div:nth-of-type(2)::before {display:block; content:""; width:100px; height:120px; border-radius:50%/50%; 
border:double; border-width:1px 3px 5px 3px; border-color:#fff #333 #000 #333;
position:absolute; left:-40px; bottom:5px; z-index:-1;
box-shadow: 0 5px 5px rgba(0,0,0,1);
}
.spider div:nth-of-type(2)::after {display:block; content:""; width:200px; height:130px; border-radius:50%/50%; border:double; 
border-width:1px 3px 5px 3px; border-color:#fff #333 #000 #333;
position:absolute; left:-90px; bottom:2px; z-index:-1;
box-shadow: 0 5px 5px rgba(0,0,0,1);
}
</style>
<br><br>
<div class ="pebble">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class ="spider">
    <div></div>
    <div></div>
</div>
<br clear="all"><br>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110





امضای میدوری :
[تصویر: mvd09b5.gif]
[تصویر: midori-sign-400.png]
( آخرین ویرایش در این ارسال: 25 - April - 2014 12 : 11 AM، توسط : میدوری .::. دلیل ویرایش: )
محل حضور کاربر در تالار :  admin میدوری در تالار ميدوری حضور ندارد .
ديدگاه کاربران برای مطلب : help (روی آیکون مورد نظر کلیک کنید تا دیدگاه شما ثبت شود . در صورت انصراف تا دوبار می توانید دیدگاه خود را ثبت کنید . برای پاک کردن دیدگاه روی همان آیکون یک بار کلیک کنید تا دیدگاه شما پاک شود .)

برچسب ها :

25 - April - 2014 04 : 11 AM
اعتبار: اهدای موجودی بــانــکــ نقل قول این ارسال در یک پاسخ


subscription
quickreply advancequickreply report

موضوع های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
minioni abzar نوشته های نئونی با CSS3 میدوری 0 584 25 - June - 2016 11 : 07 PM
آخرین ارسال: میدوری
minioni abzar اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح چهلم) میدوری 0 709 12 - June - 2016 05 : 05 PM
آخرین ارسال: میدوری
HumanFemale abzar اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح سی و نهم) میدوری 0 679 17 - May - 2016 24 : 05 PM
آخرین ارسال: میدوری
Flower abzar چک باکس های زیبا با CSS میدوری 0 924 01 - December - 2015 50 : 12 PM
آخرین ارسال: میدوری
Fish abzar اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح بیست و نهم) میدوری 3 3,042 17 - October - 2015 49 : 11 PM
آخرین ارسال: Pishro

بازديدکنندگان از موضوع
کاربرانی که از موضوع بازدید کرده اند ( 2 ) کاربر

ابزار موضوع



1 کاربر حاضر در تاپیک: (0 عضو, و 1 مهمان). 1 مهمان