Сайта для css: Создание простого веб-сайта с помощью HTML, CSS и JavaScript — Training

CSS-LIVE — жизнь во фронтенде

Перевод статьи Holograms, light-leaks and how to build CSS-only shaders с сайта robbowen.digital для css-live.ru, автор — Робб Оуэн

Может, я чуть преуменьшаю, но WebGL — это нечто. За пять минут на любом из сайтов, отмечающих лучшие примеры веб-дизайна наградами, можно увидеть, как сайты один за другим полностью полагаются на мощь canvas. Инструменты вроде threejs привносят в браузер мощь 3D и GLSL-шейдеров, а с ними — совершенно новый уровень визуальных эффектов.

Но тут я задумался: почему всё веселье должно доставаться JS? Сейчас, когда браузеры наконец широко поддерживают mix-blend-mode, многие из типовых приемов шейдинга стали доступны и в CSS. С правильным подбором картинок и тщательным их наложением можно создавать удивительно качественные эффекты без нужды в каких-либо JS-зависимостях.

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

На миг вы увидите еще и размытые блики объектива (боке).

читать дальше

Перевод статьи CSS Container Queries For Designers с сайта ishadeed.com, опубликован на CSS-live.ru с разрешения автора — Ахмада Шадида

При работе над дизайном для веба приходится иметь дело с макетами для разных размеров экрана. Опираясь на эти макеты, разработчик определяет ширину или высоту окна браузера медиазапросами, а затем, исходя из этого, меняет макет. Именно так мы верстали веб последние 10 лет, и вот-вот всё станет еще лучше. У меня для вас хорошие новости.

CSS-выражения от контейнера — долгожданная для веб-разработчиков фича — скоро появится в CSS и с ней уже можно поэкспериментировать в Chrome Canary. В этой статье мы познакомимся с этой фичей поближе, и узнаем, как она повлияет на вашу работу как дизайнера, и не только. Неважно, пишете ли вы код или нет, если увидите какой-то незнакомый CSS, то можете полностью игнорировать его и идти дальше.

Хватит слов, перейдём к делу!

читать дальше

Непостижимые алгоритмы Твиттера принесли мне в ленту занятный вопрос Саймона Хойберга, автора нескольких книг про JavaScript:

Почему ‘!important’ перекрывает значения в css? 🤔

Для меня это читается как «not important», т. е. «не важно», и я ждал бы от него обратного 😅

Действительно, для программистов, привыкших обозначать знаком ! операцию отрицания (инверсии), эта запись выглядит очень нелогично. Ее даже включили в список ошибок, допущенных при проектировании CSS (последний пункт).

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

читать дальше

Перевод статьи Don’t Fight the Cascade, Control It!
с сайта css-tricks.com для css-live.ru. Автор — Мадс Стуманн.

Если делать всё правильно и использовать наследование, которое даёт CSS-каскад, то конечного CSS нужно будет писать меньше. Но поскольку часто мы загружаем CSS из разных мест — из-за чего его бывает сложно структурировать и поддерживать, — каскад может сильно расстроить, и CSS из-за него окажется больше, чем нужно.

Несколько лет назад Гарри Робертс придумал ITCSS — умный способ структурировать CSS.

В сочетании с БЭМ ITCSS стал популярным способом написания и организации CSS.

Но даже с ITCSS и БЭМ иногда

возникают большие трудности с каскадом. К примеру, я уверен, что вам приходилось делать @import внешних CSS-компонентов в определённом месте, чтобы ничего не сломать, или прибегать к жуткому !important.

читать дальше

• CSS, каскад

Перевод статьи React component code smells с сайта antongunnarsson.com, опубликован на CSS-live.ru с разрешения автора — Антона Гуннарсона

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

Растущая коллекция того, что я считаю «запашками» кода React-компонентов.

Что такое «запашок» кода? «Запашок» кода — что-то такое, что вроде бы и не ошибка, но может быть признаком более серьезной проблемы в коде. Больше информации в Википедии.

Запашки 💩

• Слишком много пропсов
• Несовместимые пропсы
• Копирование пропсов в состояние
• Возврат JSX из функций
• Множественные булевые значения для состояния
• Слишком много useState в компоненте
• Огромные useEffect

читать дальше

Как вы думаете, сколько CSS-градиентов нужно, чтобы нарисовать каждую из этих фигур?

Один! 🤯 Причем его даже не надо дублировать: достаточно указать один раз в одном-единственном свойстве. Таким примером в CodePen на днях поделился Темани Афиф, автор занятного и познавательного проекта css-challenges.com.

Эта «магия» — заслуга свойства border-image. У нас уже есть статья о нем и его возможностях. Увы, громоздкий синтаксис и неинтуитивное поведение — особенно с градиентами — до сих пор мешают ему стать популярным. Сам Афиф в Твиттере признал, что «border-image принадлежит к тёмной стороне CSS»: очень уж трудно представить себе наглядно, как масштабируются, нарезаются и потом опять масштабируются части картинки.

И многие даже не пытаются разобраться в нем. А зря!

читать дальше

Перевод статьи How to Read W3C Specs с сайта alistapart.com для css-live.ru. Автор — Джей Девид Эйсенберг.

(Примечание редакции CSS-live.ru: оригинал статьи написан более 20 лет назад. Не удивляйтесь, это не баг, а фича. Иногда полезно оглянуться назад и увидеть за калейдоскопом новинок какие-то неизменные основы. Или лучше понять ход прогресса технологий и порадоваться ему еще больше. В любом случае, многое в статье актуально по сей день, и уж точно стоит обсудить. Приятного чтения и приобщения к суперсиле спецификаций!)

Консорциум Всемирной паутины — это хранитель спецификаций по всем технологиям в вебе. Как веб-разработчик, вы могли заходить к ним на сайт в поиске ответа на вопрос про XHTML или чтобы узнать больше о новой технологии, такой как «Объекты форматирования XSL» или «Масштабируемая векторная графика»

Итак, вы обращаетесь к спецификации и практически тут же оказываетесь в замешательстве. Это невозможно читать, думаете вы. Но, на самом деле, это читаемо, если учесть один ключевой момент. Но всё проясняется, если учесть одну важную вещь:

читать дальше

Браузер Safari часто ругают за редкое обновление и задержку внедрения новинок, но есть у него «любимые» области, в которых он опережает всех. Например, CSS-селекторы 4 уровня. Псевдоклассы :matches() — теперь это :is(), :not() с несколькими селекторами и :nth-child()/:nth-last-child() c добавочным параметром of <что угодно> он поддерживает с 2015 года. На днях он подарил нам новую сенсацию: в его очередной экспериментальной сборке появилась первая реализация долгожданного псевдокласса

:has()!

О :has() часто говорят как о «родительском селекторе». Но он может быть не только селектором любого предка, но и селектором предыдущего соседа. О его непростой судьбе — задержке из-за проблемы с производительностью, странном ее «решении» (буквально по анекдоту «чтоб игрушки дольше не ломались, не давайте их детям»:) и его отмене, и первых попытках реализовать — распространяться не будем. Лучше сразу посмотрим…

Примеры использования

читать дальше

Перевод статьи Taming Blend Modes: `difference` and `exclusion` с сайта css-tricks.com, переведено для css-live.ru с разрешения автора — Аны Тюдор.

До самого 2020-го я не особо увлекалась режимами наложения, во многом потому, что крайне плохо представляла себе будущий результат до того, как попробовать. И этот подход «попробуй и посмотри, что выйдет» почти всегда оставлял меня в ужасе перед тем безобразием, что невольно получалось у меня на экране.

Эта проблема вытекала из незнания механизма их работы. Почти все попадавшиеся мне статьи на эту тему строились на примерах, сравнениях с Фотошопом или многословных художественных описаниях. Примеры бывали великолепны, но без понимания, как работает механизм всего этого, реализация своей творческой задумки путем переделки чужого красивого примера превращается в долгое, мучительное и в конечном итоге бесплодное приключение. А аналогии с Фотошопом практически бесполезны для людей инженерного склада, без дизайнерского опыта. Длинные художественные описания же для меня вообще выглядели каким-то птичьим языком.

Момент просветления случился у меня, когда я наткнулась на спецификацию и нашла в ней математические формулы, по которым работают режимы наложения. Благодаря этому я наконец смогла понять, как это всё работает «под капотом» и где оно может пригодиться. И теперь, узнав это лучше, я поделюсь этим знанием в серии статей.

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

читать дальше

Всем привет, меня зовут Лена. Сейчас я делаю фронтенд в компании AISA и борюсь за вёрстку кнопок кнопками. В сообществе могу быть известна пока что только тем, что модерирую чат Веб-стандартов в Телеграме. В свободное время катаюсь на разных досках. Ну, и погнали к докладу.

Знаком ли вам такой диалог?

— А вы поддерживаете доступность на своём сайте?
— Да, у нас есть версия для слабовидящих.

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

Нет. Не нужно.

читать дальше

• a11y, веб-доступность

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

Глоссарий

Факт 1: цвет — это не характеристика излучения, это характеристика реакции человеческого мозга на излучение. То есть два излучения с разным спектром могут иметь один цвет с нашей точки зрения.

Факт 2: далеко не все цвета, которые видит среднестатистический человек, можно воспроизвести аппаратными средствами, в том числе с помощью вашего монитора.

читать дальше

Не секрет, что в последние годы веб развивается крайне стремительно. Периодически выходят новые библиотеки, фреймворки и другие полезные для нас инструменты. Всё это безусловно помогает нам решать повседневные задачи. Но в погоне за популярными новинками мы совсем не обращаем внимание на истоки. Многие начинающие разработчики начинают знакомство с кодом именно с инструментов, а не с фундаментальных вещей. Обычно это связывают с тем, что сегодня подавляющее большинство вакансий для фронтенд-разработчиков напичканы «модными» и «хайповыми» словечками вроде «React», «Vue», «styled-components», и множеством других. Поэтому разработчикам важно изучать именно эти вещи, чтобы не остаться без работы. Но разве причина только в этом? Именно поэтому разработчикам не важны основы? Думаю, что только отчасти.

А в чём, собственно, проблема, и она точно есть?

читать дальше

Перевод статьи Prevent layout shifts with CSS grid stacks с сайта www. hsablonniere.com для css-live.ru, автор — Юбер Саблоньер

Люди используют CSS Grid по двум причинам:

1. CSS — это потрясающе! Факт, как ни крути.
2. Гриды — отличный инструмент для создания сложных двумерных макетов.

У меня иногда бывает третья причина использовать CSS Grid: предотвратить сдвиги в верстке. Я пытался придумать для этого приема прикольное сокращение, но у меня получилось лишь АСПНГ: «АнтиСдвиговый Прием с Наложением в Гридах». Вряд ли у меня получится похвастаться мастерством в «изобретении технических терминов» в резюме на LinkedIn, так что жду ваших предложений получше.

Давайте я объясню прием на реальных примерах. В этой статье я покажу:

• Реальную проблему сдвигов в верстке, с которой я столкнулся в работе над одним компонентом.
• Ограничения решения с абсолютным позиционированием.
• Преимущества решения с гридом.

Погодите, о каких вообще сдвигах идет речь?

читать дальше

• CSS3 Grid Layout, компоненты

Играми на «чистом CSS» (т. е. без JS) нас уже давно трудно удивить. Но британскому дизайнеру Джейми Коултеру, пожалуй, удалось. Его недавняя работа в Codepen — полноценный квест с сюжетом, в котором игроку нужно выбраться из мрачного подвала то ли больницы, то ли лаборатории, где накануне произошло что-то ужасное. И заодно узнать шокирующую разгадку… в общем, то, что надо на Хэллоуин!

Игрок может перемещаться между локациями и взаимодействовать с окружающими предметами. В некоторых предметах бывает спрятано что-то нужное для дальнейшего прохождения (например, ключ), некоторые — скажем, записки на стенах — содержат полезные подсказки, а ещё есть просто приятные «пасхалки» (например, логотип Codepen и аватарки многих «звезд» фронтенда:). Некоторые предметы совмещают всё вышеперечисленное. И такая проработка мелочей, да и вся атмосфера игры, весьма впечатляет.

Но завсегдатаев Codepen — и нашего сайта — не меньше разгадки сюжета игры занимает другой вопрос:

Как же это сделано?

читать дальше

Перевод статьи The failed promise of Web Components с сайта lea. verou.me, опубликован на CSS-live.ru с разрешения автора — Лии Веру

Веб-компоненты обещали так много новых возможностей для HTML, с ними веб-разработка должна была стать намного доступнее для непрограммистов и легче для программистов. Помните тот восторг от каждого новёхонького HTML-элемента, который реально что-то делал? Помните, как было здорово, когда стало можно делать слайдеры, палитры для выбора цвета, диалоговые окна, раскрывающиеся виджеты прямо в HTML, без необходимости подключать какие-либо библиотеки?

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

По крайней мере, так задумывалось. В какой-то момент пространство успели заполонить фанатики JS-фреймворков, балдеющие от сложных API, заумных процессов сборки и графов зависимостей, похожих на корни дерева баньян.

Вот как выглядят корни дерева баньян. Фото Дэвида Стенли на Flickr (лицензия CC-BY).

читать дальше

Адаптивная верстка сайтов: обзор подходов и CSS фреймворков

Предисловие

В настоящее время доля мобильного трафика растет стремительными темпами. С каждым днем людей, использующих девайсы с выходом в Интернет, становится все больше. Телефон всегда под рукой, в любом месте люди могут посмотреть необходимую информацию, прочитать новости и т. д. Обычный сайт можно просмотреть с помощью мобильного устройства. Однако, возникают некоторые нюансы при просмотре — для чтения отдельных блоков текста на относительно небольшом экране необходимо масштабировать страницу. Как следствие, теряется читабельность, удобство, сайт нужно постоянно пролистывать, растягивать, приближать. Многие элементы управления сайтов неудобно использовать, так как страницы не рассчитаны на управление с помощью прикосновений к экрану. Для решения этих проблем начали разрабатывать сайты, способные удобно отобразить информацию на любом устройстве.

О статье

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

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

Виды версток

Рассмотрим основные виды версток, их разницу и основные принципы, используемые при их реализации.

Фиксированная верстка

Фиксированная верстка (Fixed Layout) — подход создания страниц сайта, которые имеют заданную ширину. Ширина компонентов на странице не изменяется. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки. Данный тип верстки не подходит для удобного отображения информации на мобильных устройствах.
Пример ниже демонстрирует строгое задание ширины для тега body:

Резиновая верстка

Резиновая верстка (Elastic layout) подразумевает возможность компонентов сайта менять свои размеры в зависимости от размера окна браузера, растягиваться от и до указанных минимальных и максимальных размеров. Это достигается благодаря использованию относительных значений, max-width / min-width (максимальная / минимальная ширина), max-height / min-height (максимальная / минимальная высота).
Примеры использования техник резиновой верстки:

Адаптивная верстка

Адаптивная верстка (Adaptive Layout) позволяет подстраиваться основному контейнеру и любому другому элементу сайта под разрешение экрана, делая возможным менять размер шрифта, расположение объектов, цвет и т. д. Происходит это динамически, например, с использованием медиа-запросов (@media), позволяющих автоматически определять разрешение монитора, тип устройства и подставлять указанные значения в автоматическом режиме. В примере ниже задается ширина div равная 960px для всех устройств, ширина которых меньше 1200px и 320px для всех устройств, ширина которых меньше 480px.

Отзывчивая верстка

Отзывчивая верстка (Responsive Layout) — это объединение резиновой и адаптивной вёрстки. При данном подходе используются как медиа-запросы, так и процентное задание ширины компонентов. Используя данный вид верстки можно с уверенностью сказать, что сайт приспособится к любому устройству.
Ниже задается ширина div равная 50% от размера родительского компонента для всех устройств, ширина которых меньше 1200px и 100% для всех устройств, ширина которых меньше 480px.

Основные техники реализации сайтов под любое разрешение

Относительные значения

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

Относительные значения для размеров и отступов

Относительные значения можно задавать для width, height, margin, padding и т. д. Самый известный способ задания относительного размера — указание в процентах (%).
Ниже приводится пример задания ширины равной 90% от размера родительского компонента.

При этом значение высчитывается относительно родительского компонента.
Также существуют значения относительно размера экрана:

• vw — 1% ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента;
• vh — 1% высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента;
• vmin — выбирается наименьшее из vw и vh;
• vmax — выбирается наибольшее из vw и vh.

Ниже рассмотрен пример использования vw и vh. В данном случае ширина и высота тега div будут равны 50% от ширины и высоты экрана соответственно.

Относительные значения для размера шрифта

Существуют следующие относительные значения для шрифтов:

• em — задаёт размер относительно шрифта родителя;
• rem — задаёт размер относительно шрифта <html>.

Рассмотрим пример:

Вычислим размер шрифта для тега body. В данном примере размер шрифта для body задается относительно размера html. Таким образом, размер шрифта для body будет равен 30px (20px * 1.5 = 30px).

Также относительные размеры шрифта можно задавать с помощью %, vw, vh и т. д. В следующем примере размер шрифта для body равен 80% от размера шрифта html — 16px.

Максимальные и минимальные размеры компонентов

Для задания максимальных и минимальных значений ширины и высоты компонента используются свойства max-width / min-width и max-height / min-height соответственно.

Рассмотрим пример:

Допустим, что родительским компонентом данного div является body. Тогда, при изменении ширины экрана, ширина данного компонента будет составлять 60% от ширины body. Однако он будет увеличиваться только до величины, определенной в max-width, это 500px. Как только контейнер достигнет этой ширины — он перестанет увеличиваться.

Использование медиа-запросов

Медиа-запросы позволяют задать стили для определенного размера экрана, типа устройства на основе характеристик устройства и т. д. Все медиа-запросы начинаются с @media, а далее следует условие.

С помощью медиа-запросов можно задать стили для следующих типов устройств:

• all — все типы (значение используется по умолчанию)
• braille — устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми
• embossed — принтеры, использующие для печати систему Брайля
• handheld — смартфоны и аналогичные им аппараты
• print — принтеры и другие печатающие устройства
• projection — проекторы
• screen — экран монитора
• speech — речевые синтезаторы, а также программы для воспроизведения текста вслух
• tty — устройства с фиксированным размером символов
• tv — телевизоры.

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

Ссылки по техникам реализации адаптивной верстки

Подробнее просмотреть и изучить рассмотренные в данной статье подходы и другие можно по ссылкам:

• Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса
• Адаптивная вёрстка: что это и как использовать
• Адаптивный и мобильный дизайн с CSS3 Media Queries
• Адаптивные изображения в CSS
• Техники адаптивной типографской разметки текста

CSS-фреймворки

CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Данные фреймворки подразумевают использование различных подходов для корректного отображения сайтов на устройствах любого размера.
Многие разработчики предпочитают использование CSS-фреймворков, вместо прописывания всех стилей вручную. Это обусловлено следующими причинами:

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

Как и библиотеки скриптовых языков программирования, CSS-библиотеки, обычно имеющие вид внешнего CSS-файла, добавляются в заголовок веб-страницы.

Рассмотрим самые популярные CSS-фреймворки.

Bootstrap

Официальный сайт:
http://getbootstrap.com/

Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Bootstrap — это инструмент с открытым исходным кодом для разработки сайтов с помощью HTML, CSS и JS. Bootstrap — интуитивно простой и в тоже время мощный интерфейсный фреймворк, повышающий скорость и облегчающий разработку web-приложений.

Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода — от телефонов и планшетов до настольных компьютеров. Для этого используется 12-колоночная сетка:

В дополнение к CSS данный фреймворк включает в себя поддержку двух самых популярных CSS-препроцессоров: Less и Sass.

Отличительные черты:

• 12 — колоночная сетка
• Большое количество готовых для использования компонентов
• Поддержка Less и Sass
• Использование Normalize.css.

Material Design for Bootstrap

Официальный сайт:
https://fezvrasta.github.io/bootstrap-material-design/

Material Design for Bootstrap — это инструментарий с открытым исходным кодом для разработки приложений, основанный на Bootstrap и использующий подходы Material Design.
Фреймворк позволяет быстро создавать приложение с помощью переменных Sass, адаптивной сетки, большого количества готовых компонентов и мощных плагинов, реализованных на jQuery.

Отличительные черты:

• 12 — колоночная сетка
• Большое количество готовых для использования компонентов в соответствии с концепцией Material Design.

Materialize

Официальный сайт:
http://materializecss.com/

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

Отличительные черты:

• 12 — колоночная сетка
• Большое количество готовых для использования компонентов в соответствии с концепцией Material Design
• Поддержка Sass.

Bulma

Официальный сайт:
http://bulma.io/

Bulma — современный CSS-фреймворк основанный на новом способе отображения Flexbox. Flexbox — самый современный инструмент компоновки, доступный в CSS.

Отличительные черты:

• Использование Flexbox вместо колоночной сетки
• Большое количество готовых для использования компонентов
• Поддержка Sass
• Не используются JS-файлы

Pure

Официальный сайт:
https://purecss.io/

Pure — набор небольших адаптивных CSS-модулей, которые вы можете использовать в любом веб-проекте. Pure построен на Normalize.css и предоставляет разметку и стили для собственных HTML-элементов, а также наиболее распространенные компоненты пользовательского интерфейса. Pure — адаптивный фреймворк, поэтому элементы отлично смотрятся на всех размерах экрана. Pure имеет минимальные стили, что подразумевает написание собственных кастомизированных стилей.

Отличительные черты:

• 24 — колоночная сетка
• Модульный фреймворк
• Не используются JS-файлы
• Использование Normalize. css
• Минимальное количество готовых компонентов и стилей.

Заключение

Быстрый рост популярности просмотра сайтов на мобильных устройствах обуславливает необходимость реализации удобного и читабельного отображения компонентов в независимости от типа устройств и размеров экранов. Рассмотренные в данной статье подходы помогут создавать сайты для различных устройств и размеров экранов. Описание CSS-фреймворков упростит выбор подходящего фреймворка для использования в проекте.

лучших сайтов для поиска фрагментов CSS и вдохновения

Домашняя страница / Веб-дизайн / Лучшие сайты для поиска фрагментов CSS и вдохновения

Веб-дизайн

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

От Envato

Опубликовано 28 апреля 2017 г.

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

Итак, для этого поста я собрал лучшие сайты для поиска абсолютно бесплатных фрагментов кода CSS3. Вы можете найти все, от простых кнопок до целых макетов веб-страниц и почти всего, что между ними.

1. Инструменты веб-кода

Инструменты веб-кода

В качестве ресурса для фрагментов CSS вы должны проверить Инструменты веб-кода. Этот сайт предлагает настраиваемые генераторы кода CSS3, чтобы сэкономить ваше время при создании градиентов, фильтров и анимации на чистом CSS.

Но этот сайт также является огромным ресурсом для всех языков разработки интерфейса. Вы можете найти множество генераторов и фрагментов кода для элементов HTML5, микроданных и фрагментов OG (открытый график) для заголовка вашей страницы.

Если вы ищете качественный ресурс для поиска фрагментов кода CSS и внешнего интерфейса, вам обязательно нужно добавить в закладки Web Code Tools.

2. CodePen

CodePen

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

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

Независимо от того, ищете ли вы чистый CSS3 или смесь CSS/JS, я гарантирую, что в CodePen есть фрагменты всего, что вам когда-либо может понадобиться (и многое другое!).

3. CSS Flow

CSS Flow

CSS Flow курирует наборы пользовательского интерфейса и ресурсы для дизайна, а также имеет область фрагментов с бесплатными кодами, созданными вручную. Эти фрагменты в основном ориентированы на элементы пользовательского интерфейса и полностью написаны на HTML и CSS/Sass.

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

Большинство сниппетов появились несколько лет назад, и сайт давно не обновлялся. Однако эти фрагменты по-прежнему полностью соответствуют спецификациям HTML5/CSS3 и выглядят невероятно.

4. Code My UI

Code My UI

Галерея вдохновения на основе кода Code My UI — идеальный ресурс для поиска фрагментов CSS.

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

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

5. Codepad

Codepad

Не многие сайты могут конкурировать с CodePen Криса Койера, но если есть какой-либо другой сайт, я бы порекомендовал его Codepad.

За все на главной странице Codepad голосуют пользователи. Вы можете настроить новую игровую площадку и представить свои идеи, используя онлайн-среду IDE для кода HTML/CSS/JS.

Бесплатные фрагменты CSS сильно различаются от полезных фрагментов (кнопок, макетов) до более разнообразных фрагментов, в основном созданных для демонстрации. Этот загрузчик WinXP на чистом CSS — хороший пример.

Но если вы ищете другой сайт с пользовательским кодом, я настоятельно рекомендую Codepad.

6. Bootsnipp

Bootsnipp

Никто и представить не мог, как быстро Bootstrap Twitter вырастет всего за несколько лет. Это фреймворк для внешнего интерфейса №1, а с такими сайтами, как Bootsnipp, вы можете сэкономить время, используя готовые фрагменты кода.

Большая часть кода Bootstrap повторяется, поэтому шаблоны очень популярны. С помощью Bootsnipp вы можете просматривать сотни пользовательских проектов, созданных на Bootstrap.

Вы можете просматривать по тегам или по конкретной версии Bootstrap от версии 2. 3 до новейшей версии 4.0.

Если вы хотите создавать и делиться своими собственными кодами, вы можете бесплатно зарегистрироваться и опубликовать свои фрагменты Bootstrap для всего мира. Этот сайт предлагает сообществу разработчиков BS огромную ценность, и с каждым днем ​​он становится все больше.

7. Codeply

Codeply

Некоторые разработчики предпочитают широкий выбор фреймворков за пределами Bootstrap. Вот где пригодится такой сайт, как Codeply.

Этот бесплатный ресурс позволяет вам работать с десятками интерфейсных фреймворков, таких как Foundation, Pure, Materialise и другие. Вы можете создавать собственные макеты прямо в браузере и сохранять их в виде бесплатных фрагментов, чтобы весь мир мог их клонировать.

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

8. Little Snippets

Little Snippets

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

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

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

9. Наслаждайтесь CSS

Наслаждайтесь CSS

Если вас больше интересуют генераторы кода CSS, взгляните на Enjoy CSS.

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

Кроме того, на сайте есть небольшие галереи фрагментов кода для повторно используемых элементов, таких как кнопки. Enjoy CSS — это универсальный магазин для всех ваших потребностей в CSS.

10. CSSDeck

CSSDeck

CSSDeck — единственная интерактивная IDE, ориентированная в первую очередь на CSS. Каждый фрагмент, который вы найдете на сайте, использует HTML и CSS, большинство из которых на самом деле не касаются JavaScript.

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

У него не такой объем, как у таких сайтов, как CodePen, но он по-прежнему является отличным ресурсом для поиска бесплатных фрагментов CSS.

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

Считаете ли вы эту статью полезной?

Похожие посты

Элементы Envato: Миллионы творческих ресурсов, неограниченное количество загрузок — бесплатно в течение 7 дней. *

Получите 7 дней бесплатно

Красота CSS-дизайна

Так о чем это?

Существует постоянная необходимость продемонстрировать мощь CSS . Zen Garden стремится волновать, вдохновлять и поощрять участие. Для начала просмотрите некоторые из существующих дизайнов в списке. Нажав на любой из них, вы загрузите таблицу стилей на эту же страницу. HTML остался прежним, единственное, что изменилось, это внешний файл CSS . Да, действительно.

CSS позволяет полностью контролировать стиль гипертекстового документа. Единственный способ, которым это можно проиллюстрировать так, чтобы это взволновало людей, — это продемонстрировать, чем это может быть на самом деле, как только бразды правления будут переданы в руки тех, кто способен создать красоту из структуры. И дизайнеры, и программисты внесли свой вклад в красоту Интернета; мы всегда можем продвинуть его дальше.

Участие

Нас всегда привлекал сильный визуальный дизайн. Вы редактируете эту страницу, так что сильные навыки CSS также необходимы, но файлы примеров прокомментированы достаточно хорошо, чтобы даже новички CSS могли использовать их в качестве отправной точки. Дополнительные руководства и советы по работе с CSS см. в Руководстве по ресурсам CSS .

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

Загрузите образец HTML и CSS для локальной работы с копией. Как только вы закончите свой шедевр (и, пожалуйста, не отправляйте наполовину готовую работу), загрузите файл CSS на веб-сервер под вашим контролем. Отправьте нам ссылку на архив этого файла и всех связанных ресурсов, и если мы решим его использовать, мы загрузим его и разместим на нашем сервере.

Преимущества

Зачем участвовать? Для признания, вдохновения и ресурса мы все можем обратиться к тому, чтобы показать людям, насколько удивительны CSS действительно может быть. Этот сайт служит в равной степени источником вдохновения для тех, кто работает в Интернете сегодня, инструментом обучения для тех, кто будет работать завтра, и галереей будущих методов, которых мы все с нетерпением ждем.

Требования

Там, где это возможно, мы хотели бы видеть в основном использование CSS 1 и 2 . CSS 3 и 4 должны быть ограничены только широко поддерживаемыми элементами или должны быть предусмотрены сильные резервные варианты. CSS Zen Garden — это функционально и практично CSS , а не последние передовые трюки, которые просматривают 2% пользователей. Единственное реальное требование, которое у нас есть, это проверка вашего CSS .

К счастью, такой дизайн показывает, насколько хорошо различные браузеры к настоящему времени реализовали CSS . Придерживаясь рекомендаций, вы должны увидеть довольно стабильные результаты в большинстве современных браузеров. Из-за огромного количества пользовательских агентов в Интернете в наши дни — особенно с учетом мобильных устройств — идеальные до пикселя макеты могут быть невозможны на каждой платформе. Это нормально, но проверяйте как можно больше. Ваш дизайн должен работать как минимум в IE9+ и новейшие браузеры Chrome, Firefox, iOS и Android (используют более 90% населения).

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