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

На практике все намного хуже. Не буду долго рассусоливать проблему и покажу один из вариантов.


Категории: CSS
Пометки: Выравнивание с помощью Flexbox css, выровнять блок по высоте ячейки, Css выравнивание по вертикали, выравнивание блоков.

При детальном изучении, оказалось, что фон "светло серее", не при нажатии, а когда кнопка мыши отпускается.


Категории: CSS, CMS Joomla 3.X, Joomla

стал замечать, что у сайтов, при просмотре в мобильном браузере, адресная строка не стандартная, а залита тем или иным цветом.
Сначала я подумал, что это как-то связано с SSL сертификатом, но все оказалось гораздо проще.


Категории: CSS

Если нужно чтобы один элемент, всегда отображался внизу экрана, даже если контента на странице мал, то в bootstrap для этого есть специальный класс navbar-fixed-bottom

Такой div всегда будет внизу

 
    <div class="navbar-fixed-bottom ">Footer</div>


Категории: CSS

Памятка с примерами использования CSS медиа запросов (@media) для создания отзывчивого / адаптивного шаблона.


Категории: CSS
Пометки: @media, отзывчивый, responsive, adaptive, адаптивный.

Если есть блок, внутри которого у всех элементов задано обтекание(float), то браузеры считают, что его высота минимальная.


Категории: CSS

Простой способ добавить маркер "стрелочку" к пунктам меню.

В примере ниже просто покажу, как нарисовать треугольник на чистом CSS и немного его анимировать.


Категории: Web, HTML, CSS
Пометки: css стрелочка для меню

Пример того, как накладывается эффетк от нескольких элементов с полупрозрачным фоном.


Категории: CSS
Не буду приводить пример кода так как, на мой взгляд, он тут будет лишним.
Опишу словами: у нас есть контейнер, внутри которого два элемента (пусть это будут div’ы), у первого z-index 10, у второго 20. Вроде все просто, но получается так, что первый див оказывается на переднем плане, хотя имеет более низкий индекс…

Задача мне досталась уже в таком виде в почти готовом проекте. Попробовал накидать такой код с нуля и протестировать, все заработало, как и должно было, а на рабочем сайте, не работало даже минусовое значение индекса второго элемента.


Категории: CSS

Одна из понравившихся мне вариантов, это шрифт awesome font - шикарный набор иконок, на все случаи жизни, сделанных в виде шрифта.

Подкупает не только выбором, но и простотой в использовании.


Категории: CSS, Сторонние сервисы
Яндекс.Метрика