tnt6667

آموزش ساخت تولتیپ های متحرک با css3

آغاز شده توسط: tnt6667,

6 پست در این موضوع

ارسال شده در

درود

اینم ی انقلابی در طراحی وب با این آموزش و دمو می تونید ی انقلاب در طراحی خودتون انجام بدید

پیش نمایش

ایده این است که یک لیست از لینک ها یا در این نمونه ، آیکون های اجتماعی ، داشته باشیم که یک تولتیپ کوچک با اشاره به آن ها شناور شود .

لیست شبیه چیزی مانند این است :

?

<ul class="tt-wrapper">

<li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>

<li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>

<li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>

<li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>

<li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>

<li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>

</ul>

این عناصر به سمت چپ شناور خواهند بود و استایل های روبرو را خواهیم داشت :

?

.tt-wrapper li a{

display: block;

width: 68px;

height: 70px;

margin: 0 2px;

outline: none;

background: transparent url(../images/icons.png) no-repeat top left;

position: relative;

}

هر عنصر مکان پس زمینه متفاوتی برای تصویر پس زمینه دارد :

?

.tt-wrapper li .tt-gplus{

background-position: 0px 0px;

}

.tt-wrapper li .tt-twitter{

background-position: -68px 0px;

}

.tt-wrapper li .tt-dribbble{

background-position: -136px 0px;

}

.tt-wrapper li .tt-facebook{

background-position: -204px 0px;

}

.tt-wrapper li .tt-linkedin{

background-position: -272px 0px;

}

.tt-wrapper li .tt-forrst{

background-position: -340px 0px;

}

span به عنوان تولتیپ ماست و میزان کدری اون رو روی 0 میذاریم تا مخفی بشه . افکتی رو که من می خوام برای شما بیان کنم اینه که تولتیپ به صورت fade میاد و از بالا ظاهر میشه . پس یه اون فاصله 100px رو از پایین (bottom) میدهیم و بالای عنصر خودمون قرار میدیم:

?

.tt-wrapper li a span{

width: 100px;

height: auto;

line-height: 20px;

padding: 10px;

left: 50%;

margin-left: -64px;

font-family: 'Alegreya SC', Georgia, serif;

font-weight: 400;

font-style: italic;

font-size: 14px;

color: #719DAB;

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

text-align: center;

border: 4px solid #fff;

background: rgba(255,255,255,0.3);

text-indent: 0px;

border-radius: 5px;

position: absolute;

pointer-events: none;

bottom: 100px;

opacity: 0;

box-shadow: 1px 1px 2px rgba(0,0,0,0.1);

transition: all 0.3s ease-in-out;

}

ما تولتیپی خواهیم ساخت که هنگام اشاره به عنصر ظاهر میشود (و فضای اطرافش یا همون span هم جزء عنصر است) همچنین تولتیپ هنگام اشاره به عنصر در منطقه بالای آن قرار می گیرد ( span هنوز اونجا هست، فقط کدری آن روی 0 است که باعث دیده نشدن آن میشود )

برای اشاره گر کوچک، ما به شبه-عنصر ها (pseudo-elements) استایل های :before و :after خواهیم افزود. ما با همین روش به آنها استایل میدیم و یک مثلث با استفاده از border های چپ و راست می سازیم . شبه عنصر :before به عنوان یک سایه ای برای شبه عنصر :after بکار میره، پس به آن رنگ rgba سیاه با کدری کم می دهیم .

?

.tt-wrapper li a span:before,

.tt-wrapper li a span:after{

content: '';

position: absolute;

bottom: -15px;

left: 50%;

margin-left: -9px;

width: 0;

height: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-top: 10px solid rgba(0,0,0,0.1);

}

شبه-عنصر :after ما یک پیکسل به عقب میرود و ما آن را سفید می سازیم، درست مثل borderهای تولتتیپ خودش.

?

.tt-wrapper li a span:after{

bottom: -14px;

margin-left: -10px;

border-top: 10px solid #fff;

}

و در آخر ، هنگام اشاره ، ما span را از بالا به حرکت در می آوریم و آن را به صورت fade ظاهر می کنیم :

?

.tt-wrapper li a:hover span{

opacity: 0.9;

bottom: 70px;

}

و پایان! شما توانستید به سادگی تولتیپ های متحرک بسازید ! در دموی دوم،شما می توانید استایل دیگه ای از تولتیپ رو ببینید (یک دایره جالب) که به صورت متحرک تغییر اندازه داده و بزرگ میشود و در دموی سوم تولتیپ ها حالت چرخشی دارند . دموی چهارم شکل دیگری از این آموزش است .

امیدوارم که این آموزش مورد پسند شما قرار گرفته باشه .

بدرود

Share this post

Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

ارسال شده در

مرسی ممنون از اموزش ولی لینک پیش نمایش کار نمیکنه لینک دانلود هم کار نمیکنه لطفا برسی کنید خیلی ممنون میشم

Share this post

Link to post
Share on other sites

ارسال شده در

خیلی تول تیپز قشنگی عالیهههههههههههههه

حالا یه سوال من بخوام تو قالب اینو بچسبونم به اسکرول قالب سمت چپ یا راست چطوری اینکارو انجام میشه داد؟

Share this post

Link to post
Share on other sites

ارسال شده در

سلام.من می خواستم به تصاویرم هنگامی که موس روی اون ها میره حالت برجسته بدم.ولی نمیدونم از چه کد css باید استفاده کنم ودر کجا!با توجه به کدهای html وcss من بایستی این ویژگی رو برای تصاویر در کجا تعریف کنم؟ چون تصاویر اکثر در بلوک ها هستند و با id و کلاس بلوک ها قرار گرفته اند.چطوری بهشون اعمال کنم؟درکجا اعامل کنم و کدش چیه!؟

کد css قالب:


#wrapper {max-width:100%; background: url(../images/body-bg.png); height:auto; margin: auto;}

body {background: url(../images/body-bg.png); margin: 0; height: 100%; min-width: 100%; font-family: tahoma; font-size: 10pt;}



#header {max-width:100%; height: 200px; background: url(../images/headeredit.png); border-radius: 10px;padding-left: 5%}


.css{position: absolute; font-family: b yekan; font-size: 10pt; color: white; background-color: none}

#container {background: url(../images/body-bg.png); width: 100%; height: auto; margin: auto;}

#menu {background: url(../images/menu11.png); width: 100%; height: 35px ;background-repeat: repeat-y; display: block; font-family: tahoma; margin-top: 2px; border-radius: 10px; padding-top: 0px;}


.dj-main{min-width: 100%;background: none; position: absolute; font-family: tahoma ; font-size: 1pt; direction:rtl; border-radius:10px}



a:link{text-decoration: none; color: blue}
a:visited{text-decoration: none; color: blue}
a:hover{ text-decoration: none; color: red}



#right-sidebar{ background: white; background-repeat: repeat-y;min-width: 19.5% ; height: auto; display: block; float: right; border-radius: 10px; margin-top: 2px; margin-bottom: 5px; border: solid; border-color: silver}
#right-sidebar .block{ background: url(../images/header-sidebar5.png); width: 100%; height: 30PX; text-align: center; border-radius: 5px;}
#right-sidebar .block-content{min-width: 20.5%; height: auto; font-family: tahoma; text-align: right; border-radius: 10px; margin-bottom: 2%; margin-top: 2% ;padding-right: 4%}

.block1{ background: url(../images/header-sidebar6.png); width: 100%; height: 30PX; text-align: center; border-radius: 5px;}
.block2{ background: url(../images/header-sidebar.png); width: 100%; height: 45PX; text-align: center; border-radius: 5px;}
.block3{background: url(../images/header-sidebar.png); width: 100%; height: 45PX; text-align: center; border-radius: 10px;}
.block4{ background: url(../images/header-sidebar.png); width: 100%; height: 45PX; text-align: center; border-radius: 10px;}


#polldiv_1{text-align: right;direction:rtl}

#content{ background-color: white; max-width: 59.1% ;height: auto; float: right; display: block; border-radius: 10px; margin-top: 2px; margin-bottom: 10px; margin-right: 6px; margin-left:6px;}
#content .block1{background: url(../images/titr4.png); width: 100%; height: 30px; font-size: 11px; text-align: right;display: block; font-family: b homa; font-size: 10pt}
.sp_news_higlighter{margin-right: 5%}


.content1{background-color: white; width: 24.15% ; height: 255px;  display: block; float: right;border: solid; border-color: green; margin-top: 2%; border-radius: 5px; text-align: right; font-family: b yekan;}



#content .content-content {text-align: right; height: auto; font-size: 8pt; padding-right: 20px; padding-left:20px; font-family: tahoma; padding-top: 5px; text-align: right; padding-left: 2% }

#content .content-content .block-content1{ background-color: gray; width: 49%; height: auto; display: block; text-align: right; float: right; border: groove; border-color:white; border-radius:10px;}
#content .content-content .block-content2{ background-color: gray; width: 49%; height: auto; display: block; text-align: right; float:left; border: groove; border-color:white; border-radius:10px;}


#left-sidebar { background: white; background-repeat: repeat-y; width: 19.6%; height: auto; float: left; display: block; border-radius: 10px; margin-top: 2px; border: solid; border-color: silver}
#left-sidebar .block{ background:url(../images/header-left.png) ; width: 100%; height: 20px; font-family: b homa; font-size: 15pt; text-align: center; border-radius: 5px; padding-bottom: 10px; margin-bottom: 2%}
#left-sidebar .block-content{max-width: 100%; height: auto; font-family: b homa; text-align: center; border-radius: 10px; border: groove; border-color: black}

#footer {background: url(../images/footer150.png); max-width: 100%; height: 150px;}
#footer .block-content{ background-color: none; max-width: 100%; height: auto; display: block; text-align: center;}

کد html قالب:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>toluekerman</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css"/>


</head>


<body>

<div id="wrapper">





<div id="header">



</div>

<div id="container">


<div id="menu">


</div>

<div id="right-sidebar">

<div class="block"></div>

<div class="block-content"></div>
<div class="block1"></div>

<div class="block-content"></div>
<div class="block2">کاربری</div>
<div class="block-content"></div>
<div class="block3">کاربری</div>
<div class="block-content"></div>
<div class="block4">پیوندها</div>
<div class="block-content"></div>


</div>


<div id="content">
<div class="block1">:تیترخبر</div>


<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>





<div class="content-content">

<div class="block-content1">
<div class="block-content2">

</div>
</div>

</div>



</div>



<div id="left-sidebar">

<div class="block"></div>

<div class="block-content"></div>
<div class="block-content"></div>
<div class="block-content"></div>
<div class="block-content"></div>
<div class="block-content"></div>
<div class="block-content"></div>


</div>


<br style="clear: both"/>

</div>



<div id="footer">


<div class="block-content"></div>





</div>


</div>



</body>



</html>

Share this post

Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری
بازگشت به لیست عناوین تاپیک ابزارها و سایتهای مفید