gol
gol

hardy

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

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

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

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

×

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

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



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


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

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

محل سکونت: تهران
ماه تولد:
جنسيت:
تماس با میدوری
حالت میدوری
صفحه های میدوری
گوگل پلاس فیس بوک توییتر یوتیوب کلوب
اینستاگرام تلگرام
ارسال: #1
Eye Blink متن و تصویر در کنار هم با ابتکاری بی نظیر با CSS3

rightarrow
متن و تصویر در کنار هم با ابتکاری بی نظیر با CSS3
برای توضیح و جالب تر شدن متن ها اگر تصویر و متن با هم بکار برده شوند مخاطب بیشتری خواهد داشت بویژه اینکه با افکت تصویری هم همراه باشد . نمونه ی زنده ی زیر را ببینید. برای استفاده روی تصویر کوچک کلیک کنید و سپس روی تصویر باز شده با اشاره گر بروید و توضیحات اضافه را ببینید . در پایان کدهای مورد استفاده در این پروژه را هم برای بررسی و استفاده قرار داده ام .


کد HTML:
<style type="text/css">
#container {width:550px; margin:0 auto; border-top:2px solid #000;} /* this demo only - for positioning */
#container h5 {font:bold 14px/50px arial, sans-serif; padding:0; margin:0;}
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
/* tabindex="1" in the link code to fix the 'focus persist' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
/* for Internet Explorer to force a menu refresh after :active + ul */
#gallery a,
html {behavior:url(cssplay21/trigger.htc)}
#gallery {position:relative; width:57px; float:left;}
a.thumb {display:block; width:55px; height:83px; padding:1px; outline:0;}
a.thumb img {display:block; width:100%; border:0;}
.large {padding:0; margin:0; list-style:none; width:220px; position:absolute; overflow:hidden; height:0; 
top:-50px; left:200px;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.large li {width:220px; height:330px; position:absolute; top:0;}
.large li i {display:block; width:220px; height:330px; background:#000; position:absolute; z-index:3; 
top:330px; opacity:0.4; filter: alpha(opacity=40);
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.large li img {position:absolute; top:-330px; z-index:2; opacity:0; filter: alpha(opacity=0);
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.large span {width:200px; height:310px; position:absolute; z-index:4; top:330px; padding:10px; color:#fff; 
font:normal 12px/18px arial, sans-serif;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.large span b {display:block; font:bold 16px/30px arial, sans-serif; color:#fc6;}
.large span a {color:#9cf; font-weight:bold;}
.large li em {font:normal normal 12px/25px arial, sans-serif; display:block; position:absolute; left:0; 
bottom:0; z-index:10; width:200px; padding:0 10px; height:25px; text-align:center; background:#666; 
color:#fff; cursor:pointer;}
a.a1:active ~ .img1 {height:330px;}
a.a1:active ~ .img1 li img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
a.a2:active ~ .img2 {height:330px;} 
a.a2:active ~ .img2 li img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
a.a3:active ~ .img3 {height:330px;}
a.a3:active ~ .img3 li img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
a.a1:focus ~ .img1 {height:330px;}
a.a1:focus ~ .img1 li img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
a.a2:focus ~ .img2 {height:330px;}
a.a2:focus ~ .img2 li img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
a.a3:focus ~ .img3 {height:330px;}
a.a3:focus ~ .img3 li img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
ul.large:hover {height:330px; display:block;}
ul.large:hover img {top:0; z-index:1; opacity:1; filter: alpha(opacity=100);}
ul.large:hover li:hover {direction:ltr;}
ul.large:hover li:hover i {top:0;}
ul.large:hover li:hover img {top:0;}
ul.large:hover li:hover span {top:0;}
p.text {width:450px; padding:0 20px; margin:0; line-height:21px; float:left; font-family:arial, sans-serif; font-size:12px; 
color:#666;}
</style>
<div id="container">
<h5>Information Panels</h5>
<div id="gallery">
<a class ="thumb a1" href="#url" tabindex="1"><img src="frog.jpg" alt=""></a>
<a class ="thumb a2" href="#url" tabindex="1"><img src="emperor.jpg" alt=""></a>
<a class ="thumb a3" href="#url" tabindex="1"><img src="pelican.jpg" alt=""></a>
<ul class ="img1 large" aria-haspopup="true">
<li aria-haspopup="true"><img src="frog.jpg" alt="">
<i></i>
<span><b>Red Eye Frog</b>
Red-eyed tree frogs, as their name states, have <a href="#">bold red eyes</a>
 with vertically narrowed pupils, a vibrant green body with yellow and 
blue striped sides, and orange toes. There is a great deal of regional 
variation in flank and thigh coloration.<br><br> 
Although it has been suggested that <a href="#">A. callidryas'</a> bright colors function as aposematic or sexual signals, 
neither of these hypotheses have been confirmed.
</span>
<em>Hover for info panel / Click to close</em>
</li>
</ul>
<ul class ="img2 large" aria-haspopup="true">
<li aria-haspopup="true"><img src="emperor.jpg" alt="">
<i></i>
<span><b>Emperor Penguin</b>
The Emperor Penguin (Aptenodytes forsteri) is the tallest and heaviest of all living penguin species and is endemic to 
<a href="#">Antarctica</a>.<br><br>
 The male and female are similar in plumage and size, reaching 122 cm (48
 in) in height and weighing anywhere from 22.37 kg (48.82 lb). The 
dorsal parts are black and sharply delineated from the <a href="#">white belly</a>
, pale-yellow breast and bright-yellow ear patches.
</span>
<em>Hover for info panel / Click to close</em>
</li>
</ul>
<ul class ="img3 large" aria-haspopup="true">
<li aria-haspopup="true"><img src="pelican.jpg" alt="">
<i></i>
<span><b>Pelicans</b>
A pelican is a large water bird with a distinctive pouch under the <a href="#">beak</a>
, belonging to the bird family Pelecanidae.<br><br>
Along with the darters, cormorants, gannets, boobies, frigatebirds, and <a href="#">tropicbirds</a>
, pelicans make up the order Pelecaniformes. Modern pelicans are found on all continents except Antarctica.
</span>
<em>Hover for info panel / Click to close</em>
</li>
<ul>
</ul></ul></div>
<p class ="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Donec vitae nisl ligula, at mattis tellus. Mauris tempor molestie felis
 vitae blandit. Mauris varius porta vulputate. <a href="#">Nunc lectus ipsum</a>,
 ultricies et dapibus nec, lacinia at enim. Nam blandit aliquet sem a 
consectetur. Duis mollis laoreet pellentesque. Nunc lacinia, ipsum ut 
adipiscing ultrices, sapien enim lacinia arcu, consectetur laoreet 
lectus ipsum sit amet justo. Curabitur ante metus, accumsan vel pretium 
quis, consequat a sapien. Proin lacus tortor, sollicitudin vitae 
malesuada eu, ultricies non quam. Mauris sit amet sapien enim, tincidunt
 blandit erat. Fusce congue, justo id faucibus pretium, arcu quam ornare
 sapien, sed dignissim ipsum dolor eu eros. Nulla rhoncus nibh at urna 
dictum ac sollicitudin ipsum condimentum. Sed vel tempus tellus. Class 
aptent taciti sociosqu ad litora torquent per conubia nostra, per 
inceptos himenaeos. Aliquam erat volutpat.</p>
</div>
<br class ="clear">
<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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138





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

برچسب ها :

13 - September - 2014 53 : 01 AM
اعتبار: اهدای موجودی بــانــکــ نقل قول این ارسال در یک پاسخ


subscription
quickreply advancequickreply report

موضوع های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
minioni abzar نوشته های نئونی با CSS3 میدوری 0 573 25 - June - 2016 11 : 07 PM
آخرین ارسال: میدوری
minioni abzar اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح چهلم) میدوری 0 696 12 - June - 2016 05 : 05 PM
آخرین ارسال: میدوری
HumanFemale abzar اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح سی و نهم) میدوری 0 667 17 - May - 2016 24 : 05 PM
آخرین ارسال: میدوری
Fish abzar اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح بیست و نهم) میدوری 3 3,029 17 - October - 2015 49 : 11 PM
آخرین ارسال: Pishro
Fish abzar اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح بیست و هشتم) میدوری 2 1,857 17 - October - 2015 17 : 11 PM
آخرین ارسال: میدوری

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

ابزار موضوع



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