كود المواضيع المميز بالتومبيلات و css

من طرف **C.RONALDO** الأحد 11 مايو - 11:18

السلام عليكم

صورة الكود قبل مرور الماوس :لبيلبي:

صور الكود بعد مرور الماوس :vcxvcxvxc:

الكود مقسم لجزئين الاول يوضع بالتومبيلات او التشكيلات العامة والثاني يوضع باكواد css

الكود الاول
الكود:
<div class="list_carousel"><div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 960px; height: 185px; margin: 0px; overflow: hidden;"><ul id="foo3" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 15px; margin: 0px; width: 4060px; height: 185px;"><li><a href="#" class="topiclast"><img src="http://i55.servimg.com/u/f55/15/56/98/16/untitl11.png"></a><a href="#" class="topiclast_title">شركة اورلاين</a></li><li><a href="#" class="topiclast"><img src="http://i55.servimg.com/u/f55/15/56/98/16/untitl11.png"></a><a href="#" class="topiclast_title">شركة اورلاين</a></li><li><a href="#" class="topiclast"><img src="http://i55.servimg.com/u/f55/15/56/98/16/untitl11.png"></a><a href="#" class="topiclast_title">شركة اورلاين</a></li><li><a href="#" class="topiclast"><img src="http://i55.servimg.com/u/f55/15/56/98/16/untitl11.png"></a><a href="#" class="topiclast_title">شركة اورلاين</a></li><li><a href="#" class="topiclast"><img src="http://i55.servimg.com/u/f55/15/56/98/16/untitl11.png"></a><a href="#" class="topiclast_title">شركة اورلاين</a></li><li style="margin-right: 21px;"><a href="#" class="topiclast"><img src="http://i55.servimg.com/u/f55/15/56/98/16/untitl11.png"></a><a href="#" class="topiclast_title">شركة اورلاين</a></li><li><a href="#" class="topiclast"><img src="http://i55.servimg.com/u/f55/15/56/98/16/untitl11.png"></a><a href="#" class="topiclast_title">شركة اورلاين</a></li><li><a href="#" class="topiclast"><img src="http://i55.servimg.com/u/f55/15/56/98/16/untitl11.png"></a><a href="#" class="topiclast_title">شركة اورلاين</a></li><li><a href="#" class="topiclast"><img src="http://i55.servimg.com/u/f55/15/56/98/16/untitl11.png"></a><a href="#" class="topiclast_title">شركة اورلاين</a></li><li><a href="#" class="topiclast"><img src="http://i55.servimg.com/u/f55/15/56/98/16/untitl11.png"></a><a href="#" class="topiclast_title">شركة اورلاين</a></li></ul></div><div class="clearfix"></div><a href="#" class="prev" id="prev3" style="display: block;"></a><a href="#" class="next" id="next3" style="display: block;"></a></div>

الكود الثاني
الكود:
.list_carousel { margin: 20px auto auto; position: relative; width: 960px; } .list_carousel ul { display: block; list-style: none outside none; margin: 0; padding: 0; } .list_carousel li { border-radius: 20px 20px 20px 20px; } .list_carousel li a.topiclast { display: block; } .list_carousel li a.topiclast img { -moz-transition: all 0.8s ease-in-out 0s; background-color: rgba(255, 255, 255, 0); border: 5px solid #FFFFFF; border-radius: 70px 70px 70px 70px; box-shadow: 4px 3px 8px rgba(0, 0, 0, 0.32), 11px 8px 10px rgba(0, 0, 0, 0.09) inset; height: 123px; opacity: 0.3; width: 133px; } .list_carousel li a.topiclast img:hover { -moz-transform: rotate(360deg); opacity: 1; } .list_carousel li a.topiclast_title { color: gray; font: 16px mdgess1; text-decoration: none; } .list_carousel li { color: #999999; display: block; float: left; font-size: 40px; margin: 6px; padding: 0; text-align: center; } .list_carousel.responsive { margin-left: 0; width: auto; }

الكود من تحويلي لدلك يرجى عند النقل دكر المصدر