Обновить
128.68

CSS *

Каскадные таблицы стилей

Сначала показывать
Период
Уровень сложности

Каламбуры на css

Время на прочтение1 мин
Количество просмотров44K
Хабровчане, всех с пятницей! Сейчас у подавляющего большинства читателей хабра рабочий день уже закончился, поэтому можно расслабиться и немного отвлечься от серьезных тем. Вы знали, что на css можно каламбурить? На кдпв один из примеров, а под катом небольшая простыня специфических css шуток.
Читать дальше →

CSS 3 Timing Functions и с чем их едят

Время на прочтение15 мин
Количество просмотров107K


Хей народ, пристегните ремни и держитесь покрепче, ибо наступил действительно волнительный момент: вам предстоит разобраться в тонкостях чрезвычайно интересных временных функций CSS!


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

Полетели!

Новое для веб-дизайнера за июнь 2013

Время на прочтение1 мин
Количество просмотров51K
Новые полезные штуки для веб-дизайнеров за июнь 2013. Остальные подборки доступны по тегу "новое для веб-дизайнера"

Инструменты




Red Pen — сервис позволяет легко получать обратную связь на свои работы в формате PNG: после загрузки картинки любой пользователь может оставлять свои комментарии к файлу
Читать дальше →

Webfonts — разбираемся с антиалиасингом под Windows (UPD)

Время на прочтение6 мин
Количество просмотров71K
Думаю, что не только я, но и другие пользователи Chrome под Windows, на многих сайтах замечали проблемы c отображением нестандартных шрифтов. Читать текст на таких сайтах можно, но глазам больно. Я бы так все это и продолжал терпеть, но на одном из недавних собственных проектов этот вопрос встал буквально ребром. Решил разобраться во всем досконально.

Разница в этих двух фрагментах очевидна. Первый сделан со случайно выбранного сайта adaptive-images, а второй с его локальной копии, в css которой была изменена буквально одна строчка.

(Читавшие первую версию статьи могут сразу перейти к UPD, где приведено работающее альтернативное решение проблемы для Chrome)


И в чем же там дело?

Подборка CSS3-генераторов для упрощения фронтэнд-разработки

Время на прочтение2 мин
Количество просмотров48K
CSS3 предоставляет много новых возможностей в мире фронтэнд-разработки. Это действительно великолепная вещь, но иногда трудно вспомнить некоторые параметры, особенно, если вы — веб-дизайнер, а не программист. Вот 10 удивительных CSS3-генераторов, которые помогут вам сэкономить время и силы (картинки кликабельны).
Читать дальше →

Базовый css-шаблон

Время на прочтение1 мин
Количество просмотров4.1K
Вечером знакомый попросил быстро сделать ему основу для его блога. Даже не сверстать макет, а сделать именно основу.

Так как я сижу без работы и становится скучно, решил безвозмездно посодействовать. Что получилось, смотрите под ниже.
Читать дальше →

Сброс стилей с помощью CSS Reset

Время на прочтение6 мин
Количество просмотров350K
Данная статья — первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset.

Зачем это нужно?


Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей.

Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание. Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser). Разработчикам браузера не нравился синий цвет и раздражало подчёркивание, поэтому они решили выделять ссылки красным цветом и полужирным шрифтом. Именно исходя из этого, если вы установите базовое значение стилей для элемента a, то он гарантированно будет таким, каким вы хотите его видеть, а не как предпочитают его отображать разработчики UltraBrowser.

Читать дальше →

Забудьте про RGB и HEX

Время на прочтение3 мин
Количество просмотров52K
В CSS существует несколько способов представления цветов. Один из них — система HSL. В этой статье я покажу вам, какие возможности она открывает для верстальщика.

Шпаргалка по Flexbox (CSS3 Flexible Box)

Время на прочтение1 мин
Количество просмотров379K
Мне не нова магия Flexbox, но я не часто ее использую, и поэтому после паузы в использовании мне приходится открывать вот этот пост на CSS-Tricks чтобы освежить память.

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


Читать дальше →

Modest — разработка открытого движка HTML рендера на «голом» Си

Время на прочтение5 мин
Количество просмотров18K
Всем привет! Меня зовут Александр Борисов и я разрабатываю Modest — открытый движок HTML-рендера на «голом» Си без использования внешних зависимостей (далее движок). Сразу хочется пояснить, что значит «без внешних зависимостей» — весь код пишется с нуля, код нигде не заимствован.

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

Языки пламени в CSS

Время на прочтение2 мин
Количество просмотров39K
Прочитав статью про капельное преобразование в CSS, я решил поиграться с настройками в коде примера на CodePen и случайно выделил движущиеся блоки. Мне это показалось красивым и похожим на процесс горения. После недолгих размышлений код был кустарным образом распилен на части, сдобрен прозрачностью фона, анимацией и цветными тенями, и вот, что из этого получилось.



Подойти к огню

Несколько интересностей и полезностей для веб-разработчика #36

Время на прочтение5 мин
Количество просмотров60K
Доброго времени суток, уважаемые хабравчане. Поздравляю всех с наступившим 2015 годом! За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Лучшее от Codrops за 2014 год




Я думаю многие из вас знакомы с потрясающими демками от Codrops. Авторы сайта буквально всегда реализуют интереснейшие UI/UX задумки с помощью HTML/CSS/SVG/JS и подробно рассказывают о том, как они это сделали. А это их собственная мега подборка с лучшими работам. Также рекомендую для вдохновения коллекцию самых популярных пэнов за 2014 год от CodePen.
Читать дальше →

Несколько интересностей и полезностей для веб-разработчика #10

Время на прочтение4 мин
Количество просмотров41K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром. Это последняя подборка в этом году и я постарался сделать ее наиболее информативной и нужной.

image
Летом 2013 года издательство The Guardian обновило свой сайт, согласно всем современным трендам/нормам/правилам. Но самым главным событием является то, что разработчики выложили весь фронтенд сайта в открытый доступ на GitHub. Свыше 1500 старов, 10 000 коммитов и 100 веток. Там целый джентельменский набор. Для многих это будет кладезь знаний.

imageCenny.js — plug 'n play бэкенд для веб-приложений. Быстрый, защищенный, расширяемый.
var server = new Cenny();
server.set({data: [1,2,3]});
server.get(function(data){ 
   console.log(data); 
});


imageМаленький скрипт от Filament Group (один из первых спонсоров jQuery). Overthrow.js это полифил для отзывчивого дизайна, который стабилизирует работу стандартного скроллинга контента HTML элементов (overflow: auto/scroll) на тач устройствах. Для тех, кто не совсем понял о чем речь, сравните на вашем гаджете работу обычного скроллинга и действие Overthrow.

Читать дальше →

Ближайшие события

Всем, всем, всем: время обновлять свой CSS3

Время на прочтение6 мин
Количество просмотров41K
Если Вы используете экспериментальный CSS на своих сайтах, в демках, статьях или инструментах, то это требует определенного рода поддержки. В связи с некоторыми недавними изменениями в мире браузеров, настало время пересмотреть и обновить Ваш код. Эта статья поможет Вам понять, что же начать обновлять уже сейчас.

Читать дальше →

Большая подборка уроков по созданию CSS-кнопок

Время на прочтение2 мин
Количество просмотров84K
В этой подборке представлены уроки с наглядными примерами по созданию CSS-кнопок на любой вкус.

Fancy 3D Button with CSS3 [Демо | Подробности]


Читать дальше →

Красивые чекбоксы и радиокнопки на CSS3 без JavaScript

Время на прочтение1 мин
Количество просмотров117K
Благодаря псевдоклассу :checked, появившемуся в CSS3, можно стилизовать формы с чекбоксами и радиокнопками как угодно. В этом топике рассмотрен один очень простой способ, причем без использования JavaScript.



Демонстрация Скачать исходники
Читать дальше →

Популярно о псевдоэлементах :Before и :After

Время на прочтение3 мин
Количество просмотров423K
Псевдоэлементы :before и :after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.

Читать дальше →

Пять интересных эффектов при наведении с использованием нескольких фоновых изображений

Время на прочтение6 мин
Количество просмотров23K
Сегодня мы рассмотрим все преимущества использования множественных фонов. Изучим базовые основы и создадим крутые эффекты при наведении с помощью CSS свойств hover и transition.

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

Что должно получиться


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

Демонстрация



Читать дальше →

Вам больше не нужен JavaScript

Уровень сложностиПростой
Время на прочтение25 мин
Количество просмотров60K

Команда JavaScript for Devs подготовила перевод статьи о том, как CSS и HTML могут заменить значительную часть JavaScript. Автор делится взглядом на веб как на искусство, показывает возможности современных фич CSS — от вложенности и @starting-style до динамических viewport-единиц, — и доказывает, что сайты могут быть быстрыми, красивыми и интерактивными даже без JS.

Читать далее

Numl – Альтернативный язык разметки и стилизации для веб

Время на прочтение20 мин
Количество просмотров21K

Всем привет! Меня зовут Андрей, я профессионально разрабатываю веб-интерфейсы уже больше 11 лет и последний год развиваю проект Numl, который можно назвать языком разметки и стилизации для веб. В этой статье я расскажу, как в попытке перебороть ряд особенностей CSS и упростить вёрстку веб-проектов получился целый язык, который не только удовлетворил все наши потребности в стилизации, но также позволил уменьшить кол-во JS-кода и улучшить доступность.


Читать дальше →

Вклад авторов