Блог про верстку и CSS. Примеры html кода и интересные приемы.
Тянем картинки или скейлинг это просто!
Хотите чтоб картинка или бекграунд занимала все пространство? Легко!
Подключаем яваскрипт:
<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/
| Print article | This entry was posted by pulev on 24.06.2010 at 11:10, and is filed under hints, js. Follow any responses to this post through RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |
Пока нет комментариев.
Фиксим «корявый» background
1 неделю назад - Нет комментариев
Ух уж эти метросексуалы дизайна и вэб дизайна! Ранее я уже поднимал тему background'а. Все наверно замечали как бэк налазит на края блоков со скругленными краями... вам тоже на нравится это? Решение есть! .back { -webkit-background-clip: padding-box; -moz-background-clip: padding-box; } Если использовать сокращенную форму для других свойств фона, то это свойство должно быть после него. Больше о доступных значений для свойства здесь. Источник: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
Красивый эффект наведения с помощью CSS и jQuery
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:
CSS3 Background Images
1 месяц назад - Нет комментариев
Сделать изображение фоном без javascript на весь фон? Легко! Есть методы с js... я ранее писал про скейлинг картинок, но есть и css метод, хоть и не везде работает! .back { background-image: url(back.jpg); background-repeat:no-repeat; background-position:center center; -o-background-size: 100% 100%, auto; -moz-background-size: 100% 100%, auto; -webkit-background-size: 100% 100%, auto; background-size: 100% 100%, auto; } Данный метод будет работать в последних
Dragdealer JS
2 месяца назад - Нет комментариев
Тянем все! Хороший компонент для перетягивания... работает как на компе так и на iPhone. Подключаем javascript: <script type="text/javascript" src="/js/dragdealer-main.js"></script> <script> window.onload = function() { new Dragdealer('simple-slider'); } </script> Ну и сам слайдер: <div id="my-slider" class="dragdealer"> <div class="red-bar handle">drag me</div> </div> Готово. У скрипта очень много настроек и фишек. Источник: http://code.ovidiu.ch/dragdealer/
Горизонтальное выпадающее меню
4 месяца назад - Нет комментариев
Добавить на сайт выпадающее горизонтальное меню очень просто... Простое и быстрое выпадающее меню... Меню: <ul id="topnav"> <li><a href="#">Link</a></li> <li> <a href="#">Link</a> <!--Subnav Starts Here--> <span> <a href="#">Subnav Link</a> | <a href="#">Subnav Link</a> | <a href="#">Subnav Link</a> </span> <!--Subnav Ends Here--> </li> <li><a href="#">Link</a></li> </ul> Оформление: ul#topnav { margin: 0; padding: 0; float: left; width: 970px; list-style: none;
Слайдер
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/
Выпадающее окно логина как на Twitter
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/
3D background
1 год назад - Нет комментариев
Очень красивый эфект звездного неба... это просто! Все гениальное просто... <body> <div id="midground"></div> <div id="foreground"></div> </body> CSS стиль: body { background: url(images/background.png) repeat 5% 5%; } #midground { background: url(images/midground.png) repeat 20% 20%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 997; } #foreground { background: url(images/foreground.png) repeat 90% 110%; position: absolute; top: 0; left:
![LinkedIn](http://www.linkedin.com/shareArticle?mini=true&url=http://xhtml.kiev.ua/2010/06/24/tyanem-kartinki-ili-skejling-eto-prosto/&title=Тянем картинки или скейлинг это просто!&summary=Хотите чтоб картинка или бекграунд занимала все пространство? Легко! Подключаем яваскрипт: <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/&source=xhtml & css){kind=link}
![Yahoo Bookmarks](http://buzz.yahoo.com/buzz?targetUrl=http://xhtml.kiev.ua/2010/06/24/tyanem-kartinki-ili-skejling-eto-prosto/&headline=Тянем картинки или скейлинг это просто!&summary=Хотите чтоб картинка или бекграунд занимала все пространство? Легко! Подключаем яваскрипт: <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/){kind=link}