Скруглы — border-radius inset для картинок

Скрипты и советы | 26 июня 2015 4 257

Уроки CSS на Хабрахабре

Скруглы — border-radius inset для картинок

Некоторое время назад появилась задача для дизайнера сделать стилизованный под дикий запад сайт. Мне, как верстальщику, пришла задача от дизайнера сделать картинки и некоторые бэкграунды, стилизованные под дикозападские вывески.

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

Т.е. нужно было использовать border-radius:inset, которого, как оказалось, не существует…

Нарезать кучу картинок под каждую страницу и случай, само-собой, нереально и бессмысленно.

Заказчик не был одним из «адептов explorer 6», поэтому я решил упростить себе жизнь связкой jQuery и HTML5. 

Источник: Уроки CSS на Хабрахабре
🖨️ Версия для печати
[Перевод] CSS: интересные возможности border-radius

Что можно сделать с помощью CSS-свойства border-radius? Автор материала, перевод которого мы публикуем, говорит, что...

Подробнее
[Перевод] Старый и новый CSS. История веб-дизайна

Я увлеклась веб-дизайном и разработкой в конце 90-х. Чёрт побери, как это было давно. И как это было ужасно. Я имею в...

Подробнее
Как вписать блоки в страницу или в контейнер? Используйте css grid

Я на днях обнаружил печальную вещь. Хотя стандарт css grid существует не первый год, многие до сих пор то ли не знают о...

Подробнее
Цветовая схема без помощи дизайнера

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

Подробнее
Как сделать SILO-структуру сайта

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

Подробнее
[Перевод] Фронтенд-разработчику: 7 основных принципов дизайна

Я занимаюсь разработкой фронтенда. Мне часто приходится слышать такой вопрос: «Надо ли мне изучить дизайн для того,...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями