2 способа создания равных по высоте блоков с помощью CSS

[Heidel]

2 способа создания равных по высоте блоков с помощью CSS

http://css-blog.ru/equal-height-divs

@темы: Верстка, CSS, 2 способа создания равных по высоте блоков с помощью CSS, Ссылки

---

CSS Gradient Background Maker

[Heidel]

CSS Gradient Background Maker

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

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

---

Sticky Footer

[Heidel]

Sticky Footer — Прижать футер к низу окна браузера

https://css-tricks.com/snippets/css/sticky-footer/

@темы: HTML, HTML5, Верстка, CSS, Прижать футер к низу, CSS3, Ссылки

---

Create an SVG Sprite Sheet

[netcat-na-diary]

Create an SVG Sprite Sheet

http://blog.teamtreehouse.com/create-svg-sprite-sheet

@темы: Верстка, SVG, Create an SVG Sprite Sheet, Ссылки

---

Simple CSS Dropdown Menu

[Heidel]

Simple CSS Dropdown Menu

http://blog.teamtreehouse.com/create-simple-css-dropdown-menu

@темы: HTML, HTML5, Верстка, CSS, Simple CSS Dropdown Menu, CSS3, Ссылки

---

Опыт поиска работы на бирже Elance

[Heidel]

Опыт поиска работы на бирже Elance

http://megamozg.ru/post/11512/

@темы: Фриланс, Ссылки

---

FlexSlider

[Heidel]

FlexSlider

http://www.woothemes.com/flexslider/

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

---

Кастомизированный скроллбар

[Heidel]

Кастомизированный скроллбар

хэшкод


Custom Scrollbars in WebKit
https://css-tricks.com/custom-scrollbars-in-webkit/

@темы: HTML, Верстка, CSS, Custom Scrollbars in WebKit, Кастомизированный скроллбар, Google Chrome, CSS3, Ссылки

---

Customize Checkboxes And Radio Buttons With CSS3

[Heidel]

Customize Checkboxes And Radio Buttons With CSS3

www.hongkiat.com/blog/css3-checkbox-radio/

HTML

<div class="radio">  
						<input id="male" type="radio" name="gender" value="male">  
						<label class="radio-label" for="male">Мужчина</label>  
						<input id="female" type="radio" name="gender" value="female">  
						<label class="radio-label" for="female">Женщина</label>  
						<input id="other" type="radio" name="gender" value="other">  
						<label class="radio-label" for="other">Другое</label>  
					</div> 

LESS

.radio-label {  
		display: inline-block;  
		cursor: pointer;  
		position: relative;  
		padding-left: 25px;  
		margin-right: 15px;  
		font-size: 13px; 
		font-size: 14px;
		color: #909090;
		line-height: 1.7;
		
		&:before {  
			content: "";  
			display: inline-block;  		  
			width: 10px;  
			height: 10px;  		  
			margin-right: 12px;  
			position: absolute;  
			left: 0;  
			bottom: 5px;  
			background: #fff;
			border: 2px solid #bbe2f4;
			.border-radius(50%);
		} 

		&:after {  
			content: "";  
			display: inline-block;  		  
			width: 6px;  
			height: 6px;  		  
			margin-right: 12px;  
			position: absolute;  
			left: 4px;  
			bottom: 9px;  
			background: transparent;
			.border-radius(50%); 
			.transition(0.2s);
		}  	
		
		&:hover {
			&:after {  
				background: #bbe2f4;
			}  
		}
	} 

	input[type=radio] {  
		display: none;  
		
		&:checked + .radio-label:after {  
			content: "";  
			display: inline-block;  		  
			width: 6px;  
			height: 6px;  		  
			margin-right: 12px;  
			position: absolute;  
			left: 4px;  
			bottom: 9px;  
			background: #8ac7e5;
			.border-radius(50%); 
		}    
	}

CSS

.radio-label {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  margin-right: 15px;
  font-size: 13px;
  font-size: 14px;
  line-height: 1.7;
  color: #909090;
  cursor: pointer;
}

.radio-label:before {
  position: absolute;
  bottom: 5px;
  left: 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 12px;
  background: #fff;
  border: 2px solid #bbe2f4;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  content: "";
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.radio-label:after {
  position: absolute;
  bottom: 9px;
  left: 4px;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 12px;
  background: transparent;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  content: "";
  -webkit-transition: 0.2s;
     -moz-transition: 0.2s;
      -ms-transition: 0.2s;
       -o-transition: 0.2s;
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.radio-label:hover:after {
  background: #bbe2f4;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked + .radio-label:after {
  position: absolute;
  bottom: 9px;
  left: 4px;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 12px;
  background: #8ac7e5;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  content: "";
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

http://codepen.io/Heidel/pen/KwJJor

+ ссылка
http://css-blog.ru/styling-checkbox-and-radio

LESS

/* radio */
.radio-label {  
	display: inline-block;  
	cursor: pointer;  
	position: relative;  
	padding-left: 22px;  
	margin-right: 15px;  
	font-size: 14px;
	color: @gray;
	line-height: 1.5;
	
	&:before {  
		content: "";  
		display: inline-block;  		  
		width: 14px;  
		height: 14px;  		  
		margin-right: 12px;  
		position: absolute;  
		left: 0;  
		top: 50%; 
		margin-top: -8px; 
		background: #fff;
		border: 1px solid #ccc;
		border-radius:50%;
	} 

	&:after {  
		content: "";  
		display: inline-block;  		  
		width: 8px;  
		height: 8px;  		  
		margin-right: 12px;  
		position: absolute;  
		left: 3px;  
		top: 6px;  
		background: transparent;
		border-radius:50%; 
	}  	
} 

input[type=radio] {  
	display: none;  
	
	&:checked + .radio-label:after {   
		background: @orange;
	}    
}

/* checkbox */
.checkbox-label {  
	display: inline-block;  
	cursor: pointer;  
	position: relative;  
	padding-left: 22px;  
	margin-right: 15px;  
	font-size: 14px;
	color: @gray;
	line-height: 1.5;
	
	&:before {  
		content: "";  
		display: inline-block;  		  
		width: 14px;  
		height: 14px;  		  
		margin-right: 12px;  
		position: absolute;  
		left: 0;  
		top: 50%; 
		margin-top: -8px; 
		background: #fff;
		border: 1px solid #ccc;
	} 

	&:after {  
		content: "";  
		display: inline-block;  		  
		width: 8px;  
		height: 8px;  		  
		margin-right: 12px;  
		position: absolute;  
		left: 3px;  
		top: 6px;  
		background: transparent;
	}  	
} 

input[type=checkbox] {  
	display: none;  
	
	&:checked + .checkbox-label:after {  
		background: @orange;
	}    
}

@темы: Верстка, CSS, Customize Checkboxes And Radio Buttons With CSS3, Ссылки

---

Обработка события click средствами CSS

[Heidel]

Обработка события click средствами CSS

http://ruseller.com/lessons.php?rub=2&id=1600

HTML

<div class="search-wrapper">
					<input type="checkbox" class="show-search" id="show-search">
					<label for="show-search"></label>
					<input type="search" name="search" class="search-input" onfocus="this.placeholder=''" onblur="this.placeholder='Поиск'" placeholder="Поиск">
				</div>

LESS

.search-wrapper {
	position: relative;
	margin: 10px 0;
	
	input[type=checkbox] {
		position: absolute;
		left: -9999px;
	}
	
	label {
		display: block;
		width: 40px;
		height: 40px;
		background: url('../img/sprite_1.jpg') 0 0 no-repeat;
		cursor: pointer;
		z-index: 5;
		position: relative;
	}
	
	input[type=checkbox]:checked ~ label {
		background: url('../img/sprite_1.jpg') 0 -40px no-repeat;
	}

	.search-input {
		background: #ffffff;
		border: 2px solid #4693b6;
		border-left: 0;
		height: 40px;
		width: 0;
		position: absolute;
		top: 0;
		left: 0;
		font: 20px/1.2 Arial, sans-serif;
		.transition (0.2s);
		padding: 0 8px;
		color: #000;
		.box-sizing();
		
		&::-webkit-input-placeholder{
			color: #6c6c6c;
		}
		&::-moz-placeholder {
			color: #6c6c6c;
		}
		&:-moz-placeholder {
			color: #6c6c6c;
		}
		&:-ms-input-placeholder	{
			color: #6c6c6c;
		}
	}
	
	input[type=checkbox]:checked ~ .search-input {
		width: 198px;
		left: 40px;
	}
}

CSS

.search-wrapper {
  position: relative;
  margin: 10px 0;
}

.search-wrapper input[type=checkbox] {
  position: absolute;
  left: -9999px;
}

.search-wrapper label {
  position: relative;
  z-index: 5;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: url('../img/sprite_1.jpg') 0 0 no-repeat;
}

.search-wrapper input[type=checkbox]:checked ~ label {
  background: url('../img/sprite_1.jpg') 0 -40px no-repeat;
}

.search-wrapper .search-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 40px;
  padding: 0 8px;
  font: 20px/1.2 Arial, sans-serif;
  color: #000;
  background: #ffffff;
  border: 2px solid #4693b6;
  border-left: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: 0.2s;
     -moz-transition: 0.2s;
      -ms-transition: 0.2s;
       -o-transition: 0.2s;
}

.search-wrapper .search-input::-webkit-input-placeholder {
  color: #6c6c6c;
}

.search-wrapper .search-input::-moz-placeholder {
  color: #6c6c6c;
}

.search-wrapper .search-input:-moz-placeholder {
  color: #6c6c6c;
}

.search-wrapper .search-input:-ms-input-placeholder {
  color: #6c6c6c;
}

.search-wrapper input[type=checkbox]:checked ~ .search-input {
  left: 40px;
  width: 198px;
}

http://codepen.io/Heidel/pen/XJOOVv

@темы: Верстка, CSS, Обработка события click средствами CSS, Ссылки

---

jQuery.noConflict()

[netcat-na-diary]

<sсriрt>
	var $j = jQuery.noConflict();
	
	$j(function(){
		var a = $j('p');
		console.log(a);
	});
</sсriрt>

@темы: jQuery, jQuery Учебка

---

Website Templates and Themes

[netcat-na-diary]

http://themeforest.net/

@темы: Website Templates and Themes, Ссылки

---

Две float-колонки одинаковой высоты

[netcat-na-diary]

http://chikuyonok.ru/2009/06/float-columns/

@темы: HTML, Верстка, CSS, Две float-колонки одинаковой высоты, Ссылки

---

Кастомизация поведения placeholder

[Heidel]

http://css-tricks.com/hang-on-placeholders/

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

---

[Heidel]

http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field

---

Предзагрузка изображений

[netcat-na-diary]

function PrefetchImages(urls)
{
 var imgs = Array();
 for (var i = 0; i < urls.length; i++)
 {
  imgs[i] = new Image();
  imgs[i].src = urls[i];
 }
}

@темы: Предзагрузка изображений

---

Sony Vegas Уроки

[netcat-na-diary]

http://videouroki-sonyvegas.blogspot.ru/2012_07_10_archive.html

http://mastervideo.org/index.php/-sony-vegas/item/137-19-%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82%D1%8B-%D0%B2-sony-vegas-%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%BA%D0%BE%D1%80%D1%80%D0%B5%D0%BA%D1%86%D0%B8%D1%8F-%D0%B8-%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82-%D0%B8%D0%BC%D0%B8%D1%82%D0%B8%D1%80%D1%83%D1%8E%D1%89%D0%B8%D0%B9-%D0%B1%D0%BB%D0%B8%D0%BA-%D0%BB%D0%B8%D0%BD%D0%B7%D1%8B-%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B8%D0%B2%D0%B0-%D1%87%D0%B0%D1%81%D1%82%D1%8C-1

http://forum.malbred.com/index.php?showtopic=482&page=2

http://www.youtube.com/watch?v=4ALp9hFqAis

http://www.youtube.com/watch?v=WNZD4lac4RI

@темы: Sony Vegas, Учебники, Ссылки

---

Different SQL JOINs

[netcat-na-diary]

Different SQL JOINs
Before we continue with examples, we will list the types the different SQL JOINs you can use:

INNER JOIN: Returns all rows when there is at least one match in BOTH tables
LEFT JOIN: Return all rows from the left table, and the matched rows from the right table
RIGHT JOIN: Return all rows from the right table, and the matched rows from the left table
FULL JOIN: Return all rows when there is a match in ONE of the tables

SQL INNER JOIN

SELECT column_name(s)
FROM table1
INNER JOIN table2
ON table1.column_name=table2.column_name;

SELECT column_name(s)
FROM table1
JOIN table2
ON table1.column_name=table2.column_name;

SQL LEFT JOIN

SELECT column_name(s)
FROM table1
LEFT JOIN table2
ON table1.column_name=table2.column_name;

SELECT column_name(s)
FROM table1
LEFT OUTER JOIN table2
ON table1.column_name=table2.column_name;

SQL RIGHT JOIN

SELECT column_name(s)
FROM table1
RIGHT JOIN table2
ON table1.column_name=table2.column_name;

SELECT column_name(s)
FROM table1
RIGHT OUTER JOIN table2
ON table1.column_name=table2.column_name;

@темы: MySQL

---

slick - jQuery carousel

[netcat-na-diary]

http://kenwheeler.github.io/slick/

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

---

Blood brush set

[netcat-na-diary]

http://www.designyourway.net/drb/blood-brush-set-2/

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