1 месяц назад - Нет комментариев
Очень красивый эффект при наведении на картинку... Все очень легко и просто! Верстка: <ul> <li><img src="images/77335_4871.jpg" title="Autumn Leaves" /></li> <li><img src="images/107023_5283.jpg" title="Cloudy Skies" /></li> <li><img src="images/1282015_12556521.jpg" title="Nice Horsy" /></li> <li><img src="images/1262387_19591724.jpg" title="Grassy Meadows" /></li> <li><img src="images/220121_3233.jpg" title="Jigsaw Pieces" /></li> <li><img src="images/1282209_96954111.jpg" title="Retro Groove" /></li> </ul> Стили css: div.wrapper{width:218px; height:218px; overflow:hidden; position:relative; } div.caption {position:relative; text-align:center; padding:55px 15px} Javascript:
2 месяца назад - 1 комментарий
Хотите чтоб картинка или бекграунд занимала все пространство? Легко! Подключаем яваскрипт: <script type="text/javascript" src="/js/jquery.maximage.js"></script> <script> $(function(){ jQuery('img.scale').maxImage({ isBackground: true, overflow: 'auto' }); }); </script> Ну и собственно сама картинка на странице: <img src="/images/scale.png" class="scale" alt="" /> Все ) Источник: http://www.aaronvanderzwan.com/maximage/
4 месяца назад - Нет комментариев
Листать картинки на сайте очень просто... Подключаем javascript и css: <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script> Сам слайдер: <div id="slider"> <img src="images/slide1.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a> <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> <img src="images/slide4.jpg" alt="" /> </div> Вызываем функцию слайдера: <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider();
4 месяца назад - Нет комментариев
Сортировать элементы на странице очень просто. $('#source').quicksand( $('#destination li') ); <ul id="source"> <li data-id="iphone">iPhone OS</li> <li data-id="android">Android</li> <li data-id="winmo">Windows Mobile</li> </ul> <ul id="destination" class="hidden"> <li data-id="macosx">Mac OS X</li> <li data-id="macos9">Mac OS 9</li> <li data-id="iphone">iPhone OS</li> </ul> Источник: http://razorjack.net/
4 месяца назад - Нет комментариев
Форма логина есть почти на каждом сайте... Сделать ее еще красивее и удобнее очень просто. Сама форма: <div id="container"> <div id="topnav" class="topnav"> Have an account? <a href="login" class="signin"><span>Sign in</span></a> </div> <fieldset id="signin_menu"> <form method="post" id="signin" action="https://twitter.com/sessions"> <label for="username">Username or email</label> <input id="username" name="username" value="" title="username" tabindex="4" type="text"/> <p> <label for="password">Password</label> <input id="password" name="password" value="" title="password" tabindex="5" type="password"/>
4 месяца назад - Нет комментариев
Показать всем свои партнеров просто... Показать их красиво еще проще. Источник: http://tutorialzine.com/