ط¹ط±ط¶ Tooltip ط¨ط§ط³طھط®ط¯ط§ظ… ط§ظ„ css3 ظپظ‚ط· ط¨ط¯ظˆظ† ط§ط³طھط®ط¯ط§ظ… ط§ظٹ ظ…ظ† ط§ظ„ظ€ jquery ظ„ظ‚ظˆط§ط¦ظ… ط¬ظ…ظٹظ„ط© ظپظٹ ط§ظ„ظپظˆطھط±


السلام عليكم

عرض Tooltip باستخدام ال css3 فقط بدون استخدام اي من الـ jquery لقوائم جميلة في الفوتر

صورة من التطبيق




مثال على التطبيق

عرض المثال

كود code التطبيق



عرض الكود code




او من هنا



رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Tooltip with Animation NO jQuery</title>
<style type="text/css">
body {
background: #161616 url(http://engcv.com/example/img/pattern_40.gif) top left repeat;
margin: 0;
padding: 0;
font: 12px normal Verdana, Arial, Helvetica, sans-serif;
height: 100%;
}

* {margin: 0; padding: 0; outline: none;}

img {border: none;}



#masterpanel {
background-color:#161616;
background: -moz-linear-gradient(top, rgba(22,22,22,.7) 0%, rgba(51,51,51,.7) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,.7)), color-stop(100%,rgba(51,51,51,.7)));
background: -webkit-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
background: -o-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
background: linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2161616,endColorstr=#B2333333);
-moz-box-shadow:0 1px 10px #00c6ff;
-webkit-box-shadow: 0 1px 10px #00c6ff;
box-shadow:0 1px 10px #00c6ff;
position:fixed;
bottom:0;
left:0;
z-index:999;
width:100%;
}

#masterpanel ul {
padding:0;
margin:0;
float:left;
width:80%;
margin:0 10%;
list-style:none;
font-size:1em;
}
#masterpanel ul li {
padding:0;
margin:0;
float:left;
position:relative;
border-right:1px solid #555;
}
#masterpanel ul li:first-child { border-left:1px solid #555; }

#masterpanel ul li a {
margin:5px;
margin-left:20px;
margin-right:20px;
float:left;
height:26px;
width:26px;
text-decoration:none;
color:#333;



position:relative;
}

a.dribble {background:url(http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Tooltip-with-Animation-NO-jQuery/_0050_Dribbble.png) no-repeat; width:26px;}
a.forrst { background:url(http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Tooltip-with-Animation-NO-jQuery/_0049_Forrst.png) no-repeat; }
a.facebook { background:url(http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Tooltip-with-Animation-NO-jQuery/_0048_Facebook.png) no-repeat;}
a.twitter { background:url(http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Tooltip-with-Animation-NO-jQuery/_0046_Twitter.png) no-repeat;}
a.google { background:url(http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Tooltip-with-Animation-NO-jQuery/google.png) no-repeat;}
a.linked { background:url(http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Tooltip-with-Animation-NO-jQuery/_0018_Linkedin.png) no-repeat;}

#masterpanel a small {
background:#000;
text-align:center;
width:70px;
padding:5px;
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
border-radius:3px;
display:none;
color:#fff;
font-size:0.8em;
text-indent:0;
}

#masterpanel a:hover small {
display:block;
position:absolute;
top:0px;
left:50%;
margin:-40px;
z-index:9999;
-moz-animation:mymove .25s linear;
-webkit-animation:mymove .25s linear;
}

@-moz-keyframes mymove {
0%{ -moz-transform:scale(0,0); opacity:0;}
50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; }
75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;}
100%{ -moz-transform:scale(1,1); opacity:1;}
}

@-webkit-keyframes mymove {
0%{ -webkit-transform:scale(0,0); opacity:0;}
50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;}
75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;}
100%{ -webkit-transform:scale(1,1); opacity:1;}
}
</style>
</head>
<body>
<div style="text-align: center;"><a href="http://engcv.com" style="text-decoration: none;color: #fff; font-size: 12px;">EngCv.Com</a></div>

<footer id="masterpanel">
<ul id="mainpanel">

<li><a href="#" class="dribble"><small>Dribble</small></a></li>
<li><a href="#" class="forrst"><small>Forrst</small></a></li>
<li><a href="#" class="facebook"><small>Facebook</small></a></li>
<li><a href="#" class="twitter"><small>Twitter</small></a></li>
<li><a href="#" class="google"><small>Google+</small></a></li>
<li><a href="#" class="linked"><small>LinkedIn</small></a></li>

</ul>
</footer>
</body>
</html>
</code> </code>

المصدر










©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©