Красивые кнопочки #

Красивые кнопочки на css и html:
Красивые кнопочки

yout text


yout text

ДЕМО / СКАЧАТЬ

Пример верстки равноудаленных блоков #

* { margin:0; padding:0;}
.container { text-align: justify; text-justify:newspaper; }
.box{ display:-moz-inline-box; display:inline-block; vertical-align:top; text-align:left; width:200px; height:200px; background:red; }
.box p{ padding:10px;}
/*IE6*/* html .box{ display:inline; }
/*IE7*/* + html .box{ display:inline; }
.under{display:-moz-inline-box; display:inline-block; width:100%; }



текст текст текст текст текст текст текст текст текст текст текст текст


текст текст текст текст текст текст текст текст текст текст текст текст текст


текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст


текст текст текст текст текст текст текст текст текст текст текст текст текст текст




ДЕМО: Смотреть

Полупрозрачный блок #

Блок валидный, отображается правильно во всех последних браузерах.

  
  

  

    

Привет!


    

Это полупрозрачный блок.


  



И еще один нюанс, по моему хороший, сам блок прозрачный а шрифт нет. ДЕМО смотреть

Карта Украины для сайта #

Карта Украины для сайта

Стянул по быстрому откуда-то карту, может кому-то пригодится.
Карта Демо / скачать

Простая форма без таблиц #

Очень часто сталкиваюсь с созданием форм. И сейчас я приведу как просто обойти таблицы и даже блочную верстку, но при этом получить правильную ровную форму.











!семантично
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}

demo

Текстовый ролловер(rollover) #

Очень просто реализовать текстовый ролловер(rollover):

a {
    display:block;
    width:100px;
    background:#F2F2F2;
    border:1px solid #DDDDDD;
    font-size:14px;
    line-height:26px;
    color:#000000;
    text-decoration:none;
    text-align:center;
}
a:hover {
    text-indent:-999em;
    position:relative;
}
a span{
    display:none;
}
a:hover span{
    text-indent:0;
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
}

Вот и все. Демо Текстовый ролловер