xhtml & css » hints

Новый .clearfix хак

pulev — Tue, 10 May 2011 20:16:34 +0000

Хозяйке на заметку.

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Источник: http://nicolasgallagher.com/micro-clearfix-hack/

CSS Tools: Reset CSS v. 2

pulev — Thu, 27 Jan 2011 18:07:13 +0000

В новой версии CSS-reset, предназначенного для обнуления начальных условий при вёрстке под разные браузеры, произошли некоторые изменения:

Больше не сбрасывается тег font, свойство outline и фон не выставляется в прозрачный.
Всем сбрасываемым элементам выставляется font: inherit.
Добавлены в сброс article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video.
Убраны правила для ins и del.
Добавлено правило для элементов HTML5:

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

Скачать

Создание «пузыря»

pulev — Fri, 26 Nov 2010 08:40:37 +0000

Создать «пузырь» без картинок и лишнего кода очень просто...

Решение очень простое... использует псевдо-элемент :after и работает во всех нормальных браузерах...

Все что нам понадобиться это div и немного CSS:

.speech-bubble
  {
   width: 200px;
   padding: 10px;
   background: #404040;
   color: #fff;
   font: normal 12px "Segoe UI", Arial, Sans-serif;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
  }
  .speech-bubble:after
  {
   content: "";
   border: solid 10px transparent; /* set all borders to 10 pixels width */
   border-top-color: #404040; /* the callout */
   border-bottom: 0; /* we do not need the bottom border in this case */
   width: 0;
   height: 0;
   overflow: hidden;
   display: block;
   position: relative;
   bottom: -20px; /* border-width of the :after element + padding of the root element */
   margin: auto;
  }

Источник: http://acidmartin.wordpress.com/2010/11/25/creating-a-speech-bubble-with-css3-and-without-additional-markup/

Структура темы WordPress

pulev — Sat, 20 Nov 2010 22:56:29 +0000

Часто приходится искать файлик со структурой wordpress...

Пускай тут полежит:

Фиксим «корявый» 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/