Pull to refresh
  • by relevance
  • by date
  • by rating

Баг с box-shadow в Опере

CSS *
Обнаружил в Опере неприятный баг, связанный с интерпретацией свойства box-shadow. В случае, если это свойство назначено элементу с псевдоклассом :hover, при наведении курсора тень вокруг него отображается некорректно. Поиск решения в сети результатов не принёс и его пришлось находить экспериментальным путём.
Читать дальше →
Total votes 25: ↑20 and ↓5 +15
Views 3K
Comments 15

Дрессируем box-shadow

CSS *
Простой пример box-shadow Разработчики W3C сделали box-shadow очень гибким свойством. Благодаря этому можно получать весьма интересные результаты, если использовать это свойство нетривиальным образом. В этой статье я напишу о некоторых эффектах, которые мне удалось получить при помощи «теневых технологий».

Пока я составлял примеры, я неожиданно обнаружил, что браузеры отображают их совсем неодинаково. В итоге, помимо простой демонстрации возможностей box-shadow, получился еще и маленький браузерный тест на поддержку CSS 3. Все примеры снабжены CSS-кодом и картинкой (общий объем всех PNG: 161 КБ). В статье я не стал прописывать свойства с вендорными префиксами -moz- и -webkit-, чтобы не ухудшать читабельность. В суммарной странице со всеми примерами эти префиксы есть (предупреждаю, что у Оперы есть баг с прорисовкой внешних box-shadow при прокрутке).
Читать дальше →
Total votes 132: ↑128 and ↓4 +124
Views 88K
Comments 56

Оформление изображений на CSS3

CSS *
Translation
При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.
Читать дальше →
Total votes 253: ↑245 and ↓8 +237
Views 64K
Comments 51

Затухание текста на CSS3

CSS *
Привет всем. Сегодняшний пост будет коротким, но, думается мне, полезным.
Часто приходится слышать о том, как сделать «затухание» текста к низу, верху и т.д.
Есть варианты на js, есть варианты с картинкой и просто css-градиентом наложенными поверх текста.
Сегодня в голову пришел несколько другой подход к решению этой проблемы.
Его реализация проста как три копейки
Читать дальше →
Total votes 62: ↑58 and ↓4 +54
Views 22K
Comments 38

CSS3. Работа с тенями. Часть 1

Microsoft corporate blog CSS *
Tutorial
Так получилось (и прошу считать это удачным совпадением), именно сегодня на Хабре опубликован топик про практическое применение теней из CSS3 для создания интересных эффектов, а мы в свою очередь подготовили топик про основы для этого творчества.

Мы попробуем разобраться в том, как работают тени в новых модулях CSS3. С практической точки зрения, мы рассмотрим два правила: box-shadow и text-shadow, определенные соответственно в модулях CSS3 Backgrounds and Borders и CSS3 Text.

Оба правила работают схожим образом (вплоть до соответствующей отсылки в спецификации), поэтому имеет смысл рассматривать их вместе. Вместе с этим есть некоторые различия, о которых тоже нельзя не сказать.

Первая часть посвещена работе с box-shadow, во второй мы пройдемся по теням для текста.
Читать дальше →
Total votes 60: ↑53 and ↓7 +46
Views 60K
Comments 30

Оформление изображений на CSS3. Часть 2

CSS *
Translation
В предыдущей статье про оформление изображений была затронута тема создания у картинок идеально закругленных углов, строгих теней и других графических «фишек» с помощью свойств box-shadow, border-radius и transition. Т.к. эти свойства обрабатываются некоторыми браузерами некорректно, проблема кроссбраузерности была решена обёртыванием изображения в контейнер, где оно (изображение) используется в качестве фона.

Сегодня я подготовил перевод второй части, где решается еще одна проблема такого метода, а именно невозможность фонового изображения изменять размеры и, как следствие, невозможность использовать данный метод при проектировании масштабируемого (адаптивного) дизайна.

К счастью, обходной путь был успешно найден. О нем и будет рассказано в статье.

Читать дальше →
Total votes 65: ↑57 and ↓8 +49
Views 4.1K
Comments 34

Набор кроссбраузерных CSS3 свойств

Website development *CSS *HTML *
Tutorial
Добрый день, союзники!

Мне, как верстальщику, приходится ежедневно сталкиваться с различными CSS3 свойствами, которые, хочется мне или нет, приходится использовать так, чтобы они корректно отображались во всех современных и несовременных браузерах. Само собой, у меня собралась некая библиотека, которую я использую при верстке различных проектов. Собирал я свою коллекцию, из различных ресурсов и форумов, на безграничных просторах сети Интернет, так что неудивительно, если кто-то уже сталкивался с чем-то в отдельности.

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

В любом случае, добро пожаловать!
Total votes 42: ↑23 and ↓19 +4
Views 51K
Comments 53

Коллекция css теней Box-shadows.css

Web design *CSS *HTML *GitHub
Sandbox
Привет всем!

Наверняка, некоторые из вас замечали, что на разных сайтах используются практически однотипные тени в блоках, панелях навигации и прочих контейнерах, плюс — минус пара пикселей в сторону прозрачности. Я проанализировал ряд популярных сайтов, как наших, так и зарубежных, и попытался собрать максимально приближенные параметры используемых теней в одну большую коллекцию, или библиотеку. Кому как удобнее. Надеюсь, кому-нибудь пригодится.

image

Основная цель проекта — облегчить работу начинающим веб-дизайнерам и разработчикам в создании приятного и современного дизайна. Возможно и опытные дизайнеры почерпнут для себя что-нибудь интересное из этой разработки.

Читать дальше →
Total votes 12: ↑8 and ↓4 +4
Views 9.3K
Comments 12

Box-shadows.css

Web design *Website development *CSS *HTML *GitHub
image

Всем привет!

В современном дизайне, при создании сайтов и приложений, многие разработчики применяют эффект глубины и объема, нередко обращаясь к таким css свойствам как box-shadow и drop-shadow. Некоторые считают, что в 2018 году это тренд. И действительно, немало как иностранных, так и российских сайтов, которые в 2018 году стали чаще применять тени.

Читать дальше →
Total votes 23: ↑13 and ↓10 +3
Views 6K
Comments 11

Box-shadows Device

CSS *JavaScript *HTML *Usability *GitHub

Device


Всем привет!


Хочу представить вашему вниманию небольшую разработку — Box-shadows Device (#bSd).
Это инструмент, который чем-то напоминает конструктор или css редактор. В нем вы можете создавать девайсы на любой вкус и кошелек.

Читать дальше →
Total votes 16: ↑15 and ↓1 +14
Views 2.7K
Comments 7