xhtml & css

Фиксим «корявый» background

pulev — Sun, 22 Aug 2010 06:52:49 +0000

Ух уж эти метросексуалы дизайна и вэб дизайна!

Ранее я уже поднимал тему 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

pulev — Fri, 30 Jul 2010 10:06:25 +0000

Очень красивый эффект при наведении на картинку...

Все очень легко и просто!

Верстка:

<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:


<script type="text/javascript">
$(document).ready(function(){									
		var thumbs = $("ul li img");		
 
		for (var i = 0, ii = thumbs.length; i < ii; i++){
			if (thumbs[i].title && thumbs[i].title.length > 0)
			{			
				var imgtitle = thumbs[i].title;		
				$(thumbs[i]).wrap('').				
				after('\'caption\'>' + imgtitle + '
').
				removeAttr('title');
 
			}					
		}
 
	$('.wrapper').hover(
		function(){
			$(this).find('img').animate({opacity: ".6"}, 300);		
			$(this).find('.caption').animate({top:"-85px"}, 300);			
		}, 
		function(){
			$(this).find('img').animate({opacity: "1.0"}, 300);					
			$(this).find('.caption').animate({top:"85px"}, 100);
		}		
		);			
	});
script>

Результат:

Все это можно легко привести к такому внешнему виду.

Источник: http://fearlessflyer.com/2010/06/pretty-hover-effects-with-css-and-jquery/

CSS3 Background Images

pulev — Fri, 30 Jul 2010 09:10:17 +0000

Сделать изображение фоном без 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;
}

Данный метод будет работать в последних Firefox, Safari, Chrome и Opera, все остальные браузеры будут видеть реальное изображение в фоне по центру блока.

Источник: http://www.cssplay.co.uk/boxes/css3-background.html

Простой jQuery Tooltip Plugin

pulev — Mon, 19 Jul 2010 08:16:38 +0000

Наткнулся на очень простой и удобный плагин для подсказок... jQuery Tooltip Plugin...

Часто бывает необходимость выводить подсказку... стандартные способы не так хороши как хотелось бы... выход есть:

<link rel="stylesheet" type="text/css" href="colortip-1.0/colortip-1.0-jquery.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="colortip-1.0/colortip-1.0-jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

Готово.

Источник: http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/

CSS3PIE — border-radius, box-shadow для ИЕ

pulev — Wed, 14 Jul 2010 11:18:35 +0000

Появилась альтернтива ie-css3.htc, добавляющего IE поддержку теней от блока и текста и уголков CSS3.

На данный момент в CSS3PIE поддерживаются:
— border-radius.
— box-shadow.
— border-image.
— несколько background.
— линейный градиент как фон.

Планируется поддержка других возможностей.

Источник: http://css3pie.com/

Закругленные уголки у картинок с помощью jQuery

pulev — Mon, 12 Jul 2010 13:24:53 +0000

Недавно была необходимость сделать круглые уголки у картинки... повозился... отказался от идеи не найдя хорошего решения...

Случайно нашел оч. хороший способ...

Хочется вот такой красоты после применения border-radius и box-shadow:

А получаем:

Есть небольшой трюк для фикса:

<span class="rounded-img" style="background: url(img/thumb1.jpg) no-repeat center center; width: 70px; height: 70px;"> 
<img src="img/thumb1.jpg" style="opacity: 0;" /> 
</span>

Вокруг картинки добавляем и на него вешаем background саму картинку, а оригинал скрываем: opacity: 0.

Для упрощения стоит воспользоваться jQuery:

<img src="img/thumb1.jpg" class="rounded-img" /> 
<img src="img/thumb2.gif" class="rounded-img2" />

Стили:

/* rounded image styles */
.rounded-img {
	display: inline-block;
	border: solid 1px #000;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}

Javascript:


<script type="text/javascript">
$(document).ready(function(){
 
  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '+ $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });
 
});
script>

Результат:

Источник: http://www.webdesignerwall.com/tutorials/css3-rounded-image-with-jquery/

Dragdealer JS

pulev — Thu, 24 Jun 2010 09:25:44 +0000

Тянем все! Хороший компонент для перетягивания... работает как на компе так и на 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/

Тянем картинки или скейлинг это просто!

pulev — Thu, 24 Jun 2010 09:10:12 +0000

Хотите чтоб картинка или бекграунд занимала все пространство? Легко!

Подключаем яваскрипт:

<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/

Горизонтальное выпадающее меню

pulev — Wed, 14 Apr 2010 11:38:42 +0000

Добавить на сайт выпадающее горизонтальное меню очень просто...

Простое и быстрое выпадающее меню...

Меню:

<ul id="topnav">
    <li><a href="#">Link</a></li>
    <li>
        <a href="#">Link</a>
        
        <span>
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a>
        </span>
        
    </li>
    <li><a href="#">Link</a></li>
</ul>

Оформление:

ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 970px;
	list-style: none;
	position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
	font-size: 1.2em;
	background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }
ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none; /*--Hide by default--*/
	width: 970px;
	background: #1376c9;
	color: #fff;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline;}

Подключаем javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Вызываем функцию:

<script type="text/javascript">
$(document).ready(function() {
 
	$("ul#topnav li").hover(function() { //Hover over event on list item
		$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
		$(this).find("span").show(); //Show the subnav
	} , function() { //on hover out...
		$(this).css({ 'background' : 'none'}); //Ditch the background
		$(this).find("span").hide(); //Hide the subnav
	});
 
});
script>

Готово:

Слайдер

pulev — Wed, 14 Apr 2010 11:23:59 +0000

Листать картинки на сайте очень просто...

Подключаем 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();
});
script>

Скрипт имеет много эффектов листания и гибкие настройки.

Источник: http://nivo.dev7studios.com/