الأربعاء، 12 سبتمبر 2012
طريقة عمل تاثيرات علي الازرار والقوائم css المميزه
السلام عليكم ورحمة
الله وبركاتة .. درس اليوم استكمالا لسلسلة دروس كنت قد انتويت وضعها هنا
للوصول ان شاء الله تعالي بمدونتك نحو الاحتراف والتصميم الجيد والشكل
الانيق .. درس اليوم عباره عن اضافة تستطيع من خلالها عمل تاثيرات رائعه
ومتميزه علي جميع الازرار الموجوده في مدونتك وكذلك القوائم كما يمكن
استخدامها بديلا للايقونات المصوره كايقونة التحميل او المشاهده .. الخ
وذلك بتقنية ال css3 الغنية عن التعريف . اضافة اليوم موجوده متوفره
بثلاث احجام كما هو موجود في المثال المرفق تستطيع التبديل بينهم كيفما شئت
..
والان ناتي لتطبيق تلك الاضافه علي مدونة بلوجر : قم بالذهاب الي لوحة التحكم ثم الي تحرير HTML
قم بالبحث داخل قالب مدونتك عن ]]></b:skin> وضع قبله مباشرة الكود الموجود بالاسفل :.button{الان ناتى للجزء الاخير وهو الروابط
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyR6vy2ge0T-6jPWHBsbKjbn0iS9Pc_nRDqWtzzbN-czaUgoViTHuW_YPh240ALqByhyphenhyphenOCs-nCz7mK0rv8XqnIs5tsmRYFxnxWK-deUX5Pgol1wAscqYCTZ3_9Rn-zXDIai9bR4WjKxam9/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
الحجم الكبير
<a class="button big blue" href="LINK">LINKNAME</a>
<a class="button big green" href="LINK">LINKNAME</a>
<a class="button big orange" href="LINK">LINKNAME</a>
<a class="button big gray" href="LINK">LINKNAME</a>
<a class="button big green" href="LINK">LINKNAME</a>
<a class="button big orange" href="LINK">LINKNAME</a>
<a class="button big gray" href="LINK">LINKNAME</a>
الحجم المتوسط
<a class="button blue medium" href="LINK">LINKNAME</a>
<a class="button green medium" href="LINK">LINKNAME</a>
<a class="button orange medium" href="LINK">LINKNAME</a>
<a class="button gray medium" href="LINK">LINKNAME</a>
<a class="button green medium" href="LINK">LINKNAME</a>
<a class="button orange medium" href="LINK">LINKNAME</a>
<a class="button gray medium" href="LINK">LINKNAME</a>
الحجم الصغير
<a class="button small blue" href="LINK">LINKNAME</a>
<a class="button small green" href="LINK">LINKNAME</a>
<a class="button small orange" href="LINK">LINKNAME</a>
<a class="button small gray" href="LINK">LINKNAME</a>
<a class="button small green" href="LINK">LINKNAME</a>
<a class="button small orange" href="LINK">LINKNAME</a>
<a class="button small gray" href="LINK">LINKNAME</a>
ملحوظة : قم بتغيير LINK بالرابط الذي ترغب فيه وتغيير LINKNAME بالاسم المؤدي الرابط اليه..
كرر تلك العمليه مع الروابط الاربعه .. وتذكر انك يمكنك التبديل بين الاحجام عن طريق المتغير small و medium و big.
ومبروك عليك الاضافة الرائعة
لا تقرأ وترحل شارك معنا بتعليق فنحن تكبدنا عناء البحث لنجلب لك الافضل والاجمل
التسميات:
اضافات css
بقلم : Abda3Design
لخدمات التصميم والبرمجة
إدارة تتبنى عمل المواقع الخدمية المتنوعة للأفراد والهيئات والمؤسسات الكبرى. كما يمكنها عمل مواقع للتجارة الإلكترونية كما تتميز مؤسسة "ابداع ديزاين" . بأقوى فريق عمل متواصل مع العملاء 24 ساعة على مدار الأسبوع وتمتاز أيضا بكفاءة الدقة والسرعة
ضع تعليقك
0 التعليقات:
إرسال تعليق