Последнее обновление:
August 28, 2017

Есть мысль... Жми, напиши!
html

  • Рубрик нет

Псевдоэлементы BEFORE и AFTER. Растягиваем по границам родительского блока.

Разметка:
[cce lang=»html»]

CAPTION

[/cce]
Стили:
[cce lang=»css»]
.wrapper {
width: 500px;
}
h2 {
height: 33px;
text-align: center;
width: 100%;
display: table-row;
}
h2:BEFORE, h2:AFTER {
position: relative;
display: table-cell;
content: » «;
width: 50%;
height: 33px;
background: #ff00ff;
}
h2 span {
margin:0 20px;
}
[/cce]
ДЕМКА

Views :

657

Полезные инструменты для верстальщика.

После продолжительного перерыва вернулся к вёрстке и забыл сервисы, которыми частенько пользовался.
Оставлю их в этой заметке.
P.S. Все ссылки открываются в новом окне/вкладке.
Сервис для генерации border-image:  http://border-image.com/
Статья про border-images: http://habrahabr.ru/post/141658/
Сервис генерации встраивания шрифтов (font-family, font-face generator): http://everythingfonts.com/font-face
Сервис кодирования картинок в Base64 (для иконок и прочих мелких): http://webcodertools.com/imagetobase64converter/Create
Сервис создание спрайтов (опять же для иконок и прочего): http://draeton.github.io/stitches/
Сервис генерации кросс-браузерного border-radius: http://border-radius.com/
Сервис генерации теней (box-shadow): http://css3gen.com/box-shadow/
Отличная […]

Views :

732

Небольшой пример выравнивания картинке по вертикали и горизонтали не зная её размеров

Вся фишка в  line-height, смотрим:  тынц

Views :

779

Css height пропорционально width, или width=height

На днях возникла необходимость, что бы высота элемента была пропорциональна ширине элемента.
Получился вот такой простенький кодик:
.element {
position: relative;
width:60%;
height: 0;
padding-bottom: 22%;
}
Как ни странно, но это работает во всех браузерах =)
Упс, выяснилось, что внутри блока height 100% не будет работать =(
Вот такой метод работает:
<div id="container">
[…]

Views :

2633

Div по центру, выравнивание div

Выравнивание содержимого:
[cc escaped=»true» lang=»css»]
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

div по центру, выравнивание div

.container {
display: table-cell;
vertical-align: middle;
width: 640px;
height: […]

Views :

1440

Баг с позиционирыванием бэграунда по центру в firefox и safari

[cc lang=»css»]
html {
margin-left: -1px;
overflow-Y: scroll;
}
[/cc]

Views :

854

Выравнивание полей формы с помощью CSS

Имя

Фамилия

Место жительства

[…]

Views :

1925

Прижать div footer к низу страницы

Имеем основу:
[cc lang=»html»]

[/cc]
Обычно юзаю этот способ:
[cc lang=»css»]
* {
margin: 0;
padding: 0;
}
html {height: 100%;}
body {
height: auto !important;
height: 100%;
min-height: 100%;
position: relative;
}
#content {
padding-bottom: 100px;
}
#footer {
position: absolute;
bottom: 0;
height: 80px;
}
[/cc]
Ели не поможет можно дописать:
[cc lang=»css»]
#content:after {
content: «.»;
display: […]

Views :

3450