رفتن به مطلب

درخواست کد html,css مانند این نمونه!


پست های پیشنهاد شده

سلام دوستای گلم..

من میخواستم همچین چیزی و با همین استایل در سایتم استفاده کنم. با این تفاوت که من خودم به صورت دستی عکس و لینک و الت و میذارم برای هر کدوم..

نمونه آنلاین

http://www.wp-parsi.com/

قسمت

اعضای گروه وردپرس پارسی

138004645621.png

==========

پیشاپیش از اینکه لطف کردین و وقتتون گذاشتین سپاس گزاریم . .

ویرایش شده توسط profile
لینک به ارسال

این اسمش Tooltip هست. با CSS و CSS JQuery می تونید ایجادش کنید. تو گوگل که جستجو کنید نمونه های آماده زیادی میاره. منم یه نمونه ساده الان براتون می زارم

کد HTML


<a href="#" class="tooltip">
Tooltip
<span>
<img class="callout" src="src/callout_black.gif" />
<strong>Most Light-weight Tooltip</strong><br />
This is the easy-to-use Tooltip driven purely by CSS.
</span>
</a>
<a href="#" class="tooltip">
<img src="../img/demo/css-tooltip-image.gif" />
<span>
<img class="callout" src="src/callout_black.gif" />
<strong>CSS only Tooltip</strong><br />
<img src="../img/demo/css-tooltip-image.gif" style="float:right;" />
Pure CSS popup tooltips with clean semantic XHTML.
</span>
</a>

کد CSS


a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:60px; margin-left:-160px;
width:240px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute;
border:2px solid #FFF; color:#EEE;
background:#000 url(src/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}

/*CSS3 extras*/
a.tooltip span
{
border-radius:2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;

-moz-box-shadow: 0px 0px 8px 4px #666;
-webkit-box-shadow: 0px 0px 8px 4px #666;
box-shadow: 0px 0px 8px 4px #666;
opacity: 0.8;
}

لینک به ارسال

این اسمش Tooltip هست. با CSS و CSS JQuery می تونید ایجادش کنید. تو گوگل که جستجو کنید نمونه های آماده زیادی میاره. منم یه نمونه ساده الان براتون می زارم

کد HTML


<a href="#" class="tooltip">
Tooltip
<span>
<img class="callout" src="src/callout_black.gif" />
<strong>Most Light-weight Tooltip</strong><br />
This is the easy-to-use Tooltip driven purely by CSS.
</span>
</a>
<a href="#" class="tooltip">
<img src="../img/demo/css-tooltip-image.gif" />
<span>
<img class="callout" src="src/callout_black.gif" />
<strong>CSS only Tooltip</strong><br />
<img src="../img/demo/css-tooltip-image.gif" style="float:right;" />
Pure CSS popup tooltips with clean semantic XHTML.
</span>
</a>

کد CSS


a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:60px; margin-left:-160px;
width:240px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute;
border:2px solid #FFF; color:#EEE;
background:#000 url(src/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}

/*CSS3 extras*/
a.tooltip span
{
border-radius:2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;

-moz-box-shadow: 0px 0px 8px 4px #666;
-webkit-box-shadow: 0px 0px 8px 4px #666;
box-shadow: 0px 0px 8px 4px #666;
opacity: 0.8;
}

ممنون دوست عزیز..

ولی من میخواستم از این کد توی "ابزارک==html" استفاده کنم...

جطور میشه؟؟

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...