الأربعاء، 12 سبتمبر 2012

طريقة عمل تاثيرات علي الازرار والقوائم css المميزه


طريقة عمل تاثيرات علي الازرار والقوائم بتقنية ال css3 المميزه

السلام عليكم ورحمة الله وبركاتة .. درس اليوم استكمالا لسلسلة دروس كنت قد انتويت وضعها هنا للوصول ان شاء الله تعالي بمدونتك نحو الاحتراف والتصميم الجيد والشكل الانيق .. درس اليوم عباره عن اضافة تستطيع من خلالها عمل تاثيرات رائعه ومتميزه علي جميع الازرار الموجوده في مدونتك وكذلك القوائم كما يمكن استخدامها بديلا للايقونات المصوره كايقونة التحميل او المشاهده .. الخ وذلك بتقنية ال 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 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 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>

ملحوظة : قم بتغيير LINK  بالرابط الذي ترغب فيه وتغيير LINKNAME بالاسم المؤدي الرابط اليه..
كرر تلك العمليه مع الروابط الاربعه .. وتذكر انك يمكنك التبديل بين الاحجام عن طريق المتغير small و medium و big.

ومبروك عليك الاضافة الرائعة
لا تقرأ وترحل شارك معنا بتعليق فنحن تكبدنا عناء البحث لنجلب لك الافضل والاجمل


ضع تعليقك

0 التعليقات:

البحــث

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

المتابعون

استثمارا للخبرات العالية والإمكانات التقنية المتميزة والطاقات البشرية الكبيرة التي تتميز بها "ابداع" أنشأت المؤسسة إدارة تتبنى عمل المواقع الخدمية المتنوعة للأفراد والهيئات والمؤسسات الكبرى. كما يمكنها عمل مواقع للتجارة الإلكترونية تتمكن الشركات والمتاجر من ترويج منتجاتها في كافة أنحاء العالم وتزويد مواقعها بإمكانية البيع عبر الإنترنت وتشمل خدمة بناء مواقع الإنترنت عدة مراحل بدأ من عملية التصميم المبدئي للموقع، وحتى الانتهاء منه، والقيام بتحديث الموقع كلما تطلب الأمر كما تتميز مؤسسة "ابداع" بأقوى فريق عمل متواصل مع العملاء 24 ساعة على مدار الأسبوع وتمتاز أيضا بكفاءة الدقة والسرعة في العمل لذلك نحمد الله العلي العظيم على منحنا تلك القدرة