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

Есть разные вариации этой задачи, и как результат разные способы решения. Данный материал показывает решение на javascript , а так же содержит ссылки на другие варианты решения.


Категории: HTML

Давно на смену табличной верстке пришли другие технологии, но иногда ее еще используют т.к. "под рукой нет простого и понятного примера замены".

Поэтому ниже простая демонстрация замены таблицы на flexbox.


Категории: HTML, CSS
Пометки: flexbox table

Иногда нужно переделать старую табличную верстку, на отзывчивую (Responsive), правильный, на мой взгляд, вариант это переверстать (на эту тему есть заметка Замена таблиц на flexbox ), но иногда это слишком затратно по ресурсам.

Тут есть простое решение - превратить таблицу в flexbox


Категории: HTML, CSS

При использовании flexbox некоторые привычные методы, например, выравнивание элементов по центру внутри flex блока, работаю по другому.

Ниже пример выравнивания текста по вертикали в flexbox


Категории: HTML, CSS

Нужно было разместить картинку по центру блока, размер самого изображения может быть разным.


Категории: HTML, CSS

Коротко о том, как вставить на страницу SVG изображение и изменить его цвет через CSS.


Категории: HTML, CSS

Интересный шрифт, в рукописной стилистике.

pic1

 
/* cyrillic */
@font-face {
  font-family: 'Neucha';
  font-style: normal;
  font-weight: 400;
  src: local('Neucha'), url(https://fonts.gstatic.com/s/neucha/v9/kfCpWUYjzqqtPFESHGr73_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Neucha';
  font-style: normal;
  font-weight: 400;
  src: local('Neucha'), url(https://fonts.gstatic.com/s/neucha/v9/irvP3TB0tsoy_UMHmCQlTw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

Нашел на сайте


Категории: HTML, CSS, -Памятка-

pic1


Категории: HTML, CSS
Пометки: тултип, всплывающая подсказка

Используя в проекте chosen, для визуальной стилизации обычных выпадающих списком (select), столкнулся с тем, что внешний вид chosen, сильно отличался на мобильных устройствах, от ПК. При этом на планшетах все было хорошо, проблема была только в браузерах на телефонах.


Категории: HTML, CSS
Пометки: Выпадающие списки, внешний вид select (Заметка по внешнему виду chosen на мобильных платформах.)

Часто шрифт присланный дизайнерами в PSD выглядит совсем по другому, например, тоньше и более размытым. У самого FONT- не нашел ничего подобного, но есть свойство text-shadow - не совсем то, но выглядит похоже.


Категории: HTML, CSS
Пометки: Эфект на шрифт, сглаживание, размытие, более тонкий, sharp, smoothing
Яндекс.Метрика