Fast Site Engine
Высокопроизводительный движок для сайтов
Заказать сайт на основе движка
О движкеПроизводительностьБезопасностьТехнические требованияSEO 
Лицензионное соглашение
Демо
Установка
Панель управления
Модули
Документация
Шаблоны
Тесты производительности php
Планы на будущее
Список изменений
Отзывы и пожелания
Переходим на Линукс
Всякое разное
Документация  »  CSS

CSS

Обязательно должна присутствовать "шапка" во всех каскадных таблицах стилей (CSS) для корректной работы js:

html{height:100%}body{display:table;width:100%;height:100%;margin:0;padding:0;overflow-y:scroll;font:14px/18px Verdana;color:#000;background-color:#fff}
header,nav,main,aside,footer{display:block;z-index:5}img{border:none;max-width:100%;height:auto}p{margin:0 0 18px;padding:0}
table{border:none;border-collapse:collapse}table td{padding:0}
.sr-only,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.tomain{display:none;width:320px;height:55px;position:fixed;z-index:10000001;margin:auto;left:0;right:0;top:10px}
.overb{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;z-index:10000000;background-color:rgba(0,0,0,.8)}
.overb:hover *{opacity:1}.over{position:fixed;z-index:10000001;overflow-x:hidden}
.fbn{position:fixed;top:1%;right:1%;margin:0;padding:0;width:38px;height:38px;opacity:.7;background:none;border:none;border-radius:9px;outline:0 !important;cursor:pointer;box-shadow:inset 0 0 3px #fff;transition:.3s ease}
.fbn:before,.fbn:after{content:'';position:absolute;margin:auto;left:0;right:0;top:0;bottom:0;transform:rotate(45deg);height:18px;width:4px;background-color:#fff;transition:.3s ease}
.fbn:after{transform:rotate(-45deg)}.fbx:hover:before,.fbx:hover:after{transform:rotate(-450deg)}
.fixed{position:fixed !important}

Код специально вынесен в CCS для возможности изменения под конкретный сайт, менять цвета итп. можно, а вот z-index:10000000 нет :) Индекс такой большой, чтоб перекрывал внешние скрипты/сервисы обратного звонока итп.
Шаблоны находятся примерно тут inc/styles/def/_.css

Стили для использования встроенных анимаций итп. вместе с JavaScript библиотекой:

Эффект аккордеона [accordion]

.ac{overflow:hidden;border:1px solid #000;border-radius:6px;box-sizing:border-box}
.ac h2,.ac h3{margin:0;padding:9px 16px;position:relative;font:bold 15px/21px Verdana;color:#000;cursor:pointer;border-top:1px solid #000}
.ac h2:first-of-type,.ac h3:first-of-type{border-top:none}
.ac h2:after,.ac h3:after{content:'';position:absolute;right:9px;display:block;font-size:0;border:6px solid transparent;top:17px;border-top:5px solid #000;border-bottom:0}
.ac .open:after{border-bottom:5px solid #f00;border-top:0}
.ac h2+div,.ac h2+p,.ac h2+ul,.ac h3+div,.ac h3+p,.ac h3+ul{display:none;padding:0 16px;overflow:hidden;border-top:1px solid #000}
.ac h2+div:before,.ac h2+p:before,.ac h3+div:before,.ac h3+p:before{display:block;content:'';height:9px;font-size:0}/*для вертикальных отступов*/
.ac h2+div:after,.ac h2+p:after,.ac h3+div:after,.ac h3+p:after{display:block;content:'';height:9px;font-size:0}/*без прыжков при анимации*/
/* Фикс для ПУ сайта (по умолчанию)
/a/context/fix.css
.ac h2+div,.ac h2+p,.ac h2+ul,.ac h3+div,.ac h3+p,.ac h3+ul{display:block !important}
*/

ссылка-якорь на стили к accordion

Фиксация элемента при скролле страницы вниз (js задаст класс fixed перечисленным элементам) [fix]

Простое появление без эффектов:
.fixme{display:none;height:35px;position:absolute;z-index:10;left:0;right:0;top:0;background-color:#f00;box-shadow: 0 3px 3px -3px rgba(0,0,0,.5)}
.fixme.fixed{display:block}
Выезд сверу:
.fixme{position:fixed;z-index:1;height:100px;top:-100px;left:0;right:0;background-color:#f00;box-shadow: 0 3px 3px -3px rgba(0,0,0,.5);transition:top .5s ease}
.fixme.fixed{top:0}
Появление с нарастанием прозрачности:
.fixme{height:35px;position:absolute;z-index:10;top:-100px;left:0;right:0;opacity:0;transition:opacity .3s ease;background-color:#f00;box-shadow: 0 3px 3px -3px rgba(0,0,0,.5)}
.fixme.fixed{opacity:1;top:0}

ссылка-якорь на стили к fix

Кнопка наверх (к началу страницы) [goup]

.goup{display:none;position:fixed;z-index:100;padding:0;width:44px;height:36px;bottom:10px;right:10px;font:24px/24px Verdana;color:#fff;text-transform:uppercase;border:2px solid #fff;cursor:pointer}
.goup:hover{background:linear-gradient(#000,#ccc)}

ссылка-якорь на стили к goup

Слайдер (карусель) [slide]

.slide{display:inline-block;position:relative;margin:0 auto;line-height:0;overflow:hidden}
.slide div{display:none;width:100%;height:auto;margin:0 auto;position:absolute;top:0;left:0}
.slide div:nth-of-type(1){display:block}
.slide div img{position:relative;z-index:2}
.slide ins{position:absolute;z-index:9;margin:auto;left:0;right:0;bottom:5%;text-align:center;font-size:0}
.slide ins i{display:inline-block;width:8px;height:8px;font-size:0;margin:0 5px;border:2px solid #fff;border-radius:9px;cursor:pointer}
.slide .on{background-color:#fff;border-color:#fff !important}
.slide .fbn{position:absolute;z-index:10;height:100%;top:0;left:0;padding:0 4%;box-shadow:none;border-radius:0}
.slide .fbn:hover{background:rgba(0,0,0,.2);opacity:1}
.slide .fbn:nth-of-type(1){left:auto;right:0;transform:rotate(180deg)}
.slide .fbn:before,.slide .fbn:after{width:5px;height:33px;top:-20px}
.slide .fbn:after{top:20px}
.slide p{position:absolute;z-index:3;margin:auto;left:0;right:0;top:4%;text-align:center;font:bold 38px/38px Verdana;color:#fff;text-shadow:0 1px 1px #735206}
.slide span{display:block;font:16px/18px Verdana;color:#ff7b00}
/* Фикс для ПУ сайта (по умолчанию)
/a/context/fix.css
.slide div{margin:0;display:block !important;position:relative !important}
*/

ссылка-якорь на стили к slide

Переключаемые вкладки [tabs]

.tabs{min-width:300px;max-width:600px;margin:0 auto}
.tabs ul:first-of-type{display:block;margin:0;padding:0;font-size:0;line-height:0;list-style:none}
.tabs ul:first-of-type li{display:inline-block;margin-right:2px;padding:0 15px;height:47px;font:21px/47px Verdana;color:#000;background-color:#ccc;text-align:center;cursor:pointer;transition:.3s ease}
.tabs ul:first-of-type li.on{background-color:#a0faa0;color:#3f32bb}
.tabs div{display:none;box-sizing:border-box;padding:15px 3% 16px;background-color:#a0faa0;box-shadow:0 5px 5px -5px #333}
/* Фикс для ПУ сайта (по умолчанию)
/a/context/fix.css
.tabs div{display:block !important}
*/

ссылка-якорь на стили к tabs

Слайдер лента (карусель с блоками внутри) [tape]

.tape,.tape code,.tape ins{position:relative;height:185px;font-size:0;line-height:0;overflow:hidden}
.tape code{display:block;z-index:8}
.tape ins{position:absolute}
.tape div{position:relative;display:inline-block;width:300px;height:185px;background-color:#f0f;margin-right:4px}
.tape div p{position:absolute;top:10px;left:10px;font:bold 38px/38px Verdana;color:#fff}
.tape .fbn{width:60px;position:absolute;z-index:10;height:100%;top:0;left:0;box-shadow:none;border-radius:0;background:rgba(0,0,0,.2)}
.tape .fbn:hover{background:rgba(0,0,0,.3);opacity:1}
.tape .fbn:nth-of-type(1){left:auto;right:0;transform:rotate(180deg)}
.tape .fbn:before,.tape .fbn:after{width:5px;height:33px;top:-20px}
.tape .fbn:after{top:20px}
.tape.vert,.tape.vert code,.tape.vert ins{width:300px;height:313px}
.tape.vert code{height:193px;margin:60px 0}
.tape.vert div{display:block;margin:4px 0 0}
.tape.vert .fbn{width:100%;height:60px;margin:auto;top:0;left:0;right:0}
.tape.vert .fbn:nth-of-type(1){top:auto;bottom:0;transform:rotate(180deg)}
.tape.vert .fbn:after{top:0;left:20px;transform:rotate(135deg)}
.tape.vert .fbn:before{top:0;left:-20px}
@media screen and (min-width:600px){
.tape code{margin:0 60px}
.tape div{margin:0 0 0 4px}
}
/* Фикс для ПУ сайта (по умолчанию)
/a/context/fix.css
.tape{height:auto !important;margin-bottom:10px !important}
*/

ссылка-якорь на стили к tape

Всплывающая/выезжающая подсказка [ff.alert()]

.alert{position:fixed;z-index:10000002 !important;box-sizing:border-box;width:280px;padding:28px 18px 24px;background-color:#fff;font:13px/15px Verdana;color:#2f2f2f;border:1px solid #c3c0c0;box-shadow:inset 0 0 9px #c3c0c0;border-radius:6px}
.alert ins:nth-of-type(1){display:block;position:absolute;left:-9999px;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid #e2e2e2;border-top:0;font-size:0}
.alert .fbn{position:absolute;opacity:1;box-shadow:none;background:none}
.alert .fbn:before,.alert .fbn:after{background-color:#555 !important}
@media screen and (min-width:1000px){
.alert{width:400px;padding:28px 24px 24px}
}

ссылка-якорь на стили к alert

Меню (на маленьком расширении выезжает, на большом статично отображается) [ff.menu()]

nav{display:none;padding:54px 0 40px;width:300px;position:absolute;z-index:9;top:0;left:0;background-color:#fff}
nav:before{content:'';display:block;width:100%;height:53px;position:absolute;z-index:1;top:0;left:0;background-color:#f00}
nav span{position:absolute;z-index:2;top:16px;left:30px;font:27px/27px Bookvica;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.4)}
nav button{position:absolute !important;z-index:3;top:8px !important;right:5px !important;opacity:1 !important;box-shadow:none !important}
nav button:focus{outline:1px dashed #fff !important}
nav button:hover:before,nav button:hover:after{background-color:#ececec;transform:rotate(-450deg)}
nav a{position:relative;display:block;margin:1px;padding:13px 30px 14px;font:21px/21px Verdana;background-color:#fff;text-decoration:none !important}
nav a:before{content:'';position:absolute;top:0;left:30px;right:30px;border-top:1px solid #cecece}
nav a:first-of-type:before{display:none}
nav a:link,nav a:visited{color:#444}
nav a:active,nav a:hover{color:#555}
nav .da:link,nav .da:visited{color:#cecece;cursor:default !important}

@media screen and (min-width:1000px){
nav{width:980px;display:block !important;text-align:right;height:0;top:55px !important;font-size:0;padding:0;margin:auto;left:0 !important;right:0 !important}
nav span,nav button,nav:before,nav a:before{display:none}
nav a{display:inline-block;height:30px;margin:0 !important;padding:0 20px !important;border-top:none !important;font:bold 15px/30px Verdana;color:#fff !important;text-shadow:0 1px 1px #735206;background:linear-gradient(#111,#ссс);box-shadow:0 6px 6px -4px rgba(0,0,0,.2),0 0 0 2px #fff,0 0 0 1px #ececec}
nav a:first-of-type{border-top-left-radius:6px;border-bottom-left-radius:6px}
nav a:last-of-type{border-top-right-radius:6px;border-bottom-right-radius:6px}
nav a:hover,nav a:active{background:linear-gradient(#111,#ссс)}
nav .da{background:none !important;background-color:#555 !important}
header button:nth-of-type(2){display:none}/*прячем button меню*/
}

ссылка-якорь на стили к menu

Всплывающая/выезжающая форма для обратной связи итп. [ff.mes()]

.mes{box-sizing:content-box;width:300px;border-radius:9px;background-color:#fff;padding:0 10px 25px}
.mes h2{margin:28px 0 27px}
.mes small{font:13px/17px Verdana}
.mes small,.mes h2{display:block;text-align:center}
.mes label{display:block;font:15px/18px Verdana}
.mes textarea:nth-of-type(3){height:100px}
.mes button{width:100%;padding:11px 0 12px;margin:14px 0}
.mes [role='alert']{text-align:center;padding:60px 10px 0}
.mes input[type='file']{display:none}
.mes .files{height:34px;padding:2px;margin:21px 0 9px;position:relative;border:1px solid #dadada;border-radius:6px}
.mes .files span{display:block;margin-top:-24px}
.mes .files i{display:block;position:absolute;z-index:1;top:2px;left:12px;font:14px/34px Verdana;overflow:hidden}
.mes .files button{display:inline-block;width:auto;padding:10px 30px 10px;margin:0;position:absolute;z-index:2;top:2px;right:2px;font:bold 14px/14px Verdana}
input[type='text'],input[type='password'],textarea{box-sizing:border-box;width:100%;height:44px;margin:3px 0 5px;padding:12px 0 0 13px;border-radius:6px;border:1px solid #dadada;font:16px/18px Verdana;color:#111;resize:none}
input[type='text'],input[type='password']{margin-bottom:12px;padding-top:1px}
input+[role='tooltip'],textarea+[role='tooltip']{display:none;box-sizing:border-box;height:0;position:relative;z-index:100}
input:focus+[role='tooltip'],textarea:focus+[role='tooltip']{display:block}
input+[role='tooltip'] i,textarea+[role='tooltip'] i{display:block;box-sizing:border-box;position:absolute;top:-18px;left:0;right:0;height:30px;padding:0 8px;background-color:#fff;font:13px/28px Verdana;color:#f00;border:1px solid #f00;border-bottom-left-radius:4px;border-bottom-right-radius:4px}
.keyo,.keyo+a{display:inline-block;vertical-align:middle;margin-right:10px;font:15px/15px Verdana}
button{box-sizing:content-box;display:inline-block;border:none;padding:11px 40px 12px;border-radius:6px;transition:.2s ease;text-align:center;font:bold 15px/15px Verdana;color:#fff;text-shadow:0 1px 1px #735206;background:linear-gradient(#111,#ссс);cursor:pointer}
button:hover{background:linear-gradient(#111,#ссс)}

@-moz-document url-prefix(){
button{padding:10px 40px 13px}
input[type='text'],input[type='password'],textarea{margin:3px 0 9px;padding:11px 0 0 13px}
input[type='text'],input[type='password']{padding-top:0}
.mes .files i{font:14px/32px Verdana}
.mes .files button{padding:9px 30px 11px}
}

@media screen and (min-width:1000px){
.mes{width:360px}
}

ссылка-якорь на стили к mes














Куча

строк

чтоб

якоря

доставали

:)













Страница сгенерирована за 0.002851 секунды
На один процесс веб-сервера: 351 стр/сек.
Всего Apache может отдать: 89 856 стр/сек.
Выделено php памяти: ~ 2MB

© Все права защищены 2004 - 2018
Карта сайта
Отслеживать изменения в Твиттере

Браузер построил за сек.
Полное время сек.

С момента выгрузки предыдущей страницы из памяти браузера: сек.