Leaderboard

Надеюсь админ создаст отдельный раздел для этого и создаст в ней (переименует мою тему) В данном разделе пользователи смогут подчеркнуть для себя интересные идеи которые смогут применить на своем сайте Первый урок (переворот картинки без использования Jquery) начнем 1. Для начала создадим область (container) в который поместим 2 блока с содержимым box-front и box-back <div class="container"> <div class="box-front"> Передняя сторона </div> <div class="box-back"> Задняя сторона </div></div> 2. Когда мы прописали блоки приступим к написанию стилей и соответственно анимации. <style>.container{ perspective: 800px; -webkit-perspective: 800px; background: radial-gradient(#e0e0e0, #aaa); width:100%; height:300px; border-radius:6px; position:relative; }.box-front, .box-back{ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; width:50%; height:80%; position:absolute; top:10%; left:25%; background:#476AF1; transition:0.8s; text-align:center; color:#FFF; }.box-back{ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); background-color:#7E0002; }.container:hover .box-front{ /*пишем эффект при наведении мышкой*/ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); }.container:hover .box-back{ /* эффект при убранной мышки*/ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); }</style> Получаем переворачивающую картинку при наведении на нее мышкой index2.html

В центре обновлений доступна новая версия админки. http://www.sitebill.ru/news55.html Тестируем, надеюсь вам понравится!

Урок №2 и наверное самый распространенный, но до боли мучающий начинающих вебмастеров это как прижать footer к низу сайта. Легко )))) <div id="wrapper-container"> <header id="header"> </header> <article id="content"> </article></div><footer id="footer"></footer>соответственно сss html, body {height: 100%;}#wrapper-container {min-height: 100%;}#content { overflow:auto; padding-bottom: 150px;} #footer {position: relative; margin-top: -150px; height: 150px; clear:both;}body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px;}Все это конечно хорошо, в современных браузерах все будет просто отлично, но как же быть с надоевшим эксплорером 7? Ясное дело , делаем фикс<!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style>И наслаждаемся index2.html