السلام عليكم
عرض Tooltip باستخدام ال css3 فقط بدون استخدام اي من الـ jquery لقوائم جميلة في الفوتر
صورة من التطبيق
http://engcv.com/example/img/css3-tooltip-big.gif
مثال على التطبيق
عرض المثال
كود code التطبيق
عرض الكود code
او من هنا
رمز PHP:
DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Tooltip with Animation NO jQuerytitle>
<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.Coma>div>
<footer id="masterpanel">
<ul id="mainpanel">
<li><a href="#" class="dribble"><small>Dribblesmall>a>li>
<li><a href="#" class="forrst"><small>Forrstsmall>a>li>
<li><a href="#" class="facebook"><small>Facebooksmall>a>li>
<li><a href="#" class="twitter"><small>Twittersmall>a>li>
<li><a href="#" class="google"><small>Google+small>a>li>
<li><a href="#" class="linked"><small>LinkedInsmall>a>li>
ul>
footer>
body>
html>
المصدر
