Блокнот — @дневники: асоциальная сеть

среда, 21 ноября 2012

17:32

Блог верстальщика и для верстальщика

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Полезное по верстке http://kate-land.net/

@темы: HTML, Верстка, CSS, jQuery, Ссылки

URL

17:31

Placeholder для IE

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Решение:
1. Задать у интпута атрибут value с нужным значением

<div class="searchField"><input type="text" name="" placeholder="Фраза для поиска" value="Фраза для поиска" /></div>

2. Подключить библиотеку jQuery и скрипт, который при фокусе на поле заменяет значение атрибута value на пустое.

	
	<sсript type="text/javasсript" src="sсriрt/jquery-1.8.2.min.js"></sсriрt>
	
	
	[if IE]> 
	<sсriрt>
		$(document).ready(function(){
		$('input[type="text"]').focus(function(){
		$('input[type="text"]').attr('value', '');
		});
		});
	</sсriрt>
	<![endif]

Линк http://kate-land.net/html-css/item/6-placeholder-for-ie

@темы: HTML, IE7, Верстка, IE9, Браузеры, CSS, Placeholder для IE, jQuery, IE8, Ссылки

URL

11:56

Скругление уголков в фотошопе

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Урок http://fotoshop-onlajn.ru/uroki-fotoshop/skruglenie-uglov-na-fotografii-v-fotoshope.html

@темы: Photoshop, Ссылки

URL

вторник, 20 ноября 2012

19:49

Плагин jQuery - EqualHeight

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Плагин jQuery для выравнивания высоты колонок http://ruseller.com/adds.php?rub=11&id=2483

@темы: jQuery, Ссылки

URL

13:20

Студия Артемия Лебедева

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Всякое разное полезное по верстке http://www.artlebedev.ru/tools/technogrette/

@темы: HTML, Верстка, CSS, Ссылки

URL

12:40

Портфолио

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://web-portfolio1.narod.ru/

@темы: Портфолио

URL

11:59

Доступ к записи ограничен

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Закрытая запись, не предназначенная для публичного просмотра

URL

понедельник, 19 ноября 2012

21:36

Бесплатные .psd макеты для верстки

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://www.freepsd.ws/

http://www.templatesbox.com/templates.htm

@темы: Макеты, PDS, Ссылки

URL

21:33

Уроки Drupal

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://drupal.zvirec.com/

@темы: Drupal, CMS, Ссылки

URL

20:49

Верстка формы поиска

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

При верстке формы поиска такого вида

html-код

<div id="search">
                <p>Поиск</p>
                    открывающий тег form  [name="search" method="get" action=""]
                        <input type="text" name="" class="searchField" placeholder="Найти нужное..." /> 
                        <input type="submit" value="" class="searchButton" />
                    закрывающий тег /form
            </div>

стили

#search {
    position: relative;
    width: 178px;
    margin-left: 762px;
    padding: 60px 0 0 12px; 
}

#search p {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 16px;
    color: #557782;
    margin: 0;
}

#search form  {
    margin-top: 10px;
    position: relative;
    width: 142px;
    padding: 0 25px 0 0;

}

#search form input.searchField {
    background: url('../images/search_background.png') no-repeat;
    width: 122px;
    height: 37px;
    border: none;
    font-family: 'Tahoma', sans-serif;
    font-size: 12px;
    color: #8e9ea4;
    padding-left: 10px;
    padding-right: 35px;
    -webkit-appearance: none;
    outline: none;
}

#search form input.searchButton {
    background: url('../images/search_button.png') top no-repeat;
    width: 25px;
    height: 33px;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 2px;
    left: 140px;
}

#search form input.searchButton:hover {
    background: url('../images/search_button_hover.png') no-repeat;
}

#search form input.searchButton:active {
    background: url('../images/search_button_active.png') no-repeat;
}

в браузерах IE9 и IE8, когда в поисковое поле вводится длинная строка, она начинает наползать на левую границу текстового поля

а в IE7 начинает сдвигаться влево само поле

РЕШЕНИЕ

input type="text" обернуть в div, для которого прописать стили (задать бэкграунд и тд.)

<div id="search">
				<p>Поиск</p>
					открывающий тег form  [name="search" method="get" action=""]
						<div class="searchField"><input type="text" name="" placeholder="Найти нужное..." /></div>
						<input type="submit" value="" class="searchButton" />
					закрывающий тег /form
			</div>

стили

#search {
	position: relative;
	width: 178px;
	margin-left: 762px;
	padding: 60px 0 0 12px; 
}

#search p {
	font-family: 'Trebuchet MS', sans-serif;
	font-size: 16px;
	color: #557782;
	margin: 0;
}

#search form  {
	margin-top: 10px;
	position: relative;
	width: 142px;
	padding: 0 25px 0 0;
	
}

/*---------------------------------------------------------------------------------*/

#search form .searchField {
	background: url('../images/search_background.png') no-repeat;
	width: 157px;
	height: 37px;
	padding-left: 10px;
}

#search form .searchField  input {
	background: transparent;
	width: 122px;
	height: 37px;
	outline: none;
	padding-right: 5px;
	border: none;
	font-family: 'Tahoma', sans-serif;
	font-size: 12px;
	color: #8e9ea4;
	-webkit-appearance: none;
}

/*---------------------------------------------------------------------------------*/

#search form input.searchButton {
	background: url('../images/search_button.png') top no-repeat;
	width: 25px;
	height: 33px;
	border: none;
	cursor: pointer;
	position: absolute;
	top: 2px;
	left: 140px;
}

#search form input.searchButton:hover {
	background: url('../images/search_button_hover.png') no-repeat;
}

#search form input.searchButton:active {
	background: url('../images/search_button_active.png') no-repeat;
}

+ свои стили для IE9, IE8 и IE7

Ссылка на обсуждение на хэшкоде линк

@темы: HTML, IE7, Верстка, IE9, Браузеры, CSS, IE8, Ссылки

URL

13:33

Выпадающее меню

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Вертикальное выпадающее меню http://vremenno.net/examples/css-drop-down-menu/simple.vertical.html

Горизонтальное выпадающее меню http://vremenno.net/html-css/css-drop-down-menu/

@темы: HTML, Верстка, CSS, Выпадающее меню, Ссылки

URL

четверг, 15 ноября 2012

17:47

z-index в IE7

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Для корректной работы свойства z-index в IE7 необходимо прописать z-index у родительского элемента.

Так же для работы во всех браузерах необходимо, чтобы свойство position было задано как absolute, fixed или relative.

@темы: HTML, IE7, Верстка, Браузеры, CSS

URL

17:35

jCarousel

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://sorgalla.com/jcarousel/

@темы: Плагины, Carousel, jQuery, Ссылки

URL

понедельник, 12 ноября 2012

14:06

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

При задании картинки-бэкграунда для инпута type="text" или type="search"

открывающий тег form
					<input type="text" name="" class="search-field" placeholder="Найти нужное..." /> 
					<input type="submit" value="" class="search-button" />
закрывающий тег /form

в гугл хроме картинка-бэкграунд не отображается
для того, чтобы это обойти, в свойствах инпута нужно задать -webkit-appearance: none;

#search form input.search-field {
	background: url('../images/search_background.png') no-repeat;
	width: 122px;
	height: 37px;
	border: none;
	font-family: 'Tahoma', sans-serif;
	font-size: 12px;
	color: #8e9ea4;
	padding-left: 10px;
	padding-right: 35px;
	-webkit-appearance: none;
	outline: none;
}

@темы: HTML, Верстка, Браузеры, CSS, Google Chrome

URL

пятница, 09 ноября 2012

14:51

Инструмент разработчика в гугл хром

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Chrome Developer Tools https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints

@темы: Браузеры, Ссылки

URL

четверг, 08 ноября 2012

21:13

jQuery: периодическая смена картинки

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

(для изображения сердцебиения)

Скрипт

<sсript src="scripts/jquery-1.8.2.min.js"></sсriрt>
<sсript>
//Бьющееся сердце
$(function() {
	
	var container = $('.pulse');
	
	setInterval(function() {
		if(container.hasClass('active')) {
			container.removeClass('active');
		}
		else {
			container.addClass('active')
		}
	
	}, 732);

});

</sсriрt>

html-код

Стили

.pulse {
	display: inline-block;
	margin-right: 0;
	margin-left: 5px;
	background: url('../images/icon_heart_big.png') no-repeat;
	width: 30px;
	height: 28px;
	}

.pulse.active {
	background: url('../images/icon_heart_small.png') no-repeat;
	}

Линк

@темы: HTML, Верстка, CSS, jQuery, Ссылки

URL

21:05

jQuery: всплывающая подсказка

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

К кнопкам соц.сетей такого вида

нужно добавить всплывающую подсказку.
Бэкграунд для всплывающей подсказки

Решение:
Скрипт на jQuery

<sсript src="scripts/jquery-1.8.2.min.js"></sсriрt>
<sсript>
//Всплывающая подсказка
jQuery(document).ready(function(){
$(function() {
$('.l-cnt__side').on('mouseenter mouseleave','.b-roundBox .b-socials a.tooltip',function(e){
    if(e.type=='mouseenter'){
      var ObjOffSet=$(this).offset();
      $('#tooltipS').css({'top':(ObjOffSet.top+15),'left':(ObjOffSet.left+$(this).outerWidth()/2)}).show().find('.tooltip-tip-content').html($(this).attr('data-tooltip'));
    }else if(e.type=='mouseleave'){
      $('#tooltipS').hide().find('.tooltip-tip-content').html('');
    }
  });
});
});
</sсriрt>

html-код

<div class="l-cnt__side"> 
	<div class="b-roundBox">
                         <div class="b-socials">
				<a href="#" class="b-socials__link tooltip" data-tooltip="пояснительный текст"><img src="images/icon_social-rss.png" alt=""></a>
				
				<div class="socials-group">
			
				<a href="http://vk.com/larson_holz_it_ltd" class="b-socials__link tooltip" data-tooltip="пояснительный текст"><img src="images/icon_social-vk.png" alt=""></a>
				
				<a href="http://www.facebook.com/pages/LarsonHolz-It-Ltd/217822734979282" class="b-socials__link tooltip" data-tooltip="пояснительный текст"><img src="images/icon_social-fb.png" alt=""></a>
				
				<a href="https://twitter.com/#!/Larson_Holz" class="b-socials__link tooltip" data-tooltip="пояснительный текст"><img src="images/icon_social-t.png" alt=""></a>
				
				</div>
				
				<a href="" class="b-socials__link tooltip" data-tooltip="пояснительный текст"><img src="images/icon_social-photo.png" alt=""></a>
				
				<a href="" class="b-socials__link tooltip" data-tooltip="пояснительный текст">
				<img src="images/icon_social-heart.png" 
				onmouseover="this.src='images/icon_social-heart_new.png'"
                onmouseout="this.src='images/icon_social-heart.png'"
				alt=""></a>
							
			</div>
</div>
</div>

К ссылкам добавлен класс tooltip и атрибут data-tooltip="пояснительный текст", который содержит текст всплывающей подсказки.
Также в нижнюю часть страницы добавлена конструкция

<div id="tooltipS"><div class="tooltip-tip-content"></div></div>

Стили

/*Всплывающие подсказки над кнопками соц.сетей*/
#tooltipS {
	position: absolute;
	z-index: 999;
	display: none;
	}

	#tooltipS .tooltip-tip-content {
	position: relative;
	white-space: nowrap;
	background: url(../images/tooltip_background.png) no-repeat;
	width: 139px;
	height: 50px;
	color: #000000;
	font-family: Arial, sans-serif;
	font-size: 11px;
	padding-top: 18px;
	padding-left: 10px;
	left: -80%;
	}

Сделано по аналогии с сайтом http://sinoptik.ua/ (всплывающая подсказка над чувствуется как )

data-tooltip="как будет ощущаться<br /> температура воздуха<br /> человеком, одетым по сезону"

@темы: HTML, Верстка, CSS, jQuery, Ссылки

URL

19:26

Javascript : изменение картинки при наведении мышки и обратно

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

<a href="" class="b-socials__link">	<img src="images/icon_social-heart.png" onmouseover="this.src='images/icon_social-heart_new.png'" onmouseout="this.src='images/icon_social-heart.png'" 	alt=""></a>

@темы: Javascript

URL

вторник, 06 ноября 2012

18:44

Скрипт "мигающая картинка"

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

( Для изображения сердцебиения )

<sсript src='http://code.jquery.com/jquery-1.8.2.min.js'></sсriрt>

<sсript>
$(function() {
    $('img').hover(function() {
        var _this = this,
            images = _this.getAttribute('data').split(',');
            counter = 0;
        this.setAttribute('data-src', this.src);    
        //
        _this.timer = setInterval(function() {
            if(counter > images.length) {
                counter = 0;
            }
            _this.src=images[counter];

            counter++;
        }, 500);

    }, function() {
        this.src = this.getAttribute('data-src');    
        clearInterval(this.timer);
    });
});
</sсriрt>

<img src='http://hashcode.ru/upfiles/logo.png' data='http://hashcode.ru/upfiles/logo.png,http://careers.hashcode.ru/images/vacancies_banner_head.png,http://meta.hashcode.ru/upfiles/logo_4.png'>

линк

@темы: HTML, Верстка, CSS, jQuery, Ссылки

URL

14:15

Большая подборка уроков по созданию CSS-кнопок

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://habrahabr.ru/post/157495/

@темы: HTML, CSS, Ссылки

URL


Запомнить