Все заметки с тегом «CSS»

Bootstrap 3

20 августа 2013
Релизнулся разметочно-стилевой фреймворк Bootstrap версии 3. Что бы там не говорили, но штука очень полезная: экономит время, нервы и результат выходит лучше, чем делать по-быстрому с нуля.

В версии 3 Bootstrap, наконец, стал по-настоящему независим от Twitter, который его породил, и обзавёлся отдельным сайтом. Стоит отметить следующие изменения:
- Новый плоский дизайн для упрощения его стилизации. Старый можно вернуть специальной темой.
- Ещё большая заточенность сетки и компонент под мобильные устройства.
- По умолчанию для всего используется box-sizing: border-box.
- Переписали JavaScript-плагины. Обещают, что будет работать лучше.
- Значки теперь представлены в виде шрифта, а не в виде картинок.
- Сделали правильные модальные окошки.
- Добавили панели и группированные списки.
- Убрали accordion (заменили панелями), подменю, typeahead и ещё всякие мелкие штуки.
- Именование классов поменялось.
- Добавили документации.
- Не поддерживается Internet Explorer 7 и Firefox 3.6. Internet Explorer 8 поддерживается через Respond.js.
Кстати, в Yii2 Bootstrap 3 и обёртки для него включены в состав фреймворка.
- Официальный анонс
- Сайт проекта
- CSS
- Framework
- HTML
11 комментариев
Лишний border у треугольников в Firefox

20 декабря 2012
Часто для того, чтобы изобразить треугольник на CSS использют технику slants. То есть элемент в 0px шириной и высотой c тремя border приличной ширины и одним нулевым. В этом блоге так оформлены уголочки у количества комментариев к постам на главной. Типичный код для этого выглядит так:
```
.triangle {
    width: 0;
    height: 0;
 
    border-top: 0;
    border-bottom: 60px solid #fee;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}
```
FF и раньше чудил с отрисовкой треугольничков. Ту багу поправили, появилась новая:

Серый border в один пиксель тут явно лишний. Ни в одном другом браузере его нет.

Методом проб и ошибок поправил, но логики за всем этим так и не разглядел. Рабочий вариант без артефактов:
```
.triangle {
    width: 0;
    height: 0;
 
    border-top: 0;
    border-bottom: 60px solid #fee;
    border-left: 40px solid rgba(255, 255, 255, 0);
    border-right: 40px solid rgba(255, 255, 255, 0);
}
```
Посмотреть вживую

UPD: вместо rgba можно использовать -moz-border-top-colors: transparent;.

Проявляется только в Windows и Linux.

Баги в трекере mozilla:
- https://bugzilla.mozilla.org/show_bug.cgi?id=644104
- https://bugzilla.mozilla.org/show_bug.cgi?id=646053
UPD: в 2016 это исправили.
- Firefox
- CSS
- border
- slant
- bug
12 комментариев
Книга «Инлайновый контекст форматирования»

29 сентября 2012

Максим Усачёв (psywalker) и Илья Стрельцын (SelenIT) раскрывают в деталях, аж на 70 страниц, тему строчного контекста форматирования в CSS.

Читаем
- CSS
- Книги
- inline-block
- inline
2 комментария
Свой input[type=file] 2

8 сентября 2012

Нашлось ещё одно решение проблемы стилизации input[type=file], о которой я уже писал. Прошлое решение не требует JavaScript для самой подмены кнопки, но всё-равно требует его для эмуляции hover и title.

Второе решение требует минимума JavaScript, точно работает в IE7+, Opera, Chrome, Safari, FF, никак не ограничивает в стилизации кнопки и изначально не имеет проблем с hover и title:

+

Читаем
- CSS
- input
- file
16 комментариев
Свой input[type=file]

31 июля 2012

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

+

Читаем
- CSS
- input
- file
13 комментариев
Правильные модальные окна

5 июля 2012
Обычно модальные окна и диалоги делаются при помощи плагинов jQuery. Например, SimpleModal или jqModal. К сожалению, все они, в варианте по умолчанию, работают неправильно.

Если окно модальное, то пользователю нельзя позволять прокручивать страницу под ним. При этом, если содержимого в модальном окне очень много, нужно позволить это содержимое прокручивать.

По этому принципу работает просмотр фото в Facebook и Вконтакте.

Для реализации подобного функцианала частенько нагромождают тонны JavaScript, хотя можно обойтись почти чистым CSS (за исключением навешивания одного класса на контейнер).

Рассматриваем пример

Немного прокомментирую:
```
/* Данный класс навешивается на контейнер при открытии модального окна. Для нормальных браузеров это body, для стырах IE — html */
.lock {
    /* Скрываем скроллбары */
    overflow: hidden;
}
 
.modal {
    /* По умолчанию не показываем содержимое модальных окон */
    display: none;
}
 
.lock .modal {
    /* Показываем подложку (полупрозрачное затенение) при открытии модального окна */
    display: block;
 
    /* Саму подложку фиксируем и растягиваем на всё пространство */
    position: fixed;
    bottom: 0; left: 0; top: 0; right: 0;
 
    /* Если содержимое модального окна в подложку не влезает — показываем скроллбары */
    overflow: auto;
}
```
UPD: оформил в плагин jQuery
- JavaScript
- CSS
- modal
32 комментария
Foundation 3

30 июня 2012
Вышла третья версия фреймворка Foundation. Скорее всего вы слышали о популярном Twitter Bootsrap. После него большинство фреймворков смотрится блекло: элементов меньше, разметка ещё нелогичней, куча багов и ничего нового. Так вот Foundation отличается от Bootstrap в лучшую сторону:
- Разметка более лаконичная и логичная.
- Заточен для работы с кучей всяких устройств. Можно контролировать, как именно будет выглядеть сайт при каких параметрах экрана. Имеется очень гибкая адаптивная сетка.
- Для всего используется box-sizing: border-box.
- Неплохие наборы кнопочек, формочек, менюшек и мелких элементов.
- Табы, галерея и модальные окошки, которые отлично работают на всех устройствах.
- Пробуем
- Документация и демонстрация возможностей
- CSS
- Framework
- HTML
13 комментариев
Бескартиночные треугольники и FF

13 июня 2012

В данном блоге для оформления трегольников у блока с количеством комментариев используется довольно старая техника, позволяющая обойтись без изображений. Всё бы хорошо, но последняя версия FF рисует вместо аккураного треугольника размытое месиво. К сожалению, решение пока не найдено. Если знаете — подскажите.

UPD: вот так это выглядит в моём FF 13.0 под Windows 7.

Лечится через Options → Advanced. Нужно убрать галку с Use hardware acceleration when available.
- Firefox
- CSS
- slant
9 комментариев
Можно ли использовать в браузере X штуку Y

29 мая 2012
На подобные вопросы отлично отвечает ресурс caniuse.com.

Есть данные о:
- CSS (@font-face, Media Queries, …).
- HTML5 (Canvas, WebGL, …).
- JS API (CORS, Web Sockets, …).
- SVG.
- И другом (Data URLs, XMLHttpRequest 2, …)
Информация предствлена в виде удобных таблиц.

Пользуемся
- JavaScript
- CSS
Комментировать
CSS3 PIE 1.0

16 мая 2012

Вышел релиз библиотеки PIE 1.0, котрая добавляет в IE 6, 7 и 8 поддержку некоторых возможностей CSS3: boder-radius, box-shadow, border-image, border-image и несколько фоновых изображений.

Пользуемся
- IE
- CSS
- css3
- PIE
2 комментария

<rmcreative>

Все заметки с тегом «CSS»

Можно уточнить:

Bootstrap 3

Лишний border у треугольников в Firefox

Книга «Инлайновый контекст форматирования»

Свой input[type=file] 2

Свой input[type=file]

Правильные модальные окна

Foundation 3

Бескартиночные треугольники и FF

Можно ли использовать в браузере X штуку Y

CSS3 PIE 1.0

Интересное

Друзья

Разделы