все безопасные веб-шрифты

Для верстальщиков скорее для веб-дизайнеров)))

как посчитать ширину блока вмести с бордерами

есть такое свойство в СSS когда надо чтобы размер блока учитывал бордер:

.block{
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

как сделать многоколоночный текст

Есть два метода, css3 или скрипты
вариант 1:

.block{
  /* к-во колонок */
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;

/* отступы между колонок */
  column-gap: 10px;
  -moz-column-gap: 10px;
  -webkit-column-gap: 10px;

/* ширина колонок */
  column-width: 200px;
  -moz-column-width: 200px;
  -webkit-column-width: 200px;

/* Разделительная линия между колонками */
  column-rule:  1px solid black;
  -moz-column-rule:  1px solid black;
  -webkit-column-rule:  1px solid black;
}

вариант 2:
Например вот такой скриптик: Columnizer jQuery Plugin

Забераем рамку вокруг input type=submit

В цсс пишем:
input[type="submit"]::-moz-focus-inner{ border: none; }
input:focus { outline: none; }

Зеркальное отражение фотографии (кроссбраузерность)

Зеркальное отражение фотографии методом СSS.
Свойство transform доступно в СSS3, на данный момент для кроссбраузерность записи для разных браузеров выглядят так:

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; 
    filter: fliph; 
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv;
    filter: flipv;
}

Свойство transform также разрешает менять размеры и крутить обекты по X, Y, Z осях, пример поворота объекта на 90 градусов:

div{
 transform:rotate(90deg);
 -ms-transform:rotate(90deg);
 -moz-transform:rotate(90deg); 
 -webkit-transform:rotate(90deg); 
 -o-transform:rotate(90deg); 
}

Адаптивная верстка (часть 3)

Адаптивные размеры блоков
Чтоб при изменении размера окна браузера, почти все трансформации происходили плавно, надо вписать такие стили:

*{
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 transition: all 0.3s ease;
}

П.С. не всегда надо что бы все трансформации проходили плавно, иногда луче применять эти стили к конкретным блокам.

Адаптивная верстка (часть 2)

Размер блоков в зависимости от размера окна

Например, блок на маленьких разрешениях, должен занимать по ширине 95%, а на больших 70%
вот такой цсс, решает эту задачу:

.block{
  width: 70%;
}
@media only screen and (min-width: 240px) and (max-width: 980px) {
  .block{
    width: 95%;
  }
}

Адаптивная верстка (часть 1)

Расстановка блоков по всей ширине Метод построен, на изменении размера блока, можно также переделать что бы блоки были одной ширины а менялись отступы между блоками...

нтмл:

<ul class="column">
   <!-- повторяющийся элемент списка -->
   <li>
     <div class="block">
     <!-- контент -->
     </div>
   </li>
   <!-- конец повторяющегося элемента -->
</ul>

Цсс:

ul.column{
   width: 100%;
   padding: 0;
   margin: 10px 0;
   list-style: none;
}
 ul.column li {
   float: left;
   width: 200px; /* ширина колонки по умолчанию */
   padding: 0;
   margin: 5px 0;
   display: inline;
}
.block {
   height: 355px;
   font-size: 1em;
   margin-right: 10px; /* отступ между колонками */
   padding: 20px;
   background: #e3e1d5;
}

Скрипт:

function smartColumns() { //функция, подсчитывающая ширину колонок

   //сброс ширины строки до 100% после изменения размера экрана
   $("ul.column").css({ 'width' : "100%"});

   var colWrap = $("ul.column").width(); //определяем ширину строки
   var colNum = Math.floor(colWrap / 200); //определяем, сколько столбцов в 200px вместится в строку и округляем число до целого
   var colFixed = Math.floor(colWrap / colNum); //ширину строки делим на количество столбцов, округляем до целого числа, в результате получаем точную скорректированную ширину колонки

   $("ul.column").css({ 'width' : colWrap}); //ставим точную ширину строки в пикселях вместо использования % - это предотвратит возможные баги в разных браузерах при различных разрешениях экрана
   $("ul.column li").css({ 'width' : colFixed}); //ставим точную ширину измененным столбцам

}

 smartColumns(); //запускаем функцию после загрузки страницы

 $(window).resize(function () { //запускаем функцию после каждого изменения размера экрана
   smartColumns();
});

П.С. лень было набирать поэтому скопировал части кода тут

Хаки для браузеров

Хаки для браузеров
* IE6 and below *
* html #uno { color: red }


* IE7 *
*:first-child+html #dos { color: red }


* IE7, FF, Saf, Opera *
html>body #tres { color: red }


* IE8, FF, Saf, Opera (Everything but IE 6,7) *
html>/**/body #cuatro { color: red }


* Opera 9.27 and below, safari 2 *
html:first-child #cinco { color: red }


* Safari 2-3 *
html[xmlns*=""] body:last-child #seis { color: red }


* safari 3+, chrome 1+, opera9+, ff 3.5+ *
body:nth-of-type(1) #siete { color: red }


* safari 3+, chrome 1+, opera9+, ff 3.5+ *
body:first-of-type #ocho { color: red }


* saf3+, chrome1+ *
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}


* iPhone / mobile webkit *
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}


* Safari 2 - 3.1 *
html[xmlns*=""]:root #trece { color: red }


* Safari 2 - 3.1, Opera 9.25 *
*|html[xmlns*=""] #catorce { color: red }


* Everything but IE6-8 *
:root *> #quince { color: red }


* IE7 *
*+html #dieciocho { color: red }


* Firefox only. 1+ *
#veinticuatro, x:-moz-any-link { color: red }


* Firefox 3.0+ *
#veinticinco, x:-moz-any-link, x:default { color: red }


***** Attribute Hacks ******


* IE6 *
#once { _color: blue }


* IE6, IE7 *
#doce { *color: blue; * or #color: blue * }


* Everything but IE6 *
#diecisiete { color/**/: blue }


* IE6, IE7, IE8 *
#diecinueve { color: blue\9; }


* IE7, IE8 *
#veinte { color/*\**/: blue\9; }


* IE6, IE7 -- acts as an !important *
#veintesiete { color: blue !ie; } * string after ! can be anything *

/* IE8 */ #anotherone {color: blue\0/;} * must go at the END of all rules *

jQuery фиксировать блок при прокрутке окна

Блок b_fix пустой блок для определения координат низа екрана для него пишем стили:

.b_fix{
 height: 1px;
 background: transparent;
 bottom: 0;
 position: fixed;
}

а блок b_text это блок с текстом который будет ездить до определенных координат.

$(window).scroll(function() {
    var block_btn = $(".b_fix");
    var offset = block_btn.offset();
    if(offset.top >= 1490){
        $(".b_text")
             .css('position','relative')
             .css('padding-top','0');
    }
    else{
        $(".b_text")
             .css('position','fixed')
             .css('padding-top','112px');
    }
});

Слайдер на jQuery (методом fadeIn) с управлением

HTML:

⟨div⟩
⟨a class="item_prev"⟩PREV⟨/a⟩
⟨a class="item_next"⟩NEXT⟨/a⟩
⟨/div⟩
⟨div class="item"⟩
Слайд 1
⟨/div⟩
⟨div class="item"⟩
Слайд 2
⟨/div⟩
...
⟨div class="item"⟩
Слайд N
⟨/div⟩

SCRIPT:

$(document).ready(function(){

var sub_num = 0;
$('.item_prev').click(function() {
var sub = $(this).parent().parent('li').children('.item');
var sub_sum = $(sub).length-1;
console.log(sub_num);
if(sub_num > 0){
sub_num--;
}
else{
sub_num=sub_sum;
}
$(sub).fadeOut().removeClass('active');
$(sub).eq(sub_num).fadeIn().addClass('active');
});
$('.item_next').click(function() {
var sub = $(this).parent().parent('li').children('.item');
var sub_sum = $(sub).length-1;
if(sub_num < sub_sum){
sub_num++;
}
else{
sub_num=0;
}
$(sub).fadeOut().removeClass('active');
$(sub).eq(sub_num).fadeIn().addClass('active');
return sub_num;
});

});

подключить javascript файл для определённой ноды

В template.php добавляем:

function THEMENAME_preprocess(&$vars)
{
$node = menu_get_object('node');
if ($node && $node->nid == 123)
{
drupal_add_js('sites/all/themes/THEMENAME/js/script.js');
}
}