О программировании
Последнее обновление:
August 28, 2017
Разметка:
[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]
ДЕМКА
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/
Отличная […]
732
Вся фишка в line-height, смотрим: тынц
779
На днях возникла необходимость, что бы высота элемента была пропорциональна ширине элемента.
Получился вот такой простенький кодик:
.element {
position: relative;
width:60%;
height: 0;
padding-bottom: 22%;
}
Как ни странно, но это работает во всех браузерах =)
Упс, выяснилось, что внутри блока height 100% не будет работать =(
Вот такой метод работает:
<div id="container">
[…]
2633
Выравнивание содержимого:
[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: […]
1440
[cc lang=»css»]
html {
margin-left: -1px;
overflow-Y: scroll;
}
[/cc]
854